Techniques/HTML5
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