Make your website more accessible for a diverse range of visitors such as those using screen readers, magnifiers, etc.
The Editor is optimized for helping users of assistive technologies have the best possible browsing experience. This is accomplished through three specific features:
1. Enabling ARIA labels
ARIA labels have already been added to all relevant elements on your website but they won’t be activated and accessible to screen readers until you have ticked the box Enable ARIA in Settings -> Accessibility Settings.
In the website code, the aria-label attribute is used to define a string that labels a particular element on the website. It is applied to the website code in cases where a text label is not visible on the element in question, for example an icon, a map or a button. ARIA labels are not visibly present on the website but get picked up by screen readers and are read out loud.
Example 1: Map
With the Editor’s Map module, it’s easy for businesses to show their location to visitors. However, the location is indicated visually with a pin on the map. In other words, there’s no actual text indication unless you click on the pin. This means that although screen readers would be able to recognize the element as a map, they would not read out the location pinned on it. However, with ARIA enabled on the website, screen readers are prompted to read out an alternative text which is set up to provide the actual address pinned on the map. It looks like this when the screen reader is active on the map element:
Had ARIA not been enabled, the screen reader would return a much less meaningful response:
Example 2: Social icons
You can add icons several places on your website, for example in the Social Media Links module where you can link out to your pages on Facebook, Twitter, etc. The links are displayed as icons without a text label. With ARIA enabled, screen readers will read out a text describing the function of the icon.
Had ARIA not been enabled, screen readers would not be able to describe the icon object:
Example 3: Digital Business Card module
In this example, we have added a Digital Business Card module on a website. The module automatically adds icons to classify information on the business card, for example a pin to indicate address, an envelope to indicate email, etc. Since there is no text on these icons that can be read out loud, the aria-label attribute is used to provide text to any assistive technologies. In this example, the label in the code is “address” so this is the word that a screen reader will read out when active on the element.
Had the box “Enable ARIA” been left unticked in the Editor, a screen reader would not return any response when active on the element:
The same logic applies to all other elements without text labels, for example the X close icon on dialogues, which has been given the aria-label “Close”.
2. Enabling Skip to Content
When keyboard-only users interact with your website, they use the tab key to jump from element to element. This also means that every time they open up a new page on your website, they must tab through all the links in your main navigation (header) to get to the main content of the page. Enabling Skip to Content in Settings -> Accessibility Settings allows them to easily bypass this and make their browsing experience less repetitive.
Technically, the skip to content option is made possible by having a tabindex -1 property in the website navigation code which tells assistive technologies to disregard that particular element. Again, this doesn’t affect how the website visually appears to other visitors.
What is the user experience like?
When a screen reader user opens up a new page on the website, a “skip navigation” element will automatically appear in the top-left corner of the browser window. It is the first actionable element that the screen reader will read out. If a user clicks their space bar while on the element, the navigation will be skipped and the next focus element will be on the website body content.
Styling the Skip Navigation element
By default, the text “Skip Navigation” inherits the color setting from Global Styling -> Global Colors -> Primary Spot Color 3.
You can style the Skip Navigation element through Global Styling -> Accessibility Design -> Skip Navigation. From there you can modify the background, border and text styling on the element.
3. Enabling Focus Indication
Focus Indication is a colored outline that indicates which element is currently in focus on the website. This helps clearly indicate to users where on the website they currently find themselves.
Styling the Focus Indication element
The Focus Indication outline is black by default but can be styled individually in Global Styling -> Accessibility Design -> Focus Indication. Here you can set a color and thickness for the outline, as well as a border style.