Skip to main content

Explore Web Accessibility (a11y)

Back to navigation

Accessible Information and Data Visualization

What is information?

Information means some facts provided or learned about something or someone. It could be of multiple types:
  • Text
  • Image
  • Audio
  • Video
Information can be shared via different mediums. For example
  • Online resources
  • Print - Newspapers, banners, posters, etc.
  • Audio - radio, broadcast, podcast, etc.
  • Video - Television, youtube videos, etc.
  • Electronic documents

Data Visualization

Data is defined as facts or figures, or information that's stored in or used by a computer. Data Visualization is the visual representation of data which uses visual elements like Charts, Graphs, Maps, etc. to represent the patterns and trends of that data.

Accessibility should be core goal of information and data visualization

Accessible Information

The information should be accessible to all people regardless of their disabilities or technical challenges. It should be presented in ways that can be perceived and understood by people using different senses, like eyes, ears, or touch.

Tips for accessible information:
  • Use of clear and simple language
  • Use of proper font style, size and color
  • Provide alternative formats to media like images, audio, video

Accessible Data Visualization

  • Add descriptive title to the visualization - it should provide key takeaways to the user
  • Provide alternative text - it should contain a short description of what it is, type of visualization, and it could include a link to alternate data format (like tables) or CSV files.
  • Don't rely only on colors to explain the data - label the data so that it is easily distinguishable by users with any sort of color blindness or cognitive conditions
  • Use white spaces to distingish between different sections of the data
  • Use proper color contrast. Low contrast cna make things harder to read. Bright contrast can be painful for eyes and overwhelming for users with sensory conditions.
  • Provide keyboard accessibility. Any data shown on hover should also be available to users using assistive technologies.
  • While using animations, respect user device settings. Don;t show animations if user does not want to see them. provide alternatives for it. We can use CSS media query prefers-reduced-motion to control the content to show as per user device settings.

Resources for reference: