Aria semantics
ARIA semantics are WAI-ARIA roles, states, and properties that communicate interface elements’ meaning and behavior to browsers and assistive technologies.
D3.js in Action, Third Edition
The role attribute assigns an accessibility semantic that describes how an element should be interpreted by assistive technologies.
- How it is used
- Improves screen-reader interpretation of SVG visualizations, controls, legends, and page structure.
- How deep it goes
- Demonstrates role, title, desc, aria-labelledby, aria-pressed, and data-table alternatives through working visualization markup.
- Examples
- Uses a cetacean scatterplot, weight and color legends, filter buttons, a chart toggle, and an alternative data table.
- What you can do after
- Build accessible SVG charts by assigning roles, linking descriptions, labeling legends, and exposing equivalent tabular data.
Read how D3.js in Action, Third Edition explains aria semantics →
Data Analysis with LLMs
A role attribute identifies the source type of a chat message, such as user, assistant, or system.
- How it is used
- Structures chat history for chat completion by identifying each message’s source alongside its content.
- How deep it goes
- Defines user, assistant, and system roles, explains system guidance, and does not demonstrate system messages in use.
- Examples
- Shows a user asking for a story and gives system guidance examples such as “You are a helpful assistant.”
- What you can do after
- Build a Python chat message by assigning it a role and content.
React in Depth
An ARIA role is a semantic classification that describes how an element should be understood and interacted with by users and assistive technologies.
- How it is used
- Uses semantic roles to query React components through their programmatic accessibility interface.
- How deep it goes
- Defines native roles and applies them in a focused test, but does not develop ARIA authoring rules or custom-role design.
- Examples
- Uses a MenuItem containing li and a elements, tested through listitem and link role queries.
- What you can do after
- Apply via React Testing Library by locating elements through roles and asserting accessible component behavior.
WordPress Power Toolkit: Harness AI to build next-level websites
An ARIA role is a semantic label assigned to an HTML element to identify its interface purpose or content type to assistive technologies.
- How it is used
- Improves screen-reader clarity and helps evaluate whether website themes expose meaningful structural roles.
- How deep it goes
- Defines roles and demonstrates inspection and automated testing, but does not explain role implementation in code.
- Examples
- Uses presentation, option, list box, and group roles, plus Inspector, Web Developer, WordPress, and Lighthouse checks.
- What you can do after
- Evaluate theme accessibility by inspecting role attributes and reviewing Lighthouse accessibility diagnostics.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains aria semantics →
Related concepts
- getByRoleused by · getByRole is a user-interface testing query that locates an element by its accessible role and optionally its accessible name.
- WAI-ARIAhas part · WAI-ARIA is a W3C specification defining roles, states, properties, and other accessibility semantics for communicating web interface information to assistive technologies.
- HTMLpart of · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.