In this Article
What are attributes?
Many programming languages use attributes to add information to their elements, such as specific properties or metadata.
Some examples:
HTML:
<img src="image.jpg" alt="A descriptive text" width="200" height="150">
Attributes used >src,alt,width,heightCSS:
/* Targets disabled buttons */
button[disabled] { background-color: grey; cursor: not-allowed; }
Attributes used:background-colorandcursor
What are ARIA attributes?
ARIA (Accessible Rich Internet Applications) attributes are specialized HTML attributes created to enhance the accessibility of web applications, particularly for users relying on assistive technologies like screen readers. These attributes provide additional information about elements, roles, states, and properties not inherently conveyed by standard HTML.
You should not create custom ARIA attributes.
Check out our Valid ARIA Attributes Quick Reference to see all defined attribute names.
Types of ARIA Attributes
ARIA attributes fall into three main categories:
Roles - used to define the type or purpose of an element (e.g.,
role="button",role="dialog")States and Properties - used to give supplemental information about an elements current state or behavior
States: Can change dynamically (e.g.,
aria-expanded="true"or"false").Properties: Generally static or change infrequently (e.g.,
aria-labelledby="id").
Relationships - used to define relationships between elements not clear from the DOM
Some Common ARIA Attributes
aria-hidden– hides an element from assistive techaria-label– gives an element an accessiblearia-labelledby– labels an element by referencing another elementaria-describedby– gives additional descriptive text for an elementaria-expanded– can provide assistive tech information on an element's state (like a dropdown), like expanded or collapsed
Resources
Learn More
Using WAI-ARIA from W3C
WAI-ARIA Roles from mdn docs
Understanding Information and Relationships (A) from WCAG
ARIA Authoring Practices Guide - good examples of some of the more common patterns (expandables, carousel, etc
DubBot Flags:
Ensure attributes that begin with aria- are valid ARIA attributes
Certain ARIA roles must contain particular children
Ensures elements with an ARIA role that require child roles contain themCertain ARIA roles must be contained by particular parents
Ensures elements with an ARIA role that require parent roles are contained by them
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!