Many countries in the world have begun to force website owners to comply with the requirements necessary for making the web accessible for everyone. Laws and government policies in many countries already protect the vulnerable population. And major media headlines such as "Supreme Court hands victory to the blind man who sued Domino's oversite accessibility." raise public awareness of legal risk related to the topic. For example, in the United States, website accessibility compliance has primarily been driven by the increase in accessibility lawsuits against corporations.
So if you never thought accessibility is essential, it might come hard on you.
In good old times, when the web was not as Reactive as today and after tables stopped being the only possible way to have a multi-column layout, passionate developers started to care about the tags they were using. There were battles for semantic tag usage for quite a time, and that's when I began to work on my first IT job. So one of the first books I've been recommended to read was on semantics and its importance on accessibility.
I lived with those beliefs in semantics for quite a while, following the community movement to separate meaning from looks. Until one day, React conquered the world, introduced jsx, and suddenly every js developer was so happy they could white all the code again in one file, they've started to forget there were some reasons for using all the different tags, and most of them appeared to become just divs.
Dark times came for accessibility. The importance of semantics was forgotten. Abandoned by developers enjoying their javascript life. Everything became javascript.
So it came as a surprise one day when we've got a requirement to measure the accessibility of our website and make it sufficiently qualitative. We've faced this as a legal requirement from an external regulator, but it gave me another look at a long-forgotten story.
So let's stop for a moment our pace for new cool technologies and answer the question: what is accessibility, and why do we still need all those different tags we can style any way we want? Or even why we need it more than ever now?
Developing a website, we often make a common mistake: we think if it looks good and works fast, it might not matter what's underneath. And while we simply look at the bright button we click, about 15% of the population, which is about 1 billion people, can't see all the beauty of our UI at all or are not able to click on the button. And some are getting anxious about this cool animation we've spent so much time implementing. So if you have a user database, spend some time checking the age of your audience and see which percentage of your potential users might be struggling using your application. The older they are, the bigger this number might be for you.
Nowadays world gives more and more equal opportunities to everyone regardless of gender, race, initial background and all kinds of disabilities. And, of course, the accessible web is a big step toward equality. And if you do not follow the tendency at your own pace, you might find yourself in a problematic legal situation when you'll have to respond to compliances, adapt on the run and empty your bank accounts on the lawsuits.
Hope it's convincing enough that everybody needs accessibility, whether you are a decent human being or a provident entrepreneur.
So, where should we start our journey to the accessible web?
If you've never asked if your website is accessible, it could be overwhelming to start looking into it. So let's begin with small steps. The primary web accessibility standard to comply with is the Web Content Accessibility Guidelines (WCAG), known as ISO 40500 or EN 301 549 (European standard). It's published by the World Wide Web Consortium (W3C) to establish rules that make the internet accessible to people with disabilities. WCAG use four main principles to assist companies in providing access to the broadest possible range of users and guarantee their experiences are consistent with a vast amount of assistive technologies people can use nowadays and in future:
- Understandable: Information and the process of using the interface must be coherent
- Perceivable: UI components and information must be shown to users in ways they able to perceive
- Robust: Content must be solid enough that it can be analysed reliably by a variety of user agents and various assistive technologies
- Operable: UI components and navigation must be functional
These principles might seem complicated to narrow down to coherent guides. Still, there are straightforward tests you can accomplish right away to better understand the audience with disabilities you are targeting. You can conduct these tests on any website to see if it meets basic accessibility requirements, meaning you can get the content smoothly.
Try these now to see why accessibility is important:
Keyboard only approach.
You might have never thought of it, but some users can navigate through the web using only their keyboards. This keyboard accessibility is crucial for users who are blind, low-vision, or have motor control disabilities. And to test it is as easy as you can imagine. You just need to unplug your mouse or turn off your trackpad and try to navigate the website you are viewing.
You should be able to navigate further through the different website components using the TAB button, and with the SHIFT+TAB combination, move backwards. Also, it should be clear which part of the website you interact with through visual indication. Try it at least once. Even better if you make this a full-time experiment and dive into a keyboard-only approach for a whole day or week. Though if you decide to do it, you might want to write down some short-cuts for various applications you are using, which is helpful for everybody and could save you some time in the future.
Screenreaders
While there are numerous platforms helping people with eyesight disabilities, ranging from impaired vision to total blindness, the screen reader is still one of the most common ways to navigate and interact with content on the internet. Some of the most popular screen readers are VoiceOver (Mac & iOS), JAWS (Window), NVDA (Window), Talkback (Android), and ChromeVox (Chromebook)
Voiceover is pre-installed Mac software, so you can try it right now and see how accessible your website or any other applications you daily use would be. You can read more on how to use it in this article: https://webaim.org/articles/voiceover/.
High contrast mode
This is what people use to make content more perceptible to them. Have you ever seen your granny's phone and wondered, "Wow, how can she navigate through these?". Well, this is it.
All you need to do is open your computer settings and change your preference to high contrast mode. Works even better on windows. This usually appears as though your computer has lost its full range of colour capabilities and shows everything in a limited amount of colours. At the same time, all your text and icons (essential sources of information) should stand out from their background. People with low vision and light sensitivity will find it easier to interact with the web page in this mode.
Captions and transcripts
This functionality you probably have benefited from yourself, watching Instagram stories on mute, still reading the captions, though. But for those with hearing disabilities, it's not just a nice feature but a must-have. Otherwise, there would be no way for them to understand the content. So just look at the media on the web page and review if there are subtitles, captions or any sort of text description. You might need to turn them on in the settings.
All those tests are easy and don't require any additional software. So try it all just for a while.
And when you feel compassion for all those who struggle to reach the information they need, make the next step and start using accessibility checking tools to search for issues. Fix them and make sure you'll automatically catch new ones even before they go to production.
How to do this? Read in the next article.
Top comments (0)