AREA with aria-labelledby attribute Screen reader compatibility

Last updated: September 5, 2016

Expected Result: works in a screen reader

Actual Result: causes problems in 36 screen reader / browser combinations

WCAG Technique: ARIA10

Code used for this test:


        <img src='1234.png' alt='this is alt text' usemap='#area_aria_labelledby_map1'>
        <map id='area_aria_labelledby_map1' name='area_aria_labelledby_map1'>
        <area aria-labelledby='left_caption' coords='0,0,100,100' href='left_arrow.htm' target='frame1'></area>
        <area aria-labelledby='right_caption' coords='200,0,300,100' href='right_arrow.htm' target='frame1'></area>
        </map>
        <span id='left_caption'>this is left aria labelled by text</span>
        <span id='right_caption'>this is right aria labelled by text</span>
    

Change History

Last updated: September 5, 2016

Screen readerBrowserModeNotesWhat the user hears
Fail NVDA 2016.2FF48 ReadingNo indication AREA links exist Speak Graphic, this is alt text, this is alt text, this is left aria labelled by text, this is right aria. Labelled by text.
OK NVDA 2016.2FF48 Tabbing Speak This is left aria labelled by text, link. This is right aria labelled by text, link
Fail NVDA 2016.2IE11 Readinglink text blank, labels read out after links Speak Graphic, this is alt text, link, link, this is left aria labelled by text, this is right aria labelled by text
Fail NVDA 2016.2IE11 TabbingComplete silence when tabbing between AREAs.
Fail NVDA 2015.2FF40 ReadingNo indication AREA links exist Speak Graphic, this is alt text, this is alt text, this is left aria labelled by text, this is right aria labelled by. Text.
OK NVDA 2015.2FF40 Tabbing Speak This is left aria labelled by text, link. This is right aria labelled by text, link
Fail NVDA 2015.2IE11 Readinglink text blank, labels read out after links Speak Graphic, this is alt text, link, link, this is left aria labelled by text, this is right aria labelled by text
Fail NVDA 2015.2IE11 TabbingComplete silence when tabbing between AREAs.
OK NVDA 2014.1FF28 Reading Speak graphic, this is alt text, link, this is left aria labelled by text, link, this is right aria labelled by text
Fail NVDA 2014.1FF28 Tabbingsilent for second tab onto second area Speak This is alt text, link, this is left aria labelled by text, link, this is right aria labelled by text, graphic - all read for 1st link
Fail NVDA 2014.1IE11 Readinglink text blank, labels read out after links Speak graphic, this is alt text, link, link, this is left aria labelled by text, this is right aria labelled by text
Fail NVDA 2014.1IE11 TabbingSilence when tabbing to AREA links - no indication of image map role or name
OK NVDA 2012.1FF28 Reading Speak graphic, this is alt text, link, this is left aria labelled by text, link, this is right aria labelled by text
Fail NVDA 2012.1FF28 Tabbingsilent for second tab onto second area Speak This is alt text, link, this is left aria labelled by text, link, this is right aria labelled by text, graphic - all read for 1st link
OK NVDA 2012.3IE11 Reading Speak Graphic, this is alt text, link link, this is left aria labelled by text, this is right aria labelled by text
Fail NVDA 2012.3IE11 TabbingSilence when tabbing to AREA links - no indication of image map role or name
Fail JAWS 17.0.2619FF48 ReadingNo indication that graphic areas are links Speak Graphic, this is alt text. Graphic, this is left aria labelled by text. Graphic, this is right aria labelled by text
OK JAWS 17.0.2619FF48 Tabbing Speak This is alt text graphic, this is left aria labelled by text, image map. This is right aria labelled by text, image map.
OK JAWS 17.0.2619IE11 Reading Speak Graphic, this is alt text. Image map link, this is left aria labelled by text. Image map link, this is right aria labelled by text.
OK JAWS 17.0.2619IE11 Tabbing Speak This is left aria labelled by text, image map link. This is right aria labelled by text, image map link.
Fail JAWS 16.0.4350FF40 ReadingNo indication that graphic areas are links Speak Graphic, this is left aria labelled by text, this is right aria labelled by text. Graphic, this is left aria labelled by text. Graphic, this is right aria labelled by text
OK JAWS 16.0.4350FF41 Tabbing Speak This is left aria labelled by text, image map. This is right aria labelled by text, image map.
OK JAWS 16.0.4350IE11 Reading Speak Graphic, this is alt text. Image map link, this is left aria labelled by text. Image map link, this is right aria labelled by text.
OK JAWS 16.0.4350IE11 Tabbing Speak This is left aria labelled by text, image map link. This is right aria labelled by text, image map link.
Fail JAWS 15.0.9023FF29 Readingno indication of links Speak Graphic, this is left aria labelled by text, this is right aria labelled by text. Graphic, this is left aria labelled by text. Graphic, this is right aria labelled by text
Fail JAWS 15.0.9023FF29 TabbingLabels all run together, labelled by announced twice, silence on second tab Speak This is left aria labelled by text, this is right aria labelled by text, this is left aria labelled by text, this is right aria labelled by text, image map.
OK JAWS 15.0.9023IE11 Reading Speak Graphic, this is alt text. Image map link, this is left aria labelled by text. Image map link, this is right aria labelled by text.
OK JAWS 15.0.9023IE11 Tabbing Speak This is left aria labelled by text, image map link. This is right aria labelled by text, image map link.
Fail JAWS 14.0.9002FF29 Readingno indication of links Speak graphic, this is left aria labelled by text, this is right aria labelled by text, graphic, this is left aria labelled by text, graphic, this is right aria labelled by text
Fail JAWS 14.0.9002FF29 Tabbinglabels all run together, silence on second tab Speak This is left aria labelled by text, this is right aria labelled by text, this is left aria labelled by text, this is right aria labelled by text, image map
OK JAWS 14.0.9002IE11 Reading Speak graphic, this is alt text, image map link, this is left aria labelled by text, image map link, this is right aria labelled by text
OK JAWS 14.0.9002IE11 Tabbing Speak This is left aria labelled by text, image map link, this is right aria labelled by text, image map link
Fail JAWS 13.0.852FF28 Readingno indication of image map links Speak graphic, this is alt text
Fail JAWS 13.0.852FF28 Tabbingwrong alt read out when tabbing Speak This is alt text, graphic for first area, silence for second area
Fail JAWS 13.0.852IE11 ReadingURLs read out instead of ARIA-LABELLEDBY Speak graphic, this is alt text, image map link, test slash left underline arrow, image map link, test slash right underline arrow
Fail JAWS 13.0.852IE11 TabbingURLs read out instead of ARIA-LABELLEDBY Speak Test slash left underline arrow, image map link, test slash right underline arrow, image map link
OK WindowEyes 9.2IE11 Reading Speak This is alt text. Link, this is left aria labelled by text. Link, this is right aria labelled by text
OK WindowEyes 9.2IE11 Tabbing Speak Link, this is left aria labelled by text. Link, this is right aria labelled by text
Fail WindowEyes 8.4IE11 Readingreads out filename Speak This is alt text, link, support slash test slash left arrow dot HTM, link, support slash test slash right arrow dot HTM
Fail WindowEyes 8.4IE11 TabbingSilence when tabbing to AREA links - no indication of image map role or name
Fail VoiceOver OSX 10.11Safari 9.1.2 Readingreads out filename Speak This is alt text, image map. Interact with: this is alt text, image map, 2 items, link, left underline arrow HTM. Link, right underline arrow HTM
Fail VoiceOver OSX 10.11Safari 9.1.2 TabbingReads out filename Speak Link, left underline arrow HTM. Link, right underline arrow HTM
Fail VoiceOver OSX 10.10Safari 8.0.6 Readingreads out filename Speak This is alt text, image map. Interact with: this is alt text, image map, 2 items, link, left underline arrow HTM. Link, right underline arrow HTM
Fail VoiceOver OSX 10.10Safari 8.0.6 TabbingReads out filename Speak Link, left underline arrow HTM. Link, right underline arrow HTM
Fail VoiceOver OSX 10.9Safari 7.0.3 Readingreads out filename Speak This is alt text, image map. Interact with: this is alt text, image map, 2 items, link, left underline arrow HTM. Link, right underline arrow HTM
Fail VoiceOver OSX 10.9Safari 7.0.3 Tabbingreads out filename Speak Link, left underline arrow HTM. Link, right underline arrow HTM
Fail VoiceOver iOS 9.1Safari iOS 9.1TouchVery hard to find AREA links because image map links are not announced when reading. It is possible to find them by minesweeping, but there are no audible cues to tell the user they're missing links. Speak This is alt text.
Fail VoiceOver iOS 8.4Safari iOS 8.4TouchVery hard to find AREA links because image map links are not announced when reading. It is possible to find them by minesweeping, but there are no audible cues to tell the user they're missing links. Speak This is alt text.
Fail VoiceOver iOS 7.1Safari iOS 7.1TouchVery hard to find AREA links because image map links are not announced when reading. It is possible to find them by minesweeping, but there are no audible cues to tell the user they're missing links. Speak This is alt text.
Fail Dolphin SR 15.05IE11 ReadingNo link labels read for AREA Speak This is alt text. Link. Link.
Fail Dolphin SR 15.05IE11 Tabbingno link labels read Speak Link. Link
Fail SaToGo 3.4.96.0IE11 Readingno link labels read Speak link, link
Fail SaToGo 3.4.96.0IE11 Tabbingno link labels read Speak link, link

SortSite rules: AccWcag1-1.1.2

Test notes

The threshold for inclusion in these results is 5% usage in the most recent WebAIM screen reader survey. Chrome and Android still fall below the 5% threshold.

All tests were carried out with screen reader factory settings. JAWS in particular has a wide variety of settings controlling exactly what gets spoken.

Screen readers allow users to interact in different modes, and can produce very different results in each mode. The modes used in these tests are:

In the «What the user hears» column: