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
Jump to: navigation, search


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

Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Techniques/HTML5&oldid=6204"