Inaccessibility to screenreaders

[StrangeGirlMurph]

I am shocked to find out that etherpad isn't accessible to screenreaders at all. How did no one think about that? It's truly horrible. For me it just cycles through the line numbers. No sight of a skip to content link or anything. I mean there is no point in even listing out everything that's bad. See for yourself.

Yes making it truly accessible to screenreaders with all the edit functionality is hard but allowing people to actually read the content is a must.

Please work on that.

[SamTV12345]

Hi @StrangeGirlMurph Could you ellaborate on where Etherpad is not accessible? Would be great to find out so we can fix it.

[StrangeGirlMurph]

Hey @SamTV12345, sadly basically everywhere. I don't feel like giving an accessibility in web dev 101 talk and explain the absolute basics. I would hope someone on the team would have at least some knowledge. There is also: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility
I highly recommend you also just try it out yourself! I find tablets are a great way to test screen reader support.

Basically is etherpad right now just not navigable for screen readers. Some points:

• To get to the main content you have to go over all editing tools in the header. Thats 18 swipes. Thats what skip to content buttons are there for!
• On etherpad.wikimedia.org you can't individually cycle through the paragraphs and links. You have know where they are located in order to click them. It just treats all the text as one big block.
• After that it individually cycles through every single line number and just reads them out loud. Of course a blind person would have no clue that the numbers read are line numbers.

These are just some things. Someone really needs to actually think this through. Your LLM of choice can also offer some directions.

[StrangeGirlMurph]

Okay I took the time to make a small screen recording of me just swiping through. People who know what to look for will find many problems from that. Note that doesn't even cover all the problems with actually interacting with the buttons. The chat for example in the end is just not available.

trim.595494A5-6E05-46B1-AD0A-8E6CD20EF8CE.MOV

[JohnMcLear]

We put a lot of work into accessibility with aria.. Is aria not working or something?

[StrangeGirlMurph]

Sorry for the delay. Was busy with an exam.
Now: The navigation and using divs and spans for text are the problem! The aria tags seems fine from a quick look.
As you can hear in the video there is no skip to content link so you manually have to cycle through all the tools to get to the text. The text is in spans in divs. The screenreader just sees one block of text. There is no cycling through paragraphs and no way to access links for example. Then there is also this horrible going through all the line numbers. It's all in the video really.

[JohnMcLear]

Okay noted, sounds horrific, yea :|

I had to learn about screen readers 10 or so years ago to implement our initial attempt, the web has changed a lot since so I apologize we didn't update the software to keep up with it!

Do you know how the skip to content might work and be implemented? If so, please provide docs.

Etherpad doesn't really have the concept of "paragraphs", afaik nor does the web. For example your comment on Github is just one line of text... Can you provide a source for information for how screen readers try to resolve this?

I guess with line numbers would you prefer if they are just not part of the screen reading concept?

Happy to make any changes you can suggest if you can provide best practice references :)

[StrangeGirlMurph]

Thanks. With paragraphs I mean p tags. They do and should get used. The line numbers should be announced at the start of the line. Until then it would definitely be better for them to just be hidden to screenreaders.
A good start covering the very basics is:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML
(This is a must read!) (in general are the mdn docs good and extensive)
For skip links in detail:
https://www.w3schools.com/accessibility/accessibility_skip_links.php

[JohnMcLear]

fwiw @StrangeGirlMurph the Mozilla team did the initial accessibility integration so it should be to their specs but I think it's changed quite a bit since the first inception..

I think this is something that 100% needs doing tho so thanks for your bump in the right direction, we probably took the eye off the ball on accessibility and that's not good enough from a Foundation perspective!

As far as P tags go, I think this might be impossible with our current non-shadow-dom-less approach but I'll certainly look into it :)