No symbol placed over the top of a speech bubble.
I don’t want comments! How do I turn them off?
Small boy alone on a path leading into a forest
Feeling Alone or Lost? Have Hope, There’s Help.

Is Your Blog or Website Accessible to All?

What Does Website Accessibility Mean?

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.

Accessibility icon representing hearing.
Accessibility icon representing mobility.
Accessibility icon representing sight.
Accessibility icon representing cognitive.

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.
Visually impaired woman looking at her computer screen.
Visually impaired woman looking at her computer screen.

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.

Example of WordPress image editing screen to add alt and title tags.

  • 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:

Pencil colors used to show what a person with normal vision would see.
Colors a person with normal vision would see.
Colors a person with Deuteranopia would see.
Colors a person with Protantopia would see.
Colors that a person with Tritanopia would see.
Pencil colors used to show what a person with Deuteranopia would see.

Screenshots of images taken from http://www.colourblindawareness.org/colour-blindness/.

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.

YouTube has the option for you to turn on Closed Captioning.
To learn how, watch this video or check out this link:
https://support.google.com/youtube/answer/6373554?hl=en

4. PDF downloads vs pages

Adobe PDF Document Icon

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.

Basic guidelines:

  • 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.
Newspaper page showing title importance.

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!

Group of people showing a thumbs up to you being proactive to website accessibility.
Group of people showing a thumbs up to you being proactive about your website's accessibility.

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu