The Importance of Being Compliant

As web designers and developers, it’s our ultimate hope to create amazing user experiences. Part of that is ensuring that everyone who visits one of our websites can actually interact with what’s on the page. Together, the ability to have a web page render with a number of alternative textual and interactive options is collectively known as web content accessibility.

The chief aim of web content accessibility, also known as ADA compliance, is to deliver content to individuals with disabilities in the best manner possible. While an emerging and growing field, web accessibility encompasses a wide range of syntax and structural elements, all aimed at providing alternatives to those who cannot interact with a website as designed.

Accessibility compliance spans from the simple to the robust. In short, compliance includes simple things like ensuring images have ALT tags, text has significant color contrast, and the html markup has a default language set. On the other hand, accessibility also means that your pages can render without any styling, that the page can be traversed completely by keyboard, and complex visual elements have textual alternatives.

Web Accessibility Basics

Before getting into the nitty-gritty, it’s important to get a base understanding of accessibility and the steps needed for compliance. First, all of the rules and guidelines that make up accessibility standards are referred to as Web Content Accessibility Guidelines (WCAG). A product of the World Wide Web Consortium (W3C), these guidelines establish the best practices we as designers and developers should follow.

When building unique websites and web applications, it’s also important to follow the full WCAG Checklist. This list of key accessibility items is ordered according to priority status. Depending upon your project, intended audience, and legal requirements, you may need to satisfy certain accessibility priorities.

Web Accessibility Essentials

There are some absolutely essential things we, as designers and developers, need to do with our markup to ensure accessibility. Two simple, but ultimately fundamental, components are to ensure that every image has the accompanying ALT tag and that the use of Header tags follows in a sequential, logical order.

A little more in depth is the overall structure of a web page’s body content. The use of ARIA landmarks is necessary to help screen reading technologies prioritize and organize page content. All content in a page’s body must be contained within a landmark. Below demonstrates two ways to use ARIA landmarks:

Web Accessibility for Pros

As web design has evolved to showcase more and more complex visual elements, so as web accessibility to ensure individuals with disabilities can likewise experience these structures. If you are familiar with more complex jQuery components, then you will certainly encounter Widget Roles which are designations to help better explain the intended functionality of more complex visuals such as tabs, alerts, and dialogs. Below shows the markup for a tabbed section that is accessible.

Another area of more complex accessibility compliance is the use of forms. On modern websites, a form can take a number of highly elegant designs. While this may look good, these forms often fail to render for many users and often lack the necessary context. One simple thing to include is the necessary label tag for each input field. If your design calls for the label to be hidden, Bootstrap has a convenient way to have it show for screen readers only:

Additional Resources

The above examples, however, are just the tip of iceberg. Below are some tools that can help you test your web design projects against accessibility guidelines:

Functional Accessibility Evaluator (FAE)
https://fae.disability.illinois.edu/

The Functional Accessibility Evaluator (FAE), a product from University of Illinios in Urbana-Champaign, analyzes given websites against WCAG guidelines and produces a report that helps you identifies violations.

WAVE Web Accessibility Tool
http://wave.webaim.org/

WAVE, a product from WebAIM, analyzes specific web pages and shows violations inline, better identifying where specific violations occur.

Contrast Ratio
http://leaverou.github.io/contrast-ratio/

From Lea Verou, this handy Color Contrast Ratio tool compares two specific colors. Most text elements should be above the ratio of 4.5.

Needless to say, the world of web accessibility is complex and rapidly evolving. What was first aimed at creating a baseline for individuals with disabilities to experience the overall web has now become a host of guidelines that can truly open a page’s content to the world over. Consequently, it’s our responsibility as designers and developers to do our part and make our creations as accessible as possible.