Website accessibility is complex and for many it can be overwhelming to understand where to start or what to do to improve accessibility on your site quickly. Below we’ve listed the top 6 tips to get you started quickly. This will allow you to to make an impact on your website and improve your user experience for visitors of all abilities.
1. Perform an accessibility audit using Google Chrome LightHouse – We'd consider a LightHouse audit the first step if you’re looking to get started with improving accessibility on your website. LightHouse is an open-source tool in the Chrome web browser that is free and easy to use. It provides insights on vulnerabilities and opportunities for improving your website accessibility. It can also be used as a baseline to reference as you make updates to your site.
The score you receive from Lighthouse is going to be a number on a scale of 1-100. This lists what you’re doing right and what needs to be fixed. The report will likely indicate some of the quicker fix solutions listed below.
2. Make sure all images contain alt text – Alt text (alternative text) is a description of an image within html code. This text appears in place of an image if the image fails to load on your site. Screen readers reach this text to describe the image to someone who cannot see the website. It should be descriptive and no more than 125 characters. The good thing is that alt text is very easy to edit. Some CRM solutions, such as WordPress and Drupal, give the ability to require alt text to ensure every image on your website has one.
3. Check for color contrast and update accordingly– Color and contrast is an important part of website accessibility. Without proper contrast, some users cannot see the content on your website, let alone read it. There’s many details around color, font size and contrast, and we won’t be going into that detail in this post, but the general rule of thumb is that 4.5:1 is the minimum contrast ratio required by WCAG. Use a contrast checker to ensure the colors you’re using on your site meet that minimum requirement. This contrast checker tool is probably the most widely used: https://webaim.org/resources/contrastchecker/
4. Create website accessible content – Website accessibility provides a better web experience for all, regardless of their abilities. Updating your content with website accessibility in mind includes understanding how a screen reader reads the content on your website. For example, non-descriptive link text such as Read More or Click Here, does not provide the user with enough information on the link and why they should click to a subsequent page.Structure your content to be short, clear and concise. This makes it easier for any user to consume the content. In addition, it’s important to make PDFs and videos accessible. For PDFs, it requires proper tagging which is often overlooked, but can be relatively easy to fix. With videos, there’s many things to keep in mind to make this content accessible. Not everyone can hear well or can understand the content at the same rate. Provide transcripts or captions to allow that content to be read and don’t auto-play content without the ability to pause.
5. Include components that will help visitors of all abilities navigate and interact with your website - Traktek recently completed a website for an organization with a focus on improving the lives of people with intellectual and developmental disabilities. This website, the UMass Medical Center Eunice Kennedy Shriver Center (shriver.umassmed.edu), includes many accessible tools to provide a better user experience to all users visiting the website. We focused on high contrast, large, clear font, and accessible content. One feature we would recommend is this WordPress Accessibility Font Resizer plug-in to allow the website visitor to manually increase the website font with a click of a button.
6. Accessibility audit monitoring tool – We always recommend a monitoring tool to keep tabs on how your website is performing when it comes to accessibility. We partner with SiteImprove who does this and more. Check out our blog post for more details on SiteImprove.
