WCAG HTML Technique Examples

• H2: Combining adjacent image and text links for the same resource
  • H2 Example 1: icon and text in the same a element
  • H2 Example 2: icon and text in the same a element with alt text on the icon
• H4: Creating a logical tab order through links, form controls, and objects
  • H4 Example 1: using tabindex attribute to specify a tab order
  • H4 Example 2: giving all elements the same tabindex value where tab order follows content order
• H24: Providing text alternatives for the area elements of image maps
  • H24 Example 1: Using the alt attribute of the area element to provide text that describes the purpose of the image map areas
• H25: Providing a title using the title element
  • H25 Example 1: Using the title element to define a title
• H30: Providing link text that describes the purpose of a link for anchor elements
  • H30 Example 1: Describing purpose of a link in the text content of the a element.
  • H30 Example 2: Using the alt attribute for the img element to describe the purpose of a graphical link
  • H30 Example 3: Using an empty alt when the anchor containts text that describes the purpose of the link in addition to the img element
  • H30 Example 4: Using multiple modalities to allow identification of an icon
  • H30 Example 5: A link contains text and an icon, and the icon provides additional information about the target.
  • H30 Example 6: Indicating the file type in the link text (PDF, DOC, XLS etc)
  • H30 Example 7: Using a link to wrap block level elements in HTML5.
• H32: Providing submit buttons
  • H32 Example 1: Basic example of a form with a submit button.
  • H32 Example 2: Using a server-side script (specified in the action attribute) that redirects the user to the requested page.
• H33: Supplementing link text with the title attribute
  • H33 Example 1: Clarifying the purpose of a link
• H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
  • H34 Example 1: Using Unicode right-to-left marks and left-to-right marks
• H36 Using alt attributes on images used as submit buttons
  • H36 Example 1: An input element with an alt attribute
• H37: Using alt attributes on img elements
  • H37 Example 1: Using alt attributes on img elements
• H39: Using caption elements to associate data table captions with data tables
  • H39 Example 1: An appointment calendar with a caption
• H42: Using h1-h6 to identify headings
  • H42 Example 1: Hierarchical Heading Organization
• H43: Using id and headers attributes to associate data cells with header cells in data tables
  • H43 Example 1: A table with multiple rows of headers
• H44: Using label elements to associate text labels with form controls
  • H44 Example 1: A text input field
  • H44 Example 2: A checkbox
  • H44 Example 3: A group of radio buttons
• H45: Using longdesc
  • H45 Example 1: Using longdesc to refer to a long description contained on a separate resource.
• H48: Using ol, ul and dl for lists or groups of links
  • H48 Example 1: A list showing steps in a sequence
  • H48 Example 2: A grocery list
  • H48 Example 3: A word and its definition
  • H48 Example 4: Contact information using a definition list
• H49: Using semantic markup to mark emphasized or special text
  • H49 Example 1: Using the em and strong elements to emphasize text
  • H49 Example 2: Using the blockquote and cite elements to mark up long quotations
  • H49 Example 3: Using the q element to mark up a shorter quotation
  • H49 Example 4: Using the sup and sub elements for superscript and subscript
• H51: Using table markup to present tabular information
  • H51 Example 1: : A schedule marked up as a simple data table with column and row headers
• H56: Using the dir attribute on an inline element to resolve problems with nested directional runs
  • H56 Example 1: Using the dir element
• H58: Using language attributes to identify changes in the human language
  • H58 Example 1: Using the xml:lang attribute to define a quote written in German
• H59: Using the link element and navigation tools
  • H59 Example 1: Using the link element
• H63: Using the scope attribute to associate header cells and data cells in data tables
  • H63 Example 1: A simple schedule
• H64: Using the title attribute of the frame and iframe elements
  • H64 Example 1: Using the title attribute with frame to describe the frames containing the navigation bar and the document
  • H64 Example 2: Using the title attribute with iframe to describe the contents of an inline frame
• H65: Using the title attribute to identify form controls when the label element cannot be used
  • H65 Example 1: A pulldown menu that limits the scope of a search
  • H65 Example 2: Input fields for a phone number
  • H65 Example 3: A Search Function
• H67: Using null alt text and no title attribute on img elements for images that AT should ignore
  • H67 Example 1: Using null alt text on a decorative image
• H69: Providing heading elements at the beginning of each section of content
  • H69 Example 1: Organizing the sections of a search page by marking each section heading using h2 elements
  • H69 Example 2: Headings show the overall organization of the content
  • H69 Example 3: Headings show the organization of material within the main content
• H70: Using frame elements to group blocks of repeated material
  • H70 Example 1: Using frame elements to organize content
• H71: Providing a description for groups of form controls using fieldset and legend elements
  • H71 Example 1: A multiple choice test
  • H71 Example 2: A set of checkboxes
  • H71 Example 3: Radio buttons submitting to the same named field
  • H71 Example 4: Logically related controls
• H73: Using the summary attribute of the table element to give an overview of data tables
  • H73 Example 1: A data table with a summary but no caption
  • H73 Example 2: A data table with both a summary and a caption
• H77: Identifying the purpose of a link using link text combined with its enclosing list item
  • H77 Example 1: Identifying the purpose of a link using link text combined with its enclosing list item
  • H77 Example 2: A list of video games for download
• H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
  • H78 Example 1: Identifying the purpose of a link using link text combined with its enclosing paragraph
• H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells
  • H79 Example 1: A table of rental car choices
• H80: Identifying the purpose of a link using link text combined with the preceding heading element
  • H80 Example 1: Blocks of information on hotels
  • H80 Example 2: A document provided in three formats
  • H80 Example 3: Newspaper Web site
• 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
  • H81 Example 1: A document provided in three formats
  • H81 Example 2: Blocks of information on hotels
• H83: Using the target attribute to open a new window on user request and indicating this in link text
  • H83 Example 1: Using the target attribute in a link to indicate that it will open in a new window
• H84: Using a button with a select element to perform an action
  • H84 Example 1: A Calendar
  • H84 Example 2: Choosing an action
• H85: Using optgroup to group option elements inside a select
  • H85 Example 1: Using optgroup to group option elements inside a select
  • H85 Example 2: Demonstrating how a multi-select box can make use of the optrgroup element
• H86: Providing text alternatives for ASCII art, emoticons, and leetspeak
  • H86 Example 1: Three options for providing alternatives for an emoticon representing "fright"
  • H86 Example 2: ASCII art with an explanation of the picture preceding it
  • H86 Example 3: Leetspeak for "Austin Rocks"
• H89: Using the title attribute to provide context-sensitive help
  • H89 Example 1: Using the title attribute to provide context-sensitive help for an address field
  • H89 Example 2: Using the title attribute to provide context-sensitive help for finding an account number
• H90: Indicating required form controls using label or legend
  • H90 Example 1: Using text to indicate required state
  • H90 Example 2: Using an asterisk to indicate required state
  • H90 Example 3: Using an image to indicate required state
  • H90 Example 4: Indicating required state for groups of radio buttons or check box controls
• H91: Using HTML form controls and links
  • H91 Example 1a: Using text inside the link for the link name
  • H91 Example 1b: Using an alt atribute for an img to provide the link name
  • H91 Example 1c: Inserting a space between the image and the adjacent word so that words will not run together
  • H91 Example 2a: Text is contained in the button element for the button name
  • H91 Example 2b: Using the value attribute for the button name
  • H91 Example 2c: Using the alt attribute for the button name
  • H91 Example 2d: Using the title attribute for the button name
  • H91 Example 2e: Demonstrating how AT uses the alt attribute and ignoring
  • H91 Example 3a: Using the value attribute for the input field name
  • H91 Example 3b: Using the title attribute for the input field name
  • H91 Example 4: Sample checkbox
  • H91 Example 5: Sample radio buttons
  • H91 Example 6a: select element list box demonstrating use of selected attribute and the label element to name the list box
  • H91 Example 6b: Using title attribute to name a select element rather than a visible label
  • H91 Example 7a: textarea element demonstrating use of the label element to name the text box
  • H91 Example 7b: Using title attribute to name a textarea element
  • H91 Example 8: Radio fieldset sample
• H93: Ensuring that id attributes are unique on a Web page
  • H93 Example 1: Ensuring that id attributes are unique on a Web page
• H94: Ensuring that elements do not contain duplicate attributes
  • H94 Example 1: Ensuring that elements do not contain duplicate attributes
• H95: Using the track element to provide captions
  • H95 Example 1: Captions in one language
  • H95 Example 2: Captions in multiple languages
• H96: Using the track element to provide audio descriptions
  • H96 Example 1: Audio description in one language
  • H96 Example 2: Audio description in multiple languages
  • H96 Example 3: Captions in multiple languages
• H97: Grouping related links using the nav element
  • H97 Example 1: Navigation links enclosed in a nav element
  • H97 Example 2: Multiple nav elements
  • H97 Example 3: Generic multiple nav elements