What am I talking about?

  • How can adding interactivity to charts can improve accessibility?


  • How do we design and implement interactive elements in an accessible way?


  • Examples of adding tooltips to charts

Screenshot of a chart with an example tooltip

Different types of interactive content

  • Dynamic effects: tooltips, hover effects, crosshairs, …
    • Passive, most of the information is usually displayed by default


  • Interaction: dropdowns, check boxes, …
    • Active, most of the information is usually only displayed after a user action

Gif of me interacting with a Beeswarm plot using hover and dropdown effects

Jurassic park gif with phrase just because you can doesn't mean you should

How does interactivity affect accessibility?

More accessible

  • Gives alternative or additional ways of accessing information
  • Able to give users choices
    • Choose the best colour palette for your requirements
    • Choose best presentation (line chart vs table)
  • Overcome accessibility issues in static chart elements e.g. colour legends

Less accessible

  • Users unable to navigate content
  • Can obscure the point of the visualisation
  • Introduces more elements, busier screen

Interactivity done well can improve accessibility.

Interactivity done badly can make it worse.

What are you building it with?

  • Interactive chart libraries:
    • e.g. Plotly, Highcharts, …
    • Some are more accessible than others
  • Dashboard frameworks
    • e.g. Shiny, Tableau, PowerBI, …
    • Not usually accessible by default
    • Can be difficult to make accessible after building
  • Build it yourself
    • More time consuming and requires development skills
    • Start by thinking about accessibility
    • Template files

Accessible designs

  • Don’t hide information behind interactive elements, where possible.
  • Elements should be keyboard navigable (including no keyboard trap).
    • Different ways of making selections e.g. hold Ctrl and drag an area vs click checkboxes.
  • Elements should be properly tagged for screenreaders to understand them.
  • Alt text is updated.
  • Ensure there’s enough time for someone to read it e.g. tooltips shouldn’t be too mouse-sensitive.
  • Anything that moves/flashes/scrolls by itself can be turned off.
  • All standards for static charts also apply e.g. contrast, colours, text sizes

Accessibility testing

  • Automated accessibility testing approaches exist e.g. Google Lighthouse, but they miss alot of things. Manual testing is necessary.

  • There is no substitute for user testing with a diverse range of users.

  • Ensure you perform testing across different device types i.e. mobile and desktop. We interact with content differently using different devices.

Screenshot of Google Lighthouse

Let’s look at this line chart example

  • Direct labels are better than legends.
  • But where lines intersect, it’s difficult to track where the lines go.
  • Which category is which?

Created with {ggiraph} 🦒

Tooltips: positioning 

gg_int <- gg +
  geom_line_interactive(
    mapping = aes(
      tooltip = round(100 * y)
    ),
    linewidth = 1
  )
girafe(ggobj = gg_int)

Tooltips: positioning 

gg_int <- gg +
  geom_line(linewidth = 1) +
  geom_point_interactive(
    mapping = aes(
      tooltip = round(100 * y)
    ),
    size = 5,
    colour = "transparent"
  )
girafe(ggobj = gg_int)

Tooltips: content 

gg_int <- gg +
  geom_line(linewidth = 1) +
  geom_point_interactive(
    mapping = aes(
      tooltip = paste0(round(100 * y), "%")
    ),
    size = 5,
    colour = "transparent"
  )
girafe(ggobj = gg_int)

Tooltips: content 

gg_int <- gg +
  geom_line(linewidth = 1) +
  geom_point_interactive(
    mapping = aes(
      tooltip = paste0(
        category, ": ",
        round(100 * y), "%"
      )
    ),
    size = 5,
    colour = "transparent"
  )
girafe(ggobj = gg_int)

Tooltips: styling 

girafe(ggobj = gg_int)

Tooltips: styling 

girafe(
  ggobj = gg_int,
  options = list(
    opts_tooltip(
      delay_mouseout = 1000,
      css = "padding: 5pt;
             font-family: sans-serif;
             font-size: 1.5em;
             color: black;
             background-color: #B8B8B8;"
    )
  )
)


Speak to other human beings



Collaborate with other people e.g. users, user researchers, graphic designers, interaction designers, software developers, and disability networks. Don’t sit in a statistical bubble!

Resources