What is optimal structure for focusable alert reading?
What HTML structure provides the best (minimal but accurate) screen reader reading experience when a heading element used as a notification gets focus or is swiped to?
Mobile screen readers may read contents of the alert heading more than once. For iOS special care must be taken to focus simple elements, as complex ones tend not to take programmatic focus.
Result: Examples 4 and, for iOS, 4i work uniformly well across screen readers. The 4i technique, which takes programmatic focus on a simple sub-element, works in iOS. iOS VoiceOver will focus the element and read aloud the whole alert message both on swiping to it and when programmatically focused. But since the focus rectangle does not show visibly on 4i, it may be advisable to limit the technique to iOS. For other platforms, the technique in Example 4 seems to be the best choice.
Browsers Other Than On iOS with VoiceOver
Example 1: Icon in Heading with Text Equivalent in Span
Warning:
Your coat is on inside out
Example 2: Icon with Text Alternative in Heading
Your coat is on inside out
Example 3: Attempting to Override Reading Using ARIA-Label
Your coat is on inside out
Example 4: Attempting to “Flatten” Contents Using Role of Text
Warning:
Your coat is on inside out
Example 5: Like Example 1 But Using HTML Heading Instead of ARIA-Level Heading
Warning:
Your coat is on inside out
For iOS with VoiceOver
Example 1i: Icon in Heading with Text Equivalent in Span
Warning:
Your coat is on inside out
Example 2i: Icon with Text Alternative in Heading
Your coat is on inside out
Example 3i: Attempting to Override Reading Using ARIA-Label
Your coat is on inside out
Example 4i: Attempting to “Flatten” Contents Using Role of Text
Warning:
Your coat is on inside out
Example 5i: Like Example 1 But Using HTML Heading Instead of ARIA-Level Heading