Have you ever wondered - how is a person with hearing impairment able to enjoy a sitcom on the internet? Or how does a person with a visual disability perform the online shopping process on an eCommerce website? Or a person with a locomotive disability is able to go through a lengthy online application or registration process filling every detail?
The answer to these questions lies in the concept and practice of web accessibility.
What is web accessibility?
According to W3C (World Wide Web Consortium), web accessibility is about developing websites and digital experiences in a way such that it is accessible by people with disabilities. As stated, developing accessibility involves a wide variety of activities, ranging from legal requirements to some design and coding specifications. Web accessibility is not just about being able to access a website but also includes more specific actions like being able to perceive, understand, navigate, interact with and contribute to the web.
In simple words, web accessibility or digital accessibility is about making the websites, mobile apps and technologies over the internet accessible to one and all. It is about removing barriers for every user to avail of the web content and usage easily without having to realise that their disability is a hindrance to access digital content. Likewise, website accessibility is about specifically ensuring that websites are created and developed keeping the accessibility guidelines in context and making the user experience of every visitor barrier-free.
Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Being an inclusive concept, web accessibility is not just about making the digital experience accessible for people with disabilities but also for people with temporary disabilities or people without disabilities like older people or people new to the digital world.
Let me give you a relatable example. My mom finds it much easier to use the keyboard to navigate as using a mouse requires practice and specific motor skills. Although she does not have a disability, it is noticeable that she is using a feature specifically meant for users with disabilities. The same is the case of using subtitles and captions by some people when they don’t understand the accent of the speaker in a video. Captions are usually set up to facilitate people with dyslexia or hearing impairment to understand the video. There are thousands of examples like this where even a person without a disability sometimes finds hindrances in a digital experience.
It can be rightly stated that web accessibility is a concept closely related to equity and inclusivity.
It can be rightly stated that web accessibility is a concept of equity and inclusivity. Creating an accessible digital experience is about identifying the differences among the people, facilitating measures to combat issues occurring due to the differences and creating a seamless user experience for one and all without any hindrances for any particular section of the users.
Why is accessibility important for a website?
The web has become an inevitable part of our lives. Currently, there are around 4.57 billion internet users which have grown magnificently. Last year, almost 950,000 new users were added each day which led to growth by 346 million users in the past 12 months.
With COVID-19 hitting the entire world, people have started spending more time on the web. The lockdown has increased the use of the net by almost 3 folds - some people voluntarily use the web to spend their time, some people have to because of their work requirements.
People have dramatically shifted their lives from the physical to the digital - from ordering groceries to working from home, people are now bound to become digital natives in a short period of time. Everyday, we can see people WITHOUT disabilities struggling with the new change, so can we even imagine the plight of the people with disabilities when the website is not designed in an accessible manner?
According to a survey by the World Health Organisation, around 15% of the world population are living with some type of disability. This includes 1.3 billion blind or visually impaired, 466 million people with deafness and hearing loss and 2-3% of the world population with cognitive disabilities. With these open statistics in hand, we need to understand how grave the importance of equal access to information and interaction is over the web to all. The importance and necessity of website accessibility have reached their peak during this period of the pandemic when our lives have become highly dependent on the digital world.
With the pandemic hitting the world caused by the outbreak of novel coronavirus, people are facing a dramatic paradigm shift from the physical to the digital world. And this includes people with disabilities too!
Although it is all about humanity and we actually don’t need to justify why we need web accessibility, still here are some other reasons digital accessibility’s necessity is very crucial.
Unfortunately, there are some reasons (or excuses) why many companies are not considering the accessibility factor. Some of them are - the website might turn out to look “ugly”, very costly or maybe, just sheer ignorance without thinking about the long-term growth and reputation of the company.
From a user perspective, creating a smooth digital user experience will also reduce the hindrances of the physical world that many people with disabilities face in their day-to-day lives. Even people without disabilities but with reduced motor skills to due factors like age will be able to perform their daily activities online.
Wouldn’t it be wonderful if your grandpa could order his medicines online easily without having the need to go out looking for a pharmacy (physical requirement) or asking for someone’s help to order online (web accessibility hindrance)? Think about it!
What are the four major categories of accessibility?
As per the guidelines stated by WCAG (Web Content Accessibility Guidelines), web content can be facilitated to be made accessible through the four basic principles - POUR - Perceivable, Operable, Understandable and Robust.
PERCEIVABLE
The foremost factor to determine whether the website content is accessible or not is determined by it being perceivable. Precisely, each user must be able to easily understand and comprehend the information provided on the website. This not just includes writing in simple and understandable language but major (often unheeded) measures like creating text alternatives for non-textual content in order to facilitate the users with hearing impairment or visual impairment access the content.
For example, if there is an image that is a significant part of the information provided on that webpage, the screen reader is not going to read an image and likewise, the user with visual impairment will not know whether there is an image there or what the image is about. Design features like the contrast of the content over the background also come under perceivable content, so that the content is easily distinguishable for people with lesser eyesight.
OPERABLE
The operable category is basically about the interactivity of the user with the website or the application. As mentioned above in an example, there are many users who find it often difficult to use the mouse. Navigation through a website with the usage of a keyboard is one of the major factors which comes under the operable category. As you can see, operability here means that we need to identify and find various means other than the conventional ones to facilitate seamless navigation for people with disabilities (permanent and temporary) and users with limited motor skills.
We need to put ourselves into the shoes of a person with a disability and think from their perspective while developing an accessible digital experience.
Above all, it is not just about strictly putting up the features as per the guidelines but also about implementing humanitarian thoughtfulness into the design and development process. We need to put ourselves into the shoes of a person with a disability and think from their perspective. This can be illustrated by the fact that there are chances that people with disabilities might make mistakes throughout the navigation. We need to be forgiving and create interfaces that give the user warnings, ask confirmation questions and definitions, etc.
UNDERSTANDABLE
The major difference between being Perceivable and being Understandable is that even if the user can perceive the content, there is a chance that the content might still not be understandable by the user. Here comes the importance of writing the content in an understandable and simple language. We need to comprehend the fact that not every user who comes to your website is affluent in that specific language and an expert on that specific topic. It especially becomes a barrier for people with visual impairment who are hearing the content through a screen reader. A good flow of the content with guidelines to support is a good way to facilitate the understandability of the content among the users, especially people with learning disabilities like dyslexia.
ROBUST
Robust content means content that can be accessed by the user using various sets of technology, platforms, and interface and not just through a single or limited set of platforms. For example, there are some processes, often online college application fill-up processes, which require the user to have Mozilla Firefox as a browser to complete the process. The principle of robustness addresses issues like these where the user is very much limited to what the website wants them to do. It should be the other way round - the website should be well compatible enough on various browsers, devices and other technologies in order to break the barrier of accessibility for many users.
How to make your website accessible?
There is a defined set of guidelines by the W3C which are known as the Web Content Accessibility Guidelines (WCAG). These guidelines have been set up based on research and consultation from W3C members, chosen software engineers and website designers and other W3C groups and interested parties. The implementation of these guidelines ensures that most of the requirements of accessibility are all included to create a seamless user experience for all.
It is always best to begin a project with accessibility in mind. The first step being - choosing a CMS which is accessibility friendly.
The guidelines are just some standards that can be taken as benchmarks to make a website accessible. But ultimately, it all comes back to the mindset of the developer who is developing the website or the app. To make a website or an app or any digital presence accessible, it is always best to begin the project with accessibility in mind. When a developer puts oneself into the shoes of the user with a disability alongwith understanding the set benchmarks from the WCAG guidelines, he is bound to make a website better accessible than a person who simply follows the guidelines like a set of rules. It needs to be said that it is not always easy to create an all-accessible website that adheres to the needs of all kinds of disabilities. But it is definitely humanly possible to include as much as it can be accommodated.
Another important factor to keep in mind at the very beginning of starting an accessible digital project is to choose a content management site (CMS) that supports accessibility features. Make sure to choose a template that also supports accessibility. Many common CMS like WordPress, Wix, Drupal advocate and supports web accessibility.
Keeping these in context, the following are some tips based on the WCAG guidelines on how you can make your website accessible.
1. Make the user experience keyboard-friendly
Users with mobility disabilities often find it difficult to operate a mouse or a track pad. Reasons like stress injuries, diseases, congenital conditions and many other reasons lead to users not being able to make use of the mouse and the track pad. As a result, such users may need to navigate a website with the help of a keyboard, adaptive keyboards, or other external hardware. Often, the arrows and the tab key are used on a keyboard to navigate through the website. In order to create a logical sequence of navigation through the website, website developers should ensure that the tab sequence matches the visual content sequence.
Most of the time, it is observed that websites include complex menus, pop-ups and other layouts which may hinder a person from using a keyboard to navigate easily and logically. It is the responsibility of the website developer to create keyboard-friendly website versions especially for the people who need assistive hardware. Also when there is a lot of content or broken links, it sometimes becomes tedious for a person using a keyboard to again go back to the top of the page. The “skip navigation” option comes to the rescue. Skip navigation lets users who are not using a mouse to skip lists of links and content sections.
Check out this interesting story by a BBC news reporter who in 2018 browsed the web for 24 hours only using the keyboard.
2. Accessibility for Audio/Visual Content
When you are playing a video, try muting the video. Now, how do you understand what is going on in the video? Reading the subtitles or video captions right! That is how people with hearing impairment understand the context of a video or audio.
A study conducted by Discovery Digital Networks (DDN) states that captioned videos get 7.32% more views than average. You will be surprised to know that 80% of people who prefer watching videos with subtitles do not have a disability. It can just be a matter of some situations like even the common issue of not carrying a pair of headphones or trying to understand a language more thoroughly.
To make the web more accessible, it is always suggested to provide text alternatives to rich content like audio and visuals to facilitate the people with visual and hearing impairment. A classic example is the online course websites like Udemy or Coursera, which alongwith their videos, also have full video transcripts to facilitate accessibility to the content for all.
Providing text alternatives not only advocates accessibility but also can be a way of improving your SEO through measures like inputting keywords inside the text alternatives, improving the user experience and search intent and increasing video/audio engagement bringing in more traffic to the website and increasing dwell time on your website.
3. Making links more accessible friendly
A person with a vision disability uses a keyboard to navigate through a website and at the same time a screen reader to read the content of the website to the user. We usually focus on making the text and audio/visuals inside the webpage accessible, often forgetting the accessibility of links inside the webpage. In order to understand where a link leads to, the screen reader must be able to read the link as a descriptive text.
For example, instead of putting links on words like “click here”, “read more”, “more”, the links should be written in a unique, clear and descriptive way. Why do I use the word “unique” link? There is a high chance that the user might face issues of skipping the content if there are duplicate link names.
Here is an example, how you can make links more accessible. Instead of writing and linking - Click here to read more about user experience. You can use something like - Would you like to know more? Read this amazing blog on user experience.
As you can see, here UX (User Experience) writing plays a major role. Although UX copywriting is more about minimalistic writing, it is always best to make your links descriptive to provide a smooth user experience.
4. Having alternative text for images
A screen reader cannot describe an image on its own to a user with visual disability. Because of this, the user might miss critical information conveyed through an image or an infographic provided on the website. In order to combat this issue of digital accessibility, alternative text must be provided alongwith the image. Alternative text or alt text should be describing thoroughly what is going on in the image and what is its context with the whole content. If the image is an infographic with critical details, it is necessary to write those details in the alternative text or in the long description. However, images that are used purely for decorative purposes should not have alternative texts.
Alt text can be input as an HTML code. Nowadays, putting alt text is easy through content management systems where there is a space provided for the alternative text when you are uploading an image.
5. Don't forget to understand colour and web accessibility
According to a report by the World Health Organisation, 1 in 12 men and 1 in 100 women suffer from colour blindness in the world. Common colour deficiencies affect upto 8% of the population. When using colours on your website, you really need to keep that 8% in mind.
Most of the time, we get so fascinated by the colourful options, that we tend to go with the flow of creativity without considering the website accessibility guidelines. Even though it might look beautiful, there is a high chance that people with color blindness or partial visual impairment may not be able to comprehend your content.
To ensure your content’s accessibility and understandability, make it a point not to use extremely bright colours as it can even be dangerous for people with photosensitivity. At the same time, it is advisable to maintain a good contrast like a ratio of 5:1 for the text and the background colour.
A good contrast not only helps users with colour blindness but also people with learning disabilities. It becomes easier for a user with a learning disability to distinguish and comprehend elements of the content based on the colour contrast.
6. Making forms and tables more web-accessible
Often, forms are created on a website without keeping digital accessibility in context. Putting a text label inside the form placeholder may look fancy and minimalistic but it is an extremely inaccessible element. Why? Because the screen reader is not able to read the text embedded inside the placeholder or field. As a result, a user who is using a screen reader will not be able to know what the fields are for, to be filled up inside the form. The fields would be read as empty.
The best way to make a form accessible is to put descriptive labels exactly adjacent to each field to be filled. Another task that can be done to make things easier is to club similar fields together so that understanding the sequence becomes easier for the user. To make things clearer, ARIA properties like ARIA required="true" and ARIA required="false" can be added to the optional fields in order to let the screen reader know.
It is always best to avoid tables to represent data or as layouts. I know it looks very clean and the content can be represented in a very systematic manner. But think about the plight of the people who use a keyboard and/or screen readers. Content in each cell of a table is considered to be one tab when using keyboard navigation. Just imagine tabbing through each and every cell of the table. At the same time, being read data from each cell of a table by a screen reader can be exhausting and confusing for the person with a vision disability.
It is true that you can not totally avoid tables and layout especially when you need to represent content like statistical data. But it is advisable to use tables only when it’s extremely necessary. Make your layouts as neat and sequential as possible to ensure clear readability.
For website and content developers, it is advisable to use the “scope” attribute in HTML to identify and define relationships among the table cell contents.
7. Focussing on website navigation and site structure
Imagine this. You are reading my blog about what is website accessibility and suddenly you are taken to the conclusion part of the blog without reading the main middle content. That might actually happen when the structure of the site is not aligned with the HTML code structure.
It doesn't really matter to people who are using the usual keyboard and the mouse. But there are people with physical and cognitive disabilities who need to use assistive technologies like speech recognition software, screen readers, adaptive keyboards and many others. To ensure that their navigation is smooth and logical, the site structure must be aligned with sequential HTML codes. Breaking the content-heavy web pages into logical sections and subsections using HTML tags makes it easier for a person using a screen reader and other assistive technologies to navigate and skip to favourite sections. In fact, structural HTML or semantic markup is the base of website accessibility.
For example, putting content in the correct header tags like <H1>, <H2>, <H3> and so on, will let the screen reader know which is the primary heading and which are the sub-headings and so on. Using these header tags unsystematically might cause confusion for the screen reader to read the sequence of the content and might result in the user having a bad experience with the website.
For content developers and website developers, make sure you don’t use container elements like <div> as they do not have semantic significance and are used for only layout purposes. Semantic HTML5 tags like <button> not only have in-built keyboard accessibility but also it is good for ranking higher through SEO.
If you would like to make the presentation of the website look nice, use CSS (Cascading Style Sheets) instead of compromising the structure of the website. Also, it is not just about the headings - to make the navigation smooth and understandable, ensure small but significant steps like highlighting the selected area when using a keyboard (as we point our mouse to an area).
A logical website structure not only makes the website accessible for a person with a disability but also makes it easier for Google to crawl your website.
8. Make dynamic content more accessible
Dynamic content, or in simpler words, content that keeps on changing inside a webpage without even refreshing the page. Dynamic content includes elements like screen countdown clocks, pop-ups, lightboxes and many others. Users with disabilities can face major accessibilities issues on the website/ application with the presence of dynamic content.
Suppose a person with visual disability uses a screen reader to navigate the website. When there is dynamic content present on the webpage, there is a high chance that the screen reader might miss the newly changed content or overlap information due to the frequent change and so on. This can create high confusion and tedious user experience for the person with disability.
It’s inevitable to just let go of dynamic content altogether. To solve this, ARIA (Accessible Rich Internet Applications) has come up with some guidelines to define the methodology of addressing such content with assistive technology. ARIA is a standard specification provided by the World Wide Web Consortium (W3C) to combat the accessibility issues that are not solvable by HTML. You can read about the whole guidelines on the W3C website.
Conclusion - Web Accessibility is the need of the hour
Although creating an accessible digital experience is more about website development methodologies, but finally, everything sums up to you being empathetic. It is high time we thought about implementing accessibility into our digital experiences including websites and others. The whole world is currently having a dramatic paradigm shift from the physical to the digital. You can simply ignore a section of people who could have been your potential users by not making your website or application accessible. Or you can start thinking with an inclusive mindset as a business owner. It’s time to make a choice and make the world a better place.
References
