The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. We meet this goal when we create websites that are accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
“The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, W3C Director and inventor of the World Wide Web
When websites, applications, technologies or tools are badly designed, they can create barriers that exclude people from using the Web.
Who Benefits from Website Accessibility?
Website accessibility is useful for everyone and essential for people with different abilities.
The four principles of the Web Content Accessibility Guidelines
Perceivable: The information cannot be invisible to all of a user’s senses.
Operable: The interface cannot require interaction that a user cannot perform.
Understandable: The content or operation cannot be beyond the user’s understanding.
Robust: Users must be able to access the content using a wide variety of user agents, including assistive technologies.
Here are some tips to put into practice, to build inclusive digital products:
1. Design for users on the autistic spectrum
Try to use simple colors and avoid high contrasting ones.
- Use simple sentences.
- Make buttons descriptive.
- Build simple and consistent layouts.
2. Design for users of screen readers
- Describe images and provide transcripts for video.
- Follow a linear logical layout.
- Structure content using HTML5 <h1> <nav> <label>
- Build for keyboard use only.
- Write descriptive links and headings.
3. Design for users with low vision
- Check Text Contrast: To ensure that most users can see and read your content they should have at least a color ratio of 4.5:1 or higher for regular-sized text, 3:1 for icons, and large text (24px and above or 18px bolded text).
- Use Color and Iconography Wisely: Don’t use color as the only visual means of conveying information. Differentiate elements with a second indicator, such as informational text, icons, textures, or thicker borders. Ensure that text and informational icons have enough color contrast.
4. Design for users with dyslexia
- Use images and diagrams to support the text.
- Align text to the left and keep a consistent layout.
- Consider producing materials in other formats (for example audio or video).
- Keep content short, clear, and simple.
- Let users change the contrast between background and text.
5. Design for users with physical or motor disabilities
- Make large clickable actions.
- Give clickable elements space.
- Design for keyboard or speech only use.
- Design with mobile and touchscreen in mind.
- Provide shortcuts.
6. Design for users who are deaf or hard of hearing
- Write in plain language.
- Use subtitles or provide transcripts for videos.
- Use a linear, logical layout.
- Break up content with subheadings, images, and videos.
- Let users ask for their preferred communication support when booking appointments.
7. Design for users with anxiety
- Give users enough time to complete an action.
- Explain what will happen after completing a service.
- Make important information clear.
- Give users the support they need to complete a service.
- Let users check their answers before they submit them.
As you can see, if you follow these basic tips you can improve the overall user experience. Accessible Design can enhance your brand, drive innovation, and extend your market reach.
Here I share some useful tools for Accessibility Testing and interest resources about this topic:
- Axe – The standard accessibility Testing
- Stark
- Website Accessibility Evaluation
- World Wide Web Consortium (W3C)
- Web and Mobile Accessibility – Deque University
Let’s make the world a better place and let’s begin making digital products inclusive. ?
Andrea is one of our stellar UI/UX designers. Find out more about our team of designers here, or take a look at other interesting articles in our blog.
