Make Yourself Accessible to Others Because We All Need Friends

We all have moments in our lives when we need time for ourselves. I’ve had plenty of moments like this. Sometimes it’s a few hours alone and sometimes it’s several weeks. This has often given me time to realign and knowing that I have family and friends that I could reach out to have made a significant difference. It’s helped me have smooth reentry back into society but even so, I’ve had moments of feeling isolated and depressed.

As I get older and relationships come and go, friends pass away and life happens. It has become more apparent that having family and friends is an important part of life. When we’re young we are very often oblivious to this. I know I was. Understanding the importance has helped me create a better relationship with my 91-year-old grandmother who lives far away. Over the past several years we have created a better relationship by talking on the phone learning things about each other's lives which I have found have helped me better understand myself.

With all that being said, my hope is that we make more time to connect with our elders and show them they are valued and loved. Remembering that we too are getting older and that we can learn a lot from them.

The aging of baby boomers means that within just a couple decades, older people are projected to outnumber children for the first time in U.S. history,” said Jonathan Vespa, a demographer with the U.S. Census Bureau. “By 2035, there will be 78.0 million people 65 years and older compared to 76.7 million (previously 76.4 million) under the age of 18.–Census

Apart from general feelings of sadness and loneliness, the impact of isolation and the shrinking of social networks can lead to a variety of negative physical and emotional effects in the elderly.–Lumin: Senior Health

Along comes a group of Columbia University graduate students and alumni to create DOROT, which helps improve the lives and health of the elderly.

DOROT alleviates social isolation among the elderly and provides services to help them live independently as valued members of the community. We serve the Jewish and wider community, bringing the generations together in a mutually beneficial partnership of elders, volunteers and professionals. Our work provides an effective model for others.

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)

Screenshot of DOROT 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 DOROT is doing on their homepage:

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

Screenshot of “Home” link with a blue outline around it (Fig. 2)

👍🏽 When tabbing through the form field there is an outline border also set giving a highlight for better visibility too. (See Fig. 3)

Screenshot of Search input field with a blue outline around it (Fig. 3)

👍🏽 The majority of text has great contrast such as the purple #444B9B and black #000000 making it good for easy readability (See Fig. 4)

Screenshot showing good color contrast for text (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:
⚠️ The ability to skip the navigation is missing (Fig. 5)
✅ Recommendation: Adding a visually hidden link offscreen to give people the ability to skip the navigation if they wish to so they don’t have to navigate through it every time. Here are two things to do to accomplish this first thing and the second thing.

Screenshot showing code missing “skip to link” (Fig. 5)

⚠️ There is no visual queue (outline) set to focus when tabbing through the carousel images (Fig. 6)
✅ Recommendation: Add some CSS to make the links have cues. Here is a CodePen example of how to do this.

Screenshot showing the CSS outline code missing in the carousel (Fig. 6)

⚠️ There are links using images that do not have discernible text making them unclear as to what the links are for when using assistive technology (See Fig. 7)
✅ Recommendation: Adding text that is positioned offscreen therefore making it not visible but readable by assistive technologies. Here is a CodePen Example of this.

Screenshot of code showing a link using an image that is missing descriptive text (Fig. 7)

⚠️ There are also links using images with text that do not have a discernible text also making them unclear as to what the links are for when using assistive technology (See Fig. 8)
✅ Recommendation: I would avoid using images with text all together but to fix this I would add alt text that is exactly what the image text is.

Screenshot of code showing a link using an image with text that is missing descriptive text (Fig. 7)

Color Contrast:

⚠️ The white #FFFFFF text “For Seniors” link on orange #DC8430 needs a lot 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 orange background darker. Here is an example of a darker orange that would work.

Screenshot of “For Seniors” orange link with failed color contrast test (Fig. 9)

The Images:

⚠️ There are many images on the homepage that do not have alt text. Unfortunately, this makes the images inaccessible to people as there are no descriptions to be read aloud. (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

Screenshot of code for Logo image missing alt text (Fig. 10)

⚠️ There is an image that contains a bit of text that is too small to read making it illegible as well as not having alt text (See Figs. 11)
✅ Recommendation: Add descriptive alternative text in the code for each image. But moving forward I would avoid using images as text and instead just use plain HTML.

Screenshot of code for a small image with text missing alt text (Fig. 11)

The Code:

⚠️ There are sections coded as <tables> used to create a visual design but can be confusing for those using assistive technologies as they are not displaying tabular information (See Figs. 13)
✅ Recommendation: I would recode these using <divs> instead to <tables> for visual design and use CSS to position the elements as they currently are.

Screenshot of code showing <table> (Fig. 13)

⚠️ There are paragraphs that are coded as a <span> making them unclear as to what type of content it is for assistive technologies such as screen readers (See Figs. 14)
✅ Recommendation: I would recode these and use <p> instead.

Screenshot of code showing <span> (Fig. 14)

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 /