Accessibility is an increasingly important factor of good web design. Web creators and developers are becoming aware of the untapped potential that accessibility offers.

That’s not just because 15% of the world’s population has a disability. It’s also because accessibility is closely tied to usability. Accessible websites are, by definition, also easy to use.

Accessibility reduces user experience friction for everyone. That’s in addition to addressing the 15% of people currently underserved by non-accessible websites.

But it can be difficult to measure how accessible a website is. There are many different types of disabilities, and each one can impact people in a unique way. Accommodating such a vast number of conditions is not a simple task.

What is an accessible website?

Accessible websites follow best practices to accommodate users with disabilities. In order to do that, web creators need to understand what disabilities are and how they impact the user experience online.

There is no such thing as an exhaustive list of disabilities. However, there is wide agreement on the dimensions of disability and how they impact peoples’ lives. 

These three dimensions include:

• Impairment of body structure and function.
• Restrictions against certain kinds of activities.
• Difficulty participating in social experiences.

Some disabilities are permanent, while others are temporary. Congenital blindness is an example of a permanent visual disability. Someone who is recovering from recent eye surgery may experience temporary visual disability. 

There are even situational disabilities, which can affect anyone. This would describe someone who misplaced their reading glasses, or who has to squint against the bright light of the sun.

Accessible websites try to accommodate all of these people.

WCAG and web accessibility

The Web Content Accessibility Guidelines (WCAG) establish clear accessibility standards for web creators. These standards do not guarantee that any person, with any kind of disability, will be able to use your website. However, they offer a reliable starting point for accommodating most peoples’ disabilities.

There are multiple levels of WCAG compliance:

• A is the minimum level of accessibility. It is a step up from complete inaccessibility, but is not usable in a wide variety of situations. 
• AA is a midrange accessibility marker. The Americans with Disabilities Act requires websites achieve this level of conformance.
• AAA is the highest level of compliance. Website owners should strive to meet this ideal, but be aware that it is not always feasible. Not every website can achieve AAA compliance status.

How can I tell if I have an accessible website?

The best way to achieve accessibility is ensuring your website adheres to WCAG standards. If you can demonstrate AA or AAA WCAG compliance, you have good reason to believe most people will find your website accessible. 

WCAG protocols stipulate a wide range of design and usability factors. These include everything from technical requirements on font sizing to the way color imparts meaning to users.

Many of these factors are observable directly from your website code. Some of them – specifically those that focus on “meaning” – require human testing to confirm.

Since the majority of WCAG requirements are technical in nature, you can use an accessibility checker to automate the process of identifying those requirements. Tools like accessScan, a free website accessibility tester created by accessiBe, can verify whether your website adheres to the technical requirements laid out in WCAG.

The 5 Most Important Elements Of An Accessible Website

Use color with care

Color is vital to website accessibility. WCAG 2.0 standards have much to say about the proper usage of color and its closely related counterpart, contrast. Much of it is confusingly worded in highly technical specifications. These include contrast ratios, hexadecimal numerals, and “Alpha” which measures how opaque a color is.

WCAG 2.0 Level AA requirements specify text must have a minimum color contrast ratio of 4.5:1. Since the goal is to ensure text is easily readable, this rule applies to images and banners too. Wherever text appears, the difference in contrast between the text and its background must follow this formula.

To achieve AAA compliance, you will need to establish 7:1 color contrast in most instances. This is a more demanding requirement, and it may not always be possible. W3C does specify certain exemptions, however – such as brand logos and incidental text.

Allow for keyboard navigation

Click-and-point functionality is only convenient for people who can both see and click. People with total blindness or impaired motor skills might be unable to use a mouse. The best way for your website to accommodate these people is through the keyboard.

This might seem counterintuitive at first. After all, computer keyboards require sight and touch too.

However, most accessibility hardware works by translating input commands to keyboard commands. Screen reader solutions like JAWS allow users to interact with websites only if the website is navigable solely using a keyboard.

Keyboard navigation is also important for people with motor skill disabilities. People with impaired, broken, or missing limbs and fingers may be unable to use a mouse. However, they can use specialty keyboards to input text.

Proper heading structure

Heading structure is another important aspect of accessibility, especially for screen reader users. If you separate blocks of text from one another using regular bolded text, the screen reader will interpret it as more regular text – not a new section or topic.

Screen readers interpret proper HTML headers as a new section of content. Screen reader users can use these to jump from one section to another. Without proper heading structure, screen reader users can’t skim text. They have to go through every single word on the page to get what they’re searching for.

W3C offers specific guidance on what a proper heading structure looks like. People should be able to bypass repeated blocks of content and rely on section headings to communicate how content is organized.

Simply using headings is not enough to reach Level AA compliance. The headings must also be used in logical order. Users should be able to intuitively understand where headings are placed and why. An accessibility checker can determine whether headings are present on a web page, but it can’t tell how meaningful their placement is.

Alt text for images

Alt text is another key feature for the visually impaired. Websites that convey important information through images need to make that information available elsewhere. Alt text images are one way to do that.

When a screen reader encounters an image with alt text, it tells the user what the alt text says. Good alt text does more than simply describe an image. It provides context that helps users fit that image with the rest of the content on the page. 

For example, imagine an e-commerce website using a stock image to tell users about a special discount code. The alt text may describe the image, but it’s the discount code that matters. Describing only the image would leave out an important and valuable part of the user experience.

In other cases, alt text is not required at all. Background images are a common example. If the image does not convey meaningful information, it can safely be left without alt text tagging. Most screen readers skip background images, so the user experience won’t suffer as a result. Similarly, alt text may not be necessary if the information contained in an image is available elsewhere.

Add captions and transcripts to videos

Video content can be problematic for accessibility because it relies on both sight and hearing. Both the content and context of the video must be taken into consideration from an accessibility perspective.

Most video content conveys meaning primarily through dialogue. Captions and transcripts allow people with hearing disabilities to consume that kind of video content. Transcripts are particularly important because they make it easy to navigate through dialogue without using the video player interface. That helps people with visual and motor skill impairments as well.

Additionally, web creators should carefully review how video content conveys meaning to audiences. If a video relies heavily on imagery – including charts and graphs – to make its point, the transcript may need more information.

WCAG Level AAA compliance requirements include sign language interpretation for audio or video content, as well. This can be a demanding task for video-centric websites, but it firmly establishes the website’s commitment to meeting the most stringent accessibility requirements.

Accessibility is not a one-time investment

Technology is constantly changing. As it changes, so does the way people interact with it. As web design trends change over time, web creators will have to adjust their accessibility solutions as well.

While some accessibility standards will remain constant, others will adapt to new technologies and trends. To maintain an accessible website, you must periodically review WCAG compliance and stay informed about changes to the guidelines themselves. 

Providing an accessible experience to users requires an ongoing commitment of time and resources, but it also increases the value of the digital experience your website offers. It increases the audience that your website caters to and offers significant protection from disability-related litigation.