Web Accessibility Code Examples and Demos
- Hiding an Element with a Focusable Child
- Trying to Unhide an aria-hidden Child
- Elements Hidden with aria-hidden are not Hidden when Referenced
- Removing Semantics using Presentation Role
- Using role=presentation on a Link
- Marking Elements using Different aria-current Values
- Marking an Element as Current using aria-current
- Iframe Embedding Problematic Headings
- General Iframe Example
- Hiding Elements from all Devices using Visibility Hidden
- Hiding Elements from all Devices using Display None
- Using Visually Hidden Text as an Alternative to ARIA-Current
- Adding Multiple Descriptions to an Element using aria-describedby
- Adding a Description to an Element using aria-describedby
- Labeling an Element using aria-labelledby
- Making Content Focusable
- Hiding Elements only Visually: iOS Peculiarities Alternative
- Hiding an Element Visually
- Hiding Elements from all Devices using the Hidden Attribute
- Toggling Visibility of a Hidden Element on Focus
- Hiding elements only visually
- Labeling an Element using aria-label
Content
- Content | Inline | Title | No ARIA
- Content | Inline | Title | With ARIA | role=img + aria-label
- Content | Inline | Title | with ARIA | role=img + aria-labelledby
- Content | Inline | Title + Description | No ARIA
- Content | Inline | With ARIA | Title + Description
- Content | Inline | With ARIA | Title + Description (2 values in aria-labelledby)
- Content | IMG | alt
- Content | IMG | alt + role=img
- Content | Hide | Duplicate Visual Text
Links
- Link | Inline | Title | No ARIA
- Link | Inline | Title | With ARIA
- Link | Inline | Title | aria-label
- Link | IMG | alt
Buttons
- Form with Autocomplete Attributes
- Form Validation when Submit Button is Disabled
- Form Validation with Messages on Top
- Form Validation with Messages Next to Controls
- Non-related Checkboxes
- Grouped and Differentiated Form Controls
- Required Input with Hidden Asterisks and ARIA
- Required Input with Asterisk and ARIA
- Form Controls with Labels in a Table
- Form Controls without Labels in a Table fixed with ARIA
- Form Controls without Labels in a Table
- HTML 5 Client-side Validations with Untitled Pattern
- HTML 5 Client-side Validations
- Required Input with Asterisks as Icons
- Required Inputs with HTML 5 and ARIA
- Associating Content to Form Inputs Using Multiple Labels
- Giving Clues about Additional Content in a Form
- Associating too much Content to Form Controls using ARIA
- Associating Content to Form Controls using ARIA
- Additional Content in Form Labels
- General Form Inputs Example
- Headings Mixed into a Form as Children of Legends
- Headings Mixed into a Form using ARIA
- Grouped Form Controls with the Too-long Legend
- Nested Fieldset/Legend Structures
- Grouped Thematically Related Form Controls
- Grouped Checkboxes
- Grouped Radio Buttons
- Faked Fieldset/Legend using ARIA
- Generally Bad Form
- Generally Good Form
- HTML 5 Headings Outline with ARIA-level Fixes
- HTML 5 Headings Outline with Traditionally Numbered Headings
- HTML 5 Headings Outline
- Generally Bad Headings
- Generally Good Headings
- Page with Only One h1 on Top of the Main Content
- Page with Only One h1 on Top of the Page
- Headings Example with ARIA labeled Page Regions
- Page with Additional Page Regions, with Headings
- Browsing Headings
- Table with Fixed Headers
- Table with Hidden Headers
- Table with Smaller Elements in a Narrow View
- Table with Block Elements in a Narrow View
- Table with Fixed Headers
- Table with a Hidden Column in a Narrow View
- Table with Added Headers in a Narrow View
- Table with Visually Hidden Headers in a Narrow View
- Fixed Table of divs
- Faking Table Using ARIA And Invalid Structure
- Invalid Table of divs
- Table with Block Elements, Fixed with ARIA
- Table with Block Elements
- Table of divs using ARIA
- Table of divs with Flexbox
- Table Spanning Multiple Rows and Columns
- Table with Multiple Header Cells
- Table with Unique IDs
- Table with Ambiguous Data
- Generally a Bad Table with only Horizontal Headers
- Generally a Bad Table without Headers
- Generally a Good Table
- Table with Hidden Headers
- Table of divs using ARIA
- Page with HTML5 Structural Elements, Labelled with ARIA and Visually Hidden Headings
- Page with HTML5 Structural Elements, Labelled with ARIA
- Page with HTML5 Structural Elements
- Page with HTML5 Structural Elements and Visually Hidden Headings
- Page with Additional Page Regions with Visually Hidden Headings
- Page with Additional Page Regions without Headings
- Marking an Element Toggleable using a Checkbox
- Marking an Element Expandable using a Checkbox
- Manually Displayed Tooltip
- Autocomplete with Radio Buttons
- Accordion with Radio Buttons
- Automatically Displayed Tooltip
- Tab List with Radio Buttons
- Non-modal Dialog
- Modal Dialog
- Accordion with ARIA
- Carousel with Radio Buttons
- Multi-accordion with Checkboxes
- Datepicker with Radio Buttons
- Autosuggest with Radio Buttons