Feedback from an accessibility review

[colingourlay]

Matthew Heffernan shared this with me and @drzax today.

We may want to flesh this out into separate issues, but I'm dumping it here just now so it has a home we can refer to.

Note: Some of this is related specifically to either the Odyssey scrollyteller plugin and the global audio customisations in the Mardi Gras story

Odyssey product issues

• Button below the Enable/Disable audio toggle button in code sequence is the floating equivalent button. It is not visible when focused from the keyboard and is unnecessary for blind keyboard users as it only duplicates the previous button. It also contains an image without an alt attribute. Suggest hiding it from sighted and blind keyboard users, e.g:
  • <button id="toggle-global-audio-float" class="dkKC09 bOk5p9" aria-hidden="true" tabindex="-1"><img alt="" src="data:image/svg+xml;base64,PD94b[…]button>
• Images without alt attribute, e.g. . This image is below the Published date at page top. It’s announced to screen reader users as ‘unlabelled image’. In fact it’s visually hidden. Best to remove it, or hide it from all users when visually hidden. In any case no images should be missing an alt attribute
• Visually hidden text still available to screen reader users. e.g. “Keep scrolling to read the story” changes to “This story is best experienced with sound on” when the mute/enable audio button is toggled. It makes sense to get the latter instruction if the audio is muted only, but screen reader users get both messages all the time. Reason is hidden message is only visually hidden with opacity:0;. Instead hide messages from all users with display:none; or perhaps visibility:hidden; so it’s unavailable to screen reader users either.
• Related to mute/enable audio toggle button above: After triggering the ‘mute audio’ button sighted readers see “This story is best experienced with sound on”. But this instruction is shown above the button and screen reader users won’t hear it. Suggest moving the audio toggle button above this message. An alternative is to enclose the message(s) in an aria-live region so they’re announced when they change, but the first solution is easier.
• There are a number of content nodes that share the same id value id="endscrollyteller". Assistive technologies may have trouble identifying the right one.
• Several g elements have an aria-label but no role. They won’t be announced/announced completely by some screen readers. - Always provide a role for elements with an aria-label. This role can be explicit or implicit. In this case you might identify the g as an image so screen readers know ther aria-label is an alt attribute, e.g. <g fill="rgb(255,255,255)" […] role=”img” aria-label="CROWN STREET" […] style="display: block;">

[matt-heff]

Thanks for posting this in here Colin!