WCAG ARIA Technique Examples

• ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls
  • ARIA1 Example 1: Using aria-describedby property to describe a Close button's action
  • ARIA1 Example 2: Using aria-describedby to associate instructions with form fields
  • ARIA1 Example 3: Using aria-describedby property to provide more detailed information about the button
  • ARIA1 Example 4: Using aria-describedby to associate tooltips with form fields
  • ARIA1 Example 5: XHTML
• ARIA2: Identifying a required field with the aria-required property
  • ARIA2 Example 1: The required property is indicated by an asterisk placed next to the label element
  • ARIA2 Example 2: The required property is indicated by the word "required" placed next to the label element
  • ARIA2 Example 3: Required fields are indicated by a red border and a star icon rendered via CSS using content:before
  • ARIA2 Example 4: A required text input field in XHTML
  • ARIA2 Example 5: Adding aria-required property via script
• ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component
  • ARIA5 Example 1: A toggle button
• ARIA6: Using aria-label to provide labels for objects
  • ARIA6 Example 1: Distinguishing navigation landmarks
  • ARIA6 Example 2: Identifying region landmarks
  • ARIA6 Example 3: Providing a label for Math
• ARIA7: Using aria-labelledby for link purpose
  • ARIA7 Example 1: Providing additional information for links
  • ARIA7 Example 2: Concatenating link text from multiple sources
• ARIA8: Using aria-label for link purpose
  • ARIA8 Example 1: Describing the purpose of a link in HTML using aria-label
• ARIA9: Using aria-labelledby to concatenate a label from several text nodes
  • ARIA9 Example 1: A time-out input field with concatenated label
  • ARIA9 Example 2: A simple data table with text inputs
  • ARIA9 Example 3: A conference workshop booking table
• ARIA10: Using aria-labelledby to provide a text alternative for non-text content
  • ARIA10 Example 1: Providing a short description for a complex graphic
• ARIA11: Using ARIA landmarks to identify regions of a page
  • ARIA11 Example 1: Simple landmarks
• ARIA12: Using role=heading to identify headings
  • ARIA12 Example 1: Simple headings
  • ARIA12 Example 2: Additional heading levels
• ARIA13: Using aria-labelledby to name regions and landmarks
  • ARIA13 Example 1: Identify a landmark with on-page text
  • ARIA13 Example 2: Identification for Application landmarks
• ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used
  • ARIA14 Example 1: A close button (X) in a pop-up box
  • ARIA14 Example 2: A phone number with multiple fields
• ARIA15: Using aria-describedby to provide descriptions of images
  • ARIA15 Example 1: Describing an image
• ARIA16: Using aria-labelledby to provide a name for user interface controls
  • ARIA16 Example 1: Labelling a simple text field
  • ARIA16 Example 2: Labelling a slider
  • ARIA16 Example 3: A label from multiple sources
• ARIA17: Using grouping roles to identify related form controls
  • ARIA17 Example 1: Social Security Number
  • ARIA17 Example 2: Identifying radio groups
• ARIA18: Using aria-alertdialog to Identify Errors
  • ARIA18 Example 1: Alert dialog
• ARIA19: Using ARIA role=alert or Live Regions to identify errors
  • ARIA19 Example 1: Injecting error messages into a container with role=alert already present in the DOM
• ARIA20: Using the region role to identify a region of the page
  • ARIA20 Example 1: Region on a news website
  • ARIA20 Example 2: Identifying a region on a banking site
  • ARIA20 Example 3: Identifying a portlet with a generic region
• ARIA21: Using aria-invalid to indicate an error field
  • ARIA21 Example 1: Using aria-invalid on required fields
  • ARIA21 Example 2: Identifying errors in data format