Evaluating your website in comparison to ADA Guidelines is a daunting task, especially when it’s been some time since its creation. Many sources stress the importance of meeting WCAG 2.0 criteria, of designing with responsiveness & accessibility first in mind, amongst many other ideals. What, though, does all of that look like in practice?
Getting an Idea
Starting is often the hardest part of most things, and the path to an accessible website can feel like one of them. Fortunately, it can be made relatively painless and simple with the help of current tools. At the time of writing, there are browser extensions, screen readers, websites, and other tools available that can allow the user to confirm how accessible something is. From the manual testing of the screen readers to automated testing via the browser extensions, each option offers further insight into what may at first have felt like an obscure goal.
Next Steps: Manual or Automated?
Now that we’ve gleaned an idea of what’s available, what do we choose? That question is ever present in many articles and forums across the internet. The answer is not as simple and depends on your situation. There are three generalized levels of compliance that a website can choose to follow, Levels A, AA, and AAA. This decision depends on multiple variables, most importantly the website’s intention. Once you decide what to aim for, you can narrow down which approach & tools you want to utilize. Generally, automated methods will be quicker and have more ease of use, however, manual methods are much more robust & consistent. You can always combine them as well and use multiple, having different perspectives is important. Next, we’ll go into more depth on each tool currently available, to decide which is right for us.
Manual Testing: Screen Readers and You
One of the most reliable methods available is the very one that will be used to navigate your website, screen readers. Several are available for use depending on the platform used, such as NVDA & JAWS for Windows, VoiceOver for Mac & iPhone, and TalkBack for Android. Whichever your OS, there is software available. Piloting a screen reader takes a moment to adjust to, but the key things to focus on are listening to the prompts & responses given audibly rather than the information you normally get visually, and navigating not by mouse or touch, but instead by keyboard controls & gestures. Take time to get familiar with how your screen reader of choice works, and don’t be afraid to review documentation on things such as keyboard shortcuts & other features to help speed up your reviewing. It’s also a good idea to do some research on how screen readers are typically used, there are different approaches, but getting an idea of the common ways users navigate with them is ideal. Knowing that for example, tab and H are used frequently to jump between interactive elements and headers respectively is a huge time saver and common practice. All of this taken into account, you are prepared to set forward and see just how your website fairs. Was it as smooth as you hoped?
Automated Testing: The Future of Accessibility
Automatic testing is not as redundant as the human method yet, but it is not far behind and offers a great starting point. Browser extensions like WAVE Evaluation Tool offer a quick look at a website’s performance in terms of accessibility. Not only are they quick, but they highlight specific elements that would cause issues, even offering solutions, such as a more contrasting color, larger font size, etc. These are a great starting point for quick & easy fixes. Next are websites such as SiteImprove, which will give a more comprehensive breakdown on the page of a provided URL. This, while not being as accurate as a screen reader manually checking, is a good method of sorting out things that got missed at a high level. Third are websites and software such as BrowserStack, which offer a more total solution to automated testing, showing to be the most thorough as far as automatic options go. Options like this will likely become more shortly, with better reliability, making them a no-brainer and something to watch out for. As for the present, it’s difficult to say if they are sufficient on their own, so using these options in tandem with each other is best practice.
Testing Complete. Now What?
Tests have been run through one or more varieties of methods, trouble elements and styling have been found, and expected behaviors were unexpected, what is to be done for all of this? Here is where standard dev practices come back into play and coincide well. Take the identified problems, see what the most fitting solution would be, and implement and test. Only, there may be a few options, such as an anchor tag that needs to be flagged as a button, perhaps with the role attribute, or even just made a button. Whatever you decide ... test and test and test. One screen reader will perform differently than the next, which will give a different result than what a browser extension is reading out. Redundancy is key in ADA, the solution that works in most cases is likely the best. Equipped with this knowledge, you are prepared to tackle any compliance issues as you encounter them. Gone are the days of bright yellow text on a white background.
More ADA reading:
Social Media Accessibility Tips
