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:

(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
• 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)
  • Playing a sign language video from a video element's video track list [Loretta & Paul]
• 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

(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)
    • Using section elements Single Page of HTML5 Section element examples[Josh]
    • The <section> element[Josh]
    • The <article> element[Josh]
    • The <nav> element[Josh]
    • The <aside> element[Josh]
• 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
  • REVIEW: Are there any new structures or relationships in HTML 5 or ARIA that could be used to link multiple reading-level versions of the same content? [Michael]
• 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