area
with aria-label
attribute
Screen reader compatibility
ARIA HTML WCAG
Sep 11, 2022
Expected Result: works in a screen reader
Actual Result: causes problems in 38 screen reader / browser combinations
WCAG Technique: ARIA6
Code used for this test:
<img src='1234.png' alt='this is alt text' usemap='#area_aria_label_map1'>
<map id='area_aria_label_map1' name='area_aria_label_map1'>
<area aria-label='this is left aria label text' coords='0,0,100,100' href='left_arrow.htm' target='frame1'></area>
<area aria-label='this is right aria label text' coords='200,0,300,100' href='right_arrow.htm' target='frame1'></area>
</map>
Reliability Trend
This graph shows reliability over time for this code in NVDA, JAWS and Voiceover. Other screen readers don't have enough historical data yet to plot trends.
Change History
Last updated: September 11, 2022
NVDA with Chrome Stable - OK from NVDA 2018.4 to NVDA 2022.2
NVDA with IE Causes problems in NVDA 2019.2
NVDA with FF Better - caused problems in NVDA 2016.2, but now OK in NVDA 2022.2
JAWS with Chrome Stable - OK from JAWS 2018.1811.2 to JAWS 2022.2207.25
JAWS with IE Better - caused problems in JAWS 13.0.852, but now OK in JAWS 2019.1912.1
JAWS with FF Better - caused problems in JAWS 2018.1811.2, but now OK in JAWS 2022.2207.25
VoiceOver macOS Better - caused problems in VoiceOver macOS 10.11, but now OK in VoiceOver macOS 12.5
VoiceOver iOS Causes problems from VoiceOver iOS 7.1 to VoiceOver iOS 15.6
WindowEyes with IE Better - caused problems in WindowEyes 8.4, but now OK in WindowEyes 9.2
Dolphin with IE Causes problems in Dolphin SR 15.05
SaToGo with IE Causes problems in SaToGo 3.4.96.0
Screen reader | Browser | Mode | Notes | What the user hears |
---|---|---|---|---|
![]() | Chrome 105 | Reading | Link, this is left aria label text, link, this is right aria label text. | |
![]() | Chrome 105 | Tabbing | This is left aria label text, link. This is right aria label text, link. | |
![]() | FF102 | Reading | This is alt text, graphic, this is alt text, This is alt text, graphic link, this is left aria label text. This is alt text, graphic link, this is right aria label text. | |
![]() | FF102 | Tabbing | This is left aria label text, link, this is alt text, graphic. This is right aria label text, link, this is alt text, graphic | |
![]() | Edge 105 | Reading | Link, this is left aria label text, link, this is right aria label text | |
![]() | Edge 105 | Tabbing | This is left aria label text, link. This is right aria label text, link. | |
![]() | Chrome 94 | Reading | Link, this is left aria label text, link, this is right aria label text. | |
![]() | Chrome 94 | Tabbing | This is left aria label text, link. This is right aria label text, link. | |
![]() | FF91 | Reading | This is alt text, graphic, this is alt text, This is alt text, graphic link, this is left aria label text. This is alt text, graphic link, this is right aria label text. | |
![]() | FF91 | Tabbing | This is left aria label text, link, this is alt text, graphic. This is right aria label text, link, this is alt text, graphic | |
![]() | Edge 94 | Reading | Link, this is left aria label text, link, this is right aria label text | |
![]() | Edge 94 | Tabbing | This is left aria label text, link. This is right aria label text, link. | |
![]() | Chrome 86 | Reading | Link, this is left aria label text, link, this is right aria label text. | |
![]() | Chrome 86 | Tabbing | This is left aria label text, link. This is right aria label text, link. | |
![]() | FF78 | Reading | This is alt text, graphic, this is alt text, This is alt text, graphic link, this is left aria label text. This is alt text, graphic link, this is right aria label text. | |
![]() | FF78 | Tabbing | This is left aria label text, link, this is alt text, graphic. This is right aria label text, link, this is alt text, graphic | |
![]() | Edge 92 | Reading | Link, this is left aria label text, link, this is right aria label text | |
![]() | Edge 92 | Tabbing | This is left aria label text, link. This is right aria label text, link. | |
![]() | Chrome 79 | Reading | Link, this is left aria label text, link, this is right aria label text. | |
![]() | Chrome 79 | Tabbing | This is left aria label text, link. This is right aria label text, link. | |
![]() | FF68 | Reading | This is alt text, graphic, this is alt text, This is alt text, graphic link, this is left aria label text. This is alt text, graphic link, this is right aria label text. | |
![]() | FF68 | Tabbing | This is left aria label text, link, this is alt text, graphic. This is right aria label text, link, this is alt text, graphic | |
![]() | IE11 | Reading | Graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | IE11 | Tabbing | Complete silence when tabbing between AREAs. | |
![]() | Chrome 73 | Reading | Link, this is left aria label text, link, this is right aria label text. | |
![]() | Chrome 73 | Tabbing | This is left aria label text, link. This is right aria label text, link. | |
![]() | FF60 | Reading | Graphic, this is alt text, This is alt text, graphic link, this is left aria label text. This is alt text, graphic link, this is right aria label text. | |
![]() | FF60 | Tabbing | This is left aria label text, link, this is alt text, graphic. This is right aria label text, link, this is alt text, graphic | |
![]() | IE11 | Reading | Graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | IE11 | Tabbing | Complete silence when tabbing between AREAs. | |
![]() | FF60 | Reading | Graphic, this is alt text, Graphic link, this is left aria label text. Graphic link, this is right aria label text. | |
![]() | FF60 | Tabbing | This is left aria label text, link, this is alt text, graphic. This is right aria label text, link, this is alt text, graphic | |
![]() | IE11 | Reading | Graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | IE11 | Tabbing | Complete silence when tabbing between AREAs. | |
![]() | FF48 | Reading | No indication AREA links exist | Graphic, this is alt text, this is alt text |
![]() | FF48 | Tabbing | This is left aria label text, link. This is right aria label text, link | |
![]() | IE11 | Reading | Graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | IE11 | Tabbing | Complete silence when tabbing between AREAs. | |
![]() | FF40 | Reading | No indication AREA links exist | Graphic, this is alt text, this is alt text |
![]() | FF40 | Tabbing | This is left aria label text, link. This is right aria label text, link | |
![]() | IE11 | Reading | Graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | IE11 | Tabbing | Complete silence when tabbing between AREAs. | |
![]() | FF28 | Reading | graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | FF28 | Tabbing | silent for second tab onto second area | This is alt text, link, this is left aria label text, link, this is right aria label text, graphic - all read for 1st link |
![]() | IE11 | Reading | graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | IE11 | Tabbing | Silence when tabbing to AREA links - no indication of image map role or name | |
![]() | FF28 | Reading | graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | FF28 | Tabbing | silent for second tab onto second area | This is alt text, link, this is left aria label text, link, this is right aria label text, graphic - all read for 1st link |
![]() | IE11 | Reading | graphic, this is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | IE11 | Tabbing | Silence when tabbing to AREA links - no indication of image map role or name | |
![]() | Chrome 105 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | Chrome 105 | Tabbing | This is alt text, image map, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | FF102 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | FF102 | Tabbing | This is alt text, graphic, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | Edge 105 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | Edge 105 | Tabbing | This is alt text, image map, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | Chrome 94 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | Chrome 94 | Tabbing | This is alt text, image map, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | FF91 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | FF91 | Tabbing | This is alt text, graphic, this is left aria label text, link. This is right aria label text, link. | |
![]() | Edge 94 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | Edge 94 | Tabbing | This is alt text, image map, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | Chrome 86 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | Chrome 86 | Tabbing | This is alt text, image map, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | FF78 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | FF78 | Tabbing | This is alt text, graphic, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | Edge 92 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | Edge 92 | Tabbing | This is alt text, image map, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | Chrome 79 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | Chrome 79 | Tabbing | This is alt text, image map read only, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | FF68 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | FF68 | Tabbing | This is alt text, graphic, this is left aria label text, image map link graphic. This is right aria label text, image map link graphic. | |
![]() | IE11 | Reading | This is alt text, graphic. Image map link, this is left aria label text. Image map link, this is right aria label text. | |
![]() | IE11 | Tabbing | This is left aria label text, image map link. This is right aria label text, image map link. | |
![]() | Chrome 73 | Reading | Image map link graphic, this is left aria label text. Image map link graphic, this is right aria label text. | |
![]() | Chrome 73 | Tabbing | Tab, this is alt text, image map read only, this is left aria label text, image map link graphic. Tab, this is right aria label text, image map link graphic. | |
![]() | FF60 | Reading | ARIA label ignored and link URL gibberish read out. | Image map link graphic, left underline arrow. Image map link graphic, right underline arrow. |
![]() | FF60 | Tabbing | Tab, this is alt text, graphic, this is left aria label text, image map link graphic. Tab, this is right aria label text, image map link graphic. | |
![]() | IE11 | Reading | Graphic, this is alt text. Image map link, this is left aria label text. Image map link, this is right aria label text. | |
![]() | IE11 | Tabbing | Tab, this is left aria label text, image map link. Tab, this is right aria label text, image map link. | |
![]() | FF52 | Reading | No indication that areas are links | Graphic, this is alt text. Graphic, this is left aria label text. Graphic, this is right aria label text |
![]() | FF52 | Tabbing | Tab, this is alt text, graphic, this is left aria label text, image map. Tab, this is right aria label text, image map. | |
![]() | IE11 | Reading | Graphic, this is alt text. Image map link, this is left aria label text. Image map link, this is right aria label text. | |
![]() | IE11 | Tabbing | Tab, this is left aria label text, image map link. Tab, this is right aria label text, image map link. | |
![]() | FF48 | Reading | No indication that areas are links | Graphic, this is alt text. Graphic, this is left aria label text. Graphic, this is right aria label text |
![]() | FF48 | Tabbing | This is alt text, graphic, this is left aria label text, image map. This is right aria label text, image map. | |
![]() | IE11 | Reading | Graphic, this is alt text. Image map link, this is left aria label text. Image map link, this is right aria label text. | |
![]() | IE11 | Tabbing | This is left aria label text, image map link. This is right aria label text, image map link. | |
![]() | FF40 | Reading | No indication that areas are links | Graphic, this is left aria label text, this is right aria label text. Graphic, this is left aria label text. Graphic, this is right aria label text |
![]() | FF41 | Tabbing | This is left aria label text, image map. This is right aria label text, image map. | |
![]() | IE11 | Reading | Graphic, this is alt text. Image map link, this is left aria label text. Image map link, this is right aria label text. | |
![]() | IE11 | Tabbing | This is left aria label text, image map link. This is right aria label text, image map link. | |
![]() | FF29 | Reading | no indication of links | Graphic, this is left aria label text, this is right aria label text. Graphic, this is left aria label text. Graphic, this is right aria label text |
![]() | FF29 | Tabbing | silence on second tab | This is left aria label text, this is right aria label text, image map. |
![]() | IE11 | Reading | Graphic, this is alt text. Image map link, this is left aria label text. Image map link, this is right aria label text. | |
![]() | IE11 | Tabbing | This is left aria label text, image map link. This is right aria label text, image map link. | |
![]() | FF29 | Reading | no indication of links | graphic, this is left aria label text, this is right aria label text, graphic, this is left aria label text, graphic, this is right aria label text |
![]() | FF29 | Tabbing | silence on second tab | This is left aria label text, this is right aria label text, image map |
![]() | IE11 | Reading | graphic, this is alt text, image map link, this is left aria label text, image map link, this is right aria label text | |
![]() | IE11 | Tabbing | This is left aria label text, image map link, this is right aria label text, image map link | |
![]() | FF28 | Reading | no indication of image map links | graphic, this is alt text |
![]() | FF28 | Tabbing | wrong alt read out when tabbing | This is alt text, graphic. for first area, silence for second area |
![]() | IE11 | Reading | URLs read out instead of ARIA-LABEL | graphic, this is alt text, image map link, test slash left underline arrow, image map link, test slash right underline arrow |
![]() | IE11 | Tabbing | URLs read out instead of ARIA-LABEL | Test slash left underline arrow, image map link, test slash right underline arrow, image map link |
![]() | IE11 | Reading | This is alt text. Link, this is left aria label text. Link, this is right aria label text | |
![]() | IE11 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | IE11 | Reading | This is alt text, link, this is left aria label text, link, this is right aria label text | |
![]() | IE11 | Tabbing | Silence when tabbing to AREA links - no indication of image map role or name | |
![]() | Safari 15.6 | Reading | This is alt text, image map. In, this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 15.6 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 15.0 | Reading | This is alt text, image map. In, this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 15.0 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 14.1 | Reading | This is alt text, image map. In, this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 14.1 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 13.0 | Reading | This is alt text, image map. In, this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 13.0 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 12.1 | Reading | This is alt text, image map. In, this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 12.1 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 10.1.2 | Reading | This is alt text, image map. Interact with: this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 10.1.2 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 9.1.2 | Reading | This is alt text, image map. Interact with: this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 9.1.2 | Tabbing | IMG ALT text read out instead of AREA ARIA-LABEL for first AREA link | This is alt text, image map. Link, this is right aria label text |
![]() | Safari 8.0.6 | Reading | This is alt text, image map. Interact with: this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 8.0.6 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 7.0.3 | Reading | This is alt text, image map. Interact with: this is alt text, image map, 2 items, link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari 7.0.3 | Tabbing | Link, this is left aria label text. Link, this is right aria label text | |
![]() | Safari iOS 15.6 | Touch | Very 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. | This is alt text. (This is left ARIA label text, link. This is right ARIA label text, link.) |
![]() | Safari iOS 14.7 | Touch | Very 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. | This is alt text. (This is left ARIA label text, link. This is right ARIA label text, link.) |
![]() | Safari iOS 13.3 | Touch | Very 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. | This is alt text. (This is left ARIA label text, link. This is right ARIA label text, link.) |
![]() | Safari iOS 12.4 | Touch | Very 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. | This is alt text. (This is left ARIA label text, link. This is right ARIA label text, link.) |
![]() | Safari iOS 11.4 | Touch | Very 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. | This is alt text. (This is left ARIA label text, link. This is right ARIA label text, link.) |
![]() | Safari iOS 10.3 | Touch | Very 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. | This is alt text. |
![]() | Safari iOS 9.1 | Touch | Very 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. | This is alt text. |
![]() | Safari iOS 8.4 | Touch | Very 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. | This is alt text. |
![]() | Safari iOS 7.1 | Touch | Very 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. | This is alt text. |
![]() | IE11 | Reading | No link labels read for AREA | This is alt text. Link. Link. |
![]() | IE11 | Tabbing | no link labels read | Link. Link |
![]() | IE11 | Reading | no link labels read | link, link |
![]() | IE11 | Tabbing | no link labels read | link, link |
SortSite rules: AccHtmlAreaNoAlt
Test notes
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:
- Reading Content read using the “read next” command in a screen reader
- Tabbing Content read using the “tab” key in a screen reader
- Heading Content read using the “next heading” key in a screen reader
- Touch Content read when touching an area of screen on a mobile device
In the “What the user hears” column:
- Commas represent short pauses in screen reader voicing
- Full Stops represent places where voicing stops, and the “read next” or “tab” or “next heading” command is pressed again
- Ellipsis … represent a long pause in voicing
- (Brackets) represent voicing that requires a keystroke to hear