Va11yS
Navigation
-
Headings
- WCAG ARIA12 - Example 1: Using role=heading to identify headings (e.g. simple headings)
- WCAG ARIA12 - Example 2: Using role=heading to identify headings (e.g. additional heading levels)
- WCAG HTML - H42 Example 1: Hierarchical Heading Organization
- WCAG HTML - H69 Example 1: Organizing the sections of a search page by marking each section heading using h2 elements
- WCAG HTML - H69 Example 2: Headings show the overall organization of the content
- WCAG HTML - H69 Example 3: Headings show the organization of material within the main content
-
Links
- WCAG ARIA7 - Example 1: Providing additional information for links
- WCAG ARIA7 - Example 2: Concatenating link text from multiple sources
- WCAG ARIA8 - Example 1: Describing the purpose of a link in HTML using aria-label
- WCAG General - G1 Example 1: Adding a link at the top of each page that goes directly to the main content area
- WCAG General - G55 Example 1: Technical terms and abbreviations in an article about sports injuries are linked to definitions in a medical dictionary
- WCAG General - G65 Example 1: A breadcrumb trail
- WCAG General - G71 Example 1: A label element that includes a help link
- WCAG HTML - H30 Example 1: Describing purpose of a link in the text content of the a element.
- WCAG HTML - H30 Example 2: Using the alt attribute for the img element to describe the purpose of a graphical link
- WCAG HTML - 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
- WCAG HTML - H30 Example 5: A link contains text and an icon, and the icon provides additional information about the target.
- WCAG HTML - H30 Example 6: Indicating the file type in the link text (PDF, DOC, XLS etc)
- WCAG HTML - H30 Example 7: Using a link to wrap block level elements in HTML5.
- WCAG HTML - H33 Example 1: Clarifying the purpose of a link
- WCAG HTML - H59 Example 1: Using the link element
- WCAG HTML - H77 Example 1: Identifying the purpose of a link using link text combined with its enclosing list item
- WCAG HTML - H77 Example 2: A list of video games for download
- WCAG HTML - H78 Example 1: Identifying the purpose of a link using link text combined with its enclosing paragraph
- WCAG HTML - H79 Example 1: 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
- WCAG HTML - H80 Example 1: Identifying the purpose of a link using link text combined with the preceding heading element (e.g blocks of information on hotels)
- WCAG HTML - H80 Example 2: Identifying the purpose of a link using link text combined with the preceding heading element (e.g. document in 3 formats)
- WCAG HTML - H80 Example 3: Identifying the purpose of a link using link text combined with the preceding heading element(e.g. newspaper web site)
- WCAG HTML - H81 Example 1: 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 (e.g. document in 3 formats)
- WCAG HTML - H81 Example 2: 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 (e.g. blocks of information on hotels)
- WCAG HTML - H83 Example 1: Using the target attribute in a link to indicate that it will open in a new window
- WCAG HTML - H91 Example 1a: Using text inside the link for the link name
- WCAG HTML - H97 Example 1: Grouping related links using the nav element (e.g. navigation links
- WCAG HTML - H97 Example 2: Grouping related links using the nav element (e.g. multiple navigation links)
- WCAG HTML - H97 Example 3: Grouping related links using the nav element (e.g. generic mulitple navigation links)
-
Tab Order
- WCAG HTML - H4 Example 1: Creating a logical tab order through links, form controls, and objects
- WCAG HTML - H4 Example 2: giving all elements the same tabindex value where tab order follows content order
- WCAG HTML - H34 Example 1: Using Unicode right-to-left marks and left-to-right marks
- WCAG HTML - H56 Example 1: Using the dir element
- WCAG HTML - H70 Example 1: Using frame elements to organize content
- Tables
-
Landmarks
- WCAG ARIA20 - Example 1: Using the region role to identify a region of the page (e.g. regions on a news web site)
- WCAG ARIA20 - Example 2: Using the region role to identify a region of the page (e.g. regions on a bank web site)
- WCAG ARIA20 - Example 3: Using the region role to identify a region of the page (e.g. portlet with generic regions
- WCAG ARIA13 - Example 1: Using aria-labelledby to name regions and landmarks (e.g. page text landmarks)
- WCAG ARIA13 - Example 2: Using aria-labelledby to name regions and landmarks (e.g. application landmarks)
- WCAG ARIA6 - Example 1: Using aria-label to provide labels for objects (e.g. distinguishing navigation landmarks)
- WCAG ARIA6 - Example 2: Using aria-label to provide labels for objects (e.g. identifiying regions)
- WCAG ARIA11 - Example 1: Using ARIA landmarks to identify regions of a page
- Lists Used in Various Frameworks