An Internet for All

by Nick Witter, Developer

Imagine what it would be like if the internet were a tangible place that you had to drive to in order to find the information that you were looking for. Perhaps it is intuitive to think of it as being similar to a library. You walk through the glass doors of this vast repository of knowledge and stop at the directory, or you find a friendly employee who works in the Stack Overflow department that will happily point you in the right direction. Then you begin navigating to the section of the building that houses the answer to your query. Being surrounded by all of this information is sublime! You can learn anything your heart desires, and it is mostly free of cost. Surely you would think that everyone should have access to this information. Ramps by the stairs, automatic doors, and elevators would be necessities, right?

What is Web Accessibility? Who is it For? Why Should You Care?

When it comes to creating an aesthetically pleasing and graceful user experience (UX), keeping the end user in mind is paramount. This is especially true when it comes to accessibility. Web accessibility is the practice of ensuring that your content is equally available to and understandable by everyone. You would be incorrect to assume that an individual who is blind wouldn’t make their way to your web page. This is just one example of one person with a single disability. The way in which you lay out your content on the screen is important, but you also need to be mindful of the users who navigate with their keyboards because they cannot physically use a mouse, or those that employ a screen reader in their browser because they cannot see well. Your efforts to create accessible content directly influences the experience of these people. The implementation of accessibility standards across your website will benefit all users, but especially those with disabilities.

Within the discourse of web development, accessibility is commonly referred to as “a11y.” This is a numeronym—the eleven in between the “a” and the “y” represents the eleven characters between those letters in the word “accessibility.”

The motivation to make your content accessible doesn’t have to be completely altruistic; you reap additional benefits from your efforts. Since accessibility is closely related to general usability, you are likely to improve both. Your content is more contextually understandable to everyone, including other machines. This has a positive impact on your overall search engine optimization (SEO). Making your content more inclusive and understandable improves your website’s search results and potentially helps you reach a wider audience. Poor a11y implementation risks frustrating your users and losing potential business!

Accessibility Standards

W3C—or the World Wide Web Consortium—is a governing body of the internet. W3C’s primary goal is to ensure long-term growth for the web by developing and agreeing upon different protocols and standards to be used. In relation to a11y, the W3C created the Web Accessibility Initiative which fostered the first Web Content Accessibility Guidelines (WCAG). Then in 2008, WCAG 2.0 was published and adopted as the standard to which web accessibility is still held to this day.

Diving into WCAG 2.0

The structure of WCAG 2.0 can be generalized into four main principles. Your content should be: (1) perceivable, (2) operable, (3) understandable, and (4) robust. These principles are further dissected into twelve guidelines. Each one of those guidelines has its own individual, testable success criteria that you should use to audit your website for a11y. WCAG 2.0 also includes three tiers of conformance that your website can adhere to. Your website should adhere to level A conformance at a minimum. Level AA conformance requires more guidelines to be met and so requires more effort and time to be spent. Aiming to satisfy AA conformance is a worthy goal. Level AAA conformance typically applies to specific sections of a web page that serve a specialized audience.

Auditing

Auditing your site might feel a tad overwhelming if you have never heard of WCAG before. Fear not, the auditing process can be simplified with a plethora of useful tools to assist you. Let’s discuss the auditing process and take a look at a few of our favorite tools that we like to use at 2wav.

Functional Accessibility Evaluator

An accessibility evaluator will help you determine the level of conformance of your website, and help you identify where your effort needs to be spent. The Functional Accessibility Evaluator developed by the University of Illinois is an open source tool that helps you gain a high level overview of your task at hand. This tool delineates the twelve guidelines and their associated test criteria. Insert the URL of your domain and generate a report summarizing every WCAG test criteria on each page of your website. Narrow down the pages you need to fix first. Start thinking strategically here about your content and how it is structured. Do you share any components across multiple pages? The reports generated from FAE can be saved to periodically benchmark progress and identify regressions in the accessibility of your website.

AInsepctor

Once you have an understanding of where you are violating guidelines, start narrowing your focus. Another tool we use alongside the FAE is the AInspector extension for Mozilla Firefox. This open source tool assists you in narrowing your audit’s scope down to the element level on a given page. It inspects every element and compares it against the test criteria for all twelve guidelines and then gives you an organized summary of any violations.

On the page you plan to audit, open the inspector and you will see a colorful box with results of the inspection consolidated into different categories based on the twelve guidelines. Focus on a specific guideline that your page is in violation of by double clicking. Now the tool displays a collection of results from each test criteria that was used to inspect the specific guideline. Here you will find lots of helpful information about rule descriptions, actions you can take to resolve this type of violation, and linked resources. Double-click once more on a specific test criteria and the tool displays results from each of the individual elements on the page. If you double-click on any element, the AInspector tool will highlight that element in the DOM (document object model). Information about that element’s accessible name, visibility, and its attributes will be displayed. This tool makes finding and fixing violations simple. Do a little research to understand why you are in violation and then implement your solution. We recommend using the developer tools in your browser to quickly inspect the offending element and test out a solution. Once you think you have a working solution in place, click the button in the AInspector that says, “Rerun Evaluation.” If the focused element turns from red to green, you know that your solution works. You can now confidently go to your source code and apply the needed adjustment.

Firefox Accessibility Tree

User testing can be just as helpful when running your a11y audit. If you do not know a person who can unbiasedly test your content, then become that person. Turn on your screen reader and try to navigate through your website with your keyboard and your eyes closed. Can you navigate through the page and still understand your content? This will help you recognize navigation or labeling issues that your website might have. The accessibility features in the developer tools of your web browser will also help you iron out any of these issues. Firefox’s accessibility tree is another one of our favorite tools. As you traverse the tree, it displays the different properties and attributes that are used by assistive technologies. Firefox’s accessibility tool offers other interesting modes to simulate what your content looks like to someone with different visual impairments such as achromatopsia (color blindness), deuteranopia (can’t see green), and contrast loss.

Conclusion

When it comes to designing a smashing UX, user accessibility must not be neglected. Wheelchair ramps, handrails, and directory signs might not be the most glorious part of a building, but certainly they are critical components for user accessibility. Auditing your site for accessibility doesn’t have to be a giant, scary ordeal either. With modern tools this task can be broken down and conquered with ease. Having accessibility features can mean the difference between a happy user and a frustrated user. The benefit to having accessibility-rich content is primarily for your users, but you gain additional benefits. If you have taken the time to ensure your content is accessible-rich, your website will be more understandable to both humans and machines. This can mean that it’s possible to have better search results and ultimately reach a bigger audience.