Is Your Blog or Website Accessible to All?
Being able to access the incredible amount of information available to us on the internet is obviously important. I tend to believe that most of us take the use of a computer and accessing the internet for granted.
There is currently ( as of 2019) an estimated 4,346,561,853 internet users globally. Many of these individuals have some form of disability that makes accessing your website or blog difficult. Disabilities include conditions that affect seeing, hearing, motor abilities and cognitive abilities.
Have you given thought to this?
- People with blindness may need to use screen readers.
- People with other vision issues may struggle with certain colors or contrast on a website.
- Flashing media can cause some to have seizures.
- People with mobility impairments may use voice recognition systems or other specialized adaptive technology that allow them to use computers.
- People with hearing difficulties may need to be able to access text files as an alternative.
So, what can we do?
BE AWARE and check your blog or website for accessibility on an online compliance checker so you know how to make improvements. Before you do that though, here are a few basic things that you can do :
1. Add alt text and title tags for all non-text content
Alt tags enable people who use screen reading devices to read the text for an image when they are not able to view the image. It brings meaning to the image and helps the user understand why the image was included on the page. Alt tags and image titles are used to improve the accessibility of your website.
Title tags are what pop up if you hover over an image. These are not read by screen readers. While these can still add meaning to your image, it is important to know that they do not offer the same benefits as Alt Tags.
How to add these in WordPress:
Go to your media file. Click on an image. You will see the below screen where you can add a Title, Caption, Alt Text, and a Description.
- Be descriptive but make sure that you are specific so that the user can understand why you used this photo and why it is important to the context of what you’re writing.
- You don’t need to say “this is a picture of…” as the user already understands this is an image.
- Try to keep your characters to under 125 (imagine what it would be like to not be able to visually scan text).
2. Check your color & contrast
There are an estimated 300 million people with color blindness in the world. People who are affected by color blindness are unable to fully ‘see’ red, green or blue light. Here are some examples of how people with different disorders may see the same colors:
Here are some free online tools you can use to check your colors for accessibility standards, and help you improve them.
Learn more here: www.colorsontheweb.com
Keep in mind that your images are also not viewed correctly by people with color blindness so make sure that images are not your only method of conveying important information. If the purpose of posting the image is to communicate something about the colors in that image, then it is important to provide text that also helps the user understand the image.
3. Include closed captions for video content
When adding video to your WordPress blog or website, you will most often first place it on YouTube and then embed it on your site.
4. PDF downloads vs pages
Screen readers are often not able to read PDFs, unless they have been made to be accessible. If your PDF downloads could be pages then go with that option and convert the text into a page on your site. If not, learn how to make adjustments to your PDFs before uploading them to your site.
5. Use Heading Structure
Screen readers enable visually impaired people to jump from one heading to the next (scan an article). This helps them decide whether or not they wish to read an article. If the heading tag structure is jumbled and out of order, a screen reader will have a difficult time doing this properly.
There are six sizes of heading tags, beginning with <h1>, the most important, and ending with <h6>. These tags can be found in your WordPress text editor. The tags should be used to create a structure for content on your site.
- On each page you should have only one <h1>. This should be your page title.
- Headings <h2> through <h6> can be used more than one time each, as long as they follow a hierarchical structure. Just make sure to use H2 before you use H3 within each topic. You can re-use H2 again after you’ve used H3 for each new topic.
Think of how a newspaper organizes content so that you know what is most important. It makes it easy to scan a page and know what you want to read. Use header tags to create content hierarchy in the same way.
After taking care of these basic elements to improve your website’s accessibility, take a moment to check how compliant your site is on a free online compliance checker.
My favorite compliance checker tool is http://wave.webaim.org.
There are also extensions for Chrome and Firefox available HERE. These will make it easy for you to check the accessibility of any website page that you are visiting.
Be proactive and commit to evaluating and adjusting your website content and make is accessible to all.
Make your website an accessible space with a great user experience!