ARIA

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 href="#contains"

[aria-*] attributes match their roles href="#aria--attributes-match-their-roles"

Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn how to match ARIA attributes to their roles.

Uses ARIA roles only on compatible elements href="#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. Learn more about ARIA roles.

button, link, and menuitem elements have accessible names href="#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. Learn how to make command elements more accessible.

ARIA attributes are used as specified for the element’s role href="#aria-attributes-are-used-as-specified-for-the-elements-role"

Some ARIA attributes are only allowed on an element under certain conditions. Learn more about conditional ARIA attributes.

Deprecated ARIA roles were not used href="#deprecated-aria-roles-were-not-used"

Deprecated ARIA roles may not be processed correctly by assistive technology. Learn more about deprecated ARIA roles.

Elements with role=”dialog” or role=”alertdialog” have accessible names. href="#elements-with-roledialog-or-rolealertdialog-have-accessible-names"

ARIA dialog elements without accessible names may prevent screen readers users from discerning the purpose of these elements. Learn how to make ARIA dialog elements more accessible.

[aria-hidden=”true”] is not present on the document <body> href="#aria-hiddentrue-is-not-present-on-the-document-body"

Assistive technologies, like screen readers, work inconsistently when aria-hidden="true" is set on the document <body>. Learn how aria-hidden affects the document body.

[aria-hidden=”true”] elements do not contain focusable descendents href="#aria-hiddentrue-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. Learn how aria-hidden affects focusable elements.

ARIA input fields have accessible names href="#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. Learn more about input field labels.

ARIA meter elements have accessible names href="#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. Learn how to name meter elements.

ARIA progressbar elements have accessible names href="#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. Learn how to label progressbar elements.

Elements use only permitted ARIA attributes href="#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. Learn more about prohibited ARIA roles.

[role]s have all required [aria-*] attributes href="#roles-have-all-required-aria--attributes"

Some ARIA roles have required attributes that describe the state of the element to screen readers. Learn more about roles and required attributes.

Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children. href="#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. Learn more about roles and required children elements.

[role]s are contained by their required parent element href="#roles-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. Learn more about ARIA roles and required parent element.

[role] values are valid href="#role-values-are-valid"

ARIA roles must have valid values in order to perform their intended accessibility functions. Learn more about valid ARIA roles.

Elements with the role=text attribute do not have focusable descendents. href="#elements-with-the-roletext-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. Learn more about the role=text attribute.

ARIA toggle fields have accessible names href="#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. Learn more about toggle fields.

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. Learn how to name tooltip elements.

ARIA treeitem elements have accessible names href="#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. Learn more about labeling treeitem elements.

[aria-*] attributes have valid values href="#aria--attributes-have-valid-values"

Assistive technologies, like screen readers, can’t interpret ARIA attributes with invalid values. Learn more about valid values for ARIA attributes.

[aria-*] attributes are valid and not misspelled href="#aria--attributes-are-valid-and-not-misspelled"

Assistive technologies, like screen readers, can’t interpret ARIA attributes with invalid names. Learn more about valid ARIA attributes.

ARIA IDs are unique href="#aria-ids-are-unique"

The value of an ARIA ID must be unique to prevent other instances from being overlooked by assistive technologies. Learn how to fix duplicate ARIA IDs.

Topics

On this page

Contains
[aria-*] attributes match their roles
Uses ARIA roles only on compatible elements
button, link, and menuitem elements have accessible names
ARIA attributes are used as specified for the element’s role
Deprecated ARIA roles were not used
Elements with role=”dialog” or role=”alertdialog” have accessible names.
[aria-hidden=”true”] is not present on the document <body>
[aria-hidden=”true”] elements do not contain focusable descendents
ARIA input fields have accessible names
ARIA meter elements have accessible names
ARIA progressbar elements have accessible names
Elements use only permitted ARIA attributes
[role]s have all required [aria-*] attributes
Elements with an ARIA


            [role]s are contained by their required parent element
          
        
      
        
          
          
          
          
          
          
          
          
            [role] values are valid
          
        
      
        
          
          
          
          
          
          
          
          
            Elements with the role=text attribute do not have focusable descendents.
          
        
      
        
          
          
          
          
          
          
          
          
            ARIA toggle fields have accessible names
          
        
      
        
          
          
          
          
          
          
          
          
            ARIA tooltip elements have accessible names
          
        
      
        
          
          
          
          
          
          
          
          
            ARIA treeitem elements have accessible names
          
        
      
        
          
          
          
          
          
          
          
          
            [aria-*] attributes have valid values
          
        
      
        
          
          
          
          
          
          
          
          
            [aria-*] attributes are valid and not misspelled
          
        
      
        
          
          
          
          
          
          
          
          
            ARIA IDs are unique

ARIA

Contains href="#contains"

[aria-*] attributes match their roles href="#aria--attributes-match-their-roles"

Uses ARIA roles only on compatible elements href="#uses-aria-roles-only-on-compatible-elements"

button, link, and menuitem elements have accessible names href="#button-link-and-menuitem-elements-have-accessible-names"

ARIA attributes are used as specified for the element’s role href="#aria-attributes-are-used-as-specified-for-the-elements-role"

Deprecated ARIA roles were not used href="#deprecated-aria-roles-were-not-used"

Elements with role=”dialog” or role=”alertdialog” have accessible names. href="#elements-with-roledialog-or-rolealertdialog-have-accessible-names"

[aria-hidden=”true”] is not present on the document <body> href="#aria-hiddentrue-is-not-present-on-the-document-body"

[aria-hidden=”true”] elements do not contain focusable descendents href="#aria-hiddentrue-elements-do-not-contain-focusable-descendents"

ARIA input fields have accessible names href="#aria-input-fields-have-accessible-names"

ARIA meter elements have accessible names href="#aria-meter-elements-have-accessible-names"

ARIA progressbar elements have accessible names href="#aria-progressbar-elements-have-accessible-names"

Elements use only permitted ARIA attributes href="#elements-use-only-permitted-aria-attributes"

[role]s have all required [aria-*] attributes href="#roles-have-all-required-aria--attributes"

Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children. href="#elements-with-an-aria-role-that-require-children-to-contain-a-specific-role-have-all-required-children"

[role]s are contained by their required parent element href="#roles-are-contained-by-their-required-parent-element"

[role] values are valid href="#role-values-are-valid"

Elements with the role=text attribute do not have focusable descendents. href="#elements-with-the-roletext-attribute-do-not-have-focusable-descendents"

ARIA toggle fields have accessible names href="#aria-toggle-fields-have-accessible-names"

ARIA tooltip elements have accessible names href="#aria-tooltip-elements-have-accessible-names"

ARIA treeitem elements have accessible names href="#aria-treeitem-elements-have-accessible-names"

[aria-*] attributes have valid values href="#aria--attributes-have-valid-values"

[aria-*] attributes are valid and not misspelled href="#aria--attributes-are-valid-and-not-misspelled"

ARIA IDs are unique href="#aria-ids-are-unique"

Related

Topics

ARIA

Contains href="#contains"

[aria-*] attributes match their roles href="#aria--attributes-match-their-roles"

Uses ARIA roles only on compatible elements href="#uses-aria-roles-only-on-compatible-elements"

button, link, and menuitem elements have accessible names href="#button-link-and-menuitem-elements-have-accessible-names"

ARIA attributes are used as specified for the element’s role href="#aria-attributes-are-used-as-specified-for-the-elements-role"

Deprecated ARIA roles were not used href="#deprecated-aria-roles-were-not-used"

Elements with role=”dialog” or role=”alertdialog” have accessible names. href="#elements-with-roledialog-or-rolealertdialog-have-accessible-names"

[aria-hidden=”true”] is not present on the document <body> href="#aria-hiddentrue-is-not-present-on-the-document-body"

[aria-hidden=”true”] elements do not contain focusable descendents href="#aria-hiddentrue-elements-do-not-contain-focusable-descendents"

ARIA input fields have accessible names href="#aria-input-fields-have-accessible-names"

ARIA meter elements have accessible names href="#aria-meter-elements-have-accessible-names"

ARIA progressbar elements have accessible names href="#aria-progressbar-elements-have-accessible-names"

Elements use only permitted ARIA attributes href="#elements-use-only-permitted-aria-attributes"

[role]s have all required [aria-*] attributes href="#roles-have-all-required-aria--attributes"

Elements with an ARIA [role] that require children to contain a specific [role] have all required children. href="#elements-with-an-aria-role-that-require-children-to-contain-a-specific-role-have-all-required-children"

[role]s are contained by their required parent element href="#roles-are-contained-by-their-required-parent-element"

[role] values are valid href="#role-values-are-valid"

Elements with the role=text attribute do not have focusable descendents. href="#elements-with-the-roletext-attribute-do-not-have-focusable-descendents"

ARIA toggle fields have accessible names href="#aria-toggle-fields-have-accessible-names"

ARIA tooltip elements have accessible names href="#aria-tooltip-elements-have-accessible-names"

ARIA treeitem elements have accessible names href="#aria-treeitem-elements-have-accessible-names"

[aria-*] attributes have valid values href="#aria--attributes-have-valid-values"

[aria-*] attributes are valid and not misspelled href="#aria--attributes-are-valid-and-not-misspelled"

ARIA IDs are unique href="#aria-ids-are-unique"

Related

Topics

Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children. href="#elements-with-an-aria-role-that-require-children-to-contain-a-specific-role-have-all-required-children"