Web Accessibility – legal, business and technical overview
What is Web Accessibility
Is it possible for a blind person to post a photo on Instagram? Is it possible for a person with dyslexia to shop in an online boutique? Or can someone who is deaf watch videos on a web page? For every one of those questions, the answer is – yes, if the web page is accessible. And if you wanna know – yes, blind people can use Instagram.
So, that’s what Web Accessibility is about – designing and developing your web page with all and every single user in mind. And just as there are various kinds of disability, there are different ways of preparing your web application for them. Or a mobile application for that matter, as a lot of tools and guidelines, work for both. We will talk about some of them later in this article.
Definitions and legal situation
Web Accessibility Initiative
There is a number of initiatives that have Web Accessibility in mind. One of them is W3C’s Web Accessibility Initiative (WAI). According to WAI:
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can perceive, understand, navigate, and interact with the Web and contribute to the Web.
WAI is working on technical guidelines for implementing Web Accessibility. It’s published The Web Content Accessibility Guidelines 1.0 in 1999, then WCAG 2.0 in 2008 and, lately, WCAG 2.1 was published in 2018. WCAG is the most popular, international standard for Web Accessibility. A lot of state regulations around the world are based on it. It provides three levels of conformance, A, AA, and AAA – the last one is the highest.
European Union Directive on Web Accessibility
EU is also working on promoting the Web Accessibility idea. It has passed the Directive on the Accessibility of Websites and Mobile Applications in 2016. The EU has been working on Web Accessibility since the early 2000s. After the directive came into force all the public sector web sites and web applications in the EU has to comply with a set of standards, based on the WCAG 2.1. The directive has no effect on private sites that do not provide services “essential to the public.”
As early as 1998, the US Congress has passed an amendment to an older law, the Rehabilitation Act, that requires federal agencies and other organizations receiving federal funding to make their electronic and information technology accessible. There is also the Americans with Disabilities Act (ADA) of 1990 that prohibits discrimination on the basis of disability. However, it does not specifically mention the Web so there are various interpretations of it.
Target Corp case
One of the cases based on this act is the National Federation of the Blind v. Target Corp. The corporation was accused that blind people are unable to use their website and make purchases on it without help. The case ended with a settlement in which Target agreed to change it’s website to make it more accessible and to pay the plaintiffs. And it seems that they have indeed improved their site as in 2016 the NFB has awarded the Gold Level NFB – Nonvisual Accessibility Certification to Target.com.
Southwest Airlines Co. case
On the other hand, there is the Access Now, Inc. v. Southwest Airlines Co. case, where the airlines were accused of their website is not accessible to blind users. In this case, the court decided that the cyberspace does not concern the Americans with Disabilities Act and finally, the airlines won the case.
How to implement Web Accessibility
Now, we know the legal background, so we can dive into the technical details. How can you improve your web application to make it more accessible? Just as there are various types of disability, there are many ways of how to deal with this topic.
The first thing you can do to be more accessible to people with partial vision loss is to prepare your website for bigger fonts. Firstly you can just consider if you are not using too small fonts. Secondly, you should test if zooming the site in the browser does not break your layout. Also, remember that some browsers, allow text-only zoom. To prepare for zooming, you should use relative units for text size and containers size, like rems, which size the text according to the text size of the root element. It is generally a good idea to use responsive design as it will help you avoid horizontal scrolling when the user zooms in the page.
In the case of blind users, the font size will not help. Those users mostly rely on screen readers. Those are programs that will read the content of your web page to the users. There are however some limitations to what the screen reader will understand from your HTML. Of course, they will not be able to read images. That’s why you should add alt text to every image, describing it to someone who cannot see it. It will be also useful if a user with a slow internet connection will try to use your website and to SEO mechanisms.
Screen readable friendly layout
There is also the case for screen readable friendly layout. The reader will see your page’s elements in the order in which they are placed in the HTML. If you manipulate their order in some other ways like CSS, it will confuse the user. Also, as there are many ways to make an element disappear with CSS, it may be possible that the reader will not understand some of them. For that, you should use ARIA tags, described in the following paragraph.
Also it is a good practice to use HTML elements according to their semantic meaning. Use anchors to do the navigation, buttons to do other actions, headers to give titles to sections of the page and tables to display tabular data and not for the layout. Use section and article elements. With JS it is possible to make a div clickable, but it will most probably confuse your disabled users.
One of the recommendations on how to increase the accessibility of your web application that the WAI has published is ARIA (Accessible Rich Internet Applications). ARIA defines a set of attributes, dedicated for HTML, but also suitable for other markup languages, like SVG. You can use those attributes to communicate to the screen reader applications, to make them aware of the dynamic nature of your page. You can specify what is the role of specific part of your web application, eg. that an element is a navigation menu, or that an element is not visible to the user, which is not obvious, as it is still present in the DOM.
Most screen readers users will use keyboard navigation on your web page as it is easier for them then the mouse. In that case, they will be mostly using the tab button, moving focus to the next focusable element. If you are using native controls (<a>, <button>, <input>, <textarea>, <select> and <option>) and you keep the HTML elements in the same order as they should be read, it should work by default. But if you want to overwrite the default behavior, you can use the tabindex attribute to make a different element focusable or change the order of elements. In the former case, remember to use ARIA tags to let the screen reader know what this element is.
Furthermore, keyboard navigation can also be difficult if you are heavily using the JS mouse events like onmouseenter or drag & drop, as a user using a keyboard will never fire them. They can be very helpful for other users but they should never be the only way to use your web application.
Another visual disability you should keep in mind is the color blindness. It means that you cannot see colors or see the difference between colors. There are various types of color blindness, causing you not to see a specific color, red, green or blue, or, very rarely, that you only see white, black and shades of grey.
The main rule to keep in mind here is to make sure that colors are not the only way to get information from your web page. It is common to color the “OK” button green and the “Cancel” button red. It is okey as long as the buttons have clear text descriptions.
If you want to see how your website will look to someone with color blindness, you can try it on your own.
The users with hearing disabilities can use web applications correctly for the most part. They can read them and use the mouse. There is the case for deaf and blind users, as they cannot use screen reader programs. However, there exist hardware screen readers that display the page content with Braille.
However, there are elements not accessible to deaf users – audio and video files.
Captions and transcription
Whenever you place a video on your web page it is the best practice to add a caption to it. In case of longer movies it might be difficult, however, it will help not only the deaf but also users that want to see the content of your site but cannot use the audio at this moment. Maybe they are in a crowded space and do not have headphones?
The other way is to provide a transcription of the video. It will not give the same experience as captions but will make the information available to the user and will allow the SEO mechanism to search the content of the video.
Finally, if other ways are not available, you can at least give the video a text description that will allow the users who cannot listen to it know what it is about.
Dyslexia, reading disorder, causes trouble with reading. It may mean issues with quick reading, reading a handwritten text, understanding what one reads and other issues. In most of those cases, what helps is making your web page easier to read. This includes using a sans serif font, like Arial or Verdana, not using a font size smaller than 12pt, avoid using all caps or other unnecessary capitalization, add some additional space between lines, eg. 1.5 line-height. It is also a good idea to use short sentences and short lines to make it easier to focus on the meaning of the text. The background over which the text is displayed is also important – if it is in too low contrast to the text it might be an issue.
Making your text easy to read is also good for other users, like the elderly or kids.
To conclude this article, let’s analyze why should you invest in Web Accessibility in your business.
First of all, in some cases, it may be legally required of you. If you want to work for the public sector, it is a must.
Furthermore, as was stated above, in many cases, requirements for WA overlap with other good practices. Descriptions for images and videos help SEO, preparing your page for zooming is similar to making it responsive, easily readable text is good for elderly and kids. And while some users may require big, clear fonts, others may just prefer them. Keyboard navigation may also be preferred by some users, maybe used together with the mouse. Avoiding mouse events may also help with mobile devices.
Furthermore, by being accessible, you are just broadening your user base. According to WHO, there can be as much as 1.3 billion people with some form of vision impairment and 36 million of them are blind. 466 million people worldwide have disabling hearing loss. As much as 15% of people have dyslexia. If not for humanitarian reasons, just from a business point of view, it is a wise thing to consider them as your users and customers.