Techniques/ARIA
Technology Notes
Current ARIA Technology Notes
Also see Category:ARIA Techniques.
Added to XML
Added to XML, except for UA notes
Accepted by WG
ToDo
Currently under WG Review
- Aria-Edit: F87 Original: F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS
- Creating a conforming alternate version for web pages which are designed to be responsive / progressively enhanced by Alistair Garrison.
Ready for WG Review
- Using Aria role=dialog to expose a custom dialog (pop-up div box) [JCraig, Detlev]
[Survey https://www.w3.org/2002/09/wbs/35422/29thApril14_TECH/]
Ready for TF Review
Handle Feedback
In Development (Not needed for first round)
- Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions [Loretta - 08-Oct-2012, Needs Info - See Jason Kiss comments sent to WCAG list 1st Nov]
- Making actions keyboard accessible by using keyboard event handlers with WAI-ARIA controls '''Loretta, Josh, Needs Edits'''
- Using ARIA menus [Jon Gunderson - 15-Oct-2012]
- Using ARIA trees [Jon Gunderson]
- Using aria-describedby for link purpose [Jon Gunderson]
- Using aria-describedby for link purpose - May 2014 [David]
- Using aria-activedescendant [Adam-in process] and Use CSS to highlight the focused element
- Using aria-describedby [Detlev - has made a small closed button example that needs to be added to an existing tech - Maybe Davids.]
- Using WAI-ARIA aria-checked=mixed [Jon Gunderson]
- Using WAI-ARIA states and properties to create a menu [James Nurthen - 08-Oct-2012]
- 4.1.2 Failure of 4.1.2 due to using Using Abstract Roles [James - 01-Oct-2012]
- Using WAI-ARIA range attributes for range widgets such as progressbar, scrollbar, slider, and spinbutton [Loretta]
- Using the region role to identify a region of the page [Sailesh April 2014]
Needed (later), Unassigned
- Using WAI-ARIA states and properties to create an interactive grid
- Failure of 1.3.1 due to using role="application" when not all content is navigable
Planning per Success Criterion
- 1.1.1 Non-text content
- Situation A: If a short description *can* serve the same purpose and present the same information as the non-text content
- Using aria-labelledby to provide a text alternative the serves the equivalent purpose (note: on img, you must also use @alt to be valid HTML 5 as of last call draft) [Léonie, Reviewed by WG, returned to TF]
- Using aria-label for 1.1.1 (note: on img, you must also use @alt to be valid HTML 5 as of last call draft) [Léonie, Ready for TF review]
- using title for 1.1.1 [Léonie, No technique?]
- Situation B: If a short description *can not* serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):
- Using aria-describedby [David and James Nurthen, Ready for Review]
- Situation C: If non-text content is a control or accepts user input:
- Using aria-label [David and James Nurthen, Ready for Review]
- Using aria-labelledby to name controls [David and James Nurthen, Reviewed by WG, returned to TF]
- Situation D: If non-text content is time-based media (including live video-only and live audio-only); a test or exercise that would be invalid if presented in text; or primarily intended to create a specific sensory experience
- Situation F: If the non-text content should be ignored by assistive technology:
- Using role=presentation along with H67 (note that this is still being discussed by the WG)
- Short text alternative techniques for use in sufficient techniques above
- (not in the LC decision but still being discussed by the WG: aria-labeledby and aria-label)
- Long text alternative techniques for use in sufficient techniques above [Marc]
- Using aria-describedby
- Situation A: If a short description *can* serve the same purpose and present the same information as the non-text content
- 1.2.1 Audio-only and Video-only (prerecorded)
- 1.2.2 Captions (prerecorded)
- 1.2.3 Audio Description or Media Alternative (pre-recorded)
- 1.2.4 Captions (live)
- 1.2.5 Audio Description (pre-recorded)
- 1.2.6 Sign Language (pre-recorded)
- 1.2.7 Extended Audio Description (Prerecorded)
- 1.3.1 Info and Relationships [Joshue O Connor - 10-Oct-2012]
- Using ARIA roles and properties (this applies to both situation A and situation B, because some of these duplicate things in HTML 5, and others provide semantics that HTML 5 does not)
- Using ARIA relationships (this is more situation B, since HTML doesn't have most of these things, but in some situations, authors are duplicating HTML functionality)
- Using ARIA landmarks [David MacDonald, WG survey 14 Jan 2013, returned to TF]
- Headings using role=heading [Léonie Watson, WG survey 14 Jan 2013, returned to TF]
- Using aria-labelledby to associate a heading with its content Advisory technique
- Using the group role to identify related form controls Sailesh Panchang
- Situation A:
- Using aria-label, aria-labledby, and aria-describedby to provide labels and descriptions [David MacDonald - see above]
- TODO: List out all the other aria stuff....
- Situation B:
- Failures
- Is there an equivalent to F62 for ARIA relationships?
- 1.3.2 Meaningful Sequence
- Using aria-flowto [Loretta - Done, WG survey 14 Jan 2013, postponed as low priority technique]
- 1.4.1 Use of Color
- 1.4.2 Audio Control
- 1.4.4 Resize text
- 1.4.5 Images of Text
- 2.1.1 Keyboard
- Making actions keyboard accessible by using keyboard event handlers with WAI-ARIA controls '''Loretta, Josh, Needs Edits'''
- Using role with scripted event handlers (to fix F42)
- 2.3.1 Three Flashes or Below Threshold
- 2.4.1 Bypass Blocks
- Using ARIA menus [Jon Gunderson - 15-Oct-2012]
- Using ARIA trees [Jon Gunderson]
- Using ARIA landmarks to bypass blocks of content [David MacDonald, in WG survey for 14 Jan 2013]
- Using aria-expanded to indicate the state of a collapsible element [Detlev]
- 2.4.3 Focus Order
- Using aria-activedescendant [Adam-in process-group discussion indicated that this technique not relevant to this sc-need to confirm this]
- 2.4.4 Link Purpose (in context) [Marc Johlic, Jon Gunderson]
- Using aria-label for link purpose [Marc Johlic - 01-Oct-2012 - small updates needed but Ready for Review]
- Using aria-labelledby for link purpose [Léonie Watson and Detlev Fisher - Reviewed by WG, returned to TF]
- Using aria-describedby for link purpose [Jon Gunderson]
- 2.4.5 Multiple Ways
- 2.4.6 Headings and Labels
- 2.4.7 Focus Visible
- Using aria-activedescendant [Adam-in process-group discussion indicated that this technique not relevant to this sc-need to confirm this] and Use CSS to highlight the focused element
- 2.4.8 Location
- same as 2.4.5
- 2.4.10 Section Headings
- 3.1.1 Language of Page
- 3.1.2 Language of Parts
- 3.1.3 Unusual Words [Christophe Strobbe - there is no technique here]
Using details and summary
- 3.1.4 Abbreviations
- 3.1.5 Reading Level
- 3.1.6 Pronunciation
- Using details and summary
- 3.2.1 On Focus
- 3.2.2 On Input
- 3.2.3 Consistent Navigation
- 3.2.4 Consistent Identification
- 3.2.5 Change on Request
- 3.3.1 Error Identification
- Using WAI-ARIA range attributes for range widgets such as progressbar, scrollbar, slider, and spinbutton [Loretta, Ready for Review]
- Using aria-alertdialog [Léonie, Ready for TF review]
- Using ARIA Live Regions [Léonie, Ready for TF review]
- 3.3.2 Labels or Instructions [Detlev]
- Using aria-label to provide an invisible label [Detlev - ready for review - feedback addressed]
- Using aria-labelledby to concatenate a label from several text nodes [Detlev - Second example reworked / simplified - should get a second review by TF]
- Using aria-describedby [Detlev - has made a small closed button example that needs to be added to an existing tech - Maybe Davids.]
- TODO: is there anything in aria for linking instructions?
- 3.3.3 Error Suggestion [Tim/Joshue]
- Using ARIA role of alert for Error Feedback in Forms [Tim/Joshue - Ready For Review?]
- Using WAI-ARIA range attributes for range widgets such as progressbar, scrollbar, slider, and spinbutton [Loretta]
- 3.3.4 Error Prevention (legal, financial, data)
- 3.3.5 Help
- Using aria-describedby [David, Ready for Review]
- 3.3.6 Error Prevention (All)
- Same as 3.3.4
- 4.1.1 Parsing
- 4.1.2 Name, Role, Value
- Using the role attribute to expose the role of a user interface component [Loretta - Done, Needs edits]
- Using WAI-ARIA state and property attributes to expose the state of a user interface component [Loretta, Ready for Review pending acceptance of edits]
- Using WAI-ARIA aria-checked=mixed [Jon Gunderson]
- Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions [Loretta - 08-Oct-2012, Needs Info - See Jason Kiss comments sent to WCAG list 1st Nov]
- Using WAI-ARIA states and properties to create an interactive grid
- Using WAI-ARIA states and properties to create a menu [James Nurthen - 08-Oct-2012]
- Using WAI-ARIA range attributes for range widgets such as progressbar, scrollbar, slider, and spinbutton [Loretta]
- Using aria-activedescendant [Adam-in process]
Failure Technique
- 4.1.2 Failure of 4.1.2 due to using Using Abstract Roles [James - 01-Oct-2012]
- 1.3.1 Failure of 1.3.1 due to using role="application" when not all content is navigable