The HTML structure and semantices reflects the intent - landmarks, headings, lists, data tables

Design Notes

None

Developer Notes

Ensure that HTML structure and semantics are implemented correctly

Ensure all information conveyed visually is also conveyed through code or available in text so that blind or partially sighted people can understand the relationships between different areas of content on the page.

Landmarks

Defining sections on the page with ARIA landmarks allows users of screen readers to easily skip from one section to another and understand where they currently are located on the page.

Key landmarks

• banner: at the top of the page, usually contains the logo
• navigation: elements that link to other pages, usually in the banner
• search: the search field, usually in the banner
• main: contains the main content of the page. It should be unique on each page.
• contentinfo: the footer. This is shared across pages.

You'll need to define headings, lists and data tables in content areas too.

WebAIM Introduction to ARIA Landmarks

Headings

Properly structured headings help users to build a picture of content structure and hierarchy. Properly marked up headings help screen reader users in particular as they may choose to can navigate via page headings (skipping other content), making their journey more efficient.

Nomensa: How to Structure Headings for Web Accessibility

Lists

Using lists to group content on a page improves accessibility as assistive technologies often report the number of lists on a page as well as the number of items in a list. This helps people using these technologies to build up a mental picture of the page and its content.

WebAIM: Semantic Structure - Lists

Tables

HTML Tables were not marked-up correctly, people using assistive technologies will not be able to understand the relationships in the table if the mark-up is incorrect.

Further information: W3C: Tables

Table implementation

• A visual header should be assigned using the <th> element
• Table data should be assigned using the <td> element Use the <caption> element to assign a caption. Table captions help users to determine the overall content of the table
• Table headers should not be left empty, users of assistive technology especially, would need to understand the relationships of data contained in the table.

Testing Notes

Landmarks are used when possible

Key sections of the page have been defined using ARIA Landmarks

Key landmarks

• banner: at the top of the page, usually contains the logo
• navigation: elements that link to other pages, usually in the banner
• search: the search field, usually in the banner
• main: contains the main content of the page. It should be unique on each page.
• contentinfo: the footer. This is shared across pages.

Steps to check:

• Check results from automated tool such as ARC Toolkit

Impact range: Medium - Low

Test type: Semi-automated

Tool:

• ARC Toolkit (Landmarks)

WCAG Reference: Understanding Success Criterion: 1.3.1: Info and Relationships

Headings are in sections and sub-sections

• The order of heading levels is logical and helps users to understand the hierarchy and relationships in the page
• Text acting as and/or visually styled as a heading is marked up as such

Steps to check

• Check results from automated test — for example using ARC Toolkit
• Turn on 'Outline headings' option from Web Developer toolbar and manually confirm structure

Impact range: Medium

Test type: Semi-automated

Tool:

• ARC Toolkit (Headings)
• Web Developer extension

WCAG Reference: Understanding Success Criterion: 1.3.1: Info and Relationships

Lists are used appropriately

Elements acting as and/or visually styled as lists and list items are marked up as such

Unordered lists, i.e. denoted with bullets or non numerical symbols, are marked up with <ul> tag

Ordered lists, i.e. denoted by numerical characters and items of which follow a sequential order, are marked up with <ol> tag

Steps to check

• Check results from automated test — for example using ARC Toolkit
• If familiar with Chrome Developer Tools (Firefox will be similar), inspect element and review the mark-up in the DOM

Impact range: Medium - Low

Test type: Semi-automated

Tool:

• ARC Toolkit (Lists)
• Web Developer extension

WCAG Reference: Understanding Success Criterion: 1.3.1: Info and Relationships

Data tables are used appropriately

Content acting as tabular data is marked up as such.

• A visual header should be assigned using the <th> element.
• Table data should be assigned using the <td> element.
• Use the <caption> element to assign a caption. Table captions help users to determine the overall content of the table.
• Table headers should not be left empty, users of assistive technology especially, would need to understand the relationships of data contained in the table

Steps to check

• Check results from automated test — for example using ARC Toolkit
• If familiar with Chrome Developer Tools (Firefox will be similar), inspect element and review the mark-up in the DOM

Impact range: Medium

Test type: Semi-automated

Tool:

• ARC Toolkit (Tables)
• Web Developer extension

WCAG Reference: Understanding Success Criterion: 1.3.1: Info and Relationships