Veggie Meatballs with a Side of Accessibility
You know those times in life when opportunities seem to be falling out of the sky?
This was one of those times. I came across this wonderful organization based out of Maryland, called Crossroads Community Food Network*. After reading through their website, I really liked what their mission and vision was, so I decided to help by doing one of my quick-fix accessibility audits. Web accessibility can easily seem complex, but if we start with a basic foundation, it can make the digital experience even better for all, abled and disabled people. (See Fig. 1)
*Their site has been updated since I wrote this a few days ago, but I decided to post it anyway, because I believe it’s still helpful.
Here are some of the nifty 👍 web accessibility features Crossroads Community Food Network is doing on their homepage:
- 👍 Outlines are being set on anchor tags (aka links) so that a user has a visual cue as to what link they are on when they are tabbing through. (See Fig. 2)
- 👍 The copy font-size and the contrast is good for readability.
- 👍 And lastly, the signup form input fields also have outlines, which makes it easy for users to be aware that they are in a forms input field. (See Fig. 3)
Now here are some small and easy fixes I’d recommend updating to make the site even more accessible to users:
- The dropdowns in the main navigation are not accessible via tabbing.
R: ✅ Here are some examples on how one could go about to make this navigation accessible — example 1, example 2, and example 3. (See Fig. 4)
- The all caps main menu labels can become difficult to read because of eye strain/fatigue from reading all caps.
R: ✅ I would recommend removing the text-transform=“uppercase” style to help with this. (See Fig. 4)
- It would be helpful to indicate in some way that there are sub menus and sub sub menus in the main navigation.
R: ✅ I would recommend adding an icon of a sort as a visual cue that there is more below. (See Fig. 4)
- The rotating quotes are not very easy to read because of the fading on the right side of the image.
R: ✅ I’d recommend making the images a solid background with the fade and resizing them to fit better where they currently reside, as well as enlarging the font size for the person being quoted. The white copy on the light green background has very low contrast, which makes it hard to read. I would recommend making this a different color that has more contrast. Here is a tool to help with figuring that out, which is set to show it’s current values. (See Fig. 5)
- There are two H1 tags that aren’t being used properly. One is empty and the other contains a slideshow.
R: ✅ I’d recommend removing them completely since they don’t serve their purpose as headers here. (See Fig. 6)
- The alt tag for the Donate graphic isn’t explicit that it’s to donate.
R: ✅ I’d recommend adding something such as “Donate here today” as it’s a more clear call to action for users. (See Fig. 7)
- The alt tags for the rotating blurbs isn’t descriptive.
R: ✅ Here I would recommend adding the actual copy that’s in the images as the alt text. (See Fig. 5)
- The alt tags in the large rotating images don’t have descriptions.
R: ✅ Here I would recommend making them a description of what is happening in the images. (See Fig. 8)
- The alt tags for images should give more context for those who are using screen readers that need images described for context. Unless the image is decorative in which case I would use alt=“#”.
I hope this post will help you or any developers, designers, or product managers when you build digital products and better understand how you can build solid a foundation for your products. The ultimate goal is to save you money and make your products accessible to all!
See you very soon for another quick-fix accessibility audit! Can we fix it? Yes we can!
Crossroads Community Food Network’s mission is to improve access to fresh, local, healthy food through innovative programs and models mutually supportive of those who grow our food and those who eat it. While our models are replicated in communities throughout the country, our primary focus is on the residents of Maryland’s Takoma/Langley Crossroads, a diverse, largely immigrant area at the Montgomery County and Prince George’s County border.
Interested in donating today or know someone who might be? Donate here now.