Back to CanAdapt home

HTML 5 Techniques and WCAG

All techniques without notes can be used in HTML5, just add "HTML5" to the Applicability section.

WCAG HTML Technique Notes

H2: Combining adjacent image and text links for the same resource

 

H4: Creating a logical tab order through links, form controls, and objects

 

H24: Providing text alternatives for the area elements of image maps

 

H25: Providing a title using the title element

 

H27: Providing text and non-text alternatives for object

 

H28: Providing definitions for abbreviations by using the abbr and acronym elements

Acronym deprecated in HTML5, leave ABBR as only example

H30: Providing link text that describes the purpose of a link for anchor elements

 

H32: Providing submit buttons

 

H33: Supplementing link text with the title attribute

This does not work because the title and the link text compete for the ACCNAME in the accessibility API. Screen readers can't get it. This has caused a lot of confusion over the years. Should probably drop.

H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline

 

H35: Providing text alternatives on applet elements

Applet deprecated in HTML 5

H36: Using alt attributes on images used as submit buttons

 

H37: Using alt attributes on img elements

 

H39: Using caption elements to associate data table captions with data tables

 

H40: Using definition lists

 

H42: Using h1-h6 to identify headings

 

H43: Using id and headers attributes to associate data cells with header cells in data tables

We should revisit our requirements for this. Screen readers such as NVDA and JAWS now read correctly several layers of merged cell <th> tags

H44: Using label elements to associate text labels with form controls

 

H45: Using longdesc

 

H46: Using noembed with embed

Embed was not part of html 4 but is part of html5

H48: Using ol, ul and dl for lists or groups of links

 

H49: Using semantic markup to mark emphasized or special text

Screen readers make no distinction between <b> and <strong> or <i> and <em>. <b> and <i> are back in HTML5.

It was a theorectical concept that never helped in AT. Maybe it will in the future but I doubt it. Perhaps drop it...

H51: Using table markup to present tabular information

 

H53: Using the body of the object element

 

H54: Using the dfn element to identify the defining instance of a word

 

H56: Using the dir attribute on an inline element to resolve problems with nested directional runs

 

H57: Using language attributes on the html element

 

H58: Using language attributes to identify changes in the human language

 

H59: Using the link element and navigation tools

 

H60: Using the link element to link to a glossary

 

H62: Using the ruby element

 

H63: Using the scope attribute to associate header cells and data cells in data tables

The scope attribute is more important than many previously estimated...Without it Screen readers get mixed up in the the top row of a simple table that has column headers. They read all the <th> elements to the left of a <th> as headers for the cell that has focus

H64: Using the title attribute of the frame and iframe elements

 

H65: Using the title attribute to identify form controls when the label element cannot be used

 

H67: Using null alt text and no title attribute on img elements for images that AT should ignore

Add that there should also be no wai aria attributes (aria-label, labelledby, describedby)

H69: Providing heading elements at the beginning of each section of content

 

H70: Using frame elements to group blocks of repeated material

No indication anyone ever did this. It is an artifact from WCAG 1, frames are dropped from HTML5, and no indication it is actually useful. I think we should drop this.

H71: Providing a description for groups of form controls using fieldset and legend elements

 

H73: Using the summary attribute of the table element to give an overview of data tables

Summary dropped from HTML5, not coming back. aria describedby on the table element is taking over. Works in NVDA, but not in JAWs yet. describedby can also refer to a paragraph in the details element so hide describtion visually, but discoverable on expand.

H74: Ensuring that opening and closing tags are used according to specification

 

H75: Ensuring that Web pages are well-formed

 

H76: Using meta refresh to create an instant client-side redirect

 

H77: Identifying the purpose of a link using link text combined with its enclosing list item

 

H78: Identifying the purpose of a link using link text combined with its enclosing paragraph

I think we should drop this in favour of giving context in aria-label ARIA8. In 8 years have never seen it screen reader user get link context this way. We should also write an aria-describedby solution referring to the suplementary text.

H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings

 

H80: Identifying the purpose of a link using link text combined with the preceding heading element

I think we should drop this in favour of giving context in aria-label ARIA8. In 8 years have never seen it screen reader user get link context this way. We should also write an aria-describedby solution referring to the suplementary text.

H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

I think we should drop this in favour of giving context in aria-label ARIA8. In 8 years have never seen it screen reader user get link context this way. We should also write an aria-describedby solution referring to the suplementary text.

H83: Using the target attribute to open a new window on user request and indicating this in link text

 

H84: Using a button with a select element to perform an action

 

H85: Using OPTGROUP to group OPTION elements inside a SELECT

 

H86: Providing text alternatives for ASCII art, emoticons, and leetspeak

 

H87: Not interfering with the user agent's reflow of text as the viewing window is narrowed

 

H88: Using HTML according to spec

 

H89: Using the title attribute to provide context-sensitive help

 

H90: Indicating required form controls using label or legend

 

H91: Using HTML form controls and links

 

H92: Including a text cue for colored form control labels

 

H93: Ensuring that id attributes are unique on a Web page

 

H94: Ensuring that elements do not contain duplicate attributes

 

 

 

David's

site

site