Nine steps to building Accessibility-friendly websites

When optimizing websites for visitors with disabilities, there are several things designers need to be aware of. The great news is that many of these items will not "just" make your website more Accessibility-friendly but also improve the overall website quality, for example in terms of SEO performance. 

Below we've listed nine important things to consider when designing for Accessibility.
 

 

1. Enable ARIA labels

Enabling ARIA (Accessible Rich Internet Applications) labels in the website code helps visually impaired users make sense of elements that don’t have text labels on them.

To enable ARIA, find the Accessibility menu within the Editor by clicking the three dots in the top-right corner of the interface and selecting Settings.

Select Accessibility settings on the left-side menu. Tick the Enable ARIA box.

Read more about ARIA here.

 

2. Enable and style the skip to content element

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. 

Read more about skip to content and how to style it here.

 

3. Enable and style the focus indication element

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.

Read more about focus indication and how to style it here.

 

4. Use proper color contrasts

Some people cannot read text on a website if there is not sufficient contrast between the text and background, for example light grey text on a light background, like this:

It's important that you use sufficient contrast between your colors so that texts are easy to read. The exact contrast pattern you wish to use depends on your primary target group. 

 

High contrast (for example, dark text on light background or bright text on dark background) is required by some people with visual impairments, including many older people who lose contrast sensitivity from ageing. Example:

 

However, some people - including those with reading disabilities such as dyslexia - require low contrast. Example:

It's easy to change the website color palette in the Editor by using Global Colors and Global Texts.

After you've decided on a color palette, run your website through one of the many freely available contrast checkers on the internet, for example https://accessible-colors.com/.  

 

 

 

 

5. Review your font sizes

When designing for Accessibility, it's generally a good idea to use larger font sizes to make the website easier for visually impaired visitors to read. Some assistive software allows users to enlarge texts themselves in the browser but doing that may break the website design as it causes paragraphs to overlap. It is therefore better to create designs that have larger font sizes by default.

 

6. Add alt text to relevant images

If you add an Alt text (alternative text) on an image, a screen reader software will be able to pick it up and read it out to the user. In other words, alt text makes it possible for visually impaired users to understand images even though they can't see them.

Alt texts can be added through all modules containing images or in the File Manager.

Below are some general guidelines on when and when not to add an alt text on an image.

An alt text should be provided for:

• Images that convey meaning.
• Images that contain text/caption. The text of the image should be part of the image’s alt text attribute.

  

The alt text attribute should be left blank for:

• Images that are decorative and do not convey any meaning that is relevant to the content which surrounds it.
• Images that are already described by sibling text elements. For example, if there's an image of a magnifying glass and right next to it you have the word “Search”, then the magnifying glass image should not have an alt text.

 

 

7. Use icons available in the Editor 

If you're adding icons to a website, try to use any native module in the Editor that contain icons as they have already been assigned a meaningful ARIA label. 

Try to avoid using an Image module to show icons as you would need to input an alt text for those images (which would take you more time).  

You can add icons through the following modules in the Editor: 

• Icon list module
• Payment icons module
• Link and download module
• List module
• Accordion module
• Social media links module

 

8. Use proper page title conventions

Good page titles are particularly important for orientation to help people know where they are and move between pages open in their browser. The first thing screen readers say when the user navigates to a different web page is the page title.

For Accessibility purposes, best practice is for titles to be "front-loaded" with the important and unique identifying information first.

Examples of poor titles:

• Welcome to the home page of Parkview Medical
• Parkview Medical | About us
• Parkview Medical | Contact us

Examples of good titles:

• Parkview Medical home page
• About Parkview Medical
• Contact Parkview Medical

You fill in the page title in the Page settings menu > Content > SEO > Page title.

  

9. Mark up headings in text paragraphs with H tags

Make it easy for visitors and assistive technologies to understand the structure of your website content by marking it up with heading tags (h1, h2, etc.). That way people can navigate to the headings — including people who cannot use a mouse and use only the keyboard, and people who use a screen reader.

You can add heading tags in the Text Editor.