ARIA attributes

Accessibility properties for screen readers.

Impact

(How ScanGov measures tasklist priorities.)

Why it's important

ARIA properties make content accessible to users relying on screen readers, enhancing their experience.

User stories

As a user with a screen reader, I want the website to provide proper semantic information for dynamic elements, so that I can easily understand their purpose and interact with them without confusion.

Error

(ScanGov messaging when a site fails a standard)

Missing ARIA attributes for screen readers.

About

These are opportunities to improve the usage of ARIA in your application which may enhance the experience for users of assistive technology, like a screen reader.

You don’t always need aria- attributes in your application for it to be accessible. When you do use aria- attributes follow these recommendations to make sure they are helpful.

Contains:

  1. [aria-*] attributes match their roles: Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes.

  2. Uses ARIA roles only on compatible elements: Many HTML elements can only be assigned certain ARIA roles. Using ARIA roles where they are not allowed can interfere with the accessibility of the web page.

  3. button, link, and menuitem elements have accessible names: When an element doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers.

  4. ARIA attributes are used as specified for the element’s role: Some ARIA attributes are only allowed on an element under certain conditions.

  5. Deprecated ARIA roles were not used: Deprecated ARIA roles may not be processed correctly by assistive technology.

  6. Elements with role="dialog" or role="alertdialog" have accessible names: ARIA dialog elements without accessible names may prevent screen readers users from discerning the purpose of these elements.

  7. [aria-hidden="true"] is not present on the document <body>: Assistive technologies, like screen readers, work inconsistently when aria-hidden="true" is set on the document <body>.

  8. [aria-hidden="true"] elements do not contain focusable descendents: Focusable descendents within an [aria-hidden="true"] element prevent those interactive elements from being available to users of assistive technologies like screen readers.

  9. ARIA input fields have accessible names: When an input field doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers.

  10. ARIA meter elements have accessible names: When a meter element doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers.

  11. ARIA progressbar elements have accessible names: When a progressbar element doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers.

  12. Elements use only permitted ARIA attributes: Using ARIA attributes in roles where they are prohibited can mean that important information is not communicated to users of assistive technologies.

  13. [role]s have all required [aria-*] attributes: Some ARIA roles have required attributes that describe the state of the element to screen readers.

  14. Elements with an ARIA [role] that require children to contain a specific [role] have all required children: Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions.

  15. [role]s are contained by their required parent element: Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions.

  16. [role] values are valid: ARIA roles must have valid values in order to perform their intended accessibility functions.

  17. Elements with the role=text attribute do not have focusable descendents: Adding role=text around a text node split by markup enables VoiceOver to treat it as one phrase, but the element’s focusable descendents will not be announced.

  18. ARIA toggle fields have accessible names: When a toggle field doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers.

  19. ARIA tooltip elements have accessible names: When a tooltip element doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers.

  20. ARIA treeitem elements have accessible names: When a treeitem element doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers.

  21. [aria-*] attributes have valid values: Assistive technologies, like screen readers, can’t interpret ARIA attributes with invalid values.

  22. [aria-*] attributes are valid and not misspelled: Assistive technologies, like screen readers, can’t interpret ARIA attributes with invalid names.

  23. ARIA IDs are unique: The value of an ARIA ID must be unique to prevent other instances from being overlooked by assistive technologies.

Guidance

Indicator

Feedback