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