Web Accessibility: A Comprehensive Guide for Developers and Designers
Introduction
When we talk about web accessibility, we are referring to the development of a website or a web app whose design and development take into consideration, people with different types of disabilities who could be potential users. It should be noted that the concept of accessibility is not limited to only websites and web apps.
Nowadays, UI/UX designers are typically responsible for ensuring that applications and websites are accessible, but developers also play a significant role after the design process has been completed.
A lot of companies have realized that accessibility can make their websites more appealing to people because it demonstrates that they place a lot of value on their customers. In this article, we will look at the concept of web accessibility and its significance for developers.
Disabilities Associated With Web Browsing
Although billions of people have access to the internet, there is a subset of internet users who are disabled. There are over a billion people worldwide living with a disability. These disabilities make it harder for such people to surf the internet. These are the types of disabilities associated with web browsing:
- Auditory- deafness, poor listening
- Visual- blindness, color blindness, poor sight
- Motor- poor muscle control, paralysis, impaired speech
- Cognitive- autism, poor memory retention
- Speech- articulation disorder, phonological disorder
Why Should Web Accessibility Be Prioritized?
Web accessibility is all about making websites inclusive so that everyone has equal access to information on the internet. Web accessibility makes it less challenging for people with disabilities to navigate through a website because it was designed and developed with them in mind.
Some countries have enacted laws that require websites to be accessible to people with disabilities. In such countries, owners of websites that don’t meet the required standards risk facing a lawsuit.
Web accessibility techniques such as providing alternative text for images and using semantic markup can improve Search Engine Optimization (SEO). The most accessible websites are more likely to be correctly indexed, resulting in increased visibility in search engine rankings. This higher visibility can lead to increased traffic and, ultimately, more profit.
Basic Principles of The Web Content Accessibility Guidelines (WCAG)
The Web Content Accessibility Guidelines (WCAG) are similar to instructions in a manual in that they provide guidelines on how to make a website inclusive. The WCAG emphasizes all the protocols necessary for providing comfort to users with disabilities when they interact with web content, just like everyone else around them. The WCAG ensures that a website complies with the conformance levels (A, AA, AAA).
If you wish to apply WCAG, there are four basic principles that must be strictly adhered to. These principles are as follows:
- Perceivable: people can easily discern information available to them because it can be easily seen and straightforward.
- Operable: The website is interactive because navigational elements respond to mouse or keyboard clicks.
- Understandable: The content is clear and concise.
- Robust: The content must be big enough to make it interpretable by various assistive technologies.
Web Accessibility Techniques
The Web Content Accessibility Guidelines (WCAG) establish certain criteria for ensuring that a website is completely accessible and not lacking in some important aspects of web accessibility. The guidelines are discussed below.
1. Use color contrast
A website with an insignificant difference in brightness between the foreground and background colors would frustrate users. When the contrast of a website’s content is minimal, people with visual impairments will definitely struggle to understand the website’s content.
It is recommended that the contrast ratio between texts or images of text and their backgrounds be around 4.5 to 1. In some cases, where the text and image of texts might be larger, you can use a contrast ratio of 3 to 1.
The proper use of contrast is critical in developing a website or a digital application that is not only aesthetically pleasing but also accessible to everyone. There are numerous contrast-checking websites available online. These websites will assist you in determining whether your color combinations meet the needed conformity criteria.
2. Use focus indicators
You have probably been browsing a website and observed a change in the background color as you hovered over a set of buttons/links. This is an example of a focus indicator. Links, buttons, form fields, menus, and widgets are elements that use the focus indicator.
Focus indicators can help disabled people using a keyboard understand which element is in focus, thereby making website browsing easier and faster.
3. Apply keyboard accessibility
People with motor disabilities tend to use a keyboard because they find it difficult to use a mouse. However, other categories of disabled people, such as the blind, also require the use of a keyboard to navigate the web. As a result, a website developer must ensure that all of the website’s functionality is accessible through the use of a keyboard.
There are many other keys on a keyboard, such as the Tab key and Enter key, which can be used for navigation by replicating the actions of a mouse. For example, the Tab key can be used to move keyboard focus from one navigational element to another.
4. Use text alternatives
Text alternatives are important in web accessibility and responsive web design. There should be a text alternative for every non-text element on your website, such as images, audio, and videos. People with poor vision might need a screen reader to understand the message an image is conveying. Most developers store the text alternative in the <img/> element’s alt attribute.
5. Use labels with input fields
A lot of designers make the error of using placeholder text as a label when constructing forms. People with Attention Deficit Hyperactivity Disorder (ADHD) might forget what they are typing into an input field because the placeholder text disappears during typing. As a developer, just before writing the <input/> element, you must use the <label> element to create a label.
A person who uses a screen reader as well as the Tab key on a keyboard for navigation needs a label, that will help him/her to understand what input field they are about to fill out.
6. Use video and audio transcripts
A lot of companies are now incorporating videos and audio into their websites, and this is a nice initiative if done correctly. When using both audio and video, there should be a transcript of their contents. The transcripts of a video must be in sync with its audio to prevent lagging.
7. Avoid flashing content
If you watch TV a lot, you have probably come across shows, that people with epilepsy are advised not to watch because of flashing images. This is a good example of the harmful effect of flashing content. If a content flashes more than three times in a second, it can cause seizures. To reduce the risk of a lawsuit, avoid using flashing content as much as possible.
What is Assistive Technology?
Assistive technology encompasses devices and systems designed to help people with disabilities easily interact with mobile devices, computers, and ultimately, the internet. Assistive technology allows for the addition of features to a device or a website in a bid to meet the needs of users with disabilities.
There are four types of assistive technology, and these are explained below:
- Screen readers: These are software programs useful for people with visual impairments. Screen readers make use of text-to-speech technology. The screen reader scans a screen for text as it moves through a webpage. The screen reader reads text or graphics back to the user using an AI voice. However, if a website is not designed with accessibility in mind, screen readers might not work as expected. Examples include NVDA and JAWS for Windows.
- Speech recognition software: This is a software that works for people with motor disabilities and it involves the use of voice commands. It is also used by people without disabilities because it relieves the stress of constantly typing and clicking. A lot of technological devices and even websites now apply this technology. It is safe to say that speech/voice recognition software programs are here to stay. Examples include Google Now, Siri, and Cortana.
- Using switch devices: A switch device enables people with motor disabilities to interact with computers without using a mouse or keyboard. It is usually a button or a switch that may be pressed, tapped, or activated using various body movements depending on the person’s level of mobility. It is usually connected to a device or a computer via a wireless interface. Examples include the Joystick switch, and the Sip & Puff switch.
- Magnification tools/Screen magnifiers: Magnification tools enlarge text and images on a screen to improve visibility. It is very useful for people with visual impairments. Most computers and mobile devices often have built-in magnification features. Windows and macOS have magnification tools. Similarly, Android and iOS also offer in-built screen magnification options. Screen magnifiers can enlarge content displayed on computer screens, and mobile devices. Screen magnifiers can also be used to adjust color contrast and apply other customization options.
Web accessibility Tools
There are tons of web accessibility tools to assist you in testing your website’s accessibility, but let’s take a look at some of the best tools out there.
1. wave
It is widely used for the evaluation of web accessibility. It is a tool that provides you with visual feedback and suggests improvements for web pages. It can detect any accessibility issues on your website and point you in the right direction.
2. WebAIM color contrast checker
This checks the contrast of a text and its background, showing you its conformance levels.
3. Axe
This is an open-source accessibility testing tool that can work with various web browsers. It helps a developer discover accessibility issues early in the development process, and this can save a whole lot of stress in the future.
4. Tenon.io
It is a cloud-based accessibility testing tool that offers a range of features for developers, including automated testing, and code integration. It can also provide a detailed report about a website.
Conclusion
It is evident that web accessibility has to be a top priority for any serious-minded designer/developer, especially if their employer is ignorant about it. Designers must take it into consideration throughout the design process and identify it as an important component of User Experience (UX) design.
Developers also have a huge responsibility for ensuring that a website is accessible. Once a developer gets the final design from a designer, he/she has to check it thoroughly. If it’s lacking in terms of accessibility, the design should be returned to the designer for some alterations. In the long run, this will save the client/employer from unnecessary lawsuits.
