As a web developer, you create websites and web tools with functionality in mind. You may be surprised to learn that one of their most critical functionality barriers may originate from your own work. Now, cross your heart and answer honestly: when was the last time you made a solution with accessibility in mind?
Have you recently thought about making your content accessible? This may seem like a minor issue, but in the US alone, official government sources show that one in eight Internet users has a disability. In 2020, the percentage was 12,7% of the country – 40.8 million people – and has only increased since. Another study already put the number for 2021 at 18% (by including less severe disabilities).
No matter how you look at it, this group is huge. And have been severely neglected on our end.
It doesn't make sense to code a website for a group of users and leave out another group that could benefit the most from it. So, what numbers are we talking about in reality? According to the Pew Research study, 62% of adults with disabilities say they own a desktop or laptop computer, compared to 81% of those without disabilities. So, when considering the previously quoted numbers, accessibility is highly requested by 25,3 million+ users in the US only. And we're still talking about the numbers from over two years ago.
The study also shows that 13% of disabled people use the Internet daily, but only 15% say they never go online.
To address all those issues, a group of forward-thinking creators – along with the international community gathered under the world wide web consortium banner – developed a set of universal rules to make the Internet accessible to everyone. Today, we will look at the result of their work: Web Content Accessibility Guidelines (WCAG).
Table of Contents:
What is accessibility?
According to Wikipedia, “accessibility is the design of products, devices, services, vehicles, or environments so as to be usable by people with disabilities.”
As you may have noticed, this explanation deviates a little from the idea of universal design, which emphasizes making products that are (generally) usable by the most people possible.
When we think about accessibility features in our everyday lives, we usually recall practical home design solutions, the low floor in public transportation, adapted vehicles, sign translators on TV, or some urban design solutions (tactile paving, disabled parking permits, or wheelchair/pram ramps).
Some of us will also think of less obvious answers, like traffic lights with a standard color code so that people who are colorblind can know what to do on the road. Or certain shapes for road signs. We can also keep accessibility standards high by making sure our solutions compile with a person's assistive technology.
But before we get into specific technologies, let's try to define disability.
According to another Wikipedia article, “disability is the experience of any condition that makes it more difficult for a person to do certain activities or have equitable access within a given society.”
We usually think of this as a permanent (as in from birth or for the rest of the person's life) condition that is clearly noticeable (as in a person in a wheelchair, missing a body part, or walking with a white cane) and makes the person completely dependent on their surroundings.
In reality, a person's disability may be obvious or almost invisible. It could be permanent, but it could also be temporary or situational. Look at the picture below to better understand how many different kinds of disabilities there are.
As you can see, various types of disabilities can be distinguished, depending on – for example – a person's senses. When we think about people with hearing problems, we should think about not only those who are deaf but also those who have (temporary) ear infections or whose lack of hearing may be caused by a hostile environment. Because of what they did for a living, they may have spent a lot of time in noisy places. It might also be connected to their preferred activity (like being at a concert) or other elements (i.e., loud noise exposition – someone shouted in their ear).
This revolutionary thinking can be applied to most disability types, including auditory, cognitive, neurological, physical, speech, visual, or a combination of those factors. It lets us understand that, in fact, the majority of us have already experienced some level of impairment due to being ill (i.e., can't talk or hear, can't focus) as a result of an accident (can't move hand or leg), or even lack of sleep.
Based on your own experiences, you are probably aware of how challenging it is to manage your daily routine when there is no other choice but to perform some tasks in a way you are incapable of. With the help of assistive technology, this barrier is now removed for disabled people.
Which is why everyone can greatly benefit from web accessibility solutions.
Let me show you why.
Assistive technology – the golden key to pushing society forward
Nothing lasts a lifetime. We don't need the World Health Organization to conclude that our health declines as we get older (and engage in different activities).
First, we start to notice little things, like the need to turn up the video volume, the inability to write with a broken finger (or read without glasses), the requirement to zoom in on a mobile device webpage, or a strong sensitivity to the bright screen that causes physical pain in our eyes. Then, we start to mispronounce words and miss buttons.
Now imagine the frustration caused by extremely slow internet, causing the website to crash into image locations regularly. Or the feeling of being trapped in an infinite loop while trying to place the order. Or the non-existent navigation scroll bar that forces us to wander around the website only to return with the browser's 'move back' arrow.
Some of these problems may seem small, but put yourself in the shoes of a disabled person and go over the above scenarios once again. How hard is it to function that way? Now, at least several tools can help make some tasks easier – collectively called assistive technology.
Let's take a look at some examples:
No matter how cool these innovations sound, none of them are very useful on the Internet unless we add a few rules to make them work with our website or tool. Because of this, the website will continue to crash, the order may be slow, and the content may remain confusing. However, the experience will dramatically improve.
That's what the web accessibility initiative is all about: making sure potential users can use our solutions - with a special emphasis on people with disabilities.
How else can we benefit from assistive technologies during our everyday life?
Have you ever wanted to watch a video while riding the bus but forgot your earphones? Subtitles come to the rescue! Or, have you ever tried to reach this menu in the top left corner of your smartphone with only one hand available? Reachability on the iPhone or Samsung One-Handed Mode will surely come in handy (no pun intended).
The amazing side effect is that we all can benefit from web accessibility anytime, even when our health has declined. And by working together, we're constantly improving web accessibility for people of all ages and skill levels - making it easier to navigate, understand, and simply enjoy.
POUR principles: the four main rules of web accessibility
For the World Wide Web to work correctly, all people, whatever their hardware, software, language, location, or ability, must be able to access it. This is a big problem for web developers who must improve their products to overcome barriers that keep people from using the content.
Let's look at POUR, a list of four key principles from the Web Content Accessibility Guidelines (WCAG) that should be included in making any of your web-based tools or sites accessible.
Perceivable
Users must be provided with information and user interface elements to enable them to recognize content and interface components using their senses (perceive). Although it often refers to visual aspects, it can also describe sound or touch.
What does that mean in practice?
Make the web structure readable. Each page's title should reflect what's on it, especially if it's part of a multi-step process (always include the current step in the page name). Make the navigation clear by using headings with consistent naming to organize paragraphs – so the user knows what to expect on the web page. This is also useful when navigating with a voice, as it allows easy skipping between sections.
Regarding the voice, label each foreign word and phrase with the appropriate language mark so that assistive technology can read the text correctly.
<header>
<h1>Site Title</h1>
<nav><!-- links --></nav>
</header>
<main role="main">
<h2>Page Title</h2>
<section>
<h3>Section Title</h3>
<p>Lorem ipsum dolor sit amet, <strong>con</strong>
adipiscing elit.</p>
</section>
</main>
<footer>
<!-- … -->
</footer>Don't overcomplicate things when using links. Always connect the information, so the reader understands where it will lead them. Include details important to the user, such as the type or size of material they download with a click.
So, instead of linking the call to action;
For more information on device independence <a href="#">click here</a>
provide important details:
Read more <a href="#">about device independence</a>
Non-text content should have captions and alternatives. Include its function/context so that anyone using a screen reader to "read" a webpage can access the complete content. Remember that alt text is not visible in your browser unless a reader is being used or the non-text content crashes, alternative text is not visible in your browser.
<img src="logo.gif" alt="Google logo" /> Provide text alternatives to your multimedia content, such as podcasts, videos, or playlists. If the content is only audio, provide a transcription. If the content includes audio and visuals, it's always a good idea to include captions in at least one widely understood language (aside from the local one). It could also include a layer of sign language translation.
Describe everything you hear, see, and feel in the video, including sounds, movements, and reactions. This might help people who can't see or hear your material understand it better. Because of their disability or their tendency to do many things at once.
For example, use the following formula to add an <track> element, which enables subtitles, caption files, or other text-containing files to be visible while the media is playing:
<track kind="…" src="path/to/file.vtt" srclang="…" label="…" />Which could be modified to add subtitles to the audio file as well:
<audio controls>
<source src="myaudio.ogg" srclang="en"
type="audio/ogg">
<track src="caption_en.vtt" kind="captions"
srclang="en" label="English">
</audio>Or, as in this case, to use two interchangeable track elements (i.e., for different language versions) for a video:
<video poster="myvideo.png" controls>
<source src="myvideo.mp4" srclang="en" type="video/mp4">
<track src="description_en.vtt"
kind="descriptions" srclang="en" label="English">
<track src="description_de.vtt" kind="descriptions" srclang="de" label="German">
</video>Keep an eye on the clarity of instructions, guidance, and error messages, as a string of numbers usually doesn't say much to the user (unless it's an iconic 404). In addition to writing what went wrong, explain what needs to be done to complete the action. Use examples whenever possible. Anyone visiting your website may benefit from this.
In general, keep the content clear and concise. This is also advantageous to your website.
But what if you want to continue using CAPTCHA to protect forms from bots?
Because tasks are generated at random to avoid prediction, you cannot create a reasonable alt description. In general, W3 guidelines advise against using them because they are difficult for people with disabilities to complete.
If you absolutely must keep them, choose a simple task with at least two solutions or provide access to someone who can bypass the test. Alternatively, you can access an invisible captcha, which analyzes user behavior on the website.
Let me briefly describe the visual features of the web-enabled service before I wrap up this section.
To increase readability, you should always choose a proper contrast ratio to make things easy to see and hear (get the tool from the tools section). Don't rely solely on color, as colorblind people may have difficulty locating the required forms (it's best to additionally mark them with *). It’s also best to create content that can be presented in a variety of ways (for example, a simpler layout) without sacrificing information or structure.
Operable
Users must be able to use the interface. The interface cannot demand user interactions that they are unable to complete. This mostly refers to interactive elements like controls, buttons, navigation, mouseover information, collapsible accordions, or media players. Be aware that some users may use assistive technology to navigate them, including voice recognition, keyboards, and screen readers.
Each of those elements can be made fully keyboard accessible if a person is unable to use a conventional mouse. Furthermore, one of the fundamental tenets of Web accessibility is that keyboards are preferred by blind people (due to their universality). Make use of that knowledge, and use tabindex="0" on the div> or span> of your choice to draw attention to them. This modification will pull the marked fragments into the navigation order when used for interaction.
You can also use this method to indicate active links but bear in mind that in order for them to work properly, they must visually react when clicked or navigated over, so the person without a mouse can easily find them as well. A great example of such adjustments can be seen in the screenshot below:
To enhance the user experience, provide more than one method of website navigation, such as a site search (with suggested search results), breadcrumbs, or a site map. When creating auto scrolls or slides in a loop, remember that you must give viewers enough time to read them.
Use orientation cues, such as breadcrumbs and clear headings, to help users understand where they are on a website or page. For example, to help users locate themselves, you can use the following line:
<link rel="index | next | prev | contents">Last but not least, avoid designing content in a way that is known to cause seizures!
Accessible websites should not contain any content that flashes more than three times per second, as this may cause a photosensitive seizure. However, it is best to keep this value low, as the average human is used to a single blink every 4 seconds. As a result, the faster our content flashes, the more difficult it is for our users to focus.
If you're having trouble grasping the concept of flash, the W3 documentation defines it as a pair of opposing changes in relative luminance, with an increase followed by a decrease. (or vice versa). This is especially true for flashes that contain saturated red ("red flashes"), which have been shown to cause the most severe reactions.
Understandable
This is the most obvious aspect of accessible design, but even the most basic truth must be repeated frequently. Your website (and web applications) should have a consistent look and format, a predictable design and way of using it, and a voice and tone that fit the audience. Always mirror the reading order in the code order to avoid confusion.
And don't forget to specify the language of the web page (or languages – for translations).
<html lang="en">
<!-- … -->
<body>
<h1>Page Title</h1>
<p>Health goth American Apparel quinoa, jean shorts cray you probably haven't heard of.</p>
<blockquote lang="de">Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, daß kein.</blockquote>
<p>Health goth American Apparel quinoa, jean shorts cray you probably haven't heard of them.</p>
</body>
</html>There is much more to add to this section. Keep your website predictable so that users do not have to constantly relearn how it works. Maintain consistent navigation. Use alt text. Make sure that each field has a descriptive label next to it. Always explain acronyms and avoid industry-specific jargon. To keep your users from making mistakes, suggest auto-completing results.
In other words, do everything you can to organize the visual and non-visual parts of the service/product to match. You never know when you might need to use a similar service with some level of impairment.
Robust
This step is a recap of the previous three because, when creating a web page with accessibility in mind, we should always aim to maximize compatibility with existing and emerging user agents, including assistive technologies. Content needs to be robust enough to be understood by a wide range of users, enabling them to interact with websites, online documents, multimedia, and other information formats using the technology of their choice.
Use responsive design to adjust the display to various zoom levels and viewport sizes, such as on mobile devices and tablets. Make core functionality and content accessible across all technologies using progressive enhancement.
Plus, keep the code valid at all costs.
Change the perspective: introduce international standards with Useful accessibility Tools
To make your path toward web accessibility less bumpy, I've prepared a short list of tips that might help you along the way:
- Test some aspects of the accessibility of your project by unplugging your mouse (or disabling your touchpad for a while) and see whether your service is operable. Is the website functioning as expected? How many different actions can you do with the keyboard? What about commands delivered via voice?
- Disabling CSS is another excellent way to test the readability of your website. You can now see how assistive technology perceives your website. Is your content still understandable and in a logical order?
- Try out Lighthouse to conduct performance and accessibility tests;
- Or Axe, the library used by Lighthouse, which is the world's most popular accessibility testing library, also available in a variety of different forms, e.g., React plugin;
- Tota11y, a handy tool to easily validate your website;
- W3C cheat sheet;
- Contrast ratio tool to quickly calculate the contrast ratio between foreground and background.
Web accessibility introduction – summary
As you may have noticed, the majority of the accessibility guidelines follow best practices for both UI/UX and Search Engine Optimization (SEO). In fact, all of these practices are linked under the banner of universal design to provide a much better experience for people and their assistive technology. While some of these suggestions seem self-evident, I hope that others have opened your eyes to the needs of more demanding audiences.
What's amazing is that adequately applied principles will benefit everyone, as features like built-in zoom, read-aloud functionality, embedded subtitles, and keyboard accessibility make everyone's lives easier.
On the other hand, a lack of those may confuse your audiences and expose you to unpleasant experiences ranging from lost traffic to fighting public accusations. Also, remember that the web environment should change to meet our needs as we age (and occasionally become injured), as the internet's primary purpose is to connect us to the rest of the world.
