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):
    • Situation C: If non-text content is a control or accepts user input:
    • 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)

(the following 3 are not HTML5 related)

  • 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

(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