Skip to main content

Blogging For All

Creating A Post that is Accessible for People With Visual Impairment

Is Your Site Accessible for Everyone?

It is a big world, full of all sorts of people. That includes people with learning, physical and language dissabilities. Often times this strata of individualizes are marganialized. The Internet is just not as accessable as it should be. Things can be confusing or difficult to navigate with the use of screen readers. Here are some helpful hints about how to shape your blog so that it is accessable for everyone

Alt Text: Aqua colored image of Scrabble Tiles spelling out the word “blog.”

Use Dynamic Alternative Text

Screen Reader users often do not know what your picture looks like. So offer detailed and concise information. According to https://www.afb.org:
“Provide descriptive text for any images you post, including those that are part of your template. In HTML, you can provide alternative text for images by adding alt=”your description of the image” within the image tag. Here is an example of a properly alt-tagged image:
Tips for Writing Effective Image Descriptions
Brief is better.
The usual rule is to be informative, not poetic. But it’s your blog, so feel free to let your personality come through in the alt text, as well.
If the graphic includes text, put all of the words in the alt text.
Put the most important information first. For example, “Acme Logo: Sun rising over white sand dunes” is better than “Sun rising over white sand dunes: Acme Logo.”
Check your spelling and try to avoid abbreviations. Screen readers will mispronounce words that are misspelled.”
Also make sure and label decorative images with null alt text, e.g. alt=””. That way the screen reader to skip the image. [2]

Label All Buttons

Make sure that your home page is marked “home.” Simplicity is the key, a screen reader is going to be deciphering all this for someone.

Add Your Heading Text Here

“Font size should be at least 9-10 pt, or 13 pixels, in size, to ensure it is easy to read. You also want to make sure that your text can be enlarged if a user needs to magnify their screen due to vision issues.”[1]

Color

Make sure that the color of your website and text are highly contrasting.

Alt Img: Image of high contrasting color examples.

Captcha Verification

When using a captcha verification, make sure to use a service that offers an audio option as well as visual.
Alt img: Captcha verification image

Add Your Heading Text Here

Again,  https://www.afb.org: sums up the importance of good linking. “”Click here” is purely mystifying, especially when heard over and over again. “Create your own blog” is self-explanatory, and lets the reader know what to expect.
Some blogging services allow you to display the opening sentences of a long post and then link to the whole post with an automated link that reads “(more…)”. If there is more than one such link on the page, you can see the problem: more what? Most blogging tools allow you to customize that link to provide more information to the user, which will make your site more accessible. An additional bonus: Descriptive links make it easier for search engines to find your content.”

Put Your Blog Roll on the Right Side

“Blind users find top and left-hand navigation bars annoying because the screen reader starts at the top of the page and reads from left to right. It is very time-consuming to listen to the same list of links every time you visit a page. You can get people right to your latest post by putting your navigation links on the right-hand side.
If you are wedded to left-hand navigation, then place a tiny “skip link” at the top, so blind users can jump to the new content. Just don’t forget the anchor!”

Don’t Design Your Blog On Colors Alone

A good percentage of the population is color blind to varying degrees. “Never use color alone to convey information or indicate action. Always provide alternatives in the form of text, icons, or other indicators.”[4] This goes back to contrast. A website with a high degree of contrast is easier read than one of limited contrast.

* Img text captions are for illustrative affect. When setting alt text, make sure to set them in HTML.

Citations
[1] https://www.afb.org/about-afb/what-we-do/afb-consulting/afb-accessibility-resources/how-make-your-blog-accessible
[2] http://blogpaws.com/executive-blog/7-ways-to-make-your-blog-more-accessible/
[3] https://lifeofablindgirl.com/2018/09/19/10-ways-to-make-your-blog-accessible-for-people-with-a-visual-impairment/
[4] http://wearecolorblind.com/

More Information

ADA Anniversary Disability Statistics, https://www.disabled-world.com/disability/statistics/ada-anniversary.php
WebAIM (Web Accessibility in Mind), http://webaim.org/
Color Contrast Analyzer, https://www.paciellogroup.com/resources/contrastanalyser/
Color Contrast Checker by Snook, https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333
We Are ColorBlind, http://wearecolorblind.com/
W3C (World Wide Web Consortium), https://www.w3.org/
NVDA Free Screen Reader, https://www.nvaccess.org/

5 Comments

  • Scott Kaelen says:

    All good information in this post, Beth. Thanks for writing and sharing it. Hopefully it will reach some of the book bloggers whose site layouts aren’t made with the visually impaired in mind at all and have, in my case as an author, led to me leaving their site without contacting them about a review because I couldn’t even read their review policy (or, in some cases, I couldn’t even find it).

  • Off The TBR says:

    I’ll need to come back to this again and really think one it. Thanks for the tips.

  • M says:

    It’s not something I’d thought about yet but I do want to. I use wordpress.org, so will placing something in the ‘alternative text’ section for picture will enable the screen readers to access that description?

Leave a Reply