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.
Techniques/HTML5
From WCAG WG
Also see Category:HTML5 Techniques.
- 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 title (cover in F65 .... and potential 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 figure and figcaption (this is in both situation A and situation B, because figcaption is a visible element, and can be long) - FigureAndFigCaption (Alastair)
- Using a shadow DOM with HTML 5 Canvas ShadowDOM for Canvas for non-text content (James)
- Situation C: If non-text content is a control or accepts user input:
- ??? shouldn't H30 be in here too??? (Modify H30 due to links being allowed to wrap block level elements - http://simplyaccessible.com/article/html5-block-links/)
- Using a shadow DOM with HTML 5 Canvas
- Using details and summary (Paul) - make sure to add user agent notes for where details doesn't meet 2.1.1
- Using Menus (Marc)
- Using Commands (Marc)
- Captcha Alternatives and thoughts
- TODO: do the other new controls have any special sauce?
- 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
- Not in LC, but under discussion, is a text alternative for video poster
- TODO: check if there's anything else...
- Situation F: If the non-text content should be ignored by assistive technology:
- Situation A: If a short description *can* serve the same purpose and present the same information as the non-text content
(already covered by ARIA techniques)
- Short text alternative techniques for use in sufficient techniques above
- Using @title attribute on img elements
- Using figure and figcaption
- Long text alternative techniques for use in sufficient techniques above
- Using a shadow DOM with HTML 5 Canvas
- Short text alternative techniques for use in sufficient techniques above
- 1.2.1 Audio-only and Video-only (prerecorded)
- Using the track element to provide audio descriptions (Loretta & Paul)
- 1.2.2 Captions (prerecorded)
- Using the track element to provide captions [Loretta & Paul]
- 1.2.3 Audio Description or Media Alternative (pre-recorded)
- Using the track element to provide audio descriptions [Loretta & Paul]
- 1.2.4 Captions (live)
- Using the TextTrack API to provide captions dynamically [Loretta & Paul]
- 1.2.5 Audio Description (pre-recorded)
- Using the track element to provide audio descriptions [Loretta & Paul]
- 1.2.6 Sign Language (pre-recorded)
- 1.2.7 Extended Audio Description (Prerecorded)
- Using the track element to provide audio descriptions [Loretta & Paul]
- 1.3.1 Info and Relationships
- Situation A:
- Using a shadow DOM with HTML5 Canvas
- Failures
- Situation A:
(the following 3 are not HTML5 related)
- Using data table markup to label form elements (e.g. single Likert-type scale radio buttons used for multiple rows). [Bruce]
- Use markup to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. [Bruce]
- Failure of 1.3.1 for not including table title in CAPTION. [Bruce]
- Some new techniques about Headings and Sectioning elements (perhaps also covered in 2.4.6/2.4.10) [Alastair] (maybe use some of these)
- 1.3.2 Meaningful Sequence
- Using a shadow DOM with HTML 5 canvas (maybe a stretch here?)
- Also, we should add this SCRIPT technique and SCRIPT Failure (these don't seem like new HTML5 things)
- Inserting elements into the DOM in meaningful order
- Using innerHTML, outerHTML, insertAdjacentHTML, and document.write
- Failure due to inserting new elements at the end of the DOM, rather than near their related elements (needs rewrite) - for example to show a modal dialog. [Paul/James]
- 1.4.1 Use of Color
- 1.4.2 Audio Control
- Is there a technique for <audio> and <video>?
- Failure of SC 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays [Paul/Loretta]
- 1.4.4 Resize text
- Creating resizable text in HTML 5 canvas (is there a way to do this???) (need to verify if zoom works on canvas)
- 1.4.5 Images of Text
- Is there a way to use canvas to achieve logo or font treatment and have it work with HC, large fonts and screen readers???? [James]
- 2.1.1 Keyboard
- Making actions keyboard accessible by using keyboard event handlers with WAI-ARIA controls and tabindex=0 as previously [Loretta, Paul, Needs Edits]
- Using new form controls
- Edit H91 in order to add the new control labeling mechanisms [Paul] - also look to see why file is missing
- Edit H91 to account the AAPI mappings in the HTML5 [Paul]
- Add a technique like H91 for HTML5 interactive controls such as details, menu & dialog [Paul]
- Using a shadow DOM with HTML 5 canvas
- Keyboard accessible video players in HTML 5??? (if someone wants to write it - great - but not very urgent)
- 2.3.1 Three Flashes or Below Threshold
- 2.4.1 Bypass Blocks
- Using HTML 5 menu and commands (not in html5 only 5.1 - do not create a technique)
- Using HTML 5 structural elements (is that the right name? <nav> etc) TODO: expand this [James] - base on http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements [Josh] (similar to http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page )
- Using headings and hgroup (HTML5 outlining mechanism) - look at http://accessiblehtmlheadings.com/ . Is this HTML5 or 5.1??
- TODO: there are probably other ways to do this....
- 2.4.3 Focus Order
- Using tabindex [Adam]
- 2.4.4 Link Purpose (in context)
- Any new techniques for images might also be relevant here.
- 2.4.5 Multiple Ways
- RDFa and Microformats (presumably if there were a way to use that metadata to find content - but don't think we have enough for a technique)
- 2.4.6 Headings and Labels
- 2.4.7 Focus Visible
- Drawing focus rings for HTML 5 Canvas
- 2.4.8 Location
- same as 2.4.5
- 2.4.10 Section Headings
- Maybe edit http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G141 to allow other ways to create headings []
- 3.1.1 Language of Page
- 3.1.2 Language of Parts
- 3.1.3 Unusual Words
- SCRIPT: creating an accessible popup definition (volunteer needed)
- 3.1.4 Abbreviations
- SCRIPT: creating an accessible popup definition (volunteer needed - same as 3.1.3)
- 3.1.5 Reading Level
- 3.1.6 Pronunciation
(might be a stretch... using one of the below to provide popup pronunciation guides)
- Using an audio element to provide the pronunciation [Paul]
- SCRIPT: creating an accessible popup definition
- 3.2.1 On Focus
- autofocus (maybe an advisory technique for 3.2 or 3.3 here - but low priority)
- 3.2.2 On Input
- 3.2.3 Consistent Navigation
- Using Sectioning elements consistently across pages [James] (perhaps just add to Generic one)
- 3.2.4 Consistent Identification
- 3.2.5 Change on Request
- For error techniques make sure we list all the correct success criteria for each technique (3.3.1,3.3.2, 3.3.4)
- 3.3.1 Error Identification
- Using @required [Marc]
- Using @maxlength [Marc]
- Using <input type=number> [Marc]
- Using <input type=range> [Marc]
- Using <input type=url> [Marc]
- Using <input type=email> [Marc]
- Using <input type=tel> [Marc]
- Using <input type=date|datetime|month etc> [Marc]
- Using @pattern [James]
- Using @min and @max [James]
- Using @step [James]
- Using 4.10.21 Constraints (there are probably LOTS of techniques here) [James/Paul]
- Using Custom Error messages [Paul] ( http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ , http://pauljadam.com/forma11y/#slide09 )
- 3.3.2 Labels or Instructions
- Using @placeholder on input The placeholder disappearing on type-in is a problem for people with cognitive disabilities. Advisory? [Paul]
- Using aria-describedby to associate instructions with a user input control [Loretta]
- Using aria-labelledby to associate a label with a user input control [Loretta]
- 3.3.3 Error Suggestion
- See 3.3.1
- Using lists and datalists instead of freeform input (datalist is new for HTML5) [Marc]
- Using select and option instead of freeform input (is there already one for this?) [Marc] See also H85.
- Using @autocomplete or Turning off @autocomplete (not really sure there is a technique here - sometimes it helps and sometimes it hurts; it is on by default) [Loretta,John]
- 3.3.4 Error Prevention (legal, financial, data)
- See 3.3.1, 3.3.2
- Using @readonly Adam (low priority - we think this might be displaying the same page as readonly for the confirmation page)
- 3.3.5 Help
- Using details and summary (see if we can use previous technique (1.1.1) for 3.3.5 too)
- 4.1.1 Parsing
- ADD NOTE to H74 and H75 that opening and closing rules are different in HTML 5 Volunteer Needed
- 4.1.2 Name, Role, Value
- Using the HTML5 Accessible Name calculation hierarchy. [Loretta]
Other Issues brought to TF
HTML Media Capture Raised by PF http://www.w3.org/mid/069801cd6508%25246382c270%25242a884750%2524%2540accesstechnologiesgroup.com