3 Ways to Make Your Site More Accessible

Nunny Reyes
3 min readOct 22, 2020

--

Sign for different accomocations at an airport
Signage at airport indicating different facilities.

The Americans With Disabilities Act, was passed in 1990 and it prohibited discrimination based on disability. I highly recommend watching Crip Camp on Netflix produced by President Obama and First Lady Michelle Obama. This documentary dives into the journey of the Disability Rights Movement in the 1960’s and how it also strengthened the Civil Rights movement.

After organizers led hunger strikes in Congress, protests, and public advocacy infrastructure began to shift to create a more inclusive physical environment. In comparison with the Civil Rights Act, ADA requires businesses and employers to make the appropriate accommodations for citizens with disabilities.

However those laws have not translated to our digital environment. As Software Engineers, it is our role to create a more innovative and inclusive world.

Quick Stats according to the World Health Organization

285 million people are estimated to be visually impared

260 millon people are estimated to have hearing loss

15% of the World’s population has a disability ( > 1 Billion)

Accessibility should not be an after thought. It should be at the forefront of design, wire-framing, code testing, and during release date. Below are 3 ways to make your site more inclusive.

1. Add Images with ALT Text

Indicating alt text on instagram

What happens when a digital image is no longer unable to view? Have you ever tried loading a site and have seen nothing rendered? Maybe you were jumping in the train hoping to scroll through Instagram and you’ve come across images that couldn’t be loaded. What if you could never see those images in the first place and needed a screen reader?

Many users rely on assistive technologies like Screen Readers to display what is happening on a site. Alt Text allows screen readers to know the description of the image to disabled users. If there is no Alt Text, there is no information. Above is a screenshot of how Instagram included Alt Text with their platform.

In code you can do the following:

Code snippet with an img tag with alt attribute.

Note: React cares a lot about accessibility and the format will be different. This is for a general HTML document.

2. Accesible Colors

Color Wheel
Color Wheel for reference

Anytime that I am thinking of what my colors should be on a website, I will always pull up the color wheel to find the complementary color. This creates contrasts for text and background color for your site. The Web Content Accessibility Guidelines requires a color contrast of 4:5:1. You can view your color contrast on chrome like below.

Chrome dev tool to view contrast
Chrome dev tool that allows you to view contrast ratio

3. ARIA Navigation

ARIA stands for Accessible Rich Internet Applications and its attributes help define how to make web content more accessible.

Prior to HTML5, ARIA was heavily used but HTML5 now includes many “benchmarks” or “landmarks” that help a user navigate a site.

These landmarks are nav, header, footer, section

Yet HTML5 does not cover everything so ARIA is still in play. Using

aria-label, aria-labelledby, aria-describedly

help fill in the accessible gaps. You can find more about its documentation here.

Conclusion

Making a site accessible as you build it can make a world of a difference to a user navigating your site. Inclusive design is not a trend and it is inclusive design that sets apart not just website but developers. This list will expand to highlight other ways to increase accessibility.

If there is a tool you particularly love, feel free to share it below ✨

--

--

Nunny Reyes

I'm Nunny and I am a Software Engineer at Justworks Labs in NYC 🚀 Devoting more time to sharing the moments that have shaped my engineering career.