ARIA Landmarks

ARIA landmark roles provide a method for screen reader users to navigate structural regions of a site.

This property can be added to any HTML element as role="banner"

Taken from the official HTML Documentation:

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.

If there are two ARIAs with the same role, we can further specify the role by adding an aria-label to the HTML element. For example, if two navigation menus exist in the site, we can label each one to further specify its exact role on the page.

Semantic HTML

Semantic HTML is about choosing the element that best presents the purpose of the content.

  • Most HTML elements have specific meanings:
    • HTML5 landmarks like <header>, <nav>, <main>, <aside> and <footer> give structure to a page.
    • Headings (<h1> up to <h6>), paragraphs (<p>), images (<img>), lists (<ul> and <ol>), and for example quotes (<blockquote>) give meaning to the content.
    • Buttons(<button>) and links(<a>) add interaction with the page.

When you use the right elements for the job, your site works better on all devices. You can always change the way they look by using CSS if the native look of an element is not to your liking.

The CSS class screen-reader-text

The screen-reader-text class is a WordPress generated class and is used mainly to hide text visually that is primarily needed for screen reader users.

  • The class is also used for skip links to ensure keyboard navigation visibility when the link gets focus. Expand to see more on skip links.

    Before the main content, there can be navigation links, search, or other elements. For keyboard and screen reader users it can be frustrating to get to the main content of a page because you have to tab through all these elements every time over and over again. By implementing a skip link (also known as skip to content links), those users can skip all these elements and jump right into the content.

Here’s an example of some invisible text to make a link meaningful out of context:

<a href="your-url">Read more<span class="screen-reader-text"> about cute kittens</span></a>

Heading structure

Headings are the backbone of your content structure and describe the content on a webpage. Good headings also make the site more easily scannable.

Use HTML headings to meaningfully describe the content that follows rather than as a design element.

Use the resources below to familiarize yourself with how to properly structure headings.

Accessible HTML5 heading structure in WordPress

Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example.

Test Tools

WordPress showcases these accessibility testing tools. My favorite of the four is Tota11y.

These tools allow you see your site the way that a screen-reader would see the site.