Some suggestions for screen reader improvement

[jmuheim]

Hello!

First: thank you so much for creating and maintaining Reveal.js! It's an incredibly useful tool.

I'm working for a foundation that fosters digital accessibility, and I'm really happy to see that Reveal.js has quite good accessibility built in, even for blind people using screenreaders.

Here are a few suggestions for improvement though. If you are interested, I can help you fix these (although I'm no experienced JavaScript developer, but I'm happy to help where I can, especially by screen reader testing).

Remove role="application" (or make it optional)

Screen readers intercept all key strokes by default. So the default shortcuts of Reveal.js (Space, arrows, etc.) don't work in a screen reader when reading the contents (so called "Browse mode"). By adding role="application", the screen reader is forced to activate "Application mode", which passes all key strokes to the browser (instead of intercepting them).

So far, so good. But usually, the screen reader user wants to read the contents of a slide - which is NOT possible in "Application mode". So while the user indeed can switch comfortably between slides, he always has to exit "Application mode" to read contents line by line. (I know that there is an ARIA live region which announces all contents when opening a slide, but this is quite overwhelming and limited to some degree as described below, and usually screen reader users prefer to manually browse content.)

So I suggest that role="application" should be removed (or optional), because screen reader users can navigate between slides using the "previos/next/etc. slide" buttons (they are displayed by Reveal.js by default, and if someone removes them from screen by setting controls: false, then the screen reader user can still manually switch to "Application mode", i.e. by pressing Insert+Space in NVDA screen reader).

Add full stops between elements in ARIA live region

When opening a slide, all (or at least most, see below) slide contents are converted to text and put into an aria-live="polite" region. This makes screen readers announce the contents automatically. This is very useful for blind viewers who follow a presentation using Reveal's Multiplex feature: they immediately know, that the presentation was moved forward by the presenter, and what content there is on the current slide.

What could/should be done better: Please add a full stop (.) after each element! As you can see in the screenshot, at the moment it's just one long sentence without a single full stop (in German we say a "Textbandwurm"), and screen readers will announce this in a very unnatural voice melody (as they don't know where an actual sentence starts or stops):

Zeitliches Spektrum möglicher Einschränkungen Temporär: gebrochene Hand Situativ: Baby im Arm Permanent: Arthritis Abbildung 9: Ein junger Mann mit einem Baby im Arm sitzt am Computer 📖 Siehe auch Inclusive 101 Guidebook von Microsoft Inclusive Design Abbildung 10: Eine ältere Frau sitzt am Computer

Much more digestible would be:

Zeitliches Spektrum möglicher Einschränkungen. Temporär: gebrochene Hand. Situativ: Baby im Arm. Permanent: Arthritis. Abbildung 9: Ein junger Mann mit einem Baby im Arm sitzt am Computer. 📖 Siehe auch Inclusive 101 Guidebook von Microsoft Inclusive Design. Abbildung 10: Eine ältere Frau sitzt am Computer.

Also announce image's alt texts using ARIA live region

I realised that images are not announced in the ARIA live region. As far as I can tell, the mechanism which converts slide contents to text does only take into account paragraphs, list items, etc., but not an image's alt attribute.

Currently, I have to work around this by adding a visible text to each image (which is good style anyway):

Announce fragments through ARIA live region

While I appreciate the current implementation of ARIA live, it has the drawback that it doesn't respect fragments: all slide contents are dumped to the ARIA live region right away on page load. This is overwhelming to screen reader users:

1. They usually don't want to hear more than one sentence in a row (to not stress cognitive capacity too much)
2. When the slide has a lot of content, then the screen reader will talk for a long time, while probably the presenter is talking too, leading to overlapping of the two voices (which is quite unbearable).
3. Newly displayed fragments are not revealed to blind people at the same time as for the visual audience, which makes it hard to follow (or even give an unfair advantage to screen reader users i.e. when asking a question which's answer is displayed in the next fragment).

I suggest the following: don't dump all slide contents to the ARIA live region at page load, but only the visible elements! When revealing a fragment, replace the ARIA live region's content with the fragment's content. This way, blind and visual users have the same experience.

(I also thought about removing the current mechanism completely and simply setting an aria-live="polite" to the current slide: this should actually tell screen readers to survey the current slide for content changes automatically and announce them correctly. Maybe this is a much more elegant way to fix this?)

Give a screen reader feedback when opening overview (Esc key)

It's a bit problematic that Esc opens/closes the slides overview in Reveal.js, as Esc is an important key to screen readers: they usually can exit "Application mode" with it, and as currently there is the role="application" set to the whole presentation, screen reader users are constantly tempted to press Esc. But apparently "nothing" happens for them: they don't leave "Application mode" - instead, the overview opens, but as there's no auditive feedback in any sort, blind users are literally left in the dark.

To fix this, I suggest that a short announcement is dumped into the ARIA live region when opening overview, i.e. "Overview mode" or similar.

[jmuheim]

I just realised I had created a separate issue for image's alt texts before: #3757