AREA with ALT attribute Screen reader compatibility

Last updated: September 5, 2016

Expected Result: works in a screen reader

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

Client-side image maps are one of the oldest features with accessibility support on the web platform. They were introduced in RFC 1980 in August 1996, with accessibility support provded by the AREA ALT attribute. More than 20 years later, support in screen readers is still patchy, not helped by a series of incompatible changes introduced in successive HTML specs.

WCAG Technique: H24

Code used for this test:


        <img src='1234.png' usemap='#h24_map1' alt='Areas in the library.    Select an area for more information on that area.'>
        <map id='h24_map1' name='h24_map1'>
          <area shape='rect' coords='0,0,30,30' href='reference.html' alt='Reference'></area>
          <area shape='rect' coords='34,34,100,100' href='media.html' alt='Audio visual lab'></area>
        </map>
    

Change History

Last updated: September 5, 2016

Screen readerBrowserModeNotesWhat the user hears
Fail NVDA 2016.2FF48 ReadingReads ALT on parent IMG over and over, with no indication of AREA links (exactly what gets read is affected by surrounding content). Speak Graphic, areas in the library. Graphic, select an area for more information on that area, dot, areas in the library. Graphic, select an area for more information on that area.
OK NVDA 2016.2FF48 Tabbing Speak Reference link rect. Audio visual lab link rect.
OK NVDA 2016.2IE11 Reading Speak Graphic, areas in the library. Graphic, select an area for more information on that area, link reference, link audio visual lab.
Fail NVDA 2016.2IE11 TabbingComplete silence when tabbing between AREAs.
Fail NVDA 2015.2FF41 ReadingReads ALT on parent IMG over and over, with no indication of AREA links (exactly what gets read is affected by surrounding content). Speak Graphic, areas in the library. Graphic, select an area for more information on that area, dot, areas in the library. Graphic, select an area for more information on that area.
OK NVDA 2015.2FF41 Tabbing Speak Reference link rect. Audio visual lab link rect.
OK NVDA 2015.2IE11 Reading Speak Graphic, areas in the library. Graphic, select an area for more information on that area, link reference, link audio visual lab.
Fail NVDA 2015.2IE11 TabbingComplete silence when tabbing between AREAs.
OK NVDA 2014.1FF29 Reading Speak Graphic, areas in the library. Graphic, select an area for more information on that area, link reference, link audio visual lab.
Fail NVDA 2014.1FF29 TabbingReads out ALT text of IMG and all AREAs for first link, silence for next link. Speak Areas in the library, select an area for more information on that area, reference link rect, audio visual lab link rect, graphic.
OK NVDA 2014.1IE11 Reading Speak Graphic, areas in the library. Graphic, select an area for more information on that area, link reference, link audio visual lab.
Fail NVDA 2014.1IE11 TabbingInconsistent behavior - often complete silence for every tab.
Fail JAWS 17.0.2619FF48 ReadingNo link role read out. Speak Graphic, areas in the library. Graphic, select an area for more information on that area. Graphic, reference. Graphic, audio visual lab.
OK JAWS 17.0.2619FF48 Tabbing Speak Areas in the library, select an area for more information on that area, graphic, reference image map. Audio visual lab, image map.
OK JAWS 17.0.2619IE11 Reading Speak Graphic, areas in the library. Graphic, select an area for more information on that area. Image map link, reference. Image map link, audio visual lab.
OK JAWS 17.0.2619IE11 Tabbing Speak Reference, image map link. Audio visual lab, image map link.
Fail JAWS 16.0.4350FF41 ReadingNo link role read out. Speak Graphic, reference, audio visual lab.
OK JAWS 16.0.4350FF41 Tabbing Speak Areas in the library, select an area for more information on that area, graphic, reference image map. Audio visual lab, image map.
OK JAWS 16.0.4350IE11 Reading Speak Graphic, areas in the library. Graphic, select an area for more information on that area. Image map link, reference. Image map link, audio visual lab.
OK JAWS 16.0.4350IE11 Tabbing Speak Reference, image map link. Audio visual lab, image map link.
Fail JAWS 15.0.9023FF29 ReadingNo link role read out. Speak Graphic, reference, audio visual lab. Graphic, reference. Graphic, audio visual lab.
Fail JAWS 15.0.9023FF29 TabbingSilence on second link. Bizzare stuff happens when link activated. Speak Reference, audio visual lab, image map.
OK JAWS 15.0.9023IE11 Reading Speak Graphic, areas in the library. Graphic, select an area for more information on that area. Image map link, reference. Image map link, audio visual lab.
OK JAWS 15.0.9023IE11 Tabbing Speak Reference, image map link. Audio visual lab, image map link.
OK WindowEyes 9.2IE11 Reading Speak Areas in the library, select an area for more information on that area. Link, reference. Link, audio visual lab.
OK WindowEyes 9.2IE11 Tabbing Speak Link, reference. Link, audio visual lab.
OK WindowEyes 8.4IE11 Reading Speak Areas in the library. Select an area for more information on that area. Link, reference. Link, audio visual lab.
Fail WindowEyes 8.4IE11 TabbingSilence when tabbing to AREA links - no indication of image map role or name
OK VoiceOver OSX 10.11Safari 9.1.2 Reading Speak Areas in the library, select an area for more information on that area, image map. Interact with areas in the library, select an area for more information on that area, image map, 2 items, link, reference. Link, audio visual lab.
Fail VoiceOver OSX 10.11Safari 9.1.2 TabbingIMG ALT text read out instead of AREA ALT text for first AREA link Speak Areas in the library, select an area for more information on that area, image map. Link, audio visual lab
OK VoiceOver OSX 10.10Safari 8.0.6 Reading Speak Areas in the library, select an area for more information on that area, image map. Interact with areas in the library, select an area for more information on that area, image map, image map, 2 items, link, reference. Link, audio visual lab.
OK VoiceOver OSX 10.10Safari 8.0.6 Tabbing Speak Link, reference. Link, audio visual lab
OK VoiceOver OSX 10.9Safari 7.0.3 Reading Speak Areas in the library, select an area for more information on that area, image map. Interact with areas in the library, select an area for more information on that area, image map, image map, 2 items, link, reference. Link, audio visual lab.
OK VoiceOver OSX 10.9Safari 7.0.3 Tabbing Speak Link, reference. Link, audio visual lab
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 Areas in the library, select an area for more information on that area.
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 Areas in the library, select an area for more information on that area.
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 Areas in the library, select an area for more information on that area.
OK Dolphin SR 15.05IE11 Reading Speak Areas in the library, select an area for more information on that area. Reference, link. Audio visual lab, link.
OK Dolphin SR 15.05IE11 Tabbing Speak Reference, link. Audio visual lab, link.

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: