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
    • 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)
      • Using a shadow DOM with HTML 5 Canvas
    • Situation C: If non-text content is a control or accepts user input:
      • ??? shouldn't H30 be in here too???
      • Using a shadow DOM with HTML 5 Canvas
      • Using details and summary
      • Using Menus
      • Using Commands
      • 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:
      • Using role=presentation along with H67 (note that this is still being discussed by the WG)
    • 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 <track> for Video
  • 1.2.2 Captions (prerecorded)
  • 1.2.3 Audio Description or Media Alternative (pre-recorded)
    • Using the <track> element
  • 1.2.4 Captions (live)
  • 1.2.5 Audio Description (pre-recorded)
    • Using the <track> element
  • 1.2.6 Sign Language (pre-recorded)
    • Using the <track> element
  • 1.2.7 Extended Audio Description (Prerecorded)
    • Using the <track> element
  • 1.3.1 Info and Relationships
    • Situation A:
      • Using a shadow DOM with HTML5 Canvas
    • Failures
    • 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 or not including footnotes in TFOOT. [Bruce]
    • probably some failures in 4.10.18 association of controls and forms. Are there techniques too?
  • 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
    • 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)
    • probably some failures in 4.10.18 association of controls and forms. Are there techniques too?
  • 1.4.1 Use of Color
    • Canvas version of G111
    • Using a shadow DOM with HTML 5
  • 1.4.2 Audio Control
    • Is there a technique for <audio> and <video>?
    • Failure: @autoplay
  • 1.4.4 Resize text
    • Creating resizable text in HTML 5 canvas (is there a way to do this???)
  • 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????
  • 2.1.1 Keyboard
    • Using tabindex=0 [Adam]
    • Using new form controls
    • Using <details>
    • Using menus and commands
    • Using a shadow DOM with HTML 5 canvas
    • Keyboard accessible video players in HTML 5???? (talk to media subteam of html-a11y-tf)
  • 2.3.1 Three Flashes or Below Threshold
    • Canvas specific techniques or failures?
    • Video specific techniques or failures?
  • 2.4.1 Bypass Blocks [Léonie]
    • Using HTML 5 menu and commands
    • Using HTML 5 structural elements (is that the right name? <nav> etc) TODO: expand this
    • Using headings and hgroup
    • TODO: there are probably other ways to do this....
  • 2.4.3 Focus Order
    • Using tabindex [Adam]
    • Using HTML 5 menu and command
    • Using HTML details and summary
    • TODO: there are probably other ways to do this....
  • 2.4.4 Link Purpose (in context)
    • Using title on image (related to text alternatives changes in HTML 5, may change) [Tim?]
    • Using figure and figcaption (does this make sense for links?)
    • TODO: look at new HTML 5 heading stuff. Are there new techniques there?
  • 2.4.5 Multiple Ways
  • 2.4.6 Headings and Lables
    • TODO: This one is about the text in the heading or label, not the structure. Is there a way to impact this with the new hgroup stuff?
  • 2.4.7 Focus Visible
    • Drawing focus rings for HTML 5 Canvas
    • TODO: are there any other new ways to draw
  • 2.4.8 Location
    • same as 2.4.5
  • 2.4.10 Section Headings [Josh]
  • 3.1.1 Language of Page
    • DONE: check if there is anything new in html 5 or ARIA for this [Michael] - don't see any new features beyond lang and xml:lang
  • 3.1.2 Language of Parts
    • DONE: check if there is anything new in html 5 or ARIA for this [Michael] - don't see any new features beyond lang and xml:lang
  • 3.1.3 Unusual Words [Christophe Strobbe]
    • Using details and summary
    • SCRIPT: creating an accessible popup definition
  • 3.1.4 Abbreviations
    • Using details and summary
    • SCRIPT: creating an accessible popup definition
  • 3.1.5 Reading Level
  • 3.1.6 Pronunciation

(might be a stretch... using one of the below to provide popup pronunciation guides)

    • Using details and summary
    • SCRIPT: creating an accessible popup definition
  • 3.2.1 On Focus
    • TODO: research whether there are new failures for any of the new form or interactive elements.
  • 3.2.2 On Input
    • TODO: research whether there are new failures for any of the new form or interactive elements.
  • 3.2.3 Consistent Navigation
    • SCRIPT: Using components and component libraries
  • 3.2.4 Consistent Identification
    • SCRIPT: Using components and component libraries
  • 3.2.5 Change on Request
    • TODO: research whether there are new failures for any of the new form or interactive elements.
  • 3.3.1 Error Identification
    • Using media.error
    • Using onerror event (?)
    • Using @required [David Todd, Josh]
    • Using @maxlength [David Todd, Josh]
    • Using <input type=number>
    • Using <input type=range>
    • Using <input type=url> [Josh]
    • Using <input type=email> [Josh]
    • Using lists and datalists instead of freeform input
    • Using select and option instead of freeform input (is there already one for this?)
    • Using @autocomplete
    • Using @readonly
    • Using @pattern
    • Using @min and @max
    • Using @step
    • Using 4.10.21 Constraints (there are probably LOTS of techniques here)
    • TODO: are there more?
  • 3.3.2 Labels or Instructions [Léonie]
    • Using @title (tooltip. Is the keyboard issue blocking here?)
    • Using @placeholder on input
    • TODO: is there anything in aria for linking instructions?
  • 3.3.3 Error Suggestion [Tim]
  • 3.3.4 Error Prevention (legal, financial, data)
    • TODO: figure out which client validation features of HTML 5 are Error ID, Error Suggestion, and Error prevention
    • Using @required
    • Using @maxlength
    • Using <input type=number>
    • Using <input type=range>
    • Using <input type=url>
    • Using <input type=email>
    • Using lists and datalists instead of freeform input
    • Using select and option instead of freeform input (is there already one for this?)
    • Using @autocomplete
    • Using @readonly
    • Using @pattern
    • Using @min and @max
    • Using @step
    • Using 4.10.21 Constraints (there are probably LOTS of techniques here)
    • TODO: are there more?
  • 3.3.5 Help
    • Using details and summary
  • 3.3.6 Error Prevention (All)
    • Same as 3.3.4
  • 4.1.1 Parsing
    • ADD NOTE to H74 and H75 that opening and closing rules are different in HTML 5