WCAG Guideline |
ARIA Guideline |
Description |
Perceivable (Guideline 1-4) |
|
|
1.1 Text Alternatives
|
aria-label, aria- labelledby, aria- describedby |
Provide text alternatives for non- text content. ARIA attributes like aria-label help associate labels with elements for screen
reader users.
|
1.2 Time-based Media
|
aria-live, aria- relevant |
Provide alternatives and controls for time-based media. ARIA live regions notify screen reader users of dynamically changing
content.
|
1.3 Adaptable
|
role="presentation," role="img," aria- hidden |
Ensure content can be presented in different ways. Use ARIA roles and attributes to convey semantic meaning and control what
is presented to screen readers.
|
1.4 Distinguishable
|
aria-labelledby, aria-describedby, role="img" |
Make content visually and auditorily distinguishable. Use ARIA attributes to associate labels with elements and provide context
for screen reader users.
|
Operable (Guideline 5-8) |
aria-disabled, aria- haspopup, tabindex |
|
2.1 Keyboard Accessible
|
tabindex, focus management, aria- haspopup |
Ensure all functionality is operable via a keyboard. ARIA attributes help manage focus and indicate elements with pop-up menus
or sub-levels.
|
2.2 Enough Time
|
aria-live, aria- relevant, timeouts, focus control |
Provide users enough time to read and interact with content. ARIA live regions and timeout management assist in conveying
timely information to screen reader users.
|
WCAG Guideline |
ARIA Guideline |
Description |
2.3 Seizures and Physical Reactions
|
N/A |
Avoid content that may cause seizures or physical discomfort. This guideline primarily pertains to visual content but can
impact screen reader users indirectly.
|
2.4 Navigable
|
tabindex, skip links, headings, ARIA landmarks |
Make navigation and operation predictable and consistent. Use semantic HTML elements, ARIA landmarks, and skip links for efficient
screen reader navigation.
|
Understandable (Guideline 9-10) |
aria-label, aria- labelledby, role="alert" |
|
3.1 Readable
|
text alternatives, language attributes |
Make text content readable and understandable. Provide language information and ensure that screen reader users receive accurate
and meaningful text alternatives.
|
3.2 Predictable
|
role="alert," ARIA live, aria-relevant |
Make web pages appear and operate in predictable ways. Use ARIA live regions and relevant settings to notify screen reader
users of dynamic content changes.
|
Robust (Guideline 11) |
role="presentation," role="img" |
|
4.1 Compatible
|
role="presentation," role="img" |
Maximize compatibility with current and future technologies. Use ARIA roles appropriately to enhance compatibility with assistive
technologies like screen readers.
|
Note: Web Content Accessibility Guidelines (WCAG) and Accessible Rich Internet Applications (ARIA).