Create an Accessibility-friendly website

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. The addition of ARIA (Accessible Rich Internet Applications) labels in the website code to help visually impaired users make sense of elements that don’t have text labels on them.
  2. Skip to content function that enables screen readers to bypass the website’s main navigation so that it doesn’t get repeated every time the user opens a new page on the website.
  3. A Focus indication outline that helps clearly indicate to users of assistive technologies which element on the website that is currently active.

  Tips for Accessibility

Make sure to read our comprehensive guide to creating Accessibility-friendly websites and templates.


Find the Accessibility menu within the Editor by clicking the three dots in the top-right corner of the interface and selecting Settings.

a1.jpg


Select Accessibility settings on the left-side menu.

a2.png

 

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 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:

a3.png


Had ARIA not been enabled, the screen reader would return a much less meaningful response:

a4.png

 

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:

a5.png


Had ARIA not been enabled, screen readers would not be able to describe the icon object:

a6.png

 

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.

a7.png


Had the box Enable ARIA been left unticked in the Editor, a screen reader would not return any response when active on the element:

a8.png

 

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”.

 

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.

  ARIA must be enabled

Please note that Skip to content will only work on your website if you have also ticked the box Enable ARIA.

 
Technically, the skip to content option is made possible by having a tabindex -1property 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 beginning of the website body content.

a9.png

 

Styling the Skip Navigation element

By default, the Skip Navigation element inherits the color setting from Global Design > Global Colors > Spot colors > Primary Spot color 3.

You can style the Skip Navigation element through Global Design > Accessibility design > Skip navigation. From there you can modify the text, background and border styling on the element.

a10.png

 

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.

a11.png 

  Focus indication shows to all visitors

Please note that if enabled, the Focus indication outline will show on the element in focus for all visitors to the website, not only those using assistive technologies.

 
Styling the Focus indication element

The Focus indication outline is transparent by default and can be styled in Global Design > Accessibility design > Focus indication. Here you can set a color and thickness (focus size) for the outline, as well as a border style (focus type).

a12.png

Was this article helpful?
0 out of 0 found this helpful