Experience & Design

Why inclusive design is important for all of us - part 1

Alena Riha

Junior UI/UX Designerin

Published

May 22nd, 2022

Updated

June 22nd, 2022

3 min

What does accessibility mean for (web) design and digital products?

Accessibility means availability. This applies to public buildings, means of transport, and many other aspects of our daily lives, including the digital world. Accessible design, especially web design, involves designing in a way that allows anyone to use and interact with it. It particularly takes into account people with disabilities. Accessible design enables these people to navigate a website or other digital product and understand all of its content. Therefore, we aim to make the digital world accessible to everyone.

Why does accessibility in the digital world affect us all?

In Austria, around 19.3% of the population aged 15 and over are restricted by health impairments. 95% of them were health-impaired for longer than six months. Therefore, 18.4% have a permanent impairment, which equates to approximately 1.34 million people in Austria aged 15 and over.

Almost 20% is a significant proportion of people with one or more impairments. In addition to those who are permanently affected, there are also temporary impairments, such as a broken arm, eye injury, etc. Therefore, this issue affects more people than you might think, including yourself, whether temporarily or even situationally.

In this case, situationally means that, for example, driving a car can impair my ability to use a product, such as a navigation system, and it would be practical to interact with the product via voice recognition.

Moreover, a website that is accessible complies with EU guidelines and is not uninteresting for companies as they can reach a larger customer base through accessible websites. Additionally, a company can improve its search engine ranking with an accessible website.

Design Thinking Introduction

Free

What is Design Thinking and how can your organisation utilise it to your benefit.

Microconsulting

Free

You have a question and need some advice. One of our experts will be in touch and offer you expertise.

Visual impairment

The key terms here are color contrast and typography. In addition to nearsightedness and farsightedness, there are also people with color blindness. Through color concepts with minimum contrasts, I can check whether the contrasts in my design are sufficient or whether I need to make adjustments. A high-contrast mode can also be optionally provided. To check the contrast of my own designs, I use the Stark plugin via Figma. I have written more about this in this article.

The same applies to typography. Optional modes can also be offered here, where the font size can be changed. It is essential to note whether, at a low screen resolution, the enlarged text/a text block is fully readable without horizontal scrolling.

Assistive technologies such as screen readers and Braille displays are also great support but require a logical source code of the website, alternative text for images, and semantic designations to reproduce everything meaningfully.

In addition to the ability to enlarge texts, it would also be essential to make the website zoomable for users. Up to 200% zoom capability is recommended.

Motor impairments

When someone is motorically impaired, they can usually use the keyboard to navigate through a website. Other aids include touchscreens, joysticks, or gaze-and-mouth-controlled cursors. To ensure that this works flawlessly, distances between buttons, the arrangement of content, text blocks, buttons, as well as form fields need to be considered. Not only is structured page layout important, but also the order of the content. Technical measures must be taken, which is why I recommend working closely with the developer, ideally before and during the conception of the project.

Hearing impairments

For people with hearing impairments, spoken language can be difficult, which is why providing content in easy language is advisable. In addition to easy language, it is also recommended to offer content in sign language. For videos, it is recommended to use subtitles or provide transcripts for audio files in addition.

Other impairments

A header with great image and video effects when arriving on the homepage or flashy animations can definitely be an eye-catcher. However, for people who suffer from epilepsy or vestibular disorders, this can trigger seizures in the worst case scenario. Dizziness and headaches can also be caused by animations. Therefore, one should handle such elements and effects with caution or carefully consider when, how much, or whether to use them at all, and whether they are essential.

Checklists and plugins

As previously mentioned, plugins, particularly Stark, are very helpful for me in checking the accessibility of my designs on Figma. Additionally, there are online checklists that I recommend referring to and going through before approving a design or during the process of creating the first draft.

Barrierefreies.Design provides a clear, interactive checklist for this purpose:

(https://barrierefreies.design/barrierefreiheit-interaktiv-testen/checkliste-fur-barrierefreies-webdesign)

The WACA, the first and only quality seal in Austria for web accessibility, also offers a quick guide and overview of points to consider before launching a website: https://waca.at/checkliste-so-ist-die-website-fur-alle-nutzbar

In addition to Stark, there are other useful plugins that can assist in checking for accessibility:

A11y is a color contrast checker that integrates a slider to adjust and check color combinations and text thickness.
Color Blind also allows previewing color schemes for people with color blindness.
Text Resizer allows adjusting text sizes within WCAG conditions.
A11y Focus Order allows us to check the structure and order of frames, images, text, etc.

Conclusion

Accessibility concerns affect each and every one of us, and we all benefit from it.

It may be permanent, temporary, or situational.

From motor impairments to people with epilepsy, there are several points to consider when it comes to accessibility. Likewise, checklists and plugins provide useful assistance in checking and improving accessibility in our designs.

In the second part on Accessible Design, I will explain in more detail how companies can benefit from it, what the WACA is, and what legal obligations exist in Austria regarding website accessibility.