Make UI usable by blind people

[fantasai]

Describe the bug
One of the participants uses a screen reader and found the poll too difficult to use.

Expected behavior
Usable with a screenreader. :)

Steps to Reproduce
OK, this isn't how to actually reproduce, but it should give you an idea:

1. Replace all the the embedded SVG images with nothing.
2. Load the page in Firefox, go to View > Page Style > No Style
3. Try to use the page.

In general, if you replace all images with their alt text and show the page without CSS, it should be well-organized and readable. If it's not, it means you need to fix your markup. Yours... definitely needs fixing.

How to Improve

1. Sorry to be throwing RTFM at you, but, you need to start by learning to use HTML tags like <p> and <table> and <h3> and <section> and <pre> to organize the information. Find a nice, basic introductory book or read the HTML4 spec or something. Definitely the main section of the poll should be using table markup. Here's a few relevant tutorials from MDN: structuring text, lists, page structure, tables.
2. Replace the embedded SVG with externally-referenced SVG using <img> tags, and use alt attributes to either mark the image as decorative (alt="") or give the text that it represents (e.g. alt="If need be", alt="Total Available: ").

There might be other things to fix as well, but this should get you 90% of the way there.

[fantasai]

This section of the CSS Writing Modes spec has some fairly complex tables, btw, you could probably just steal the markup structure: https://www.w3.org/TR/css-writing-modes-4/#unicode-bidi

[frivoal]

This issue is the main reason why I keep looking for alternatives, and cannot wholeheartedly recommend Rally.

[nesges]

This is a major issue for me as well

[hometoast]

I have a limited set of tools to validate screen reader readiness. So this might be a 'dumb question'.
For interactions with poll elements, if you tab and space to a poll option. Changing the title would trigger the reader to re-read the element?
title="Monday, September 16, 2024. No Vote"
user presses space. element's title changes.
title="Monday, September 16, 2024. Going"

[floriangouy]

Hello @fantasai and @frivoal,
A bit off topic sorry: Could you tell us which screen readers you know, so that we have examples to test and reproduce? (ie. as browers addons or standalone browsers). Thanks in advance 🙂

[LJWatson]

@floriangouy, the recommended screen reader/browser combinations are: Jaws/Chrome and NVDA/Firefox on Windows, VoiceOver/Safari on macOS and iOS, and TalkBack/Chrome on Android. These videos may help:

• Browsing with a desktop screen reader
• Browsing with a mobile screen reader

Unless you're familiar with using a screen reader, the experience will likely be incomprehensible - so although it's worth doing (and getting familiar with this form of testing) avoid using it as the sole basis for change.

The advice that @fantasai gave in #306 (comment) is a good place to start, since a large number of screen reader issues stem from the lack of accessibility semantics.

If accessibility is unfamiliar to you, then I'd suggest commissioning an audit of the product using the Web Content Accessibility Guidelines (WCAG) 2.2. This should result in a concrete set of issues to fix (covering the full spectrum of accessibility, not just for screen reader users).

[Danirogerc]

What other accessibility issues do you think can be fixed?

[spthiel]

It seems to me all the accessibility concerns originally mentioned by fantasai are not present (anymore) in 4.7.4.
The polls use full table markup.
The SVGs use the title tag which is read as expected.

A thing that would be a nice add is live regions for the buttons such that changed button icons are read out.