🎩 What? Why?

We've had many accessibility issues with Decidim and I would expect new accessibility issues to come up from time to time. There is also quite a long way still to make Decidim 100% accessible.

This is the first step to that direction. This adds automated accessibility audit using axe-core to the CI pipeline and also W3C HTML validation using the w3c_validators gem.

With axe-core, you can find up to 50% of WCAG issues automatically.

This alone will not make Decidim 100% accessible some day but it makes sure new changes won't break any accessibility features that have been already fixed. And if design is changed, it will make it easier to keep the new design accessible.

This adds two new dependencies to the decidim-dev module:

• axe-core-rspec which is an rspec wrapper for axe-core - Both licensed with MPL 2.0
• w3c_rspec_validators which is an rspec wrapper for w3c_validators - Both licensed with MIT

This also adds new shared examples with the name accessible page which can be applied to any page. This will run both validations for the given page:

1. The accessibility audit validations
2. HTML validations

This should be gradually applied to all pages that we want to be accessible. The goal of this PR is to introduce the concept to the core, not to implement it everywhere (due to the heavy amount of work needed to make everything accessible). This PR adds it to the following pages:

• Homepage signed in and signed out
• Account main page
• Conversations pages
• Static pages with and without topics + index
• Pages component
• Participatory processes listing page
• Participatory process steps/phases page
• Proposals listing page + single proposal page

As these validations are added to these pages, we first need to make sure all tested pages are valid. Therefore, this depends on the following PRs to be merged first:

• Remove custom focus outlines/backgrounds from the comments elements #7656
• Fix comments opinion toggle accessibility #7657
• Add proper ARIA roles for header and footer #7658
• Fix ARIA roles for the SVG images (icons) #7663
• Fix the missing aria-controls element on pages with comments #7664
• Add reason fieldset to the report modal for accessibility #7665
• Add aria-atomic="true" to the alert role elements #7666
• Fix the aria attribute names (no aria prefix) #7707
• Fix dropdown menu accessibility audits #7708
• Add accessibility labels to the <nav> menus #7709
• Fix heading order on the home page #7710
• Fix HTML validation regarding SVG images #7721
• Strip the <p> tags from inside the heading elements #7732
• Add a landmark ARIA role to the cookie banner #7738
• Accessibility fixes for comments #7741
• Add aria-label to the free search field in the search filters #7742
• Add aria-label to the area filter on participatory space pages #7743
• Fix HTML validation on standalone content page #7744
• Accessibility fixes for conversations #7745
• Fix report modal form accessibility #7746
• Validate the HTML for the account page #7747
• Fix color contrast against the sidebar navigation background #7748
• Remove the opacity from process upcoming/past/all filters for accessible contrast #7749
• Change the timeline date color for accessible color contrast against its background #7750

📌 Related Issues

• Related to Seek alternatives to design changes due to accessibility #5942, Accessibility/final #6246, Improve accessibility vol 2 #6124, Improve accessibility issues #5684

Testing

Run the specs and see the results.

📋 Checklist

• ❓ CONSIDER adding a unit test if your PR resolves an issue.
• ✔️ DO check open PR's to avoid duplicates.
• ✔️ DO keep pull requests small so they can be easily reviewed.
• ✔️ DO build locally before pushing.
• ✔️ DO make sure tests pass.
• ✔️ DO make sure any new changes are documented in docs/.
• ✔️ DO add and modify seeds if necessary.
• ✔️ DO add CHANGELOG upgrade notes if required.
• ✔️ DO add to GraphQL API if there are new public fields.
• ✔️ DO add link to MetaDecidim if it's a new feature.
• ❌AVOID breaking the continuous integration build.
• ❌AVOID making significant changes to the overall architecture.