Introduction to Web Accessibility
A mini- guide to web accessibility
In this blog post I want to talk about web accessibility. I’m going to look into what web accessibility is, why it is so important, what groups of people need to be considered when building your app/website and how to implement accessibility into your project.
So, what is web accessibility? Accessibility is the practice of making your website usable by as many people as possible (MDN).
It is important to understand that in order to make an accessible website or app, we need to think not only of people with physical disabilities but also of people using devices with limited capability.
People with physical disabilities includes people with visual, hearing, mobility or cognitive impairments. In addition to permanent health impairments we have to think of people who are temporarily limited in their ability to use an app. It could be a person with a broken arm, a person with a slow internet connection or someone using the app on a mobile device, even a lost mouse can limit access to your app.
The main motivation for implementing accessibility:
- Empathy. We can minimize the barriers that arise between users and content, thereby making their lives better.
- Competition, we increase the percentage of satisfied users. When you implement accessibility, you achieve an increase in the percentage of users who can successfully interact with your resource. Among other things, accessibility is one of the modern trends in the IT world, the use of which demonstrates good ethics and morals, which improves the company’s public image.
- Law. Accessibility is a prerequisite for developing products for large international companies. In most EU countries, as well as in the UK, USA, Canada and Australia accessibility standards are set down in legislation.
How to implement accessibility?
There are guidelines that you can follow to make any content accessible. More on that here:
- WCAG (Web Content Accessibility Guidelines)
- Section 508 of the Rehabilitation Act
According to the Web Content Accessibility Guidelines there are four main categories of accessibility:
- Perceivable — information and user interface components must be presented to users in ways they can clearly perceive;
- Operable — user interface and navigation components must be operable;
- Understandable — the operation of the user interface must be understandable;
- Robust — content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
There is no need to learn all of the WCAG criteria — you should be aware of the major areas of concern.
- You can’t present important information solely with the help of color, you should use additional markers.
- You should remember about minimum contrast when using text or images, which should be at least 4.5:1.
- Web pages should not contain anything that flashes more than three times in one second.
- Text can be resized up to 200 percent without loss of content or functionality (except for captions and images of text).
- All functionality should be operable through a keyboard interface.
- If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
- Audio description is provided for all prerecorded video content in synchronized media.
Implementing accessibility into your project
There are several steps you can take to make your app more accessible.
- Using good HTML semantics:
- Use proper elements. I know how appealing it can be to use a <div> element instead of a <button> when you are planning to override a default button styling anyway, but you have to understand that HTML uses built-in keyboard accessibility, so users would be able to navigate between buttons using the Tab key and activate their selection using Return (Enter) which is not possible with <div> elements.
- Structure your text content using headings, paragraphs, lists, etc. Well-structured text will be easier to navigate on a screen reader (which are used by people with visual impairment).
- Use meaningful text labels. Don’t name your buttons or links like ‘click me’, ‘fill me in’, etc. All links on a page, all buttons and input fields should be named accordingly. If there is a link to see other animals in a shelter, name it something like ‘Find out more about other animals’ or ‘Click here to see more animals ‘.
- Provide a detailed description for your images. Screen readers can’t display pictures, so never use something like alt=’image’ or alt=’photo’ in an image element, use a detailed description of whatever is in that image. A good example is
<img src=’https://castle.jpg’ alt=’Edinburgh Castle: a big castle standing on a hill overlooking the city of Edinburgh’ />- Link text color should be significantly different from the background color and non-linking text color.
2. Make audio and video accessible:
- Create custom audio and video controls that can be controllable by a keyboard (there are many tutorials on YouTube), since native HTML5 controls aren’t keyboard-accessible in most browsers.
- Create text transcripts for your video and audio content.
- Use video text tracks (which can be useful not only for people with hearing impairment but also for people watching videos in a loud bar or on a subway, for example).
3. Choose colors for your text which contrast well with the background color. There are a lot of tools out there which you can use for contrast checking, check the Color Contrast Checker out.
Just implementing these simple steps in your project will make a huge difference and your app will be more accessible.
Resources:
