Semantics and accessibility are a really important part of developing web pages. This is not only for users with disabilities, but improving accessibility makes your content easier to share with everyone.

I recently discovered pa11y — an open source project that helps users to set up (for free) an accessibility dashboard of their sites. This is a self-hosted nodeJS + mongoDB app, which means you can set it up internally behind a firewall and compare sites in development. It’s also available on Docker and is fully-customizable. You can edit the front end (written in Less) to match any design system and add any features you’d like.

Out of the box, pa11y comes with:

• Filter system for tasks
• A visual interface for adding, editing, and removing tasks
• Overview panel of errors, warnings, and notices based on your selected WCAG preferences (WCAG2AA is default)
• Downloadable JSON and CSV data
• 30 days of data stored by default
• Detailed explanation of accessibility violations

Those are a lot of awesome things! By default, it looks like this (you can see it live at pa11y.una.im):

Okay, so I know I have a little bit of cleanup work to do now on my sites. But before we go into shame 🔔 shame 🔔 mode, let’s learn how to set up our own!

מקור: ✨Una Kravets’ Blog: Musings on Front-End Development and Design✨