Web Accessibility

In this article, we share some guidelines you should follow when designing a website to make it (more) accessible.

Table of contents

• Basic knowledge
• Design with accessibility in mind

Basic knowledge

Web accessibility means that everyone, including users with disabilities and impairments, can perceive, understand, navigate, interact and contribute to the Web. While Web accessibility is mostly associated with improved access for users with all kinds of disabilities, including auditory, cognitive, neurological, physical, speech, and visual, it also benefits people without disabilities as it provides a better user experience for everyone.

To give you clear ideas on how to make the web more accessible, the Web Content Accessibility Guidelines (WCAG) were created. These guidelines are based on four pillars:

1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive with their senses
2. Operable: Interface components and navigation must be operable by mouse, keyboard, and assistive devices
3. Understandable: Information and the operation of the user interface must be understandable without confusion
4. Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies

Each of the four accessibility principles listed above can be measured using a success criteria level. This can be:

• A: Basic requirement for accessibility
• AA: A medium or good level of accessibility
• AAA: The highest and complex level of accessibility

Ensuring at least the lowest level of accessibility by removing the most significant obstacles already improves the handling and access in the Web.

Design with accessibility in mind

When you create a website, there are some easy convertible guidelines that you can keep in mind:

• Ensure that a logical structure for your website content.
• Use titles that clearly explain the page, and make sure to use different titles that are not similar to each other. This makes it easier to differentiate pages when using an assistive screen reader - without the need to see the layout for context.
• Avoid long texts and use simple language. 
• Using spacing to make display the relationship between content more effectively.
• Add alt text to all images to describe and explain the image briefly. Again, try to avoid alt texts that are too similar as they also can be read out loud by assistive devices. Similarly, make sure that video content has an audio alternative or transcript that can be read by screen readers.
• Use a font size that is big enough or if you choose smaller font sizes, make sure that the content is readable on all screen sizes, e.g. when a user needs to zoom in. Simply said: make sure to designs for different devices, views, and screens.
• Be careful when choosing colors. Some basic guidelines are:
  • Avoid bright colors or faint colors that are too hard to see. 
  • Make sure to use high contrast ratios for text, meaning that the text is clearly distinguishable from the background and thus easy to read. According to WCAG 2.0  a contrast ratio of at least 4.5:1 is required.
  • Avoid clashing colors that could induce eye strain.
  • You can use tools such as Contrast Checker to check your site for issues.
  • Avoid colors being part of instructions.
  • Colors shouldn't be the only indicator of important information
• Avoid flashes, blinks, or moves too fast for all kinds of elements like texts, buttons, or images as they can trigger seizures, make it hard to read the content, or makes it hard to understand the content or even confuses or distracts users
• Use explanatory graphics or images and/or written instructions for audio content - this also means that you should avoid audio-only content
• Give users controls to replay, advance, and pause any kind of media content on your website.
• Avoid voice-only controls.
• Give users enough time to respond or complete a task before a timeout, so timing shouldn't be an essential part of any activity
• Make sure that navigation elements are consistent throughout the site
• Add form fields that have accurate labels
• Give clear and informative feedback for errors - it's best to use a combination of text, symbols, and colors

As you can see, improving accessibility is primarily achieved by ensuring an accessible design in combination with accessibility settings that can be adjusted in each user's browser.  

Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.