Designer’s introduction to accessibility
According to research by CDC, 1 in 4 Americans is affected by a disability. Such a large number makes accessible design a priority. It is not an edge case or a too small of a group to consider. I would recommend to mention this statistic when when advocating for accessible design in your organization.
As a designer, it is easy to forget about accessibility when working on a project and getting lost in the process. Developers and designers should share the responsibility for inclusive design, and remember to always make it a part of the process. A lot of great accessibility work can be done during development, however there is a lot of things designers can fix even before the implementation stage of the project. If you looked through WCAG then you know it can be a little overwhelming to try to find the specific actinable items for designers. Here is my short introduction to designing for accessibility, which will help you get started!
Before we dive in, let me give you a quick overview of different types of disabilities and assistive technologies. This is not an extensive list, but it is helpful to gain some understanding of technologies currently available. When thinking about your users consider what they use when they are looking through website — for example, if someone is using a screen reader, which reads the page from top to bottom, is the order of information prioritized?
Quick overview:
Vision Impairments. Examples include blindness, low vision or color-blindness. Did you know that 1 in 10 males in North America have some form of color-blindness? Typical assistive technologies: screen readers, screen magnification or braille output devices.
Mobility Impairments. Examples include arthritis, paralysis, seizure disorders and other conditions restricting fine motor control. Typical assistive technologies include: speech input, eye tracking devices, adaptive switches, and mouth sticks. All content should be available using only keyboard, which is useful to know when giving feedback on your implemented designs.
Hearing Impairments. Examples include deafness and hard of hearing. Typical assistive technologies: hearing aids, captions, transcripts and sign language. Very important, when including videos on your website.
Cognitive Impairments. Examples include ADHD, Autism, Dyslexia, extreme fatigue. Typical assistive technologies: screen readers, text highlighting or prediction.
Vestibular Disorders. Examples include vertigo, dizziness and other balance and eye movement disorders. Currently there are no assistive technologies available, however we can help through carefully designing motion.
Speech Impairments. Examples include muscular or cognitive issues that impair speech. Remember to not rely only on voice input, and always provide an alternative option.
Seizure Disorders. Seizure Disorders can be triggered by flashing light sequences, remember to be careful when designing videos or animations.
A lot of the accessibility resources online are more useful for developers, since they have the power to bring beautiful, accessible designs to life. As designers, we should help developers succeed by thinking about accessibility in all stages of the design process. Here is a short introduction of what we can do as designers, to create inclusive designs:
Carefully select your colors
- Good contrast is key. For example, a color-blind person has to see a sufficient contrast between the text and the background of the button to be able to read it. Users who are in brighter, sunny environments would also benefit from the better contrast. Check out this contrast checker, which helps you find the right colors.
- Do not rely just on the color to communicate your message. If someone is not able to distinguish between the colors, they will not be able to see it. This is particularly important when designing success/confirmation or error messages.
Design robust interfaces
- Provide confirmation for all actions. In general, users expect information that their action was successful. This is even more important for screen readers, as not hearing any feedback after completing an action will make the user assume they were not successful.
- All actionable items should be big enough, so the user can click them easily. For some of the users with motor impairments this is particularly important, having clear and big targets should help them navigate easily.
Design content carefully
- Avoid using images with text (as one file). Instead provide only the image and communicate the text to the developer. If someone is zooming in to read the page, the text should scale as well, and if it is within the code — it would provide a better resolution.
- Avoid fully justified text. Some users are sensitive to the white spaces within that text and are unable to focus on the text — they might be able to only focus on the white spaces within fully justified text.
Streamline forms
- When designing forms, make sure the form labels are not designed as a placeholder text, which disappears once user starts typing. Users with memory loss might not be able to remember the label once it disappears. In addition, users checking if they filled in the form correctly, have no option to review if all the fields are filled-in correctly, if they do not remember the labels.
- Display the errors next to the relevant input field. If a user with visual impairment, has to zoom in to be able to read everything on the screen, they should be able to read the error and correct it within the zoomed in view.
Pay attention to movement
- Ensure carousels or other animations can be paused, in case the user is sensitive to movement. This article by Facundo Corradini is a very well written resource which will help you understand vestibular disorders: Accessibility for Vestibular Disorders.
- Avoid including videos, animations, or transitions with flashing light sequences of 3x per second or more.
I would like to end this article with additional recommendations. Your journey to accessible design only just began!
Useful links:
