Accessibility: Preparing Your Website for Screen Readers
3 min read
Some of your site visitors may use assistive technologies such as screen readers to navigate your site. Screen readers are applications that are used by those who have visual impairments. They scan your site's content, and then "read" the content aloud to the visitor. Visitors who use screen readers also generally use the tab key to navigate through your site, as they may not be able to see where to click.
Your site's DOM order is the order in which screen readers and the Tab key highlight and / or "read" content on your page. It should follow a logical order to ensure your visitors get the best possible experience on your site, and can understand and enjoy its content.
Note:
Some visitors may not use a screen reader but still use the Tab key to navigate your site, such as those with mobility issues. Therefore, we recommend always ensuring that your site's DOM order is correct.
In this article, learn more about:
About your site's DOM order
The DOM is the order of elements on your site. It is particularly important when your site visitors are using screen readers and / or the Tab key, as they need to be able to navigate around your site in a logical order. For example, the site menu should come first, followed by the rest of the elements in the header, then the page title, then the page contents, etc. If the DOM order is incorrect, it can cause the screen reader / Tab key to skip or jump around your page content.
Wix automatically sets a DOM order for you. The sequence uses the visual order of the elements; from left to right, and top to bottom. When developing our accessibility tools, we test our products using the following screen readers:
- Windows + Firefox or Chrome: NVDA (Free reader)
- iOS + Safari: Voiceover (Built-in reader)
This means that we've created your site's automatic DOM order with the above applications' functions in mind. You can test out the automatic DOM order of your site by using your keyboard's Tab key or a screen reader on your live site.
Changing the DOM order of your site
If you test your site's DOM order and notice that the order is not logical, you can manually change it in the Accessibility Wizard. The Wizard is a tool that scans your site, locates potential accessibility issues, and provides actionable solutions to rectify these issues. As well as this, you can also use the Accessibility Wizard to change advanced accessibility settings on your site.
Important:
If the tabbing order of your site is logical, then you don't need to do anything. Changing the order when it is already correct can cause issues for visitors using screen readers and / or the Tab key.
To change the DOM settings:
- Select Settings on the top bar of your Editor.
- Select Accessibility Wizard.
- Select the More Actions icon
at the top right of the Wizard.
- Select Advanced accessibility settings.
- Select Automatic DOM Order.
- Disable the toggle in the panel.
- Select Turn It Off in the pop-up window.
- Select the Layers icon
at the bottom left of the Editor. - Check over the list and delete any redundant elements. This includes duplicate elements that do not have a use on your site and can confuse screen reader users.
- Drag and drop the remaining elements into the desired order.
Notes:
- Navigating a site using the Tab key only navigates through the interactive elements and not static elements such as text. If you want to test out a screen reader on static elements such as text, follow the instructions in your screenreader's help center on how to properly navigate a website with a keyboard.
- Pinned elements are automatically placed at the end of the tabbing sequence. If you want it to be tabbed earlier in the sequence, we recommend that you unpin the element and place it in the header.
Next steps:
- Open the mobile Editor and repeat the same steps.
- Go back to the Accessibility Checklist to continue working on your site's accessibility.
Did this help?
|