Currently accepting inquiries for Webflow Websites and SEO Projects for Q2.

Hear Without Sound, See Without Visual: Web Accessibility

November 12, 2021
Updated:
May 1, 2023

Hear Without Sound, See Without Visual: Web Accessibility

Red Shark Digital

Take a second for me, as you sit in front of your computer reading this, stop. Go to google, and search for something as simple as “puppies for sale”. Now click on the first website that pops up. Once you get there go to the “start reading” option in your toolbar (under edit), close your eyes and just listen. Within the first 30 seconds, I was completely lost. I stopped and started it again with my eyes open and even then could not keep up with where and what it was reading me. What if I didn't have the option to just open my eyes and read it? What if the only option I had at trying to find a puppy on this website was to listen and follow along? There are over 22.9 MILLION Americans that are blind or visually impaired. As if that isn’t mind-blowing enough, there are over 7.6 MILLION Americans with a hearing impairment. It blows my mind that there are that many people in the world who struggle every single day to go online, and the number of websites that don’t comply with any accessibility standards will blow your mind.

JAWS

For people that are blind or have trouble seeing, there are software programs out there to help them. The most popular one called JAWS (Job Access With Speech) is the world's most popular screen reader, developed for computer users whose vision loss prevents them from seeing screen content or navigating with a mouse. JAWS provides speech and Braille output for the most popular computer applications on your PC. As nice as it is that there are these programs out there to help people, there really shouldn’t have to be. All websites should have to be web accessible to any and everyone.

POUR

One thing you may have to sacrifice to make your website accessible to everyone is some visual design. Before you say no, think about this, people don’t buy from your site because it’s pretty, they buy from you because you’re dependable and they like your products. Therefore the more people that can access it, means more people that can buy your products. There are 4 principles of accessibility (POUR).

The “P” stands for Perceivable. Under this falls a few things, the first thing is to provide text alternatives for and non-text content. This means to put captions in place for any multimedia on your site. Also, make sure that the content that you are creating can be presented in different ways and not lose any meaning. The “O” in POUR stands for Operable. This means to make sure that your entire website can function from a keyboard. Also, don’t use features on your website that could cause someone to have a seizure. Lastly, help your users to navigate and find content on your site. You may think that your site is easy to navigate, but once again close your eyes, or put headphones in and try to navigate it then. The “U” stands for Understandable. Making sure that your text is readable, and making sure that your content appears and operates in a predictable way are the main two ways to achieve this. This helps users avoid making any mistakes. The last letter,”R”, stands for Robust. The simplest of all the letters, Robust only means to maximize compatibility with current and future user tools.

WCAG

You can make sure your website is accessible by referring to the WCAG (Web Content Accessibility Guidelines). There are 3 different levels to this.

  • Level A
  • Websites MUST support this tier of accessibility
  • Easy to use content structure
  • Consistent metadata including image tags
  • Content that reads easily to follow story
  • Avoid “read more” and “click this link” in favor of more descriptive CTAs
  • Level AA
  • Websites SHOULD support this tier of accessibility
  • No highly visual elements
  • No carousels/slider
  • No autoplay video and audio
  • No text embedded in images
  • No features that are initially hidden on a page
  • labor-intensivesive UX
  • Level AAA
  • Websites MAY support this tier of accessibility
  • Custom code written specifically for users who are blind or visually impaired
  • Captions or voiceovers on video

DESIGN

Designing for accessibility is harder than it sounds. You can’t only think about someone that is completely blind or completely deaf. What if they are just color blind, dyslexic, have a hearing aid, etc? You have to design for everyone. There are few things to keep in mind while designing. One thing to remember is to test your content scaled all the way to 200%. It may sound silly, but if someone trying to use your website isn’t blind, but close to it, they will have to set the zoom all the way up. How are they supposed to browse your site if its all jumbled up after zooming in? They won’t take the time to try and decipher it all, they will simply go to another site. Make sure that all your fonts are simple and legible. Yes, the script fonts are fancy and pretty, but for someone with vision problems they aren’t as pretty as they are to you. Keeping all of your links underlined is another big point. It may not seem like a big deal, but what if you’re color blind? You wouldn’t be able to tell that the blue letters are a link, you would only know by there being an underline. Another great point is to make extra sure that you are using headers. When someone blind is using a program to read to them, headings are super important for them to follow your content. Last but not least, ALWAYS include captions in your videos. For someone that is hearing impaired, captions are essential. You may not be completely deaf, maybe you are hearing impaired and in public. You aren’t going to want to disrupt everyone around you turning your phone to max volume.

It may be alot to take in all at once, but web accessibility is so important. It may be something you have never really thought about before, like myself. Once I saw the statistics and started looking at websites, I was in complete shock. It is beyond unfair that someone with hearing or vision impairments wouldn’t be able to use the same websites as everyone else. From designers to developers, let’s start thinking about all of this every time we make a new website, we are the only ones who can change things and help others.

Related Articles