ADA Compliance - Tips When Designing, Coding, & Writing for WCAG 2.0

Modern websites consist of complicated, diverse collections of text, media, links, and other functions. With so many different types of content to consider and so many accessibility concerns also coming into play, the process of developing a web page that serves a vast audience may seem overwhelming. In reality, however, this is more methodical than you might think. It all boils down to three main categories: designing, writing, and coding.

In this guide, we will break down the essential components of modern web accessibility as defined in the Web Content Accessibility Guidelines 2.0 (WCAG 2.0). Keep reading for actionable insights into how you can make your website as accessible and functional as possible:

Designing

Tips when Designing a Website for ADA Compliance

The most obvious aspects of web accessibility (or lack thereof) tend to fall into this category, which determines whether users can properly perceive and navigate content contained on the websites they visit. Ideally, the design process should incorporate elements of all WCAG 2.0 principles (Perceivable, Operable, Understandable, and Robust — sometimes referred to as POUR), adhering to, at minimum, Level A guidelines.

Key aspects of WCAG 2.0’s principles that relate to web design include:

Contrast between the foreground and background. A high degree of contrast must be available to ensure that users (including those with vision impairments) can see and understand both text and images. The Perceivable category of WCAG 2.0 includes a recommendation for a contrast ratio of 4.5:1.
Take advantage of whitespace and content proximity. Contrast can also be fully utilized based on content layout. Similar content should be grouped together and identified via headers or subheaders. Avoid visual clutter whenever possible.
Going beyond color to convey information. Users who struggle with color perception may not understand content if its meaning is only designated via specific hues. This hurdle can be overcome by providing alternate options. For example, instead of only marking required fields in red, an accessible online form will also use an asterisk.
Adapt content to different devices. Users with smartphones should find webpages just as easy to navigate as those accessing content via desktop computers. Known as responsive design, this concept involves adaptable options for header placement and text size.
Provide media alternatives. Rich media can boost your content, but not all users may be able to take advantage of images, videos, or sound players. Be sure to provide alternatives such as transcripts or captions for graphs.
Help users identify interactive features. Many users will primarily rely on keyboards to access important website functions. Keyboard focus elements such as highlighting and borders can prove helpful as users tab through your page.

Developing & Coding

Tips when Developing and Coding a website for ADA Compliance

As with designing, coding (or otherwise known as developing) can involve all four aspects of the WCAG 2.0 POUR principles. Often, however, the focus lies on the Operable category, which makes sense: while accessible design focuses on appearance and usability, coding is all about functionality. If users cannot properly operate key elements of your site, the design of the page matters even less.

Essentials to keep in mind when developing an accessible web presence include:

Provide alt text for images. All visual elements on websites (including logos, photos, and graphs) should be accompanied by alt text. Without this, content can be difficult and time-consuming to utilize. (You can learn more about text alternatives in ADA Compliance Part 2)
Help users avoid errors when completing forms. Clear instructions and notifications can limit the potential for errors, or, if such issues do occur, help users identify and correct them promptly. Format forgiveness can prove especially helpful in this regard.
Match code order with reading order. Does the order of elements within the code make sense based on the information featured on your page? If needed, remove CSS styling to help you verify that the content’s order makes sense.
Adapt the code based on the user’s device. The importance of responsive design extends to web development. Displays should be capable of adapting to various zoom states. Content clipping and horizontal scrolling should be avoided when pages are zoomed.
Make interactive elements keyboard accessible. As mentioned previously, many users will rely on keyboards alone to navigate your page. Lend them a helping hand by allowing them to use interactive functions without relying on touch screens or other potentially inaccessible devices.

Writing

Tips for writing content to better conform to web content accessibility standards

What happens once you’ve designed and developed an accessible page? Users will appreciate your site’s general ease of navigation, but your content cannot serve its intended function unless it’s written in an accessible manner.

While clear and concise text is essential, the accessibility of your writing relates primarily to how information is structured. This is evident based on the following best practices referenced in WCAG 2.0:

Highlight paragraphs and page sections with headings. Instead of forcing readers to take in huge blocks of text, divide content with help from brief, easy-to-understand headings. Content can be further broken up by subheadings or bullet points.
Allow link text to describe the target’s function. For example, rather than provide generic instructions such as “click here,” let users know that clicking a particular link will lead them to a specific page, such as a professional bio or a news article about a relevant topic.
Make alt text functional. It’s not enough to simply include alt text with images that convey essential information. This text must be descriptive enough that visually impaired users can discern the meaning of a particular image without actually seeing it.
Use easy-to-understand language or include a glossary. Keep in mind that not all users will understand specific terms. If complex words or phrases are required, consider defining them in an easy-to-navigate glossary.
Help users understand acronyms. Don’t forget to expand acronyms when they’re first introduced. After this, these designators can be left in acronym form to help maintain concise content. For example, in this article, we explained the meaning behind WCAG and POUR early on.

An important interplay exists between designing, coding, and writing for accessibility. None of these elements can be fully effective unless the others have been addressed. With a modicum of effort in all three areas, however, it’s possible to create an accessible, usable, and effective website that meets the diverse needs of your customers and clients.

Improve Web Accessibility with Vinci Digital’s Help

We welcome the opportunity to help businesses make their websites more accessible to all users

With so much to tackle, the prospect of designing, developing, and writing for accessibility may seem overwhelming. There’s no need to take on these challenges alone. Our team at Vinci Digital is happy to help every step of the way. We offer many services that place accessibility at the forefront, including web design, content marketing, and more. Contact us today to get started with a quote.

Please make sure to check out the other articles in this four-part series to bring yourself up to speed with all aspects of the Web Content Accessibility Guidelines 2.0 and how they relate to ADA compliance for your business’s website.

PS: Which of the strategies highlighted above have you implemented? Which do you hope to expand on to further improve accessibility? Comment below to share your insight.