Accessibility Issues with Screen Readers in XenForo

[MesterPerfect]

Hello everyone,

I’m writing this topic based on the discussion in this thread:

https://xenforo.com/community/threads/tiptap-a-new-editor-for-xenforo.227767/page-9#post-1725451

In that discussion, I mentioned accessibility issues in XenForo for screen reader users. Here, I will explain these issues in detail, and I hope the XenForo developers take them into consideration.

First, a couple of important clarifications:

1. The adjustments suggested here don’t cover all accessibility issues but will be a significant step forward if resolved.
2. The issues I’m describing affect users of screen readers like NVDA and JAWS on Windows and Orca on Linux. I’m not sure about VoiceOver users on macOS, but I believe they might face similar challenges.

Brief Overview of Screen Readers​

Screen reader - Wikipedia

en.wikipedia.org

List of screen readers - Wikipedia

en.wikipedia.org

Screen readers allow users to navigate web content using the keyboard instead of a mouse. Each key is mapped to specific navigation functions. Here’s a quick reference:

• H: Navigate by headings
• Q: Navigate by block quotes
• R: Navigate by radio buttons
• X: Navigate by checkboxes
• C: Navigate by combo boxes
• E: Navigate by editable text fields
• B: Navigate by buttons
• K: Navigate by links
• T: Navigate by tables

These shortcuts work when standard, native HTML elements are used. However, issues arise when custom elements are implemented using JavaScript, which screen readers often can’t recognize.

Even then, accessibility attributes like role, aria and TabIndex can help screen readers interpret these elements. While XenForo developers are aware of these standards, they don’t seem to be fully implemented in some areas or may not work as expected with screen readers.

Specific Issues​

1. Prefix Selector:
   
   
   
   
   • When creating a new thread and trying to select a prefix, it is impossible to do so using a screen reader.
2. Tags Field:
   
   
   
   • In the tags field, screen readers can’t read the added tags or navigate between them for editing.
3. Post Editor:
   
   
   • The post editor is expected to behave as a text-edit field, accessible with the "E" key (like the search bar), but this doesn’t happen.
   • Even if users somehow reach the editor, screen reader users can’t interact with the editor's tools.
     
     
4. HTML Tags:
   
   • In XF1, thread/reply content was wrapped in <blockquote></blockquote>, which is natively accessible using the "Q" key. In XF2, this was replaced with <article></article>, which is not navigable with keyboard shortcuts.
     
     
     
   • Similarly, in XF1, thread titles in forums were wrapped in <h3></h3> , making them accessible with the "H" key. In XF2, they are placed inside <div></div> tags, which are not navigable.
     
     
     
     
     
   • Notifications and messages in XF1 were in <h3></h3>, allowing quick navigation, but in XF2, they are also replaced with <div></div> making navigation more cumbersome.
     
     
     
5. Admin Panel:
   
   • In the admin panel, there’s no way to reorder prefixes using the keyboard or a screen reader, as this requires dragging and dropping with a mouse.

Conclusion​

I apologize for the long post, but I wanted to clearly outline the challenges faced by screen reader users in XenForo. I believe addressing these issues will greatly improve accessibility and make XenForo more inclusive for everyone.

Thank you all for taking the time to read this!

 

[MesterPerfect]

Additional Notes​

• The images included in this thread are meant to indicate the general locations of the issues in XenForo.
• I can provide the modifications I made to address the issues mentioned in my thread.
• This will be done to clarify the location and impact of the issues, helping to better understand and resolve them.