M11y Accessibility & Best Practices Browser Extension

Track current Project status here

---

Features

• Audits the dom to see if "obvious" accessability mistakes was made
• The extension will advise on if general best practices are followed
• Step through errors to see them
• Simulate Color impairments with 8 simulations

View in Dev tools
See Issues in Dom (highlighted with CSS border)
Step Through warnings and errors (highlighted with CSS border asn scrolled to)
See difficult to see error in Javascript console
Run Color Tests to Simulate 8 different types of color impairment
Pop out View
Darkmode 🌃

Current checks

• Buttons/Anchors have correct aria labels and captions especially for Icon only buttons
• No Empty .col
• Data view as base of page
• Multiple h1 checks
• Image Alt tag check
• Input/Textarea must have a Label
• Long .col check to prevent long tabs
• Long Menu helper (Skip navigation)

Install Locally

Install project locally here

Help/Contribute

Contribute see here

Special Thanks and Packages Used

• Ashley Sheridan for their great article on Matrixs Color filters (here)

• Jason Teunissen for being one of the first people to really embrace this project with meaningfull feed back and testing

• The APCA version in this repositiory is licensed to the W3/AGWG per the collaborative agreement.

• Color Contrast Inspiration

• Styling with Chakra-UI