In this series, we’ve explored why accessibility is important and what barriers your audience could be facing as they attempt to use your website, such as visual impairments, color blindness or inability to use a mouse. If you tested out your site using a screen reader or voice browser, you’ve probably learned that your site is not fully ADA and Section 508 compliant.
So, what can you do right now to improve your website for all visitors?
There is no quick fix or single tool that will instantly “accessible-ize” your site. Accessibility is best achieved when considered, checked and re-checked throughout the web design process, and should be a foundational philosophy of any website project. At KW2, there are dozens of steps taken throughout the process to ensure each website we create meets the needs of all users. And, once a site is launched, an ongoing effort must be made to ensure a site remains accessible every time a new piece of content is added.
However, your next website redesign may not be on the horizon, or you may lack the time or technical resources to fully audit and fix every accessibility issue on your current site. You can still get closer to compliance: there are four big things you can do today that will improve your users’ experience with your current website:
1) Run a general audit
Google Accessibility offers Accessibility Developer Tools, which is a Google Chrome plug-in you can install to run an accessibility audit on any page of your site to identify major issues.
✓ Run an accessibility audit using Accessibility Developer Tools to identify major issues
2) Determine what helpful information is missing
Screen readers and voice browsers rely on HTML tags and meta information to help users navigate your site and content. Download a free SEO spider tool like Screaming Frog, which will crawl your website and find each page, its status, title tags and more. Make sure each page has:
✓ A meaningful title tag that explains what the page is with unique and important information front-loaded
✓ At least one headline marked up as H1
✓ Properly tagged subheads (H2, H3, and so on)
Every image on your site should also have an alt tag that is both meaningful and functional (for example, “Search” rather than “Magnifying Glass”). You can view any image’s alt tag by hovering over the image, or to find all image alt tags on a given page, install the Firefox Accessibility Evaluation Toolbar.
✓ Use the Firefox Accessibility Evaluation Toolbar’s Text Equivalents menu to find a list of all image alt tags
✓ Look for missing alt tags
✓ Look for blank alt tags (alt=””) or tags that don’t accurately describe the image
3) Make sure your website’s text resizes
Most browsers give users the option to increase or decrease their default font size. Using the browser of your choice:
✓ Change your font settings to confirm that the type size on your pages changes
For example, here is the New York Times’ homepage with text set to Medium (left) and Very Large (right):
4) Make sure your text is legible against the background color of your site
Color contrast, or the difference between the color of the text on your site and the background color, can be an issue on many sites. For small text, the Web Content Accessibility Guidelines (WCAG) recommends a contrast ratio of at least 4.5:1. For larger text (18 px or more), the contrast ratio must be at least 3:1.
✓ Use Web AIM’s Color Contrast Checker to make sure your site’s text meets the ratio of 4.5:1
✓ If it does not, and you need to find a new color, try Colorsafe, which will give you a full palette of options based on your background color, font and font size
Creating and maintaining an accessible, usable website is a constant, evolving process. Each time you create a new page or upload a new image, it’s important to check the WCAG guidelines to ensure that anyone who wants to use your site can.
If you need help evaluating your website, or would like to learn more about building a site with accessibility in mind, please drop us a line to discuss!