Community Pick: Many members of our community have endorsed this article.

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

Andrew LeniartIT Professional, Freelance Journalist, Certified Editor
IT Professional - Helping others to help themselves. https://andrewleniart.com & https://www.computerhelpzone.com.au/testimonial/
Published:
Updated:
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

16
2,210 Views
Andrew LeniartIT Professional, Freelance Journalist, Certified Editor
IT Professional - Helping others to help themselves. https://andrewleniart.com & https://www.computerhelpzone.com.au/testimonial/

Comments (10)

Chinmay PatelChief Technology Ninja
CERTIFIED EXPERT
Distinguished Expert 2021

Commented:
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.

Regards,
Chinmay.
Andrew LeniartIT Professional, Freelance Journalist, Certified Editor
Author of the Year 2019
Distinguished Expert 2020

Author

Commented:
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
Joe WinogradDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2018

Commented:
Hi Andrew,

I want to let you know that your excellent article has provided further inspiration. In addition to placing alternate text in my articles, I plan to make my programs more suitable for the visually impaired and for folks with physical impairments that make it difficult or impossible to move the mouse (such as quadriplegia). These two groups of users are similar in that one of them cannot see the mouse on the screen and the other cannot move the mouse on the screen.

This argues strongly for making sure that all program features are available via the keyboard and, of course, that alternate text is implemented everywhere. For example, as you know, I developed a program called TrayLaunch. A very early version of its Quick Start Guide is attached to this EE post. That is for Version 1.1, but TrayLaunch is now at Version 4.10, which is light years ahead of V1.1. However, even V4.10 is not compliant with the issues that we are discussing here.

Thus, I am working on an update for TrayLaunch that will (1) offer the optional ability to use ALL of the program's functionality via the keyboard, including the capability to right-click on the system tray icons via user-defined hotkeys; (2) provide alternate text for all of the screenshots in the Quick Start Guide; (3) offer command line calls for all of the features that are currently provided only via a GUI; and (4) provide a much larger selection of colors so that color-blind users stand a better chance of finding some colors that work for them (my current thought is to have 26 colors, each beginning with a different letter of the English alphabet, i.e., A-Z, which will allow for the hotkeys mentioned above when combined with modifier keys, such as Alt, Ctrl, Shift, and Win).

Just wanted to let you know that your important article has had an impact! Regards, Joe
Andrew LeniartIT Professional, Freelance Journalist, Certified Editor
Author of the Year 2019
Distinguished Expert 2020

Author

Commented:
That's wonderful of you Joe and I'm certain your efforts will be appreciated by many indeed!

The world could use more developers like yourself. Thank you very much for your kind words and this feedback. Very much appreciated.

Regards, Andrew
Joe WinogradDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2018

Commented:
Hi Andrew,
I want to let you know that the comments in my last post were not empty promises. I now have a beta version of TrayLaunch that contains the four features mentioned in that post, i.e., all functionality available via keyboard (including right-click on tray icons via hotkeys); alternative text for all graphics and screenshots in the manual; command line calls for all features; and 24 colors (A-Z, except for C and O, explained below).

Also, I added the ability to increase the font size in the program's GUIs. There are now the typical letter "A" boxes representing five font sizes, which I'm calling: tiny, small, medium, large, huge. The small size is the point size that is in all prior TrayLaunch versions. I decided to put in one smaller choice, but three larger ones.

The select-color-stars-to-run dialog box with the 24 colors and five font size choices looks like this now:

TrayLaunch 5.0.15 (beta) select color stars to run
The font size selection is sticky, automatically saved, and used in all GUI dialogs. That screenshot is from W7 with "Underline keyboard shortcuts and access keys" ticked via Control Panel>Ease of Access Center (it works the same in W10). As you can see, each color has Alt+<first-letter> as its access key. This is why O and C are not for colors, since Alt+O is the access key for the OK button and Alt+C is the access key for the Cancel button.

Once again, wanting you to know the impact of your article! Btw, as a beta user, you'll be getting the new version soon. :) Regards, Joe

View More

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.