Testing the effects of aria-label on span elements
May 30, 2019: Tested with latest browser and screen reader versions on available devices. (13 total pairings for each test)
Test 1: Span with aria-label
test 1 results
Announces: 8
Ignores: 5
- JAWS with Firefox announces aria-label
- JAWS with Chrome ignores span
- JAWS with Edge (chromium) ignores span
- JAWS with IE11 announces aria-label
- NVDA with Firefox ignores span
- NVDA with Chrome announces aria-label
- NVDA with Edge (chromium) announces aria-label
- NVDA with IE11 announces aria-label
- VO with Safari announces aria-label, promotes span to group
- VO with Chrome announces aria-label, promotes span to group
- iOS VO with Safari ignores span
- TalkBack with Firefox ignores span
- TalkBack with Chrome announces aria-label
Test 2: Span with visible text and aria-label
visible text
test 2 results
Announces: 3
Ignores: 10
- JAWS with Firefox ignores aria-label
- JAWS with Chrome ignores aria-label
- JAWS with Edge (chromium) ignores aria-label
- JAWS with IE11 ignores aria-label
- NVDA with Firefox ignores aria-label
- NVDA with Chrome ignores aria-label
- NVDA with Edge (chromium) ignores aria-label
- NVDA with IE11 ignores aria-label
- VO with Safari announces aria-label, promotes span to group. Will also announce visible text as separate stop.
- VO with Chrome announces aria-label, promotes span to group. Will also announce visible text as separate stop.
- iOS VO with Safari ignores aria-label
- TalkBack with Firefox ignores aria-label
- TalkBack with Chrome announces aria-label and excludes visible text
Test 3: Link containing span with visible text and aria-label
test 3 results
Announces: 5
Ignores: 8
- JAWS with Firefox ignores aria-label
- JAWS with Chrome ignores aria-label
- JAWS with Edge (chromium) ignores aria-label
- JAWS with IE11 ignores aria-label
- NVDA with Firefox ignores aria-label
- NVDA with Chrome ignores aria-label
- NVDA with Edge (chromium) ignores aria-label
- NVDA with IE11 ignores aria-label
- VO with Safari announces aria-label and excludes visible text
- VO with Chrome announces aria-label and excludes visible text
- iOS VO with Safari announces aria-label and excludes visible text
- TalkBack with Firefox announces aria-label and excludes visible text
- TalkBack with Chrome announces aria-label and excludes visible text
Test 4: Link containing span with aria-label
test 4 results
Announces: 12
Ignores: 1
- JAWS with Firefox announces aria-label as accessible name of link
- JAWS with Chrome announces aria-label as accessible name of link
- JAWS with Edge (chromium) announces aria-label as accessible name of link
- JAWS with IE11 announces aria-label as accessible name of link
- NVDA with Firefox announces aria-label as accessible name of link
- NVDA with Chrome announces aria-label as accessible name of link
- NVDA with Edge (chromium) announces aria-label as accessible name of link
- NVDA with IE11 announces aria-label as accessible name of link
- VO with Safari announces aria-label as accessible name of link
- VO with Chrome announces aria-label as accessible name of link
- iOS VO with Safari ignores the link
- TalkBack with Firefox announces aria-label as accessible name of link
- TalkBack with Chrome announces aria-label as accessible name of link
Test 5: Button containing span with visible text and aria-label
test 5 results
Announces: 10
Ignores: 3
- JAWS with Firefox announces aria-label and excludes visible text
- JAWS with Chrome announces aria-label and excludes visible text
- JAWS with Edge (chromium) announces aria-label and excludes visible text
- JAWS with IE11 ignores aria-label
- NVDA with Firefox ignores aria-label
- NVDA with Chrome announces aria-label and excludes visible text
- NVDA with Edge (chromium) announces aria-label and excludes visible text
- NVDA with IE11 ignores aria-label
- VO with Safari announces aria-label and excludes visible text
- VO with Chrome announces aria-label and excludes visible text
- iOS VO with Safari announces aria-label and excludes visible text
- TalkBack with Firefox announces aria-label, button role, aria-label again and then visible text
- TalkBack with Chrome announces aria-label and excludes visible text
Test 6: Button containing span with aria-label
test 6 results
Announces: 13
Ignores: 0
- JAWS with Firefox announces aria-label as accessible name of button
- JAWS with Chrome announces aria-label as accessible name of button
- JAWS with Edge (chromium) announces aria-label as accessible name of button
- JAWS with IE11 announces aria-label as accessible name of button
- NVDA with Firefox announces aria-label as accessible name of button
- NVDA with Chrome announces aria-label as accessible name of button
- NVDA with Edge (chromium) announces aria-label as accessible name of button
- NVDA with IE11 announces aria-label as accessible name of button
- VO with Safari announces aria-label as accessible name of button
- VO with Chrome announces aria-label as accessible name of button
- iOS VO with Safari announces aria-label as accessible name of button
- TalkBack with Firefox announces aria-label as accessible name of button
- TalkBack with Chrome announces aria-label as accessible name of button
Test 7: Summary containing span with visible text and aria-label
visible text
oh hi
test 7 results
Announces: 6
Ignores: 7
- JAWS with Firefox announces aria-label and excludes visible text
- JAWS with Chrome announces aria-label and excludes visible text
- JAWS with Edge (chromium) announces aria-label and excludes visible text
- JAWS with IE11 ignores aria-label on span in unsupported summary
- NVDA with Firefox ignores aria-label
- NVDA with Chrome ignores aria-label
- NVDA with Edge (chromium) ignores aria-label
- NVDA with IE11 ignores aria-label on span in unsupported summary
- VO with Safari announces aria-label and excludes visible text
- VO with Chrome announces aria-label and excludes visible text
- iOS VO with Safari ignores aria-label
- TalkBack with Firefox ignores aria-label
- TalkBack with Chrome announces aria-label and excludes visible text
Test 8: Summary containing span with aria-label
oh hi
test 8 results
Announces: 11
Ignores: 2
- JAWS with Firefox announces aria-label as accessible name of summary
- JAWS with Chrome announces aria-label as accessible name of summary
- JAWS with Edge (chromium) announces aria-label as accessible name of summary
- JAWS with IE11 announces aria-label on span in unsupported summary
- NVDA with Firefox announces aria-label as accessible name of summary
- NVDA with Chrome announces aria-label as accessible name of summary
- NVDA with Edge (chromium) announces aria-label as accessible name of summary
- NVDA with IE11 announces aria-label on span in unsupported summary
- VO with Safari announces aria-label as accessible name of summary
- VO with Chrome announces aria-label as accessible name of summary
- iOS VO with Safari ignores summary element
- TalkBack with Firefox ignores summary element
- TalkBack with Chrome announces aria-label as accessible name of summary ("disclosure triangle")