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.
Do it on your templates
While you can implement these measures on individual websites, it would be a good idea to build them into your templates so that they are already there every time you start a new website.
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.
Enable ARIA on your templates, then they'll be there on all the websites you create.
2. Enable and style the skip navigation 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 navigation and how to style it here.
Enable skip navigation on your templates, then it'll be there on all the websites you create.
Also, try to use one of your Global Colors for the element so that it matches the overall website style, even if colors are changed later on.
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.
Enable focus indication on your templates, then it be there on all the websites you create - but be aware that the focus indication outline will show on the element in focus for all visitors to the website, not only those using assistive technologies.
Also, try to use one of your Global Colors for the focus indication so that it matches the overall website style, even if colors are changed later on.
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/.
Make sure that all relevant content elements on your website are inheriting colors from Global Colors and Global Texts. That way, it's extremely easy to change the visual presentation of a website later on in just a matter of seconds.
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.
Build up a set of text styles with the proper font sizes and make sure that all your text paragraphs inherit from one of those styles. That will make it really easy to change font sizes later on.
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.
If your templates contain meaningful images that are likely to also be part of the finished website, make sure to type in an alt text on template level.
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.
Add the [company_name] Global Data tag in the page title field to automatically fetch the company name and insert it into the page title. The page title will update automatically if company name is changed in Global Data.
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.
Even though your template may only contain example text paragraphs that need to be replaced with real text, mark them up anyway on template level so that they have the proper heading structure.