WAI-ARIA

As explained in Everyday Data Visualization

A W3C standard defining roles, states, properties, and attributes that improve the accessibility of dynamic web content.

WAI-ARIA is a W3C standard for making dynamic web content more accessible. For data visualizations, it supplies screen-reader-friendly labels for elements that ordinary image descriptions cannot fully cover. section 7.3.4

Use ARIA labels to make chart elements easier to navigate:

• Use aria-label when the accessible name is not visibly displayed. section 7.3.4
• Use aria-labeledBy to reuse visible text from another object through its id attribute. section 7.3.4
• Keep labels brief—about three words—and give each bar or chart element its own name. section 7.3.4

Figure 7.13 Using the graph from the previous two figures, this is what ARIA labels could look like for those bars. Each bar would have its own corresponding label, all of which are shown together in the yellow box to the right.

The figure shows how individual bars in a graph can receive corresponding ARIA labels, making the visualization readable through a screen reader. section 7.3.4

How Everyday Data Visualization covers it

How deep it goes

Explains two accessible-name attributes and bar-level labels, but stops short of broader ARIA internals.

Examples

Uses bar graphs and short labels assigned individually to their bars.

What it assumes

Assumes screen-reader and HTML-attribute context while offering a skip point for non-coders.

What you can do after

Apply it via aria-label and aria-labeledBy to give chart elements concise screen-reader names.

How it connects

Connects screen readers, accessible names, alt text, data visualizations, and W3C.

liveBookmanning.com

Read Everyday Data Visualization on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  React in DepthWAI-ARIA is a W3C specification defining semantics, roles, states, and properties that make web content accessible to assistive technologies.
• 

  liveBookmanning.com
  WordPress Power Toolkit: Harness AI to build next-level websitesAccessible Rich Internet Applications (ARIA) is a web standard for adding semantic roles, states, and properties to HTML interfaces so assistive technologies can interpret them.

Compare how 3 books explain WAI-ARIA →

Related concepts

• accessibilitycontrasts with · Accessibility is the degree to which a product, service, system, or information can be accessed, understood, and used by people with diverse abilities and access needs.
• getByRoleused by · getByRole is a user-interface testing query that locates an element by its accessible role and optionally its accessible name.
• ARIA labelhas part · The aria-label attribute directly provides an accessible name for an interface element as text.
• HTMLuses · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.

This explainer was generated by Manning's knowledge graph from the text of Everyday Data Visualization. The section links point to the parts of the book it draws on.