MikeS button-title

From Level Access Web Labs
Jump to navigation Jump to search

ARIA button with title attribute as accessible name

JAWS only reads the title if it is tabbed to, not arrowed to. Arrowing to it only identifies its role, "toggle button". (Pressing INS+Tab if arrowed to it will also speak title, as expected.) NVDA completely skips this active element, as if it were not present in the page, though tabbing to it might say merely "blank" (no role, no name). VoiceOver completely skips this active element, as if it were not present in the page. TalkBack in Firefox reads it fine in the swipe order.

ARIA button with aria-label as accessible name

JAWS reads aria-label whether tabbing or arrowing to it. NVDA completely skips this active element, as if it were not present in the page, though tabbing to it might say merely "blank" (no role, no name). VoiceOver again skips the button entirely as if it were not there, due to the lack of inner text. TalkBack in Firefox again reads it fine in the swipe order.

 

ARIA button with aria-label as accessible name and enclosed IMG tag with null alt

JAWS reads aria-label whether tabbing or arrowing to it. NVDA finally announces it. VoiceOver also now announces the button by the aria-label because the element has some sort of inner content, even an IMG with null alt. And TalkBack reads it fine. So this is one viable implementation option.
 

ARIA button with aria-label as accessible name and non-breaking space in a [span] as inner text

JAWS reads aria-label whether tabbing or arrowing to it. NVDA reads it fine. VoiceOver now announces the button by the aria-label because the element has some sort of inner content, even a non-breaking space. (There has to be something, the enclosed tag cannot be empty or a standard space.) And TalkBack reads it fine. So this is another viable implementation option.

ARIA button with aria-label as accessible name and an enclosed [i] tag

JAWS reads aria-label whether tabbing or arrowing to it. NVDA reads it fine. VoiceOver now announces the button by the aria-label because the element has some sort of inner content, even a non-breaking space. And TalkBack reads it fine. So like [span], this is another viable implementation option.

end of content