One of our customers had an accessibility scan done on their forum. Some of the results could be solved easily by changing the theme or theme component, but there are some issues in core Discourse as well. I thought it would benefit everyone if we shared them with you.
issue 1 Missing labels
Screen reader comment ‘I located several unlabelled buttons, both in and out of context. I believe that one of the buttons is a reply button, however their purpose is unclear. It would benefit screen reader users if all buttons could be given a clear label to enable blind users to use the functions on the site independently. When testing with VoiceOver, a member of the support team advised me that these are favourite buttons and that the issue is consistent using this platform. This also applies to Talk Back. I also found several unlabelled buttons while testing with NVDA.’
Solution: Programmatically associate labels to all form controls and ensure there are no duplicate labels. You can do so by using an implicit label element and explicit label, aria-label, or arialabelledby attribute values.
Issue 2: Non-descriptive labeling
This is about the category dropdown in the top left.
Currently the labelling of some of the buttons leaves their purpose a little ambiguous to screen reader users.
Screen reader comments ‘A member of the support team advised me that there is a filter list by which the forums can be filtered by topic and other categories. While tabbing through the page I did locate all categories, but I was unaware of the fact that I needed to select it to open additional content and access additional filter items. I also found random numbers that are not clearly labelled. This issue is the same on all platforms.’
Solution: Ensue all labels provide users with enough description of the form fields intended purpose.
Issue 3: List structure
Also about the category dropdown.
Lists have been created currently using incorrect list mark-up, this provides an opportunity for content to be rendered incorrectly by assistive technology users such as screen reader users.
Technical comment
“List mark-up has been used incorrectly lists can only contain li elements. Currently other elements have been included within ul or ol elements.”
Element location #ember781
Element source <ol id="ember781" class="category-breadcrumb ember-view">
Solution: Ensure all ordered and unordered lists (defined by ul or ol elements) contain only li content elements.