The discussion addresses accessibility issues with the New Topic/Reply form, particularly for screen reader users. owlish reported that several buttons are not properly labelled: the reply button reads as “Or press Ctrl+Enter,” the hamburger button lacks a label, and the upload image button is read as “link.” codinghorror questioned if this is specific to mobile, but owlish clarified the reply button issue also occurs on desktop. sam requested guidance on testing, and owlish recommended Chrome Vox and NVDA. Matt_Campbell confirmed the reply button fix was implemented and investigated the other issues. He proposed labeling the hamburger button as “show more” or “options,” but awesomerobot added labels to the upload, preview, and toolbar toggle buttons, using “[Show/hide] composer toolbar” for the toggle. sam suggested adding aria-label="reply" to the reply button, and awesomerobot noted that VoiceOver already reads the label correctly but suggested removing the title on mobile. sam set a 2-week timer to close the issue, inviting further follow-ups if needed.
A screen reader user on iOS reported that several buttons on the New Topic/Reply form are not correctly labelled.
Is this specific to mobile?
Of the buttons listed, I think only the Reply button appears on the desktop version but it’s still labelled “Or press Ctrl+Enter”
@owlish I would love to get this sorted, can you provide us with a quick start of how to test this? What software do we install locally?
The Chrome Vox screenreader was recommended for accessibility testing.
NVDA is another free option for Windows.
Just wanted to check in to see if there’s been any movement on this or if you need any more information
Hi @sam, is there any other information you need for this?
I think we have what we need, its just a question of resources at the moment.
I am adding a pr-welcome on this in case someone from the community wants to help out.
The issue with the reply button was fixed by commit 31ffcf989ce63e. I just tested this on iOS with VoiceOver.
Now I’ll investigate the other two issues.
I verified that the hamburger button in the composer isn’t labeled. Specifically, this is the toggle-toolbar button in the composer-toggles component. This button is only rendered in the mobile view.
What would be a reasonable label for this button? Maybe “Formatting”, since many of the toolbar options are formatting related? Not all of them are, though. Maybe the more generic “Tools” would be better.
It occurred to me that, to enable accessibility fixes to reach Discourse’s worldwide user base without imposing too much on translators, we should use existing strings for unlabeled controls when it makes sense. So, for the hamburger button, would it make sense to use “show more” as the title? We could use “options”, and I think that would be a better fit, except that there’s already an “options” button in the toolbar itself. I think that would be confusing.
I’ve added labels to the upload and preview buttons as well as the toolbar toggle.
https://github.com/discourse/discourse/commit/13c9d7e70431c91d03e206e2f04121bc8cb69db7
@Matt_Campbell You’re right about the benefits of using existing text where possible, but I ended up adding two new strings so the label can say “[Show/hide] composer toolbar”. I considered using “options,” but it didn’t seem descriptive enough, especially considering that the button is a toggle.
@owlish @Matt_Campbell @awesomerobot , what is the situation these days?
The original request was around correcting the title “Or press Ctrl+Enter” on the reply button. Maybe we simply add aria-label="reply" to this button?
VoiceOver on iOS reads the button label “reply” and then the title, and this is also the case with NVDA on desktop, so I think everything was covered here but I can take a closer look if something’s still missing.
One minor improvement could be to remove the title on mobile because the keyboard shortcuts generally aren’t relevant there.
Cool, chucking a 2 week timer then on this to close it.
Feel free to open followups if you find any @owlish
This topic was automatically closed after 9 days. New replies are no longer allowed.
