Barney Stinson Feeds Those in Need and Loves Web Accessibility
I know I don’t have much clout, but what if I told you that Barney Stinson was a supporter of God’s Love We Deliver. What would you say to that?
Many years ago I was fortunate to have met an amazing person who introduced me to to God’s Love We Deliver. Over the past several years I’ve had the honor to be a tiny contributor to God’s Love through volunteering as a designer, prepping meals, and dancing on their float in the best dance party ever — The NYC Pride Parade. This accessibility audit is my latest contribution. God’s Love as they are known by many is a well-oiled machine that provides lots of love and meals to men, women and children living with HIV/AIDS, cancer and other serious illnesses by alleviating hunger and malnutrition.
With all that being said, let’s dig in and go over my quick-fix accessibility audit I did of their website. (See Fig. 1)
There are typically three things that I can do “quickly” to see how accessible a site is. The first is tabbing through the website to see if there are visual cues to help people navigate. The second thing that I do is look at the colors and visuals to see if there are any potential issues with contrast. And the last thing is to look at the source code to make sure it is semantically structured, which is important for assistive technologies, such as screen readers, to properly read content.
Here are some of the nifty 👍 web accessibility features God’s Love We Deliver 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 “About Us” in the main navigation. (See Fig. 2)
- 👍 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:
- There are a lot of links in the top navigation that could delay a users access to the page’s content if they are tabbing through a page.
R: ✅ I would recommend including a hidden “Skip to Content” link on all pages to help users get directly to the page content. Here’s how you would add the link and here’s how you would be able to hide it with CSS. (See Fig. 4)
- Some of the font sizes are a bit small, which makes them hard to read including low contrast in some cases.
R: ✅ I would recommend enlarging copy text that needs to be read at least 2px from what they currently are. And test all font colors using a color contrast tool. The color examples in the link are from this example. (See Fig. 5)
I came across some things that would be easy fixes that could make a big difference for people.
- The site did not have any header tags, but instead uses <div> tags.
R: ✅ Here I would recommend creating hierarchy by using header tags as having no HTML headers gives no context to users. (See Fig. 6)
- Form fields was missing a <label> tag
R: ✅ Here I would recommend changing the div to be a label so that it is properly announced to users when using assistive technology. (See Fig. 7)
- Images that are important for users to understand are missing alt text to help give a short description for those who are having the website read to them.
R: ✅ Here I would recommend going back and adding alt text to images (See Fig. 8)
I hope this post will help you — developers, designers, product managers and executives — better understand how you can build a solid foundation using simple methods for your digital products. The ultimate goal is to make your products accessible to able body and disabled people, which in turn will save you money and make your product even better.
See you very soon for another quick-fix accessibility audit! Can we fix it? Yes we can!
The mission of God’s Love We Deliver is to improve the health and well-being of men, women and children living with HIV/AIDS, cancer and other serious illnesses by alleviating hunger and malnutrition. We prepare and deliver nutritious, high-quality meals to people who, because of their illness, are unable to provide or prepare meals for themselves. We also provide illness-specific nutrition education and counseling to our clients, families, care providers and other service organizations.
All of our services are provided free of charge without regard to income.
Interested in donating today or know someone who might be? Donate here now.