3 Ways to Make Your Site More Accessible
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
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:
Note: React cares a lot about accessibility and the format will be different. This is for a general HTML document.
2. Accesible Colors
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.
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 ✨
