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.

Website homepage prior to update (Fig. 1)

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)
Outline on anchor tags in main navigation (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)
Outline for form input field (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)
Inaccessible main menu dropdown (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)
Low contrast image with text (Fig. 5)

The Code:

  • 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)
Header 1 tags with no content (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)
Donation button with unclear alt tag (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)
Image slider with no alt tags (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!

Here is there Mission and Vision:

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.