Web accessibility: address barriers and make your website inclusive

Before you commit to a web design as a developer, you need to consider that users will converge from all directions. And when you build a site without inclusivity and accessibility, you are potentially blocking many impaired users from engaging with your product or services. This article will teach you about accessibility and how you should address said concerns.

The web content accessibility guidelines (WCAG) standards were coined to help accommodate the changing needs of people and emerging technologies as the web evolves across many fronts. However, according to the WebAim accessibility report that analyzes the top 1 million home pages, only 1% conforms to the widely used standards.

In this post, I will introduce you to web accessibility. I’ll share its need and break down the newer guidelines outlined in WCAG, 3.0, offering tips as a developer and writer. While you can’t get good at developing accessible digital products without practice, I hope having direction will guide you to hone your developer skills and take your website to the next level.

What is Web Accessibility All About?

Before diving into the how-to, let’s understand what web accessibility is and why you need it.

Web accessibility involves allowing everyone to access the information on your website, despite their disabilities. The disabilities include those who are deaf, blind, mobility-impaired persons, and those with cognitive disabilities, among others. Web accessibility is extensive, and its scope incorporates temporary disabilities like a broken arm and rare situations like the inability to listen to audio in a noisy background.

With the internet dominating as the leading primary source of information, communication, entertainment, and e-commerce, the importance of web accessibility for users with special needs should not be undermined. And from the legal rights dimension, the Americans with Disabilities Act (ADA) civil rights law forbids businesses and organizations from discrimination based on disability. In the United Nations, the internet is declared a basic need.

While WACG well defines the standards for web accessibility, many developers do not know about them. They aren’t particularly complicated. In some cases, developers have just inherited standards from older projects. So, why is accessibility a key area of concern? Read on.

Why Develop Accessible Sites?

There are many reasons people decide to develop accessible websites, and here are a few of the most common ones.

1. Inclusiveness – Good practices make your site accessible to many people, including those with low network speed. Everyone benefits from many such improvements.
2. Legal compliance – Several cases have been filed against companies that do not follow web accessibility guidelines, like the case with Netflix in 2012. A line that you’d not want to cross.
3. Trust and reputation building – You can enhance your business brand by making its site accessible. For example, companies like Facebook are known for using AI tools to provide alternative text for blind users through object recognition technology.
4. Customer retention and acquisition – The internet is a gateway for customers accessing your digital products. You can expand the scope of your customers by including a special group (impaired persons) like those who cannot visit your store or read printed material.
5. Driving innovation – You can innovate by using accessibility as your direction pointer. Accessible designs require you to think outside the box and not offer just the basics. You configure your websites to provide flexible options and app interaction, ultimately creating a natural and human-focused product.

Disabilities to Consider When Building your Website and its Content

People with disabilities are similarly diverse like those without, and so are their abilities. The guiding directory is thinking beyond your computer and how you use the web and learning about how others use it; you are not your users. If you own a website, it is important to ensure you are not excluding those falling under these categories.

1. Visual impairment – Here, you are referring to blind people, those with low-level vision, and the color blind. In this case, people rely on magnifiers or screen reader software like JAWS and ChromeVox.
2. Hearing impairment – This category entails deaf and hard-of-hearing (DHH) people with various levels of hearing loss. Although not widely spread, the use of assistive devices has been adopted. To provide access, you must give textual alternatives. Videos can be captioned, and transcripts can be availed for audio.
3. Mobility impairment – Here, you refer to all people with movement disabilities. This disability can result from old age or specific conditions and extends to hardware limitations like not having a mouse. Web controls are accessed through the keyboard, like using the “tab” to navigate a form.
4. Cognitive impairment – This branch entails a broad range of disabilities, including those with intellectual abilities and everyone else causes; as we age - we get difficulties in thinking and remembering, and depression, among other causes. You need to help such people understand the content, remember how to complete tasks, and avoid confusion with inconsistent web layouts.

Tips for Making your Website Accessible

You have already spent enough time making sites accessible theoretically; let’s get tactical. This section is about tips to implement accessibility into your web project.

1. Present Information and UI components in a Perceivable Manner

Provide text for non-textual content. For example, include: • A description of data in representations like pie charts and graphs. • Brief descriptions for audio and video files. • Labels for form controls, inputs, and other user components.

Text alternatives depict the purpose of an image to provide an equivalent user experience. For instance, a search button is better perceived with the text “search” other than “magnifying lens.” Text alternatives are helpful in several ways. They can read aloud for blind people and people with reading difficulties. They can also serve as labels for controls and functionality, aiding keyboard and voice recognition navigation. In other cases, they are labels to file formats and applications embedded in websites.

You can dive deeper into authoring techniques from the WCAG standards by checking out: authoring interface accessibility guide.

2. Make it Easier to Navigate and Find Content

Organize your content well to make your users well-oriented with your site and ease their navigation. To do this, your content should: • Have clear titles and order content using section subheadings. • Have multiple ways to find relevant pages within a set of several. • Inform your user about their current location on your webpage. • Engage multiple techniques to bypass repetitive content on multiple pages. • Have a visible keyboard focus with a meaningful sequence on the focus order. • Show links clearly.

When you meet these specifications, you help users navigate your site through multiple methods based on their unique instance-dependent needs and preferences. For example, some people rely on hierarchical navigation structures like menu bars to find specific web pages, while others use search functions. Some people see your content while others are listening to it. Others navigate your content using a keyboard, or a mouse, while others use both, like me.

Here are the technical specifications on navigation: keyboard access, sequential navigation, direct navigation and activation, and other input devices.

3. Provide Alternatives to Time-based Media

To address this concern, you need to provide alternatives to time-based media. Here are some techniques to follow. • Use static images or photographs to convey information that could be presented in an audio or video. • When using interactive media like games and simulations, use those without time-based media to convey information. • Create web applications that can be used and navigated without needing time-based media like maps and diagrams.

Providing alternatives to time-based media ensures that your digital content is inclusive to everyone regardless of their ability to perceive time.

Here’s the gateway to exploring time-based media alternatives.

4. Evaluate Input Modalities

Enable users to operate functionality using various inputs beyond the keyboard, such as touch activation, gestures making content easy to use, and voice recognition (speech input). You can ensure everyone uses all their desired input modalities, and to the same degree, by following particular designs. The design includes: • Gestures that entail simple hand skills • Design components to avoid accidental navigation. • Match your user labels to corresponding object names in your code to support activation by voice. • Functions activated through user components should be activated by movement. • Links and buttons should be large enough to be activated by touch.

If you meet this requirement, your content is accessible to a wide range of people with disabilities and browsing your site using multiple devices.

Check out a detailed guide to evaluate input modialities beyond the keyboard.

5. Build Predictability into Web Pages

Many users coming to your site will rely on the predictability of your interface. When your site is inconsistent, it disorients them. You can make content on your webpage predictable by: • Building a consistent navigation mechanism across all your web pages. • User interface components are repeated across all pages and with similar labels. • Ask the user for consent when making significant page changes.

Building predictable pages helps users quickly learn your website’s functionality and choose a navigation scheme based on preference and specific needs. For example, some people use personalized keyboard shortcuts for easy navigation. Others memorize the steps to reach particular web pages or complete specific processes. In either case, both rely on predictability.

Here’s the comprehensive specification to making content appear and operate predictably

6. Provide Input Assistance

While we can say everyone makes mistakes, including me, people with disabilities have difficulty creating error-free inputs – they may not even notice it. Typical error alert methods may not be obvious to them due to a limited field of view—use of assistive tech and limited color perceptions.

You can check for multiple controls and implement custom error messages in a form, as shown in the code below.

Here is the HTML form code

<!--Form code-->
<form action="multiple-controls.html" onsubmit="return validate()">
    <p>
        <label for="name">Name: </label>
        <input type="text" name="name" id="name" />
    </p>
    <p>
        <label for="tel">Telephone number: </label>
        <input type="text" name="tel" id="tel" />               
    </p>
    <label for="mail">
        I would like you to provide me with an email address:
    </label>
      <input type="email" id="mail" name="mail" />
    <button type="submit">Submit</button>
</form>

Here is the JavaScript code.

<!--JavaScript code-->
<script>
    function validate() {
        // Initialize error message.
        var msg = "";
    
        // Validate name.
        var pattern = /^[a-zA-Z\s]+$/;
        var el = document.getElementById("name");
        if (!pattern.test(el.value))  msg += "Name can only have letters and spaces. ";
    
        // Validate number.
        var pattern = /^[\d\-+\.\s]+$/;
        var el = document.getElementById("tel");
        if (!pattern.test(el.value))  msg += "Telephone number can only have digits and separators. ";

        // Validate email.
        var email = document.getElementById("mail");

        email.addEventListener("input", (event)=>{
            if (email.validity.typeMismatch) {
                email.setCustomValidity("I am expecting an email address!")
            } else {
                email.setCustomValidity("")
            };
        });

        if (msg != "") {
            alert(msg);
            return false;
        } else return true;
};
</script>

The other aspect to consider under this domain is populating redundant entries. You can repopulate the entries based on previously entered information with a trigger, based on previous answers, or even display data from previous steps. For example, in an online e-commerce shop, you can use user-supplied information like business numbers and address to repopulate the duplicate entries when creating a profile for them.

The technical specification is available to help you avail input assistance.

7. Use Robust Content

This is a tactical approach to structuring your web content to meet the success criteria of the robust content principle in the WCAG. Here, your focus is maximizing content accessibility, making it robust enough for seamless interpretation by current and future agents, e.g., browsers, including assistive technology. You should form your content well so that browsers and screen readers can successfully parse it. Validate your markup using the W3C validator to ensure you pass this criterion.

The last concern is ensuring that the names and roles of user interface components (e.g., form inputs, links, buttons) are determinable programmatically. Use semantic elements correctly, each for its intended purpose. Following this convention allows for the states, properties, and user values to be programmatically set, allowing for notifications of changed items to user agents, including assistive technologies. You can pass this criterion using standard HTML controls according to their specifications.

Here are the directives for creating robust content.

Conclusion

As you have seen, the web accessibility guidelines force you to be disciplined when creating digital products, which is good. Following a convention of best practices helps you consider how your users use the site.

While this post has helped you increase awareness when building, it is only a partial round-up of all guidelines in the WCAG specifications. Whether you are a developer or a team leader helping build sites, spending time on accessibility could make a difference to thousands of people in acquiring the information they need, unlocking new potential in the customer domain.

Above all, making your site accessible makes a difference to kids learning about engineering options for higher learning institutions or deciding to take it, inspire. With accessible websites, you can help ensure that the internet is a leveling field that improves lives, especially for impaired persons, if not slightly more entertaining.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo