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!
- Change the
- Add a skip link to the header
- Logo shouldn’t be a heading- keep the image on its own. Even still, keep it as an
• 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
• Allow keyboard navigation between items.
• Preserve space to prevent pop-in
• Make tab’s clearer
• The “Home” linked header isn’t needed. If so, keep it as an
• Because of the prior
h1’s for the services, the ordering is out of order
• The “Our Mission” should be an
• The content below it should be a
<p> tag instead of an
• The Support Call out should be an
• Tabbed area should be clearer.
• United Way logo needs alt text
• Contact, Follow Us & Hours should be
• Change phone to linked telephone number with spaced out aria [2 6 9…]
• Address should be in an
• Aria label the facebook logo.
• Change the “Services” header into an
• Move subheadings (
• Incorporate the heading into the
• Make the lists clearer with bullets • Re-orient headers • Use headings for the staff names. • Add alt-text to staff names
• Reorient headings • Make list items clearer • Speak out contact information
• Reorient headings
• Link phone number
• Wrap address in
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 didnt 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.