{"id":139742,"date":"2017-08-09T11:00:27","date_gmt":"2017-08-09T11:00:27","guid":{"rendered":"https:\/\/getflywheel.com\/?p=23483"},"modified":"2024-06-30T15:35:09","modified_gmt":"2024-06-30T20:35:09","slug":"basic-accessibility-audit-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/basic-accessibility-audit-how-to\/","title":{"rendered":"How to Do a Basic Accessibility Audit"},"content":{"rendered":"\n

So you\u2019ve been learning a lot about accessibility lately, but now you want to check your site yourself and see where you need to improve. How do you go about doing that? It\u2019s time for an accessibility audit! In this tutorial, I\u2019ll show you the ropes on a basic accessibility audit that will get you on the road to having a more accessible site.<\/p>\n\n\n\n

As you\u2019ll recall from my overview series<\/a>, an accessible website is perceivable, operable, understandable, and robust. Testing to make sure your site hits all four pillars of accessibility does not involve coding, so don\u2019t worry. We may install a Chrome extension or two, but you\u2019ll thank me later. Let\u2019s get started!<\/p>\n\n\n\n

NOTE: This tutorial assumes you know how to use the Chrome Inspector, or whichever browser\u2019s basic developer tools are provided.<\/em><\/p>\n\n\n\n

Perceivable<\/h2>\n\n\n\n
\"layout<\/figure>\n\n\n\n

Start with perceivable because if your site can\u2019t be perceived by the user, they don\u2019t know it exists. Here we will focus on three things: text alternatives, captions, and color.<\/p>\n\n\n\n

For every image on your site that’s more than decorative (meaning it’s a vital part of the information, not just an enhancement), the image should have an alt<\/code> attribute. You can check this by inspecting the source code of the image and looking for the attribute. If it\u2019s there, great! Now we need to make sure the attribute\u2019s value is useful. An alt attribute should describe the image in a way that informs visually impaired users. This is NOT an opportunity to stuff SEO keywords into your site. Make your description short, to the point, and helpful. Longer descriptions should be saved for the site content itself.<\/p>\n\n\n\n

Going along with images is video and audio content. In both cases, you\u2019ll need to provide some kind of captioning or transcription of the content. Your videos should have closed captioning enabled, or be pre-captioned. Testing for this is as simple as starting a video on your site and checking for captions.<\/p>\n\n\n\n

Lastly, we need to test our colors. To do this, we\u2019ll install a Chrome extension<\/a> that enables a grayscale mode. Once installed, load up your site again and turn on the extension.  Note the areas that are hard to read. These are where your problems are from a contrast perspective. From there, disable grayscale and use the Snook<\/a> color contrast checker to check your scores. You\u2019ll need to use the inspector to grab your hex values if you don\u2019t have them handy. Remember, anything less than a 4.5 (or 3.0 for large text) is an issue.<\/p>\n\n\n\n

Operable<\/h2>\n\n\n\n

The next step is to make sure the site is operable. This means we\u2019ll be testing keyboard functionality. To do this, open your site. Once the page is loaded, hit the tab key. What happens? Hopefully, a skip link pops up. If not, you should at least have an outline around the first link on the page. Ideally you\u2019ll have custom-styled :focus<\/code> states, but the bare minimum should be what the browser provides. From there, keep hitting the tab key to make sure you\u2019re going from link to link in the order they appear on the page. If your focus keeps jumping around, you\u2019ve got a tab index problem that needs to be resolved. Form plugins are often the culprit here.<\/p>\n\n\n\n

\"layout<\/figure>\n\n\n\n

Understandable<\/h2>\n\n\n\n

Next, we\u2019re going to check your site to make sure it is readable. After all, if a user can\u2019t read your content, what\u2019s the point of having it? The requirements here are pretty simple: can the language of your site be determined with code? To check, open up your inspector and look at the main <html><\/code> tag. Does it have a lang<\/code> attribute? If so, you\u2019re clear. You\u2019ll also want to make sure any segments that are in a different language have the lang attribute applied.<\/p>\n\n\n\n

There are other AAA level checks on readability, but those are beyond the scope of a basic audit. In general though, you\u2019ll want to keep your content at a 6th grade reading level unless your target audience is of a higher level of education.<\/p>\n\n\n\n

The other important aspects of your site\u2019s understability revolve around error messages and changing of context. More specifically, the lack thereof. When a user gives focus or activates an input, a significant change should not occur. The page should not jump unless the user is warned in some way (an arrow icon, helper text, etc.). These are the kinds of things you would have noticed when testing with the keyboard.<\/p>\n\n\n\n

When testing your forms, the same can be said of error messages. Errors should be displayed to the user clearly and stay on screen so they can correct the errors. This is something even big websites get wrong all the time. They forget to bring focus to the part of the page that has an error, or at least mark it somehow. Test your forms for errors and make sure the messages are clear. Using a solid forms plugin will help with this a lot, but don\u2019t rely on the plugin to do all of your work. You\u2019ll also want to make sure you\u2019re not just using a color (typically red) to signify an error. The actual text \u201cError\u201d is very important, especially for people with red\/green colorblindness.<\/p>\n\n\n\n

Beyond errors, your forms and inputs should have clear instructions. Go through each input on your site and make sure it is abundantly clear what the user should do. For example, search forms should have something besides a magnifying glass. A simple \u201csearch\u201d label will suffice. Make sure your users know what to do with interactive elements. Never assume.<\/p>\n\n\n\n

Robust<\/h2>\n\n\n\n
\"layout<\/figure>\n\n\n\n

Lastly, your site needs to be robust. What this means is the site is usable with assistive technologies such as screen readers. If your site is well formed with HTML, you should be okay. Just keep in mind that some modern browsers, including Chrome, will fix basic HTML errors, or at least attempt to fix them. The quickest way to test the robustness of your site is to load up the site in Safari and enable VoiceOver, a built-in screen reader. If your site doesn\u2019t work, you\u2019ll need to address those issues.<\/p>\n\n\n\n

Wrapping Up<\/h2>\n\n\n\n

This audit tutorial was quick, but that\u2019s the point. It doesn\u2019t take that long to make sure your site is accessible, and the tools required are minimal. The important thing to remember is that you want to put yourself in the shoes of someone who doesn\u2019t have the abilities you take for granted as an average user. Keep that mindset, and your audits will ensure that your sites are more accessible.<\/p>\n\n\n\n

In case you missed it, check out this series on accessibility:<\/strong><\/p>\n\n\n\n