How To Make Your Web And Social Media Channels More Accessible
Imagine trying to navigate through your blog using only the tab button. Could you do it? Envision watching one of your YouTube videos on mute… How about trying to read one of your social media tiles, but the text appears to be the same color as the background? For many, this is their daily reality.
The truth is, at some point in our lives, we will all require a bit of assistance. Solving for the “extremes” makes it easier on us all. I recently saw Raquel Breternitz, Senior Designer at Pivotal Labs, give a talk about accessibility and design. According to her, “the best design is the one that works the best, not the one that looks the nicest.” In her talk, she quotes famous architect Frank Lloyd Wright, “You can use an eraser on the drafting table, or a sledge hammer at the construction site.”
This concept is applicable to us all. We can either make our blog/video channel/social media profile accessible from the start and build upon it, or disregard accessibility now and completely redo it all later down the line.
I believe a happy medium can be found; you don’t have to sacrifice aesthetic for accessibility. Here are some small changes that you can make that will have a huge impact:
Whenever you share video content, always try to provide subtitles, especially if you produce most of your own video content. Popular video hosting sites like YouTube and production programs like iMovie have tools that allow users to add subtitles to their clips.
Transcribe your videos
Even though this can be time consuming, posting a text transcription online is also an incredibly helpful resource for users. This transcript will not only benefit those with accessibility requirements, but also makes it easier for your entire audience to capture and share you content.
These are the little words that pop up when you hover your mouse over an image on a website. Those with visual impairments often use screen readers (a software program that reads text on a website out loud.) Alt-tags are the only way for a user with visual impairments to know what the image is.
You can be as detailed as you like with your tags. If it is a photo of a person, name them and describe the settings in the photo (Issa Rae wearing a blue sequin gown on the red carpet at the Oscars.) If it is a photo of food, describe it in detail (photo of fried chicken and mashed potatoes on a green plate on a table with a red and white checkered tablecloth.)
Use periods in abbreviations
If you’re abbreviating something using HTML, always put periods in between each letter in the abbreviation. For example, if you’re referring to the United States of America, write it out as U.S.A., rather than USA. A screen reader won’t understand the abbreviation without the periods, and will read it out phonetically as a word (U-S-A will be read as “usa.”)
Describe your links
Whenever you embed a link in a post, always describe the link, rather than just telling the reader to “click here.” For example, it’s much better to write, “To learn more about accessibility, check out the World Health Organization’s research” instead of “To learn more about accessibility, click here.” Again, this is also beneficial for your entire audience because it lets them know what they are going to get before they click the link.
Use contrasting colors
If possible, always try to underline your links or make sure that there is a color contrast between hyperlinked text and regular text. This makes it easier for colorblind users to find a link quickly without having to hover over it with their cursors.
Most people who are considered “color blind” can see colors, but certain colors appear washed out and are easily confused with other colors, depending on the type of color vision deficiency they have.
According to the National Eye Institute, red-green color blindness is the most common type, followed by blue-yellow color blindness. A complete absence of color vision (total color blindness) is rare, and men are much more likely to be colorblind than women. This guide from Github is very useful to help you ensure your color palette will work for those with vision impairments.
There are many accessibility friendly tools that also benefit those without disabilities…
Subtitles are best for:
– People who are hearing impaired
– When you want to watch the latest episode of your binge on Netflix but you’re in a noisy train station and forgot your headphones
– When you’re on a silent redeye flight and want to watch a movie without bothering your neighbors and your bluetooth headphones just ran out of juice
Color contrast is best for:
– Those who are vision impaired
– People with perfect vision that need to spot buttons quickly, like navigation tips on GoogleMaps
– People with good vision who need to read an article on their phone in very bright sunlight
Voice recognition is best for:
– Those with a physical disability that prevents them from using a mouse or keyboard
– People who are able bodied with a temporary arm/hand injury
– When you have your hands full and you want Alexa to turn on the light when you bring in the groceries at night
Text to speech is best for:
– People who are blind or those with dyslexia or tired eyes
– Those who like to multitask and want their articles to be read to them while they wash the dishes with one hand and scroll through Insta with the other
– Bonus, this helps search engines index your content better
The internet has the potential to be a great equalizer. That’s certainly how Tim Berners-Lee, W3C Director and the inventor of the World Wide Web sees it. He once stated, “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” You are a voice in your community as a blogger, influencer, vlogger, or journalist. It is important that you lead by example. Yes, implementing these changes may take you bit more time, and they may require you to think outside of the box, but the results will be well worth it. You know you have great content; don’t limit your audience.