The what and why of web accessibility — plus 7 quick wins you can implement today

What is website accessibility?

Did you know that 1 in 4 adults in the United States has some type of disability? Despite being the U.S.’s largest minority group, the needs of people with disabilities are often overlooked – especially when it comes to using the internet. That’s where web accessibility comes in. 

What is web accessibility, you might ask? According to the World Wide Web Consortium, “Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.” Put another way, web accessibility makes websites usable by all people, including those with visual, auditory, motor, speech, neurological, and cognitive impairments. It touches every part of your website: text, design, images, videos, and even the code your site is built on. 

Clear as mud, right? 

Fortunately, we don’t have to go it alone. W3C (aka the World Wide Web Consortium) is an international organization that develops standards for the web, including its Web Accessibility Initiative. That includes resources to help you understand and implement accessibility. 

The lowdown on WCAG

Developed by W3C, the Web Content Accessibility Guidelines (WCAG) are the gold standard in making your website accessible to people with disabilities. These guidelines are grouped by four principles: perceivable, operable, understandable, and robust. Each principle includes guidelines, totaling 13, that describe the goals site owners should consider when making their websites accessible to users with different disabilities. These guidelines consist of three levels of testable success criteria: A (lowest), AA, and AAA (highest). Your needs will vary, but many organizations aim for AA compliance because it covers most of the WCAG guidelines and complies with Section 508 of the Rehabilitation Act of 1973 (legislation that requires federal agencies to make their technologies accessible).

Phew. If you’re feeling overwhelmed, we get it. It’s a lot to take in, but we promise it’s a worthwhile process. 

Why you should care about accessibility

Let’s take a moment to think about all the activities you perform online every day.

If you’re like us, you probably thought about things like social media, gaming, communication, reading the news, or shopping. Maybe you dug deeper and listed things like managing your finances, paying bills, and applying for jobs or resources.

Now, imagine that you couldn’t use any of those sites. If we had to guess, a huge portion of your life would come to a halt. That’s the reality for many people with disabilities. Simply put: web accessibility is crucial to eliminating barriers and creating a more inclusive society.

“Accessibility, the “A” in DEIA, is a foundation on which [we] must build diversity, equity, and inclusion for people with disabilities. Without accessibility, we cannot truly achieve the others.”

- Section508.gov

Accessibility is more than just a box to check off your to-do list. It’s an opportunity to make the web better for everyone, thanks to a little thing called universal design. 

The concept is simple: design products that are accessible, understandable, and usable by people of all backgrounds or abilities. At this point, you may be wondering what’s in it for you. Well, according to the National Disability Authority, “By considering the diverse needs and abilities of all throughout the design process, universal design creates products, services and environments that meet peoples’ needs.” When we build products with everyone in mind, we all get a better user experience.

Oh, remember that thing we said about 1 in 4 adults having a disability? That translates to 61 million people. Suppose 61 million people can’t use your website. In that case, you’re missing out on a whole lot of potential customers (on top of facing potential lawsuits). The more difficult your website is to use, the more the number of missed sales grows. And it’s not just the people who can’t use your website you have to worry about. Poor website accessibility can hurt your brand. So, accessibility just makes good business sense. 

That said, you’ll be glad to know that many components of accessibility are easy to implement. If you’re ready to make your website more accessible but don’t know where to start, we’ve got some practical tips for you. 

Accessibility quick wins

1. Write descriptive links

Think about all the “Learn more” and “Click here” links you’ve seen online. Without context surrounding the links, how do you know where they go? 

Screen reader users often scan sites link by link or by pulling up a list of all links on a page. Consequently, a blind user may not hear every word on a page and miss out on important context for links or buttons. When a web page uses the same, nondescript text for every link, a screen reader user will hear “Learn more” over and over again. Not so helpful.

You can easily correct this issue by adding a few descriptive words to your links. Instead of writing “Learn more,” try “Learn more about our company.” The minor addition helps users by letting them know what they can expect on the following page, no matter how they access your site. It is important to be consistent, too. Use similar text any time you link to a specific location. This practice helps all users clearly understand where you’re directing them every time. 

These few adjustments will help you satisfy WCAG Success Criteria 2.4.4 (Level A),  2.4.9 (Level AAA), and 3.2.4 (Level AA).

2. Use alt text for non-text content (and don’t use images of text)

A picture is worth a thousand words, right? Now, get rid of every picture on your website. How does your site experience change? 

Alt text, or alternative text, is a short description of images or other non-text content that lives in the code of your website. This copy acts as an equivalent to the visuals within your site, including everything from pictures to icons and buttons. It helps people who use screen readers or other assistive technologies understand the content and purpose of the images. Plus, alt text is useful when your images fail to load. However, there are some exceptions to the rule. For example, you don’t need alt text for content that is purely decorative or serves no purpose. If you’re not sure you need alt text, W3C created a handy alt decision tree to help you decide. 

Here are some best practices for writing alt text:

• Use clear, concise language to accurately and vividly convey what the image is about.
• Keep it short. All you need is one or two sentences.
• Don’t start alt text with “Image of.” Your site code should let screen readers know when there’s an image on the page, so including “Image of” or “Picture of” is redundant. 

Follow these guidelines, and you’ll be on your way to satisfying Success Criteria 1.1.1 (Level A) and 1.4.5 (Level AA).

3. Add closed captions to audio and videos

If season four of Stranger Things taught us anything, it’s that we can all appreciate expressive closed captions. 

Closed captions provide an alternative means of accessing audio content for users with physical or cognitive disabilities. Additionally, closed captions can benefit individuals who are not native speakers of the language being spoken in the audio content. When writing closed captions, be sure to include dialogue, references to who is speaking, and non-speech information conveyed through sound, such as important sound effects. You’ll want to account for both live and pre-recorded audio or video. 

Captions aren’t just about the words people say, though. ​It’s essential to make sure they’re visually accessible, too. Consider the font size, and allow users to select from different caption styles for the optimal site experience.

Channel your inner Stranger Things caption writer, and you can fulfill Success Criteria 1.2.2 (Level A), 1.2.4 (Level AA), and 1.2.5 (Level AA).

4. Provide clear, descriptive headings and form labels

Imagine reading this blog post without any headings. It’d just be a huge wall of text. You’d have a hard time figuring out what to focus on, and you probably wouldn’t be reading it this far as a result. 

Headings are essential signposts that describe the content that follows them. They are vital in helping users understand what the sections of your site are about and how the content is organized, whether they’re visually scanning the page or using a screen reader. Sighted users may interpret styling features like font size or bolded text to identify headings and subheadings, but screen readers can’t infer when these styles indicate a heading. That’s where heading tags come in. Proper use of heading tags defines the sections and layout of your web pages (more semantic structure).

Similarly, labels help users understand the purpose of text fields, checkboxes, radio buttons, or drop-down menus within a form. Without a label, the screen reader may read the field name or placeholder text, but the information the user needs to enter may not be clear. The <label> element establishes a link between a text label and a form control through code and doesn’t rely on visual cues.

These techniques will help you satisfy the following Success Criteria:

• 1.3.1 (Level A) 
• 2.4.6 (Level AA) 
• 2.4.10 (Level AAA)
• 3.3.2 (Level A)

5. Ensure your content has adequate contrast

One simple but often overlooked feature of website accessibility is contrast. In accessibility, contrast specifically refers to the brightness between two colors. Low contrast text is difficult to see for all users but doubly so for low vision or color blind users (think red text on a black background). 

Keep your text contrast ratios at 4.5:1 (3:1 for large text) to satisfy 1.4.3 (Level AA). Or, you can up the contrast ratios to 7:1 (4.5:1 for large text) to fulfill Success Criteria 1.4.6 (Level AAA). To satisfy 1.4.11 (Level AA), you’ll want a contrast ratio of 3:1 for non-text elements. 

Bonus – there are a lot of great tools that measure your contrast ratios. For example, WebAIM Contrast Checker helps you easily check the contrast ratio of your colors. Similarly, Button Buddy is a generator you can use to style accessible buttons.

6. Let users bypass blocks

How annoying would it be if you had to read every header, navigation, or banner ad you encountered online? Many websites would be unusable due to the frustrating user experience. If you’ve ever wondered what those “Skip to main content” links are about, now you know. 

Sighted users can often choose not to engage with repetitive content and even develop banner blindness after a while, but that’s not the case for everyone. When sites contain repetitive content and don’t offer mechanisms to skip it, screen readers must read through that content every time. Similarly, keyboard users may have to tab through every link in your navigation to get to your primary content. When you don’t build mechanisms for users to bypass that content, you force it on people that can’t opt out. Allowing users to bypass blocks is essential to helping everyone quickly find the content they’re looking for.

Employ these mechanisms to help you achieve Success Criterion 2.4.1 (Level A).

7. Specify your document languages

If you have a global audience or a multilingual site, document languages are an important accessibility feature. Most screen readers can read multiple languages, but it’s up to you to define what languages your content should be read in. If you don’t specify, assistive technologies will use the user’s default language. If your content is in the same language, it’ll work for the user. If it isn’t, your page may be incomprehensible to the user. 

If you have multiple languages on a single page, don’t fret. You can use language tags to specify the languages of links, paragraphs, or entire pages of content. 

You can also go the extra mile and employ techniques to help your users understand unusual words or phrases, including glossaries and linked or inline definitions. This additional context is especially beneficial for users with disabilities that make it difficult to understand nonliteral or specialized language. 

These techniques address Success Criteria 3.1.1 (Level A), 3.1.2 (Level AA), and 3.1.3 (Level AAA). 

Want to see how your site measures up when it comes to accessibility? Here are a few tools you can use to start your audit: 

• Lighthouse – one of the most well-known and widely used tools for running accessibility audits on your website
• WAVE Web Accessibility Evaluation Tool – a tool that reviews individual web pages and provides users with a visual reference of accessibility errors

A great web experience is accessible. It’s important to go beyond ADA compliance to enable digital experiences that dismantle barriers to access – because it’s the right thing to do, and it’s good for business. If your business needs support in meeting WCAG guidelines or testing digital products for accessibility, reach out to us for help today.