Maps, charts, figures
Mapbox Map
| Description | Label the map with a heading or aria-label |
|---|---|
| Role | Infoboxes should use role="status" to update the screen reader. |
| Relationships | aria-labelledby="heading-id" can be used instead of aria-label |
| Focus | Map controls should be focusable with tab key |
| Action | tab key / swipe should focus control buttons, enter / spacebar / double tap should activate |
Embedded map (like Google Maps)
| Description | Label the map in a heading, iFrame should include title attribute |
|---|---|
| Relationships | aria-labelledby="heading-id" can be used |
| Focus | Map controls should be focusable with tab key |
| Action | tab key should focus control buttons, enter or spacebar should activate |
Figures
| Description | Label the figure in a heading |
|---|---|
| Role | Wrap chart/map in a <figure> element |
| Relationships | Wrap the source in <cite> |
Simple image chart
| Description | Label the chart in a heading, img should have alt attribute |
|---|---|
| Role | Wrap chart in a <figure> element with a <cite> of the source. |
| Relationships | aria-labelledby="heading-id" can be used, longdesc can be used to point to a long description file |
General guidelines
- Any map, chart or figure should be able to explain its content or provide an alternative way of accessing its data.
- Ex: A map of service coverage options that allows search by address
- Ex: A simple bar chart image can use alt text to describe the values represented in the chart
- Ex: A complex chart can include the data in table form
- Results from a map (i.e. from a search) should use role="status".
- Contrast guidelines apply to colors and text