Web Content Accessibility Guidelines: What They Are and How to Comply

If your website isn't accessible, you could be alienating some visitors.

Have you ever heard of the Web Content Accessibility Guidelines? To give you a quick overview, these guidelines were created by the World Wide Web Consortium in 1997. Its goal is to make the web more accessible for people with disabilities. People with disabilities often use non-standard devices and browsers to access the internet.

If you aren’t designing your websites with these other types of technologies in mind, you could be inadvertently discriminating against those with disabilities.

The good news is that it is simple to design, write, and develop your website to be in line with the Web Content Accessibility Guidelines. Below, I outline 9 changes you can make to your website to make it more accessible for everyone. 

Design

1) Use contrast between text and background

Some people have difficulty reading text on a web page when there isn’t enough contrast between the text and background. It’s important to use high contrast to reduce the number of people who will have difficulty viewing your website.

WebAIM has a simple tool that allows you to check if your website has enough contrast to comply with WCAG.

2) Use headings and spacing to group related content

This is something that I preach no matter how you expect your website content to be consumed. It’s a best practice to use descriptive headlines and spacing to ensure that readers can easily, and quickly, understand your website.

3) Include transcripts for any video and audio

This is pretty self-explanatory, but important nonetheless. Anytime you have a video clip, audio snippet, or other unreadable content, include an easy-to-access transcript with it. Transcripts have an added SEO benefit too by increasing the word-count and keywords on your page.

Writing

1) Write informative page titles

This is another best practice regardless of your website’s goals. Any user of your website should easily be able to figure out what the page is about by just checking the page title.

2) Write descriptive link text

Rather than just writing “click here” when linking to another page, write text that quickly explains the destination. For example, let’s say you’re linking to a page of copywriting examples. Rather than writing, “For more copywriting examples, click here,” you’d want to write something like, “View more copywriting examples“.

3) Write detailed alt-text for images

You should include descriptive alt-text anytime you have an image on a page. It’s a best practice for SEO and web accessibility. Unfortunately, this is often ignored for the sake of time. All you need to do is simply and clearly describe the image on the page.

Development

1) Create logical and semantic structure of elements in your pages

Make sure you’re using the semantic HTML tags like <header>, <nav>, <section>, and <aside>. More than that, though arrange heading tags in proper order to represent flow between content.

2) Provide methods to navigate through the site without using the mouse

Not everyone who views your website will be able to use a mouse. Add tabindex to important interactive elements on your pages like links and buttons and navigation elements. Display clear focus indicators on currently selected elements.

3) Ensure that all interactive elements are keyboard accessible

Be sure that interactive elements (e.g. dropdown menus) can be activated via keyboard controls as well as mouse clicks.

Even though it might take additional steps to make your website accessible, you won’t have to sacrifice design. Carney recently redesigned Carnegie Museum of Art’s website to comply with the Web Content Accessibility Guidelines. Check out CMOA’s website.

Want more content on web design and marketing? Sign up for The Daily Carnage below.