Home → The Classics → Farai's Codelab

The Time I Tried To Do An Acessibility Audit

Published: Updated:

As I was volunteering at the Share Center, the director decided to use WordPress which is what I should have done to begin with. At this point I decided to fix small issues with the website. To do that, I performed an acessibility audit on the website. Here it is!

The Audit

Home/Index

  • Change the section.wrapper to main.wrapper
  • Add a skip link to the header
  • Change div.navbar to nav.navbar
  • Logo shouldn’t be a heading- keep the image on its own. Even still, keep it as an h1.
  • Allow for the carousel to be paused.
  • Add more descriptive text besides “Read More”
  • Change the carousel div’s to figures
  • Add more descriptive alt-text to images
  • Change the h1 to h2’s.
  • Allow keyboard navigation between items.
  • Preserve space to prevent pop-in
  • Make tab’s clearer

Main

  • The “Home” linked header isn’t needed. If so, keep it as an h1
  • Because of the prior h1’s for the services, the ordering is out of order
  • The “Our Mission” should be an h2 tag.
  • The content below it should be a <p> tag instead of an h4.
  • The Support Call out should be an h2 tag.
  • Tabbed area should be clearer.
  • United Way logo needs alt text
  • Contact, Follow Us & Hours should be h2 level.
  • Change phone to linked telephone number with spaced out aria [2 6 9…]
  • Address should be in an <address> tag
  • Aria label the facebook logo.

Services

  • Change the “Services” header into an h1.
  • Move subheadings (h2) to h3.
  • Incorporate the heading into the article tag

About

  • Make the lists clearer with bullets
  • Re-orient headers
  • Use headings for the staff names.
  • Add alt-text to staff names

Support

  • Reorient headings
  • Make list items clearer
  • Speak out contact information

Contact

  • Reorient headings
  • Link phone number
  • Wrap address in address tag

Analysis

As you can see, a lot of the issues here are to do with the semantics of the markup. Fixing mis-levelled headings and using semantic elements. Another issue was missing alt-text for images.

The biggest issue by far is the carousel on the home page. Carousels are highly discouraged due to them being hard to make acessible. Getting them to work with keyboards (let alone screenreaders) is tricky and auto-advancing slides (especially without a way to pause) make it easy to miss information.

The alt-text was by far the easiest fix.

The rest? Not so much.

The reason is that I didn’t have acess to the theme files and server the WordPress installation was running. That meant that the only way I could fix things was through the front-end code editor, which only worked for adding the skip-link. That isn’t ideal since it goes away with each update.

Also, fixing the carousel is a nightmare. Besides actually being hard to fix, it didn’t help that the library resposnible didn’t have a way to pause the slides— it could only slow them down. I insisted on having a different way of conveying the information but the director insisted.

Biggest hurdle of all was that the direcotr had just moved in and had a lot of things to worry about. Fixing tiny website issues isn’t among them. Not sure I would have actually been able to get fixes in place, but I could have made a child theme to fix the layout issues.