Author(s): Monika Manuela Hengki
Accessibility is the practice of making your websites usable by as many people as possible — we traditionally think of this as being about people with disabilities, but really it also benefits other groups such as those using mobile devices, or those with slow network connections. --MDN Web Docs
Accessibility is important for users with disabilities to access the Web. There are many kinds of disabilities, including:
At the same time, accessibility also benefits people without disabilities, for example:
More information on the above can be found on this article.
Improving accessibility also brings some benefits to you as a developer:
There are many ways to improve the accessibility of your website. Below are some tips, based on the type of disabilities they address.
Users with visual impairments rely on assistive technologies such as a magnifier or a screen reader.
Let us look at the Facebook sign up page. Suppose I want to sign up for a new account, but I have not put in all the necessary information. So, it is supposed to tell me that my attempt to sign up has failed.
However, to someone with a type of color blindness called achromatopsia, this is how the page looks like:
To someone with another type of color blindness, deuteranopia, the page looks like this:
It may be unclear to color-blind users that the sign up has failed. To avoid confusion, we should not rely on colours alone to convey a message. Instead, we should use more visual indicators such as icons or an explanation box.
To users with good vision, the design may look minimalist and clean. However, to someone suffering from cataract, the page looks like this.
It gets difficult to read the news snippets because of the poor color contrast (grey on white). On the other hand, the black colored texts are still legible. Thus, we should maintain good color contrast ratio in our websites for ease of reading.
alt attribute provides alternative information for an image that can be read out by a screen reader to describe an image.
The above are some examples of best practices to follow when developing for web accessibility. More can be found in this article on developing for accessibility.
For users with hearing impairment, we should provide text alternatives to audio content, such as:
Here's a tutorial on adding transcripts. Adding captions is commonly supported in video hosting websites such as Youtube or Vimeo.
More information can be found on this article on transcripts and captions.
Cognitive disabilities range from mental illnesses to learning difficulties, difficulties in comprehension and concentration, etc. Some examples include Attention Deficit Hyperactivity Disorder (ADHD), and autism.
Such disabilities might affect how the user uses a website. It could be due to difficulty in understanding how to complete a task, remembering how to do something that was previously accomplished, increased frustration due to confusing workflows or inconsistent layouts/navigation/other page features.
Unlike other web accessibility issues, there is no quick fix to issues arising from cognitive disabilities. The rule of thumb you can follow is to always design your websites to be as logical, consistent, and usable as possible. Here are some best practices mentioned by MDN Web Docs and National Autistic Society:
People with cognitive disabilities are more easily distracted, or they may have heightened sensory awareness where cluttered pages can be overwhelming.
Here's a comparison of a cluttered vs clean website landing page taken from British Gas website.
People with cognitive disabilities are more likely to take things literally and can benefit from more visual cues.
Pages are not overly long or dense in terms of the amount of information presented at once.
An article says a rule of thumb is "No article should exceed 2 printed pages of double-spaced, 12 point text." whereas another article says "There is no "magic number" for a number of characters for content. As long as the web page content is clear, to the point and written for people". Ultimately, what's most important is what your users think, so validation during user testing is paramount.
The language used is as plain and easy to follow, and not full of unneccessary jargon and slang.
Important points and content are highlighted in some way.
User errors are clearly highlighted, with help messages to suggest solutions.
More importantly, after following the best practices, you should conduct user testing with people with cognitive disabilities. Sometimes the web page may look fine to someone without disabilities, but it could be difficult for someone with autism or ADHD to navigate through the web page.
WebAIM's Cognitive page provides a useful expansion of the ideas above, and is certainly worth reading.
Mobility impairments include paralysis, physical weakness or loss of control in limbs. This can cause users to find it difficult or impossible to use a mouse as the main form of interaction with websites.
The key to improve accessibility for mobility is to make the website keyboard accessible. Keyboard accessible means that users can navigate through the website using the keyboard. For example, users can use
Tab keystrokes to navigate through interactive elements on a page, click
Enter to open a hyperlink, etc.
WebAIM's article on keyboard accessibility provides a thorough tutorial for this.
Here are some useful tools that you can use to improve the accessibility of your website:
Google Lighthouse. Google Lighthouse is an automated tool that audits the accessibility level of your websites. It can be found in Chrome DevTools. Given a URL to audit, Lighthouse runs a series of audits and generates a report. The failing audits will show which part of the page causes it, and how to fix it.
Here's how an audit report looks like:
Color Safe Palette Generator. This website can help you to create a color palette that is based on the Web Content Accessibility Guidelines (WCAG) for text and background contrast ratios.
ChromeLens. This Chrome extension has 2 useful features:
Note that although there are many accessibility testing tools available, user testing with actual users with disabilities is still important. The automated testing tools may not point out all of the accessibility issues that actual users face.
Ultimately, the most important thing you need to start designing accessible websites is empathy for your users. Each user is unique, and each user has different needs. As a developer, you need to put yourself in the users' shoes, understand their pain points, and then develop solutions for them so that everyone can navigate through your website freely.
You are ready for your accessibility journey! Here are some resources to help you get started: