Introduction to Web Accessibility

If we go by Wikipedia, Web Accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, more users have equal access to information and functionality.

In simple words, Web Accessibility is the practice of creating such websites that can be used by people, irrespective of any physical disabilities, situational disabilities, or socio-economic restrictions on bandwidth and speed. For example, when adding an image to a html page using <img> tag, passing a meaningful alt attribute makes it more accessible, as now visually impaired people can also know what that particular image contains using a screen reader.

The power of the Web is in its universality.

Access by everyone regardless of disability is an essential aspect.
~ Tim Berners-Lee, Inventor of the World Wide Web

Data by WHO
According to an estimate by World Health Organization, 1.3 billion people experience significant disability. This represents 16% of the world’s population, or 1 in 6 of us.

The needs that web accessibility aims to address include:

• Visual
• Motor/mobility
• Auditory
• Seizures
• Cognitive and Intellectual

Understanding Web Accessibility

Web was created with the aim of providing informational content to everybody, whatever their background. But when websites or web apps are badly designed, they create barriers and prevent certain sections of the society from accessing the information they provide.

Accessibility means creating websites, apps and tools that are accessible to everybody, irrespective of any disability or restrictions. Web Accessibility improves:

• the way people interact on the web.
• The contribution of people to the web.

Web accessibility encompasses all disabilities that affect access to the Web, including:

• Auditory - Total or significant loss of hearing. Also known as hearing impairment, this condition includes permanent or fluctuating hearing problems. Auditory impairment can range from slight and mild to severe and profound. Photo by Vladislav Anchuk on Unsplash
• Cognitive - A cognitive impairment (also known as an intellectual disability) is a term used when a person has certain limitations in mental functioning and in skills such as communication, self-help, and social skills.
• Neurological - Neurological disorders are diseases of the central and peripheral nervous system. These disorders include epilepsy, Alzheimer disease and other dementias, cerebrovascular diseases including stroke, migraine and other headache disorders, multiple sclerosis, Parkinson's disease, neuro-infections, brain tumors and many others.
• Physical - Physical disability indicates any physical limitations or disabilities that inhibit the physical function of one or more limbs of a certain person. It can be temporary or permanent. The causes of this kind of disease are various.

Photo by Jon Tyson on Unsplash

• Speech - Speech disorders or speech impairments are a type of communication disorder in which normal speech is disrupted. This can mean fluency disorders like stuttering, cluttering or lisps. Someone who is unable to speak due to a speech disorder is considered mute.
• Visual - Vision impairment occurs when an eye condition affects the visual system and its vision functions.

Common Web Accessibility Barriers

Let's take a look at some common accessibility barriers that people commonly face:

Auditory Barriers

People suffering from deafness or any other auditory problem cannot hear voice in videos, podcasts and other sources of audio on the Web. That's why captions and audio transcriptions should be provided to help them understand what is being conveyed by the audio.

For individuals with hearing difficulties, the absence of auditory cues presents a substantial obstacle in comprehending information conveyed through spoken words. As a result, providing captions and audio transcriptions becomes imperative to bridge this communication gap. Captions, in the form of synchronized text displayed on-screen, enable individuals with hearing impairments to follow along with the dialogue or narrative of a video.

Photo by Pixabay
Likewise, audio transcriptions, which are textual representations of spoken content, offer a means for these individuals to access and understand the information presented in podcasts and other audio formats.

Cognitive & Learning Barriers

As the name suggests, this barrier limits the cognitive abilities of a person and hence prevents the person from learning. Everyone is capable of learning, but students who have cognitive learning barriers are likely to need more time to learn and develop certain skills, and there may be certain things they cannot learn, depending on the severity of their learning barrier (Ohio Coalition for the Education of Children with Disabilities, 2020).

It's essential to recognize that while everyone is capable of learning, individuals facing cognitive learning barriers may require additional support and accommodations. The severity of these barriers can vary widely, affecting the pace at which individuals acquire new skills and comprehend information. In some cases, there may be certain limitations on what can be learned, depending on the extent of the cognitive challenge.

Photo by cottonbro studio
To overcome these barriers, steps should be taken to make web pages simple and easy to understand. Websites should have clear navigation, and they should have consistent design across all pages. Incorporate multimedia elements judiciously. Ensure that images, videos, and other multimedia content enhance understanding rather than causing confusion.

Visual Barriers

People who suffer from blindness, partial blindness or any other visual impairment cannot see what is written on the page, nor could they type using a normal keyboard. Addressing visual barriers is essential for creating inclusive environments and ensuring equal access to information and activities for people with visual impairments.

Websites that present heavy visual element without any text representation can be challenging to understand for them. Text too small, websites which lacks contrast or is presented in difficult-to-read fonts can be a significant barrier for individuals with visual impairments. Environments that lack audio cues or information can be disorienting for individuals with visual impairments.

Addressing visual barriers requires a multifaceted approach, incorporating both physical modifications and the integration of inclusive design principles in digital and informational contexts. Special keyboards called Braille Keyboards are available in the market, which allow visually impaired people to type.

ALT Attribute - Author: Seobility - License: CC BY-SA 4.0
Speech Recognition systems should be used on websites, and they should be improved to understand non-English languages more precisely. Images should have captions to make them understandable by screen readers and other assistive technologies. Text should be legible to read and users should be provided with the option to configure text.

Motor & Mobility Barriers

Technology and devices that are not designed to accommodate individuals with motor impairments, make it challenging for them to interact with computers, smartphones, or other digital interfaces. Solutions like voice recognition, touch screens with customizable controls and alternative input devices like gesture recognition devices should be developed and implemented at lower costs, so that everyone can have access to the Web.

Web Content Accessibility Guidelines (WCAG)

W3C
According to World Wide Web Consortium (W3C), Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

WCAG is a technical standard to make web pages accessible. For each guideline, there are testable success criteria. The success criteria are at three levels:

• A - the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.
• AA - the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.
• AAA - the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided. Photo by AbsolutVision on Unsplash

According to W3C, the guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:

1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)

2. Operable - User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

3. Understandable - Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

If any of these are not true, users with disabilities will not be able to use the Web.

Testing & Tools

When you create an accessible website, you must always test it for accessibility to know how accessible it is. Testing helps you to identify any loopholes in accessibility in your website and improve it over time. Now, let's dive into accessibility testing tools.

Accessibility Testing Tools

There are two types of accessibility testing tools:-

• Automated Testing Tools - These are automated tools which evaluate a website's code and content for accessibility and provide guidance on how to fix the issues. And, save your time.
• Manual Testing Tools - These require you to manually scan one page at a time and can cat the errors which automated tools might fail to catch.

There are various accessibility testing tools available that can assist web developers, designers, and content creators in identifying potential accessibility issues. Here are some commonly used accessibility testing tools:

WAVE (Web Accessibility Evaluation Tool)

Source: WAVE
WAVE is a suite of evaluation tools that help authors make their web content more accessible to individuals with disabilities. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page.

axe Accessibility Checker

The axe Accessibility Checker is a browser extension that can automatically scan your website for WCAG 2.1 conformance and provide detailed information about identified issues.

Google Lighthouse

Lighthouse
Google Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO, and more.

Siteimprove Accessibility Checker

Siteimprove offers an Accessibility Checker that helps you identify and fix accessibility issues on your website. It provides clear explanations of issues and suggested solutions.

Pa11y

Pa11y is a command-line interface that allows you to run accessibility tests on your web pages. It is flexible and can be integrated into different development workflows.

Final Words

Web Accessibility is an essential component of building websites and webpages. Yet, many developers (including me) forget this while creating a website. While building a perfectly accessible website is nearly impossible (nothing is perfect), but we should definitely try to create such websites and apps which can be accessed by most sections of the society, if not all.

🎊 New Year, New Commitments: Embrace Web Accessibility!

As we joyfully welcome the dawn of a new year, let's make a collective resolution to foster a digital space that celebrates diversity and ensures equal access for all.

1. Pledge for Inclusivity: Make a promise to prioritize web accessibility in all your digital endeavors. Let's commit to creating a more welcoming online environment for everyone.

2. Celebrate Diversity: Acknowledge the richness of human experiences and perspectives. Ensure that your online platforms reflect inclusivity, accommodating users with varying abilities and needs.

3. Perform an Accessibility Check: Kick-start the year by auditing your digital content using accessibility tools. Identify and address potential barriers to create a more universally accessible website.

4. Spread the Message: Share the importance of web accessibility with your network. Encourage colleagues, friends, and fellow creators to embark on the journey toward a more inclusive online world.

5. Set Accessible Goals: Just as you set personal and professional goals for the new year, integrate accessibility goals into your projects. Small steps today lead to a more accessible tomorrow.

6. Illuminate the Digital Landscape: Let your commitment to accessibility shine brightly in the digital realm. Illuminate the path for others to follow, fostering a community that values and champions inclusivity.

Cheers to a Year of Inclusion and Empowerment! 🥂

May this new year be a testament to our shared commitment to accessibility, creating a web that transcends barriers and uplifts every user. Here's to a year of progress, understanding, and digital harmony!

And lastly...
Wishing you a year filled with joy, success, and memorable moments. Happy New Year!

Originally published at jishnupsamal.me