Without Water There is No Life, So Let’s Make it More Accessible

Two young girls offering you a glass of water.

Being thirsty with no sight of any water close by is a horrible feeling to have. I remember the sensation of desperation arising from not knowing when I would next have a drink of water. And yet I am fortunate to never have been in a dire situation where it could have been the difference between life or death. There are many U.S. cities where people cannot afford to pay their water bills as the rates keep rising and this can easily lead to a dire situation for any person.

Rates are increasing to fund infrastructure, but poorer Americans will be disproportionately impacted — Sarah Frostenson for Vox

Based on Census data reported in 2016 there were 40.6 million people in poverty — 2016 Census Report

Yet other scholars underscore the number of Americans living in “near-poverty,” putting the number at around 100 million, or nearly a third of the U.S. population. — Wikipedia

Along comes Tiffany Ashley Bell who decides to take initiative in Detroit by creating The Human Utility, which helps those who cannot afford to pay their water bills do so.

To understand the needs of our neighbors in the cities we live in we need to be part of the larger communities and step out of our bubbles. Helping those in need by contributing, volunteering and changing policies can create a better place for everyone to live.

The Human Utility’s mission is to preserve human dignity by protecting water as a human right for all families in the United States through community-building and policy action.

Interested in donating today? Donate here now

This accessibility audit is my small way of contributing to their mission to reach more people and gain more awareness. Now, with all that being said, let’s dig in. (See Fig. 1)

The Human Utility Homepage (Fig. 1)

There are typically three things that I can do “quickly” to see how accessible a site is.

Here are some of the nifty 👍🏽 web accessibility features The Human Utility is doing on their homepage:

👍🏽 When tabbing through links and buttons there are outline borders set giving a link a highlight for better visibility. (Fig. 2)

Image showing the blue outline border on a link (Fig. 2)

👍🏽 When tabbing through form fields there are outline borders also set giving a highlight for better visibility too. (Fig. 3)

Image showing another blue outline border set to an input field (Fig. 3)

👍🏽 The majority of the content is coded semantically which is great for screen readers as they are able to read the content in a coherent way for people. (Fig. 4)

Image of source code showing good semantic code (Fig. 4)

Now here are some small and easy fixes 🛠 I’d recommend to make the site even more accessible to people with auditory, cognitive, physical, speech, and visual disabilities:

The Links:
⚠️ There is no visual queue (outline) set on focus when tabbing through the donation form green “next” call to action button (Fig. 5)
✅ Recommendation: Add some CSS to make the links have cues. Here is a CodePen example of how to do this.

Image showing the green button and CSS code missing that gives the visual queue outline (Fig. 5)

Color Contrast:
⚠️ The white logo on top of the large image gets lost visually (See Fig. 6)
✅ Recommendation: Darkening the background image quite a bit or creating a solid color background that contains the buttons to give more contrast.

Image of white The Human Utility logo onto of large photograph (Fig. 6)

⚠️ The white #FFFFFF text donate buttons on top of the large image gets lost visually (See Fig. 7)
✅ Recommendation: Darkening the background image quite a bit or creating a solid color background that contains the buttons to give more contrast.

Image of failed contrast test of transparent/white buttons on top of large photograph (Fig. 7)

⚠️ The white #FFFFFF text with black drop shadow is difficult to read on top of the large image (See Fig. 8)
✅ Recommendation: Darkening the background image quite a bit or creating a solid color background that contains the buttons to give more contrast.

Image of white text with black drop shadow on top of large photograph (Fig. 8)

⚠️ The white #FFFFF text on blue #007BFF call to action buttons need a bit more contrast (See Fig. 9)
✅ Recommendation: Making text larger or bolder (Text is considered large at 14pt bold or 18pt regular) or making the white text black or blue background darker. Here is an example of black text that would work.

Image of failed contrast test of blue/white buttons (Fig. 9)

The Images:
⚠️ All images on the page share the same alt text “Card image cap” used to describe them. Unfortunately, this makes the images inaccessible to people as it does not describe what is happening in the image. (See Figs. 10)
✅ Recommendation: Add descriptive alternative text in the code for each image. Unless images are just decorative in that case alt=“” which will keep the image from appearing as content.

Image of two different images showing their duplicated alternative text in the source code (Fig. 10)

I hope this post will help you, developers, designers, and product managers–to better understand how you can build fully accessible digital products and experiences. The ultimate goal is to make the best technology for all people, which in turn will save you a lot of money in the long run and make your product and experiences even better.

See you very soon for another quick-fix accessibility audit! Can we fix it? Yes we can!

About me:
I’m a Full-Stack Designer at Flight Studio 1, where I focus on accessibility (a11y) as part of the user experience, front-end development, and graphic design. While understanding the interconnectedness and impact on society–which in turn, can help your business grow sustainably.

You can also catch me working with my good friends at Equal Entry where we partner with organizations to ensure technology provides equivalent access to people of diverse abilities.

Hi 👋🏽, I’m Rodrigo Sanchez (He/Him)

Accessibility to the MAX! Curated by @RodrigoSanchez / www.FlightStudio1.com