Commonly used on landing pages

Page structure and headings
Headings are ranked <h1> through <h6>. Use headings hierarchically(link is external), with the <h1> representing the most important idea on the page, and sub-sections organized with <h2> level headings. Those sub-sections can themselves be divided with <h3> level headings, and so on.

All pages should at least have a <h1> level heading giving the title of the page.

Do not skip heading levels to be more specific (for example, do not skip from <h2> to <h5>). It is permissible to skip headings in the other direction if the outline of the page calls for it (for example, from <h5> to <h2>).

ARIA role=heading

In some cases, such as legacy websites or applications, semantic heading tags may be impossible or unadvisable. In such cases, it may be possible to add ARIA attributes to existing tags in order to change their semantics. To change an element’s default semantics into a heading, use role=heading and an appropriate aria-level. This approach should be seen as a last resort.

 

Page Structure Tutorial | Web Accessibility Initiative (WAI) | W3C

 

Landmarks

A landmark is an abstract role for a section of content that is important enough that users will likely want to be able to navigate to the section easily and have it included in a dynamically generated summary of the page. Landmarks allow assistive technologies to navigate and to find content quickly.

To create a landmark role, define the purpose of the content by using a semantic element such as <section>, <nav>, or <main>, or adding an ARIA role that is a subclass of the landmark role such as role="banner", role="complementary", or role="region". Do not use role="landmark".

 

A visible label should be provided, referenced with aria-labelledby. If necessary, brief, descriptive, label can be provided with aria-label.

For screen reader users, adding landmark roles effectively create 'skip links' for screen reader users, but don't replace in page navigation as the landmark roles are not otherwise surfaced.

Best Practices

Do not use role="landmark". Do use HTML and subclass landmark roles.

Landmarks ensure content is in navigable regions. Use <main> for role="main", <header> for role="banner", <nav> for role="navigation", and <footer> for role="contentinfo". It is also good practice to include the role redundantly with the associated semantic element. It is not as good practice to use non-semantic elements, such as <div>, adding semantics with landmark roles. But do include one or the other or both. Otherwise, your content is no longer as navigable for screen reader users.

 

ARIA11: Using ARIA landmarks to identify regions of a page | Techniques for WCAG 2.1 (w3.org)

 

 

Buttons

* ARIA: button role

The button role is for clickable elements that trigger a response when activated by the user. Adding role="button" tells the screen reader the element is a button, but provides no button functionality. Use <button> or <input> with type="button" instead.

The button role identifies an element as a button to assistive technology such as screen readers. A button is a widget used to perform actions such as submitting a form, opening a dialog, canceling an action, or performing a command such as inserting a new record or displaying information. Adding role="button" tells assistive technology that the element is a button but provides no button functionality. Use <button> or <input> with type="button" instead.

This button role can be used in combination with the aria-pressed attribute to create toggle buttons.

 

ARIA: button role - Accessibility | MDN (mozilla.org)

Button | APG | WAI | W3C

 

Links

* Links Must be Clear and Descriptive

All links should be able to standalone and still give meaning to the user. Even without text around the link, users should have a good understanding of what a link is going to lead them to. This makes it easier for all users, not just those with disabilities, to navigate your content.

Entire hyperlinks, and links that are presented simply as "click here" or "click for more" are considered to be not accessible.

 

WebAIM: Links and Hypertext - Introduction to Links and Hypertext

Link Examples | APG | WAI | W3C

 

Form fields and labels

* Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. Later sections explain how to provide instructions, validate user input, and provide feedback to help users complete your form.

A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control.

 

Labeling Controls | Web Accessibility Initiative (WAI) | W3C

 

 

Tables

The purpose of data tables is to present tabular information in a grid, or matrix, and to have column or rows that show the meaning of the information in the grid. Sighted users can visually scan a table. They can quickly make visual associations between data in the table and their appropriate row and/or column headers. Someone that cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

Images

Most images require alt text to make them accessible.

What is alt text?

Alt text is hidden text used to describe the image for those who cannot see it.

Types of images and alt text

The purpose of your image will dictate the alt text. The most common type of image is “Informative."

Image Purpose	Description	Alt Text
Decorative	Conveys no new information or emotion	Empty (alt=“”)
Informative	Convey information, emotion, mood, etc.	Short description of image, emotion, mood
Complex	Graphs, diagrams	Tools and guidelines under development.
Functional	Initiates an action (linked image)	Description of the function/destination, not the image
Text	Image of text (not recommended)	Same as text in image