Tag: designing for accessibility

Friday, March 25th, 2011

Web Accessibility Issues and Options for eLearning Text and Images

Listen with webreader

image of a laptop with a megaphone speakerIn response to my post on why web accessibility for elearning is important and how even small businesses can achieve it, I received an email from ReadSpeaker, informing me of their free WordPress plugin.  They tell me they’re working on a plugin for Moodle.  If it works as well as the WordPress version, I can’t wait!

This post addresses how to make text and images accessible to the vision impaired by use of a screen reader such as ReadSpeaker.  Since I’m going to talk about web accessibility as it applies to elearning content only – not any particular LMS – what I learned with the WordPress installation will also apply to Moodle and other LMS content. Obviously, other eLearning elements (such as forms, games, and flash) will be more or less accessible than text and images, depending upon the specific disability. These will be covered in future posts (as I have a chance to check out the options.)

ReadSpeaker was the only screen reader I tested and I tested only their free version.  It took me about five minutes to install on my other blog, Bee-Learn.com.  I was both pleased and surprised at what I found.

What I found with ReadSpeaker, which gives me a really good idea of how my content would be read by any screen reader:

How it treats text

  • In a post on the Lean 5S, the speaker read “fives”; it never occurred to me that it could be interpreted as a plural term.  I will make a point of putting a space in terms like that so that they will be read as “five ess”, which is how it is intended.
  • Slashes are read, which is ok because we would often say it.
  • It pauses at commas, periods, and line breaks.
  • Ellipses are not read, but do result in a pause.  I suppose that’s good because I wouldn’t want it to read “dot dot dot”, but a little meaning is lost… I am not sure how to compensate for this but at least I’m aware of it now.
  • “Cool” is read Coool. Cool!
  • mmmm… is read as Em Em Em Em Not good, but ReadSpeaker has a process for submitting mispronounced words.  Although eLearning is typically more formal than emails, blogs, and text messages, I can see enormous value in adding colloquialisms and acronyms to the screen reader’s vocabulary.
  • I know that acronyms and sounds can be added to the vocabulary because it correctly reads WYSIWYG.  That’s awesome!
  • The title of the page was never spoken.  Presumably this is because it is a different element of the page, although to a sighted person, it appears as part of the same page (by design).

How it treats images

  • The title of the image is read by the screen reader.  This is the stuff that pops up when you run your mouse over the image.  (Note: In WordPress this is typically the name/title of the image file; in Moodle it is the alternate text.  Most articles on this refer to the alternate text.  Test it out on your site, just to make sure you’ve got your description in the right place to be read.)  Because the screen reader can detect it, you can improve the experience for the vision impaired by creating alternate text that is descriptive of the photo.  For example:
    • In this post on the new Moodle navigation button, I originally had titled the image “beelearncoursehome”.  I changed it to “This image represents the original home navigation button on BeeLearn.com, from 2006”, which is read by ReadSpeaker.
    • In this post on Lean 5 S, I changed the title of the image of the desk to read “shown here is an antique roll top desk, piled high with a number of unrelated items.  There are flooring samples, shorts, shirts, books, baskets… It is a mess!”
  • Image captions are also read, so make sure they say something useful – and different – than the alternate text. In the above desk example, the title is read, then the caption; this is a huge improvement over my original version which had titled the image “desk5s”.
  • Since the screen reader doesn’t distinguish image alternate text from the rest of the text, I will make it a point to begin each title with something like “this photo shows…”

Writing carefully and appropriately describing images are things we should all do anyway.  They are also not the only things we can do to make our content richer for the vision impaired.  The good news is that for the most part, good instructional design principles are also good web accessibility design principles. Some advice to improve your content for everyone:

Avoid:

  • Content embedded in images, such as those produced by saving a PowerPoint file as jpegs and simply uploading them.  The individual elements (text, for instance) are not linkable and difficult to edit.  As far as a screen reader is concerned, an image is an image; there is no text on it.
  • Content residing in desktop applications (non-HTML) such as PowerPoint, Word, or PDF.  These documents have many drawbacks as online content ; they also have their own set of accessibility issues.  This will be covered in much more detail in a future post.
  • Long, scrolling pages of nothing but text.  This makes it difficult to follow, even for the most focused student without disabilities.
  • Low content to background junk ratio.  I’ve recently seen some examples of courses written in various LMS, where less than 25% of the screen was dedicated to learning content.  The rest was for navigation, warnings, frames, and even ads!  This sends a message to everyone that your content takes a backseat and it can make it difficult for a disabled student to focus on the real content.
  • Overriding CSS formatting.  Read this post on how theme and content are two separate elements.  Then read this Moodle tip on how simple copy/paste from a web page or a file can mess up your HTML formatting and override your CSS formats.

Do:

  • Build each course with all learning styles and disabilities in mind.  Even a person without a hearing disability may prefer to read about a concept than to listen to you talk about it.
  • Lay out each course and each page with those outlining skills you learned in school.  Headings make your content more sensible for everyone.  (Note: I always add a page title to the top of each Moodle page.  Moodle 2.0 will have this as an option, eliminating the need to retype the page name.)
  • Go ahead and use pictures, graphs, and even cartoons.  Keep your content rich.  Sure, there will be some elements that someone won’t be able to access.  But if you provide that content in more than one format, you’ll reach everyone.  For instance, use the alternate text option in photos to describe the photo, rather than just giving it a name.
  • Go ahead and use color.  But don’t rely on color to get your point across.  Color is highly effective for those who can see it; it is worthless for those who can’t.  Use color and at least one other distinguishing characteristic.

For more detail on designing for web accessibility, view this page at WebAIM.org.  On their site you will also find updated information on screen readers, research on web accessibility, discussions of various disabilities and how they are affected by technology.

Another great resource I found is this page from the University of Wisconsin.

Share

Tags: , , , , , ,

  • LinkedIn LinkedIn Facebook LinkedIn newsletters
  • Archived Posts
  • Archived Newsletters
  • Sign up for Albany Analytical Newsletters
    * = required field
    I would like to receive the following newsletters:


  • Test

    Testing Sidebar 2

© 2010, All rights reserved, Albany Analytical, Inc.

Blossom Theme by RoseCityGardens.com

/***Google Analytics Code ***/ /***End of Google Analytics Code ***/