When was the last time you were frustrated with a website you were trying to use? What made it frustrating?
It’s hard to be patient with a site that takes forever to load, doesn’t do what you expect it to do, or is confusing to navigate.
For sighted or generally able-bodied people, these issues are a hassle. But if you add a disability to the mix, you’ll find the internet rife with clunky, difficult, and aggravating experiences. People deserve better.
Out of the blue in 2018, I was diagnosed with Multiple Sclerosis (MS). It was shocking to watch my coordination and cognitive skills slip from me during my first MS attack—and to see how that impacted my ability to get things done online. We all depend on the internet for various needs, and as a developer, I’m determined to help make the interaction we have on it more accessible. You never know how much of a difference it can make for someone.
We can’t fix everything with one article—accessibility is an on-going process of refinement and testing. But the first place to start is to check for problem areas.
These 3 quick tests will reveal how accessible your website is. From there, you can work to improve your site for the benefit of your current and potential clients.
1. Try Out Keyboard Navigation
Keyboard navigation is one of the most important aspects of website accessibility. Many people have motor disabilities or hand tremors that make mouse-use impossible or frustrating. Blind users also frequently use tools that rely on keyboard navigation. And other users without disabilities prefer to navigate through a website in this way.
Find out what your website is like for these users by navigating it without a mouse.
Open your website in a browser and hit the Tab key a few times. You should be able to cycle through the links and form fields on your page. Use the Tab key to focus on a link and the Enter/Return key to simulate clicking on the link.
Test your home page first by tabbing through each link until you get back to the start of the page. Make notes of the following:
- Where did you lose track of the focus?
- Were any links missed?
- Were any links unreadable if the mouse didn’t hover over the link?
- Which links were partially covered when you tabbed to them?
- Which links or interactive elements seemed out of logical order (e.g. left-to-right, top-to-down)?
- When did you give up and go to your mouse?
This experiment will reveal problems for your web developer to look over and fix. Some will be easily fixed in the HTML/CSS and others may require some design or layout improvements.
Keyboard Navigation Tips:
- Tab = Move focus to the next link
- Shift + Tab = Move focus to the previous link
- Enter / Return = Follow the link (as if you clicked on it)
- Page Up / Page Down = Jump up or down the page to the approximate edge of your current screen
- Arrow Up / Down = Scroll the page in small increments
Here’s an example of a bug we found on our own website. This dropdown menu highlights the selection you’re on when you hover over it with a mouse. However, the text disappeared only when using a keyboard to make a selection.
This was a simple fix in the CSS, but if we hadn’t tested the site with keyboard navigation, we would never have found this issue.
2. Check for Contrast
Next, take a look at the font and background colors, and the contrast between them. If you wear glasses or corrective lenses, try looking at your site without them, or squint your eyes enough to make the page blurry.
Consider the following questions and potential solutions:
- Does text disappear? (Not enough contrast, text size is too small)
- Are the sections of your website still distinct enough to recognize?
- Do any of the colors blend together? (Not enough contrast)
Visitors to your website might have vision deficiencies that make your site inaccessible. With an aging population, this number will only grow.
3. Use Free Accessibility Testing Tools
There are several accessibility tests available to you for free. These can be a bit more technical, but can still be used by you and your web team to discover issues and get recommendations for how to fix them.
Some of the most popular ones are:
accessScan
accessScan is a free, automated testing tool you can use to examine your website's level of conformance with WCAG 2.1 Level AA and for ADA compliance. It quickly scans your website and, within seconds, assigns it a score: Compliant, semi-compliant, and non-compliant. You will also be given a more detailed breakdown of the accessibility issues found during the audit (if any exist).
accessScan is offered for free by accessiBe, one of the world's leading web accessibility tools. Its web accessibility widget, accessWidget, can be easily installed on your website, to audit and fix accessibility issues existing on a code level. The widget will also present website visitors with an interface through which they can adjust design elements to fit their unique needs (e.g., stopping animations, adjusting color contrasts, and increasing font sizes).
WebAIM
WebAIM, a free tool developed by Utah State University, is one of the easiest ways to check for website accessibility. Type in your website address and it will show you a full report for that page. It will show you annotations describing the problems it found and any suggestions for resolving them. Get started by clicking here: https://wave.webaim.org/
Lighthouse in Chrome DevTools
Your developers should know about this tool, so be sure to ask them if they have used it while working on your site. This tool is already available if you are using the Chrome browser, and it gives you an accessibility score from 0-100 for each page you run it on. With the scores come a list of issues to fix, as well as articles to read if you need more information on how to fix them.
If you’re using Chrome, simply navigate to the page you want to check and open up Chrome DevTools (right-click on the page and choose “Inspect Element”). Click on the tab called, “Lighthouse,” and you’ll be able to run a report by choosing your device (Mobile or Desktop) and clicking the “Generate report” button.
Axe Chrome Extension
This extension is a great tool to provide your web team. It’s a lot more technical than the ones above, but it can provide great feedback to your developer or your web designer.
Learn more about it here:
https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
Done testing, now what?
Remember that accessibility isn’t just a one-and-done job, especially as you make updates to your website. The best way to make sure your website is accessible is by using these tests at least every time you make updates to your site.
Require your web team to make accessibility testing part of their process for completing projects.
When accessibility becomes a deeper part of your law practice, you signal to your clients and potential clients that you care and that you go above and beyond what the competition is willing to do for them.