As developers, it’s easy to assume that all users can see and use a keyboard, mouse or screen, you feel everyone can interact with your web page the same way you do. This can lead to a user experience that works well for some people but creates issues for others :(
Many developers have only a little or blurred understanding of what accessibility means, of course, accessibility can be a complex and difficult topic but understanding it, its scope, and its impact can make you a better and inclusive web developer.
In this article, I’ll introduce you to accessibility, what it means, why you should care, a few tips, tools, and resources to get you started.
Gif by Jona Dinges
What is Accessibility?
Let’s start by defining accessibility and inclusion.
According to thesaurus dictionary, accessibility simply means: easy to approach, reach, enter, speak with, or use.
Inclusion is a societal ideology regarding individuals with disabilities and special education. Inclusion describes a group that’s particularly welcoming to all kinds of people irrespective of their differences.
In computer-human interaction, accessibility simply means making the web accessible and having functionalities that can be operated by literally everyone including those with all forms of disabilities, limitations, and conditions.
Those with Disabilities
According to WHO, there are about 285,000,000 people in the world today. Blind and visually impaired make up of the 285,000,000 people according to the World Health Organization (June 2012) with 39,000,000 categorized as legally blind and the remaining 246,000,000 visually impaired. The deaf and hearing-impaired make up 275,000,000 (2004) in the moderate-to-profound hearing impairment category.
Some forms of disabilities include:
- Physical disabilities (One that affects a person’s mobility or dexterity)
- Intellectual or Learning Disabilities ( People with an intellectual, learning, or cognitive disability have a reduced capacity to read, learn tasks, or process information.)
- Visual impairments (People with sight challenges, visually impaired individuals, and blind people.)
- Hearing impairments ( Deafness and hearing loss)
- Neurological disabilities ( Disabilities associated with damage to the nervous system that results in the loss of some physical or mental functions.)
Those with limitations/ conditions
Disabilities can also be conditional.
- A broken arm
- A loud restaurant
- Not speaking the local language e.t.c
All these are examples where someone may benefit from accessible practices.
Everybody is a keyboard user when they are eating with their mouse hand.
— Adrian Roselli
How can we help these people?
Web Accessibility comes to the rescue. It is a practice whereby web applications are designed and developed so that their functionality can be operated by people with disabilities.
Web Accessibility Guidelines
Throughout this article, I’ll refer to the Web Content Accessibility Guidelines (WCAG) 2.0, a set of guidelines and best practices put together by web accessibility experts to address what “accessibility” means in a methodical way.
WCAG is organized around four principles often called The POUR Principle:
- Perceivable: Can users perceive the content? This ensures that our applications are perceivable with sight, touch, or hearing senses via the browser or assistive technologies e.g Screen readers
- Operable: Can users use UI components easily and navigate the content? For example, something that requires a hover interaction cannot be operated by someone who can’t use a mouse or touch screen. This means users should be able to control your web apps elements using either the mouse, keyboard, or an assistive device.
- Understandable: Can users understand the content? Can users understand the interface and is it clear and concise? This ensures an easy understanding and smooth user experience.
- Robust: Can the content be consumed by a wide variety of users on several browsers? This ensures the compatibility of your app across several devices, browsers, or operating systems.
Web accessibility tips
Now that you understand what Web Accessibility means and why you should care, let me walk you through a few tips that would help you to build accessible websites :)
- Always add alternative texts to images
This is one thing most developers miss, I used to miss this too when I started out because I didn’t really understand the essence of alternative texts.
Alternative texts (also known as alt) is a word that can be inserted as an attribute in an HTML document to tell your website users the contents of an image. The alt text appears in a blank box that would normally contain the image. Alt-text is useful when an image is not available because of a broken link, changed URL, or something else.
Alternative texts as the name imply serve as an alternative for screen readers. They are read aloud to blind users on a screen-reader and otherscreen assistive technologies.
You add alternative texts to images with the _alt_ attribute
<img src="./school.png" alt="a private school in Kogi State.">
Another important aspect of the alt attribute is that you should be specific when adding these texts. For example, examine the images below:
Beautiful Aniekan Inyang
<img src="./lady.png" alt="a beautiful lady">
—-
<img src="./lady.png" alt="a beautiful lady smiling in front of a brown door">
Which of the code above would support accessibility more, 1 or 2?
<img src="./dog.png" alt="a cute dog">
— -
<img src="./dog.png" alt="a cute dog sitting beside a pillow on a gray couch">
Which of the code above would support accessibility more, 1 or 2?
Now you should understand the context of being specific when using alternative texts. You might not see the need, you probably would not need it, but a whole lot of users with disabilities need it.
- Design your forms for Accessibility
Ensure you add <label> to your form elements though they might not be visible. You can add labels for screen readers and still hide them from displaying to other users.
<form action="./contact.php" method="POST">
<label for="fullname">Full name</label>
<input type="text" name="fullname" id="fullname">
<label for="email">Email address</label>
<input type="email" name="email" id="email">
<label for="phone">Telephone</label>
<input type="number" name="phone" id="phone">
</form>
Ensure that your for attribute matches the id
- Always specify your web app language
<html lang="en-US">
<html lang="en-UK">
<html lang="fr">
If your app supports multiple languages or translations, ensure to specify that too.
- Don’t use tables for anything except tabular data
- Don’t auto-play video, music or other media files (Please avoid this)
- Ensure that links are recognizable. Either underlined or with a different colour
- Always provide a skip to main content option
Skipping to main content links are useful for users who use keyboard navigation only
<body>
...
<a href="#main">Get Started</a>
...
<p>
Our story is a story that explains another story. Cut the crap this is too long and I don't want to read it.
</p>
...
<main id="main">
<p> Here's the main stuff bro </p>
</main>
</body>
- Reduce your divs and make use of semantic elements
HTML5 provides additional elements, such as <nav> , section and <aside>, to better structure your content.
I’d stop here as we have tons of accessibility guidelines, but don’t worry, I’ve included links for further reading below :)
The A11y project
This is a community-driven effort to make web accessibility easier with tons of resources, events, patterns, checklists, and lots more to help you build more accessible applications. https://a11yproject.com/
Accessibility can be a complex and difficult topic. The Accessibility Project understands this and wants to help make it easier to implement on the web.
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site’s quality by simply including it as an external stylesheet.
Get the Ally.css built by Gaël Poupard here or download the equivalent web extension (chrome, firefox and opera) Alix built by Ire Aderinokun here
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public, or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. Read my previous article: Introduction to chrome lighthouse to get started.
Check the contrast of your color design for accessibility based on the Web Content Accessibility Guideline (WCAG). Check it here.
A chrome extension is helpful for understanding the problems faced by people with slight to extreme vision problems. Download here
Resources
A full list of web accessibility resources can be found here
Conclusion
Everyone should be able to access and enjoy the web irrespective of their challenges or limitations. As developers, we’re building solutions for every user and not just some users. As much as we focus on UI/UX, we should also put extra focus on accessibility. Thanks for reading!
