Published on | Prototyping: From UX to Front End — Medium Aria Live <a href="https://medium.com/media/379588f6e07d39956902d73ffc0044a7/href">https://medium.com/media/379588f6e07d39956902d73ffc0044a7/href</a>

When I was a young boy 👦🏽, new to this country 🇺🇸 I recall the nervousness of starting at a new school where I did not speak the language and knew no one. I remember having moments where I felt so alone and out of place that I dreaded going to school. It’s been a very long time since I’ve thought about this, even now I can still feel that loneliness deep down. But the truth is–all it takes is for one person to come along and say “hello 👋🏻” to change this narrative. It’s incredible how something so simple at such a young age can be so significant. Thinking about accessibility, inclusion, and equal rights reminded me of this part of my life and what it’s like to not be thought of or included. Now, Let’s pause for one minute here, close your eyes and remember a moment in your life when you felt this way.

So…this accessibility audit for the United Nations, Free & Equal organization 🌈 is my way to contribute to their mission of equal rights and inclusion. Now, with all that being said, let’s begin. (See Fig. 1)

United Nations Free & Equal — Homepage (Fig. 1)

There are typically three things that I can quickly do 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 is to look at the colors and visuals to see if there are any potential issues with contrast.
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 Free & Equal 🌈 are doing on their homepage:

👍🏽 The navigation links, when they are grey text on a white background have great contrast. (Fig. 2)

Grey Links on White Background — Color Contrast (Fig. 2)

👍🏽 The large black icons hover state on the blue image/background have great contrast. (Fig. 3)

Black Icons on Blue Images — Color Contrast (Fig. 3)

Now here are some small and easy fixes I’d recommend updating to make the site even more accessible to users:

There were a few things I found when tabbing that are simple fixes.

⚠️ There are no visual cues when tabbing through the <a> tags aka anchor links making it challenging for some users who may need them to access content. (Fig. 4)
✅ I would recommend adding some CSS to make the links have cues. Here is a CodePen example of how to do this.

Visual Cues (Fig. 4)

⚠️ The navigation’s blue text on a white background has low contrast which could make it difficult for users to read. (Fig. 5)
✅ Here I would recommend making the text colors darker, as the blue is a bit too subtle. Here is a tool to help with figuring out the contrasts for the blue.

Color Contrast (Fig. 5)

⚠️ The search icon must have discernible text. (Fig. 6)
✅ Here I would recommend adding an aria-label that describes the search.

Discernable Text (Fig. 6)

⚠️ The footer’s “Stand up 4 human rights” link must have discernible text. (Fig. 7)
✅ Here I would recommend adding alt text that describes the graphic.

Discernable Text (Fig. 7)

⚠️ The footer’s social media icon links must have discernible text. (Fig. 8)
✅ Here I would recommend adding alt text that describes the graphic.

Discernable Text (Fig. 8)

There were a few things I found with the masthead video.

⚠️ The is no pause button which could make it challenging for some users to navigate through items layered on top of the video, such as links and copy. (Fig. 9)
✅ Here I would recommend the ability to pause the video by adding a button.

Video (Fig. 9)

With regards to color contrast there are a few other small things.

⚠️ The language selection link does not have enough contrast which could make it difficult for users to read. (Fig. 10)
✅ Here I would recommend making the text colors darker, as the white is a bit too subtle. Here is a tool to help with figuring out the contrasts for the white.

Low Contrast (Fig. 10)

⚠️ All the white text on the blue backgrounds, blue tinted image backgrounds, and white text over most images do not have enough contrast which could make it difficult for users to read. (Fig. 11, Fig. 12 & Fig. 13)
✅ Here I would recommend making the text colors darker or lighter depending on the background, as the white is a bit too subtle. Here is a tool to help with figuring out the contrasts for the white.

Low Contrast (Fig. 11)Low Contrast Footer (Fig. 12)Low Contrast Carousel (Fig. 13)

The Code:
I came across some things that would be easy fixes that could make a big difference for people.

⚠️ The Slider headers aren’t actual headers but instead wrapped in a <div> (Fig. 14)
✅ Here I would recommend making the <div><h> tags, making it easier for users to find content through the semantic structure.

Semantics (Fig. 14)

⚠️ The Slider paragraph content is wrapped in an <h1> instead of <p> which could lead to loss of headers relevancy with dense copy being wrapped in a header tag. (Fig. 15)
✅ Here I would recommend making the <h1> a <p> tag, since the content isn’t an actual header.

Semantics (Fig. 15)

I hope this post will help you, developers, designers, and product managers when it comes to building your digital products. May this help you better understand how you can build a solid foundation using simple methods for your 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!

About the organization:
UN Free & Equal is the United Nations’ global campaign against homophobia and transphobia.

Interested in donating today? Donate here now

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 to ensure technology provides equivalent access to people of diverse abilities.

Hi 👋🏽, I’m Rodrigo Sanchez.

Equal Rights & Inclusion for All was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Equal Rights & Inclusion for All

Cool stuff, every week

More Articles