How to improve your articles for individuals with blindness or visual impairment

Published on
4,471 Points
13 Endorsements
Last Modified:
The purpose of this tutorial is to show you how, with a minimum of effort, you can make your articles much more accessible for the blind and other readers with visual impairments at Experts Exchange.

Something that is often overlooked by most websites online that contain graphics is the fact that the blind community are also accessing those pages with the use of Screen Readers, which are tools that allow sight challenged and people with blindness to read the work presented in a narrated fashion. 

Here I'll show you how you can help by making your own articles much more accessible to those readers.

I was recently approached by Brian Vogel, a chap who tutors computer users who are blind or visually impaired, asking if I would consider re-editing one of my articles because he thought it would be useful for many of the blind and sight challenged computer users he helps and teaches. Always keen to make my work as helpful as possible, and to as many readers as possible, I immediately embraced the idea and agreed to the request.

Frustrations for the Blind Community

Here's a sample of some of the issues Brian Vogel mentioned that the blind community often encounter.

“Unfortunately, when I'm reviewing the tutorials with a screen reader, images/graphics do not have alternate text associated with them giving the blind reader some idea of what they present.”

“I've seen documents where there are, say, photographs of the author, which any sighted reader simply sees, but a blind person obviously cannot.  Having the alt-text attribute on that photo saying, "Author photo," tells them what that picture they've just encountered is actually about.”

Another thing that goes a long way toward helping blind users is giving the keyboard shortcuts to menu options that you're telling folks to use”

How you can Help - Include Alternate Text

Fortunately, the article editor at Experts Exchange gives all authors a very simple way to make their articles accessible for all readers with an included "Alternate Text" function. 

It only takes a few seconds to add some alternate text and here's how to do it.

1. Embed your image as usual by using the Insert Image (Ctrl+P) function of the article editor

2. Now that your image had been embedded in your article, click once on the image itself and select the i (Alternate Text) button to bring up the Alternate Text input box as shown below. 

Showing how to add Alternate Text

Add the image descriptive text in the following dialogue box for Screen Readers to take advantage of and click the Update button (or press your Enter key)

Box showing how to add alternate text

3. Done! 

Now just click anywhere else outside of the image and continue on with your article. That's all there is to it.

As you can see from the simple steps I've illustrated above, the effort required to add some alternate text to help blind readers out is minimal, yet can mean the world of difference to them being able to benefit from your work, as opposed to getting frustrated trying to follow what you're explaining with images.

I would ask and urge all authors at Experts Exchange that include images in their work to please consider going through the above steps when embedding images into your work. The effort is minimal, yet the benefits to the blind community can be huge.

Some Tips on Alternate Text Content

Keep your Alternate Text entries short, and to the point. Readers won't want descriptions of images to take five minutes or more for their screen readers to read out to them. Here's a couple of examples Brian Vogel sent to me to illustrate what an ideal image description could be. 

Example 1 shows when only a short description is needed. Example 2 gives an idea of when a longer description could be handy.

Example 1

Main Speccy Window with File Menu, Publish Snapshot shown. Command to trigger this via the keyboard is ALT+F, U

Suggested Alternate Text: Main Speccy Window with File Menu, Publish Snapshot shown. Command to trigger this

                                                  via the keyboard is ALT+F, b

Example 2

Speccy Publish Snapshot Dialog. Tells you that the system specs collected will be saved online and viewable to anyone to whom you supply the web address that will be generated for it.  Personal information such as external IP addresses are not included.  Then asks if you wish to proceed with publishing.

Suggested Alternate Text: Speccy Publish Snapshot Dialog. Tells you that the system specs collected will be saved online and viewable to anyone to whom you supply the web address that will be generated for it.  Personal information such as external IP addresses are not included.  Then asks if you wish to proceed with publishing.

As can be seen from the above examples, the descriptions are short, to the point and very descriptive to anyone who can not view the image. Where deemed helpful, as per Example 2 above, the dialogue in the graphic should also be included. Avoid including text like "Don't show this message again" as that wouldn't be particularly helpful to blind readers. In short, consider what you would like to hear if you couldn't see the image and try to explain it as succinctly as you can.

Exploring Screen Readers

If you would like additional information and explore how the blind experience reading articles with embedded images, download and try out any of the following screen readers for yourself. 

Windows 10 built-in Narrator - Press your Windows Key in Windows 10 and type Narrator to bring up the Windows Narrator Desktop app. Start it and you will get a thirteen step tutorial on how to both use and configure it.

Windows 10 Built-In Narrator Desktop App

Windows Narrator Desktop app snapshot

NVDA Screen Reader (Recommended) - "The NVDA (Non-Visual Desktop Access) screen reader from NV Access Org can be downloaded free of charge by anyone. NV Access do this because they believe everyone, especially the world’s poorest blind people deserve access to computers and a way out of poverty. Donations are encouraged before downloading"

NVDA - Non-Visual Desktop Access

NVDA Welcome Screen Snapshot

Jaws - ( Job Access with Speech ) - Widely considered to be the granddaddy of them all. "Manufactured by "Freedom Scientific", The Jaws Screen reader provides speech and braille output for the most popular computer applications. Features two multilingual synthesizers: Eloquence and Vocalizer Expressive; talking installation; built-in free DAISY and Player and a full set of DAISY-formatted basic training books. Supports Windows® 8.1 and Windows 10, including touch screens and gestures, and includes support for MathML content presented in Internet Explorer"

Jaws - Job Access With Speech

Jaws for Windows Snapshot

Wrapping Up

I hope this article has encouraged you to spend just a little more time to include Alternate Text for embedded graphics in your article submissions. If you have any questions, please leave a comment below. All comments will be answered.

Finally, if you think this is helpful to Experts Exchange members, please endorse this article by clicking the Thumbs Up icon to the left below.

See you on site!

Regards, Andrew Leniart - EE Senior Editor

LVL 63

Expert Comment

by:Joe Winograd, Fellow&MVE
Hi Andrew,
Great article! I use many screenshots in my articles here at Experts Exchange and have been guilty of using just the file name as the alternate text. I did not think of the impact on the blind and visually impaired, so thanks for bringing this to our attention.

One of the most common techniques that authors use in our EE articles is embedding screenshots of dialog boxes, such as the "Publish Snapshot" in your Example 2 in this article. One point about this that may be helpful for authors in creating the alternate text is to know that for most Windows dialog boxes, Ctrl+C (Copy) will put the text from the dialog on the clipboard. For example, here's a screenshot that is very similar to one that I used in one of my EE articles:

setup bit-level error
When that dialog was being displayed, I simply did a Ctrl+C (Copy) followed by a Ctrl+V (Paste), and here's what I got:

Setup Error
You cannot install the 64-bit version of Office 2010 because you have 32-bit Office products installed. These 32-bit products are not supported with 64-bit installations:

  Microsoft Office Single Image 2010

If you want to install 64-bit Office 2010, you must uninstall all 32-bit Office products first, and then run setup.exe in the x64 folder. If you want to install 32-bit Office 2010, close this Setup program. and then either go to the x86 folder at the root of your CD or DVD and run setup.exe, or get the 32-bit Office 2010 from the same place you purchased 64-bit Office 2010.

This gives the author a great head-start in creating the alternate text.

Thanks again for the excellent article (endorsed!) and raising awareness of this issue. Regards, Joe
LVL 27

Author Comment

by:Andrew Leniart
This gives the author a great head-start in creating the alternate text.

Indeed it does Joe. I think the idea is to see if any of the information in a dialogue box with that much text is superfluous and could be left out if reworded. Sometimes all the text may be relevant and needed, other times it may not. I would avoid putting lines of full stops as text breakers though, because some screen readers could interpret that as "dot dot dot dot dot dot dot" etc :)

Thank you for your kind comments and also for endorsing the article Joe, both very much appreciated!

Regards, Andrew
LVL 39

Expert Comment

There is another way of capturing text-based content of various dialog boxes for the purpose of pasting into an article to support the screenshot that would otherwise be of no use to a blind person.  In many instances this can save you from having to transcribe the content of dialogs and windows when describing what would be seen by a sighted person in a screenshot.

SysExporter by Nir Sofer

Download Page: https://www.nirsoft.net/utils/sysexp.html
Download 32-bit standalone executable in Zip file: https://www.nirsoft.net/utils/sysexp.zip
Download 64-bit standalone executable: in Zip file: https://www.nirsoft.net/utils/sysexp-x64.zip 
Download Installer package with uninstall support: https://www.nirsoft.net/utils/sysexp_setup.exe

Program Description:

SysExporter utility allows you to grab the data stored in standard list-views, tree-views, list boxes, combo boxes, text-boxes, and WebBrowser/HTML controls from almost any application running on your system, and export it to text, HTML or XML file.
Here's some examples for data that you can export with SysExporter:
1. The files list inside archive file (.zip, .rar, and so on) as displayed by WinZip or 7-Zip File Manager.
2. The files list inside a folder.
3. The event log of Windows.
4. The list of emails and contacts in Outlook Express.
5. The Registry values displayed in the right pane of the Registry Editor.
6. The data displayed by SysInternals utilities (Registry Monitor, File Monitor, Process Explorer, and others.)
7. The text inside a standard message-box of Windows.
8. The HTML inside any instance of Internet Explorer.
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

LVL 27

Author Comment

by:Andrew Leniart
Great idea Bill. Will definitely check that out. Thanks much for the tip, and the endorsement!

Regards, Andrew
LVL 63

Expert Comment

by:Joe Winograd, Fellow&MVE
That's good advice, Andrew, which is why I called it a head-start in creating the alternate text. I would paste it into my fav text editor and go from there.

Good suggestion, Bill. The NirSoft utilities are a (free!) treasure. :)

Regards, Joe
LVL 37

Expert Comment

by:Chinmay Patel
Great Initiative. I have been putting in Alt text but never thought that I should make them more meaningful and contextual. I will update my articles soon.

LVL 27

Author Comment

by:Andrew Leniart
Great Initiative. I have been putting in Alt text but never thought that I should make them more meaningful and contextual. I will update my articles soon.

Thank you Chinmay, both for your enthusiasm and for endorsing this article!

Regards, Andrew

Featured Post

Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
Did you know PowerShell can save you time with SaaS platforms? Simply leverage RESTfulAPIs to build your own PowerShell modules. These will kill repetitive tickets and tabs, using the command Invoke-RestMethod. Tune into this webinar to learn how…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month