This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

From WCAG WG

Technology Notes Current ARIA Technology Notes

Also see Category:ARIA Techniques.

ToDo

Ready for WG Review

• Using aria-describedby [David and James Nurthen]
• Using aria-label [David and James Nurthen]
• Using aria-label for link purpose [Marc Johlic]
• Using aria-labelledby to concatenate a label from several text nodes [Detlev]
• Using the role attribute to expose the role of a user interface component [Loretta]
• Using WAI-ARIA state and property attributes to expose the state of a user interface component [Loretta]

• Using aria-alertdialog [Léonie] - live example still needed

Ready for TF Review

• 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]
  • In Techniques Task Force: ARIA techniques for 02 May 2013
  • In Techniques Task Force: ARIA techniques for 02 May 2013
• Using ARIA Live Regions [Léonie]
  • In Techniques Task Force: More ARIA techniques for 02 May 2013
• Using ARIA role of alert for Error Feedback in Forms [Marc]
  • In Techniques Task Force: More ARIA techniques for 02 May 2013
• F38: Failure of Success Criterion 1.1.1 due to omitting the alt-attribute for non-presentation images and applets used only for decorative purposes in HTML [Loretta]
  • In Techniques Task Force: More ARIA techniques for 02 May 2013
• F15: Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely - [Loretta]
• F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content - Loretta

Handle Feedback

• WG review recommends merging these two techniques:
  • Using aria-labelledby to name controls [David and James Nurthen, Reviewed by WG, returned to TF]
  • Using aria-labelledby to provide a text alternative that 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 landmarks to identify regions of a page [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 landmarks to bypass blocks of content [David MacDonald, WG survey for 14 Jan 2013, returned to TF]
• Using aria-labelledby for link purpose [Léonie Watson and Detlev Fisher - Reviewed by WG, returned to TF]
• 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 aria-label to provide an invisible label [Detlev] - in Mar 25 survey

Needed for first pass

• Review Failures which may no longer be failures or need modification
  • F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS - Loretta: no update needed. If we were publishing aria-flowto, we should include it in the resources. But the description talks about "relying on CSS rather than structural mark-up", and aria-flowto would be part of the structural markup.
  • F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability - James
  • F59 (Current) @ ARIA-edit: F59: Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML - Detlev
  • F63 (Current) @ ARIA-edit: F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link- Detlev
  • F65 (Current) Aria-Edit: F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type image
  • F68: Failure of Success Criterion 1.3.1 and 4.1.2 due to the association of label and user interface controls not being programmatically determinable - Detlev
  • F79: Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available - James
  • F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order - Marc
  • F86: Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number - Marc
  • 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 - Marc
  • F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link - Marc

• Review existing advisory techniques
  • ARIA1: Using the aria-describedby property to provide a descriptive label for input controls [Marc]
  • ARIA2: Identifying required fields with the aria-required property [Marc]
  • ARIA3: Identifying valid range information with the aria-valuemin and aria-valuemax properties [Marc]

In Development (Not needed for first round)

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

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