.svg)
Hundreds of millions of people use the internet on a daily basis. It can easily be overlooked, but we should always make sure your website is accessible to everyone, regardless of their disability. This is especially important now, with the ongoing Coronavirus pandemic, when many people are working remotely using digital applications that are new to them.
In this blogpost we will explain what web accessibility is, why you should even matter, how to make your website accessible, we will also outline accessibility guidelines.
What is web accessibility?
Accessibility, shortened to a11y, is the idea that access to any information or application should be easy, regardless of the differences between people. In other words, your app should be as easy to use for people with disabilities as for a people without them.
When creating accessible apps we should always keep in mind the POUR principles, an acronym for the four main aspects of web accessibility. It stands for: Perceivable, Operable, Understandable, and Robust.
Perceivable
Interface elements should be presented to the user in a way they can perceive. This means you should have alternative methods of access on your website, for example re-sizing text for people with low vision, and using assistive technology like screen readers to support high contrast mode, or colorblind mode.
Operable
A website should be easily controlled by the user, by clicking, tapping, and swiping on elements, using just the computer keyboard or even voice commands to use the interface. Developers often delete the blue outline around the elements currently being focused on, because they consider them ugly. But this is bad practice, damaging accessibility for people who don’t or can’t use a mouse. Operability also means providing enough time for users to read and use the content, so you should avoid using auto-closing popups that close too fast for slow readers.
Understandable
All of the actions and operations involved in the user interface should be predictable and consistent. Sometimes you come across an app that “thinks for you”, another element of this aspect. Users should understand what will happen next just by looking at the component, something that’s good advice for UX designers.
Robust
Your app or website should behave well across different devices and platforms. For example, a website should not require a specific version of a web browser to make all the features work. Of course we should aim to maximize compatibility, but the expectation that features should run perfectly on all previous versions is ridiculous. In the case of an error, the app should provide a simple fallback message like, "Apologies - we are not supporting your version of the web browser".
Why is it important to make a website accessible?
Everyone should have equal access and equal opportunities on the internet, especially now when so many aspects of our lives are influenced by it. In many countries around the world, a website that isn’t accessible can be interpreted as discriminatory against people with disabilities. At the same time, an Information Technology and Innovation Foundation (ITIF) study from 2017 says that 92 percent of the U.S. federal government’s most popular websites do not meet standards for at least one of these categories: security, speed, mobile-friendliness, or accessibility.
From a business perspective, we want to make sure that we get to the largest possible audience. Looking at the data from 2015, about 19% of Americans have some kind of disability. That’s almost 1 in 5 people who wouldn’t be able to use your app if it wasn’t meeting the basic standards of a11y.
Also, accessibility supporting methods like semantic HTML, adding alternative text to images or videos, and the size and colour of the text, overlap with the methods used for boosting a site’s natural visibility through SEO. In the end, as well as being the law in many countries, it's good manners and good business practice to build a better, more user-friendly websites.
How to make accessible websites?
Getting technical, how do we make our sites accessible? There are really detailed web accessibility guidelines called Web Content Accessibility Guidelines (WCAG). Version 2.0 from 2008 includes 38 criteria, and the 2.1 version from 2015 added 12 new ones to the list. There is also version 2.2 coming in early 2021. Here are details of the most important criteria.
Semantic HTML
Keyboard friendly
Making a keyboard-friendly web means all available functions can be accessed using keyboard shortcuts. This comes in handy, not only for people with disabilities who rely on a keyboard but also for users who don't use a mouse or don't have access to a touchpad. You can easily test this on your website by using the Tab key to navigate through it.
Alternative text for elements
Alternative text should be provided for all non-text elements on your website, things like images and videos. You can do that by adding an alt attribute to your element. It will be used by screen readers to describe what happens in the image or video. Another way is to use the title attribute, but this will also display a tooltip when people hover.
Contrasting colors
When creating the visual presentation of our website, we should keep in mind that text or UI elements should be easily distinguishable, not only for people with visual disabilities but also on a variety of devices and resolutions. While the guidelines say that the contrast ratio for interface elements should be 3:1 and for text 4.5:1, in some cases this ratio is not reasonable, and a lower contrast ratio text can be easier to read. Sometimes we just have to judge it ourselves.
Typography
The same as for the colors, the text on your website should be easily distinguishable and easy to read. There isn’t a rule about the minimum font size you should use, but 16px is always a nice starting point. The font weight should also be considered - for lower values you should probably use bigger font size. If the user still has problems with reading, resizing the text should never mean a loss of content or functionality.
ARIA
When you want to work with more advanced a11y elements you should consider using WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications). It’s helpful in areas with web accessibility issues that can't be fixed simply with native HTML elements. An example would be an "X" button that closes a popup. The screen reader would just read it as "X" which is not very clear. For situations like this, there is an aria-label attribute that we can set to text, that the screen reader will use. ARIA comes with a lot of other attributes, and together they probably satisfy all your accessibility needs.
Testing accessibility on your website
You can do super-fast website a11y testing using Lighthouse, in Chrome DevTools. In categories just check the Accessibility checkbox and, after a while, you will get the score plus any warnings. Alternative tools are WAVE, Dynomapper, or JAWS - if you want to experience screen reading software yourself.
We should never forget about manual testing. As mentioned before, we should test using a keyboard only to navigate the website, but also turn off loading images to check the alt text attributes. Plus turn off the CSS to check whether the site is manageable, and the content is still in a logical order.
This article is merely the tip of the iceberg. Your next step is to read and understand the WCAG guidelines. A11y is a really big topic, but making your site more accessible is not that time-consuming, and it can result in more users for your app.
It is vital to ensure your team knows all about accessibility. Then they can also play their part in remembering what needs to be done, and remind you during the code review. Last but not least, because Lighthouse testing provides many more benefits than accessibility alone, it is essential for everyday use. Make a web accessibility part of your world!
.png)
