Part 1: How to Conduct a Basic Accessibility Audit on Your Site
Part 1: Visual Accessibility and Manual Code Inspection
Accessibility is really important:
- Accessibility benefits everyone. By paying attention to accessibility you will improve the UX of your site for all of your users.
- Making sure your site is accessible expands your customer base. People with a range of disabilities make up a significant portion of the buying power.
- It’s the right thing to do – designing and developing with an eye to inclusivity means that we value and respect all users and people equally.
- There are legal imperatives. More and more legislation is coming into play that mandates accessibility, particularly in the transportation and technology sectors.
It can seem overwhelming, but there are a few simple things you can do to evaluate your site’s accessibility. Many different types of people need to use the web. Not everyone is using technology in the same way. It is crucial to design for a range of abilities and assistive technologies, to make sure that people do not experience barriers to using your site.
Web accessibility is a deep and important topic, and there are people and companies who specialise in it. The WCAG 2.0 guidelines are considered the industry standard in accessibility, but these can feel overwhelming! Each guideline has three levels of success criteria, A, AA and AAA. The level of compliance that is legally required varies depending on where you are based and the sector.
As a rule of thumb for getting started, aim for level AA. For this post, let’s look at some of the easy ways to get started with some basic accessibility auditing on the sites you design and develop.
Auditing for Visual Accessibility
A really simple, fast and effective way to do a visual inspection is to view the site or design in gray scale, and make sure that important information is still discernable.
- Bring a screenshot into Photoshop.
- Go to Image > Mode > Grayscale
- Visually inspect – is it clear what’s clickable? Is the important information discernable now that color is out of the picture?
Another thing to check is how the site looks to people with various form of color blindness. Again, what we are testing for here is that crucial information is still discernable when color is perceived differently.
For someone with Protanopia-type color blindness, the difference between the yellow and green window minimize and full screen options becomes unclear. The symbols for these only appear on hover state.
- Bring a screenshot into Photoshop
- Go to View > Proof Setup > Color Blindness Protanopia-type or Deuteranopia-type
- Visually inspect the image – could someone with this type of color-blindness get the same information as someone who is not color-blind?
Checking for Color Contrast
A crucial aspect of visual accessibility is color contrast. Ever squinted to try to read light text on a light background on a bright screen? That’s a contrast problem. According to WCAG Guideline 1.4.3 the contrast ratio between text and the background should be at least 4.5:1. Text that is 19px bold or 24px or larger has a minimum guideline of 3:1 contrast ratio.
To test for contrast ratio, use a tool like the Paciello Group’s Color Contrast Analyser app. Using the tool, you can input a HEX value for a color, or use the eyedropper to target a color. Usually, your foreground color will be a text color, and the background color is the color that text is overlayed on.
Checking text color contrast ratio with the Color Contrast Analyser. You will quickly develop a sense for what passes and fails!
The app will tell you the contrast ratio of the combination (remember we are aiming for 4:5:1), and will also tell you whether it passes or fails WCAG 2.0 AA or AAA.
- Download and install Paciello Group Color Contrast Analyser App
- Input your foreground (text) color and background color
- Check the contrast ratio – we are aiming for 4:5:1
- Adjust your color choices until they pass contrast ratio
Manual Code Inspections
When you are dealing with a live site, a lot of accessibility comes down to the implementation of the code. This will impact how easily someone using a screen reader can interact with the site.
An easy place to start is by checking the structure of the headings, and the quality of image alt tags and links on a page.
Checking Heading Structure and Quality of Links
Once the Fangs add-on is installed in Firefox, you can right-click and ‘view fangs.’
- Download and install Firefox add-on Fangs
- Go to your webpage in Firefox
- Right click and ‘view fangs’
- Review the headings list:
- Are the headings in order? Do H1s come before H2s and so on?
- Do the headings make sense without the surrounding content?
- Review the links list:
- Does the link text clearly describe what the link will lead you to?
- Do the links make sense out of the context of the page?
Viewing headings using the Fangs add-on
Checking the Quality of Image Alt Tags
Image alt tags are alternative text that describe an image to make it accessible to someone who is using a screen reader and cannot see the image, or if the image cannot be displayed or loaded. The quality of image alt tags highly impact the UX of your site.
Displaying image alt tags using Firefox Web Developer Extension
- Download and install the Firefox Web Developer Extension
- Go to your webpage in Firefox
- In the toolbar, select Images > Display alt attributes
- Review the alt tags that are displayed:
- Do the alt tags communicate the same information as the image does?
- Do purely decorative images have blank alt tags?
- Do images that are links have an alt tag that describes where the link goes?
Do the image alt tags make sense? Do they communicate the same information as the image?
Build accessibility into your practice
There are a few simple things that you can get in the habit of doing which will make a big difference to how accessible your site is. This commitment to improving the UX for a broad range of users is one that takes a little bit of investment. When you are designing and developing, take the time to check for visual accessibility and do a manual code inspection. You will be well on your way to making the web more accessible!
Look out for part two on testing with keyboards, screen readers and automated code checkers.