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)

God’s Love We Deliver (GLWD) Homepage With Barney Stinson aka Neil Patrick Harris on Live with Kelly. (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)
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:

God’s Love — Top Navigation Dropdown Links (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)
Text with small font with low contrast. (Fig. 5)

The Code:
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)
Div used to create a heading (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)
Div used to create a form label (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)
God’s Love logo image missing alt text description (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!

Here is there Mission and Vision:

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.

Accessibility to the MAX! Curated by @RodrigoSanchez /

Accessibility to the MAX! Curated by @RodrigoSanchez /