Landmark Regions

Accessibility Tree and Screen Reading Devices

Elements contained in the accessibility tree can be navigated using Assistive devices such as screen readers. You can see what is contained in the accessibility tree by activating it in the Chrome Developer tools by clicking the option to "Enable full-page accessibility tree". This places and accessibility icon in the top right hand corner of the Inspector that allows you to switch between the regular DOM Elements and the elements visible in the Accessibility Tree. Elements listed in the Accessibility tree will be read out by screen reading devices.

There are several screen reading devices that can be used to test web page navigation. Narrator is a built in screen reader for windows. Voice Over is a built in screen reader for Mac OS. NVDA is a free open source screen reader from NV Access. And JAWS is a paid screen reader which features the most advanced features but is likely overkill for website testing purposes. All of the videos in this series that feature screen reading examples use Narrator.

Learning a few of the basic commands for the screen reader of your choice will go a long way in to understanding how well disabled people can navigate and use the sites you create.

Main Landmark Regions

In Webflow the main ARIA Landmark regions are created by using HTML Elements. Some built into prebuilt components and others by adding the appropriate HTML Element Tag. Adding these simple landmarks allows them to navigated using assistive devices such as screen readers by using the accessibility tree.

The main ARIA Landmarks and HTML Elements we will be exploring are:

• Header element which creates Banner Landmark
• Nav element which creates Navigation Landmark
• Main element which creates Main Landmark
• Footer element which creates Content Info Landmark

Header and Nav

These first two HTML elements are bundled together because they are both contained in the prebuilt navbar component. The navbar wrapper is an HTML header element. And the nav menu can be given the tag of Nav.

Main

Any div that is given the HTML element Tag of Main will become the Main Landmark region. This region should contain the main content of the site.

Footer

The footer HTML tag givs a div the Landmark Region of Content Info. More commonly known as the Footer which is located at the bottom of the page and contains common information such as links, and copyright.

Making Sections Accessible

In Webflow the section element groups relateable content. But for accessibility purposes we need to add additional information to turn a section HTML element into an ARIA Landmark region. A section does not appear in the accessibility tree if it does not contain the custom attribute of aria-labelledby or aria-label.

aria-labelledby

To add accessibility to the section HTML element a label must be given to it in the accessibility tree. One of the ways to do this is to give it the custom attribute of aria-labelledby. Aria-labelledby uses the text content of a chosen element to provide that label by matching it to that text elements ID. It is often applied to the header element of a section but it can be applied to any text element visible or visually hidden.

There are two advantages to using this method to label an accessible section. The first, as the label is tied to text content, when that content changes, the label changes automatically along with it. Secondly, again because it is tied to text content, when the text is translated to various languages the label is translated as well.

Because of the extra steps this requires and needing to keep track of which text element ID is associated with the aria-labelledby some people may choose to go with the second option.

aria-label

The aria-label attribute is applied directly to the section element as a custom attribute and the value becomes the text for the label. Because the attribute is applied directly to the element in question it can easily be identified and manually changed.

The application of either of these methods will allow screen readers and other assistive devices to navigate directly to the sections as Region Landmarks. Which provides users a more comprehensive roadmap beyond the main landmarks.

Aside and Complementary

The Aside HTML element tag adds a Complementary Landmark to a page. It is a top level landmark and used for conent that is on the same level of heirarchy as the Main Landmark. It is complementary to the Main content but is meaningful wihtout it. It is often used for sidebar elements. Like the section Region Landmarks it is an optional page landmark that adds more accessibility over and above the Main Landmark Regions of a page.