Pieces 🌟

Posted on Feb 13, 2023 • Edited on Sep 6, 2023 • Originally published at code.pieces.app

Improve Your Website Accessibility with These Tips

#a11y #webdev

When we consider website accessibility in content, we see that it results in an improved and more intuitive user experience. Online content that meets accessibility requirements will likely be more user-friendly for everyone. Further, web accessibility is an issue relevant to all people, not just to those with a disability. However, it can be overwhelming to understand, use, and plan for web accessibility, so approach full compliance as a gradual journey. We must proactively address website accessibility to include the creation of content that’s easy for all online users to interact with.

What is Website Accessibility?

Website accessibility is the practice of following certain principles in order to simplify site navigation and content consumption. These guidelines are followed to ensure that a website is suitable for all guests, regardless of limitations such as disabilities and impairments. After all, having a website where the content is unavailable to all visitors is ineffective.

Why is Website Accessibility Important?

Website visitors can encompass a diverse range of individuals. For example, some users may have limitations such as visual impairment, or cognitive and learning disabilities. Making a website accessible enhances the user experience for every visitor, including those with limitations. Therefore, website accessibility is a way of providing equal access and opportunity to all visitors. With this, each person is shown that the site developer values them, thereby boosting lead generation and conversion. In this respect, who wouldn’t be interested in a website that shows its care for all visitors?

Web Content Accessibility Guidelines (WCAG)

Some countries have enforced civil rights laws related to website accessibility. This is why some companies have been sued for their lack of accessible websites. In the United States, the Americans with Disabilities Act (ADA) is a civil rights law that ensures the prioritization of web accessibility. Therefore, to run a government website, developers must abide by the ADA section 508 standards for web design.

To make website accessibility possible, the World Wide Web Consortium (W3C) also developed the Web Content Accessibility Guidelines (WCAG). These guidelines are the international standards for web accessibility. Creating an accessible website can be challenging and time-consuming; however, it doesn’t have to be. Let’s take a look at the guidelines below.

Web Accessibility Standards

The Web Content Accessibility Guidelines (WCAG) set for digital accessibility include four main principles for anyone using the web. These standards lay the foundation for developing accessible web content:

Perceivable: Content regarded as perceivable doesn’t only have to do with people’s ability to see it. Visitors need to be aware of the information presented on a website. Assistive technologies allow content to be presented in different ways, which can be helpful for people with visual impairments. Making web content perceivable means that website visitors can see and hear the content as desired.
Operable: A website's functionality must be operable. Imagine having to go through a tough time while navigating a site. Therefore, a website's functionalities should not affect the visitor’s experience. A website considered to be operable is easy to navigate without requiring complex functionalities.
Understandable: Website content should be well-written and easy to understand. People who have cognitive disabilities may find it difficult to understand information written in verbose terms. This principle applies to overall site structure and navigation.
Robust: Robust website content must be easily interpreted by all visitors, including those using assistive technologies.

How to Improve Website Accessibility

Now that we’ve reviewed the principles of web accessibility, you can check to see if your current website meets these standards. There are a few ways to check the current status of your website. First, let’s unpack the ways to know if your pages are accessible.

Tools for Web Accessibility

WAVE

An online accessibility checker such as WAVE allows you to evaluate your website’s accessibility. The WAVE tool will generate a report showing the page's errors or accessibility problems. However, the evaluation tool only checks for errors; it cannot decide if a page is fully accessible. Keep in mind that a page without any errors doesn’t mean it’s accessible.

You can find the WAVE tool here:

WAVE website
WAVE browser extensions (Supports Chrome, Firefox and Edge)

  2. [A11Y Color Contrast Validator](https://color.a11y.com/?wc3)

The A11Y color contrast website accessibility provider provides free color contrast analysis to display the issues with a web page’s color pairings. Contrast refers to how bright and dark colors appear in relation to each other on a screen.

In web accessibility, we must make sure that the text color and the background have a high enough contrast. Therefore, it’s important to understand and utilize light, color, and perception skillfully. This validator tool shows any possible contrast issues on your website, and you can test the tool using URLs or hex codes of a specific set of colors.

3. [ARIA DevTools](https://chrome.google.com/webstore/detail/aria-devtools/dneemiigcbbgbdjlcdjjnianlikimpck?hl=en)

The Accessible Rich Internet Application (ARIA) tool is an open-source free extension for customizing the way visitors interact with web content. ARIA is designed to make websites accessible with assistive technologies such as screen readers.

ARIA provides a set of attributes typically used in HTML. For example, the role=”alert” attribute can be used by assistive devices to announce important and time-sensitive information.

To use the ARIA dev tool, you can find it on the Chrome Web Store and install it as an extension. Once installed, you can toggle the button to enable ARIA dev tools and utilize the various attributes it provides to monitor your website accessibility.

How to Fix Common Accessibility Issues

Enable Keyboard Navigation

For a website to be considered accessible, users must be able to navigate through it without a mouse. Functionalities such as accessing a page and clicking on links must be possible with only a keyboard. This is because assistive devices depend on keyboard-only navigation. Your website must support navigation using tab keys, enter/return keys, and arrow keys for jumping through the elements of a page and clicking on selected elements.

Use High-contrast Colors

Website visitors must be able to see your web content easily, and some users may have challenges reading text on a background. Therefore, it’s important to use colors that have a high contrast ratio to ensure that all elements on your page stand out. As mentioned above, an online tool available to assess color contrast is the A11Y color contrast validator.

Add Alt Text

We must include alt text on all of our images. These describe the images for visitors using screen readers. Alt text is also useful when the image link is broken or available. An example of the attribute is alt = “Boy on a bicycle.” In most browsers, hovering on an image allows the alt text to show below the cursor.

An alt text must tell viewers what the image is about in a few words. If it’s too long, it might take up too much space to fit inside the image rectangle.

Use Heading Hierarchies

It’s best to organize your content in an understandable way. Using headings to organize your content makes it easier to comprehend, which improves website accessibility. In addition, clear headings assist with page navigation so that visitors can browse through content efficiently.

The heading is similar to a title. HTML is structured using heading tags such as H1, H2, H3, and H4. Typically, as the heading number gets bigger, the font gets smaller. For example, an H1 heading is larger than a smaller H4 heading.

Add Image Captions and Video Transcripts

If you include videos on your website, you should include captions or transcripts. This will enable viewers with hearing difficulty to read about the video content. In addition, captions and video transcripts allow visitors using screen readers to consume content without relying on audio or visual representation.

What Are Good Examples of Accessible Websites?

Below are two examples of WCAG-compliant websites. You can use them as inspiration:

What could be a better example of accessibility than the official agency website that wrote the accessibility standards? W3C has everything an accessible website should, including well-structured HTML with clear tags to denote structure, color contrast, simple language, and a focus indicator for the currently selected page element.

 2. [US CDC](https://www.cdc.gov/)

The US Center for Disease Control (USCDC) is a government site that must be accessible due to the crucial nature of its content. This website’s navigation is straightforward to understand. It also offers different navigation options so that visitors can choose the option that best suits their needs, as well as different types of content for visitors to get information in the format they prefer (written, video, or audio).

Final Thoughts

Making your website accessible ensures that all potential users, including people with disabilities, have a functional and pleasant user experience. It enables easy access to all content on the site. Website accessibility is an important part of designing your site, and should be considered throughout development. In addition, W3C notes that accessible websites have better search results, reduced maintenance costs, and an increased audience reach, among other benefits.