Accessibility review

[mejo-]

In GitLab by @azul on Apr 26, 2021, 10:33

Go through the app with a tool such as gnome screenreader or lighthouse firefox extension and check if the text makes sense if one cannot see the icons.

[mspae]

I went through the app with the AXE dev tools. (Note I wouldn't consider myself an expert on the issue and this is not a comprehensive audit) - I'll document my findings here - I've left out the parts which are not collectives-specific e.g. which should be addressed in the component framework.

• On the initial landing page there is not heading of level one (h1) - this strikes me as an easy fix. The landing page heading is h2 at the moment.
• On document pages:
  • there are two DOM elements representing the document (viewing and editing), the inactive element is hidden with display:none - I believe it should also have the inert attribute set (https://developer.chrome.com/articles/inert/) – since this is relatively new it's probably a good idea to also set aria-hidden attribute set (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)
  • Not sure how critical this is: because there are two DOM hierarchies representing the same document (see above) there are always two instances of all headings and they always have the same ID which is technically illegal.
  • The document title input element should have a label element. The value of which could possibly be hidden for non-screenreader users (e.g. .hidden-visually) since the meaning of the field as the "title" field is obvious from the context IMHO.
  • I believe the emoji-popup trigger and heading element menu trigger have an incorrect role=menu. (see this comment and https://www.digitala11y.com/menu-role/)
  • The emoji search textbox as an invalid aria-describedby value. emoji-mart-search-description should be emoji-picker-search-description.
  • The anchor elements of sub headings (#) are aria-hidden but are still focusable. (see https://accessibilityinsights.io/info-examples/web/aria-hidden-focus/) - the elements need to have tabindex="-1" so they are no longer focusable. (inert would probably also do it in newer browser versions)