Web accessibility is a term that is gaining a lot of attention in tech circles.
In this article, we will learn what do you mean by web accessibility, principles behind web accessibility and some general tips to make our application web accessible.
What Do You Mean by Web Accessibility?
According to the Web Accessibility Initiative (WAC), web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
In simple terms, we can say that web accessibility means it is the practice of making websites and apps user friendly for all visitors, including those with disabilities, impairments, and limitations.
Web accessibility is an important factor that we have to take into consideration while designing your apps, especially the apps that are open to the public as it ensures access to all users.
Who sets Web Accessibility Standards?
We all have heard of the World Wide Web Consortium primarily known as W3C which set standards for the world wide web.
W3C has created an initiative called Web Accessibility Initiative(WAC) which develops standards and support materials to help you understand and implement accessibility.
WAC has published Web Content Accessibility Guidelines (WCAG) that defines standards for web accessibility.
Principles of Web Accessibility
There are four main guiding principles of accessibility upon which WCAG has been built. They are:
- Perceivable
- Operable
- Understandable
- Robust
These four principles are known by the acronym POUR. POUR is a way of approaching web accessibility by breaking it down into these four main aspects.
Let go through these principles one by one.
1. Perceivable
Perceivability means the user can identify content and interact with elements by means of the senses.
For many users, this means perceiving a system primarily visually, while for others, perceivability may be a matter of sound or touch.
For example, we may have video content on our website and think from the point of view of deaf person or a person with hearing impairments.
If we don’t provide accurate captions for the video, this person may not be able to understand the content.
In short we can say that perceivable means our content must be perceived by more than one senses.
2. Operable
Operability means that a user can successfully use controls, buttons, navigation, and other necessary interactive elements.
For many users, this means identifying an interface control visually, and then clicking, tapping, or swiping.
For other users, using a computer keyboard or voice commands may be the only means by which they can operate and control the interface.
For example, A website’s social media links can be accessed with a click of the mouse.
If the links don’t receive keyboard focus, how can a keyboard user follow the links to social media?
In short we can say that the user must be able to operate our website or web application with more than one method.
3. Understandable
Understandable technology means it should be consistent in its presentation and format, predictable in its design and usage patterns, concise, and appropriate to the audience in its voice and tone.
Users should be able to comprehend the content, and learn and remember how to use the interface.
For example, we should have consistent font styles (family, colors, and sizing) across all pages of the site.
4. Robust
Your website needs to be robust enough that it supports and can be accessed on a variety of devices, including assistive technologies.
This means that as technology and user agents evolve, the content must still remain accessible, and be able to be interpreted.
For example, a website requires a specific version of a web browser to make use of its features.
If a user doesn’t or can’t use that browser, how can that user experience the features of the site?
5 Best Tips to Improve Web Accessibility
1. Assign alt tag for images
Images on a webpage provide great value to users.
Nonetheless, they can create barriers for users with limited or impaired vision.
Therefore, assigning alt tags to images will provide a description of the images allowing users to understand the image through the use of a screen reader.
A “screen reader” is the generic term for a program that helps blind people use a computer.
Simply put, a screen reader will “read” (speak) the content of a page to the blind user.
In the above example, alt tags give an accurate description of the image. So users accessing this image through screen readers can understand what the image is about.
2. Give your links unique and descriptive names
When including links in your content, use text that properly describes where the link will go.
Using “click here” is not considered descriptive, and is ineffective for a screen reader user.
Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links.
As a result, screen reader users often do not read the link within the context of the rest of the page.
Using descriptive text properly explains the context of links to the screen reader user.
The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.
For example, if you are pointing visitors to a page called “About Us”:
Try not to say: “Click here to read about our company.”
Instead, say: “To learn more about our company, read About Us.”
3. Ensure that all content can be accessed with the keyboard alone in a logical way
Users with mobility disabilities, including repetitive stress injuries, may not be able to use a mouse or trackpad.
These people are able to access content through the use of a keyboard by pressing the “tab” or “arrow” keys, or through the use of alternative input devices such as single-switch input or mouth stick.
As a result, the tab order should match the visual order, so keyboard-only users are able to logically navigate through site content.
For pages with local menus and multiple levels and sub-items, the menus should be configured so that all menu items can be accessed with the keyboard.
Do not use elements that only activate when a user hovers over items with a mouse, as keyboard-only or screen readers users will not be able to activate them.
4. Design your forms for accessibility
Make sure that the forms used in our websites or web apps are accessible. We can ensure that by following certain points
- Give proper labels to all fields. Use labels tag to show labels
- Allow user to tab through all fields before submit button
- Group similar form fields together
- Provide proper error messages and error representations
5. Provide captions for video contents
Make sure that captions are available for all video contents.
Also provide descriptions for all videos and provide transcripts that can be used by screen readers. These are some small tips that can be implemented in our applications.
Please go through Web Content Accessibility Guidelines (WCAG) that defines standards for web accessibility.
So we must keep web accessibility in our minds while designing our websites or our apps because it strives to provide equal access to all kinds of users.
Need to Handle Your Web Design or App Design Project?
Are you looking for a tech partner to handle your web design or app design project?
If you are indeed looking for a partner then Perfomatix can help. We can help you in assigning a design team or assign a designer to handle your project remotely.
You can drop us a note to set up a meeting with our design experts.
