WebAIM - Web Accessibility In Mind

E-mail List Archives

Voiceover bugs for Web

for

From: Murphy, Sean
Date: Oct 24, 2021 11:20PM

All,

Our accessibility team has noticed some bugs with Voiceover and Safari when using <div> and <span>. If a <span> is used within <divs> or other elements. The span tag is treated as a block element. Below are two scenario's we have discovered:


1. We have a design pattern for checkboxes which uses native HTML elements. Nested within the label is a <span> which has the visual description. Jaws for windows, NVDA, iOS Voiceover and Talk back android all treat this construct correctly. The screen reader announces the label and description, plus the state of the element in the correct order. Mac Voiceover says the label then "one more item". Aria-describedby could fix this issue if we applied it, but this is a unnecessary work around because all other screen readers work correctly.
2. On voiceover on iOS. If you use a <div> and <span nested. Such as <div> hello world <span> this is a fine place </span><div>. Voiceover announces the div text on the first swipe, then the span on the second swipe. Rather than reading the whole block of text. All other screen readers we have tested treat it as a single block of text as the <div> is a block element.
Other than making people aware of these strange issues, I am wondering if there is any resource out there which highlight these types of issues or a place to try and get them fixed.


Regards
Sean Murphy

Sean Murphy | Senior Digital System specialist (Accessibility)
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917
Submit an Engagement Accessibility form<link:%20https://confluence.tools.telstra.com/display/DCSYS/Request+Form>
Accessibility Single Source of Truth<https://confluence.tools.telstra.com/display/DCSYS/Accessibility>