Imagine trying to access digital content or technology, but the interface is so cluttered, confusing, or poorly designed that it’s nearly impossible to use. For many people with disabilities, this is an all-too-common experience. That’s when accessibility comes in.
But how exactly do we define accessibility in the context of digital design?
Designing for accessibility means making sure that every person can engage with and enjoy the digital world, regardless of their abilities. Just like a great party host, designers must create inclusive designs that accommodate everyone. By prioritizing accessibility, we can ensure that nobody is left out.When referring to accessibility in design, there’s a common myth going around that establishes adding accessibility to the design process is expensive. Well, that my friend, is in fact, just a myth. Incorporating it from the beginning is less expensive, easier and more effective than making improvements as a whole separate project.
Bonus: Meeting accessibility standards will also indirectly help your SEO
Accessibility is not about a checklist, it’s about people.
The Curb-Cut Effect
So, the magical thing about working on accesible designs is that we are not only helping the 16% of the population that have disabilities. We might, in fact, be helping the 100% of the population. Too ambitious? We have the curb-cut effect to thank for this.The curb-cut effect establishes that when we design for disabilities we make things better for everyone in the process. As the very best example, the name of the effect comes from the curb cuts (shocking, I know) added to sidewalks for wheelchairs. But these ramps turned out to be useful not only for wheelchair users, but also for people pushing strollers, bikes, elderly people, travelers with a suitcase and so on.
We need to keep in consideration that some disabilities can also depend on the context. A broken phone screen or too much sunlight if working outside on our laptop can also affect our experience even if we don’t have a visual impairment.
Ok, cool. But now where do I start?
In May 1999, the Web Content Accessibility Guidelines (WCAG) 1.0 were established. They created all standards that are internationally used to this day as guidelines to meet accessibility in the web. And when I say guidelines I also mean legal requirements in some countries.
The WCAG established three conformance levels: A, AA and AAA:
Level A: This level of accessibility is achieved when minimum conformance requirements are met. It includes providing textual alternatives for images or non-text content, allowing assistive technologies to understand the content, and ensuring keyboard accessibility for all content.
Level AA: Going beyond Level A, Level AA adds further accessibility requirements. This includes maintaining a minimum contrast ratio of 4.5:1 between text and backgrounds, implementing consistent navigation throughout the content, and enhancing overall accessibility for users with disabilities.
Level AAA: The highest level of accessibility, Level AAA, encompasses the criteria from Level A and Level AA while incorporating further conditions to maximize accessibility. It includes a text contrast ratio of 7:1, sign language translations for video recordings, and ensuring content is at a maximum ninth-grade reading level to cater to a wide range of disabilities.
The conformance level that is recommended to follow (and usually the legally accepted) is AA. Meaning, following all requirements in A, and all requirements in AA. This level of accessibility ensures that our digital content meets the necessary standards to provide an inclusive experience for users with disabilities.
Now the fun part, let’s talk about designing for accessibility
So, theory is super fun right? Right?!
But when the time comes to actually designing, it can be tricky to get into the WCAG website and search for all the compliance criteria. So here is a little help to start.
The WCAG created their content under four important principles:The user interface needs to be Perceivable, Operable, Understandable and Robust. These principles ensure that everyone is able to navigate and interact with digital products no matter if they have physical disabilities such as vision loss or if they have neuro-diversity conditions like dyslexia.
Let me give you some examples for these principles to be clearer:
Perceivable
For a site to be perceivable all its content needs to be available for all users. For instance, If I have important information conveyed in an image, that information needs to also be accessible to people with visual constrains. This can be achieved through the <alt> description of the image. These constrains can also be contextual; have you ever found the need to watch a video in a place where loud noises weren’t allowed? Well, I have, in a library, studying for an online course. Thanks to the descriptions the video courses had I could study in that quiet place.
Operable
If we consider the operable principle, it means that users are able to access to all functionalities and navigate freely not only by using their mouse but also their keyboard. You can try it yourself by using your keyboard on this blog post! (Let’s hope you don’t get trapped in any part!)
Understandable
When talking about understandable, it means, for example, that when navigating a web, there won’t be significant changes and there will be consistency on the interface components. Following known patterns will ensure users will be familiarized with the web structure thus making it more understandable.
Robust
As for the last principle, robust, it states that the website needs to be structured correctly when developed. Following the right set of html tags and semantic coherence. This will ensure assistive technologies can read and communicate the content correctly to users.
Seems like a very straightforward starting point, doesn’t it?
Join me for a dive into some best practices examples
Info and relationships
Make sure to maintain the integrity of information and relationships when changing between different presentation formats that can be both visual or auditory. For example, having headers in a bold and larger font than paragraphs. This will guarantee that important information will be perceivable to all.
Error identification
When input errors can be identified automatically, ensure that items in error are clearly marked and the error message is described in text as demonstrated in the example below.
Focus order
Make sure that elements that receive focus while operating or navigating the page are sequential and meaningful.
Let’s talk about some of the basic standards
To address the concern for accessible website design, the W3C developed a series of accessibility standards. Let’s explore a few examples of these standards:
Color contrast:
A visual impairment can make it difficult to perceive colors and use digital products. To make products more accessible, designers can use high-contrast colors, visual cues, and alternative text descriptions for images. Considering this impairment in design can create more inclusive products for a wider range of users.
As illustrated in the example below, contrast is measured by comparing the luminance of a foreground and background color. For smaller text (anything below 24px) a minimum ratio of 4.5:1 is recommended. For larger text, this ratio can be adjusted to 3:1.
Text size and zooming:
Font sizes play a crucial role in web accessibility. To ensure optimal legibility, default font sizes should not be too small.
- A recommended size of 16px for body text is generally suitable, depending on the target audience and device.
- It is important to avoid default fonts smaller than 12px as they may become illegible on certain platforms.
- Accessibility guidelines urge us to embrace the ability to zoom text to 200%. In line with this, employing fluid layouts that can accommodate 200% text is highly recommended.
Text spacing:
Besides creating a clear visual structure using headings, paragraphs, and lists, there are a few essential factors to remember when improving the readability of your content:
- Line height: Line height or line spacing (distance between baselines of each line of text) is set at least 1.5 times the font size.
Paragraphs spacing: Spacing following paragraphs is set at least 2 times the font size. - Letter spacing: Letter spacing or kerning (distance between two letters) is set at least 0.12 times the font size.
- Word spacing: Word spacing or tracking (the space throughout the entire word) is set at least 0.16 times the font size.
So, are you implementing accessibility throughout your design process?
As UX designers, we have the power to create inclusive experiences by integrating accessibility into our designs. It’s not just about applying a quick fix later on (no shame in admitting it!), it’s about considering it from the very beginning.
Ready to embrace the power of accessibility? Let’s dive in together