Techniques/ARIA

Technology Notes Current ARIA Technology Notes

Also see Category:ARIA Techniques.

Added to XML

Completed ARIA Techniques

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/]

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]
  • In Techniques Task Force: ARIA techniques for 02 May 2013

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
• 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:
    • Using Aria role=dialog to expose a custom dialog (pop-up div box) [Detlev]
  • 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

Review Failures which may no longer be failures