Tag: web 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: , , , , , ,

Thursday, February 24th, 2011

Five Things to Consider for Web Accessible eLearning

Listen with webreader

In my post, Looking Ahead at Web Accessibility, I touched on the reasons why eLearning should be designed with accessibility in mind.  I’m not going to preach why we should do it.  I’m going to assume we’re all going to do it and get right to the how to go about it stuff.  (If you’re still not convinced, check out this blog by CourseAvenue.)

I’m also going to assume that everyone, regardless of disability, deserves and expects the experience of GREAT eLearning.  So, let’s start* with the Five Basic Things to consider when designing for web accessibility:

Will this add value to the students’ learning experience? Without it, many students will receive no value, so yes; web accessibility adds value for those who would otherwise not be able to take the eLearning course.  But the best part is the serendipitous nature of building for accessibility: it will likely add value for everyone.

The thought process of how each word, image, or feature you create will be taken in by this broader audience will enhance your understanding and connection with all of your students.  Many of the practices — such as careful outlining and more descriptive alternate text — will add to the experiences of all.

Do I have the skill? I think skill is less important than awareness and consideration.  Educate yourself on the issues.  Review examples of how a simple change can make a huge difference to someone with a disability.  The most comprehensive site on the subject that I have found is WebAim.org. If you feel that you still need to understand it better, they offer training in accessibility for both designers and administrators.

What are the options? The options range from free to costly, from software to hardware, and from designed-in to user-controlled.  For instance, ReadSpeaker is a plug-in for applications such as WordPress; the user has only to click “listen” to launch it.  JAWS is user-installed software that enables key stroke commands and Braille outputs. Other applications, such as captioning, require the designer to add that feature at the creation stage. 

I will be reviewing these options — and many more — in upcoming posts on specific features.  The first will be on web accessibility as it applies to text and images. 

How much functionality do you need from this tool? If this were a game show and you were asked to name the disabilities that could restrict access to web content, you’d probably shout out “visual impairment” without any thought.  But did you realize that color blindness is also a visual impairment?  What would your second answer be?  Many people think that because the web is written, deafness isn’t a problem.  In my previous post, I mentioned that many people are including voice that explains their content; without it, the content is meaningless.  WebAim.org gathers data on how many informational sites bury their content in videos.  Don’t make the same mistake with your eLearning. 

The answer to how much functionality is needed:  You should consider whether your eLearning audience will include those who have any form of vision impairment, have difficulty hearing, have limited motor skills, as well as the possibility of cognitive disabilities or the chance of seizures triggered by your cool fireworks flash.  Designing with these disabilities in mind will improve the quality of your content for everyone; even those of us without clinically diagnosed memory disorders appreciate intuitive content and navigation.

Will this tool work within my LMS?  Your LMS itself should be web accessible, so your concern is with making your content web accessible. An organized, well-designed layout will work anywhere.  Plugins, such as ReadSpeaker, will work in specified applications only.  Still others will have nothing to do with your LMS because the applications will be on the user-end (you’ll still have to design your content so it works with those applications.)

*Stay tuned for the next posts in this series on how web accessibility applies to the Features of GREAT eLearning:

  1. Web Accessibility Issues and Options: Text and Images
  2. Web Accessibility Issues and Options: Forms and Navigation
  3. Web Accessibility Issues and Options: Links and Documents
  4. Web Accessibility Issues and Options: Audio, Video, Flash, and Games
Share

Tags: , , , , , , , ,

Sunday, February 13th, 2011

Looking Ahead: Web Accessibility and How It Will Affect eLearning Content

Listen with webreader

Looking Ahead...I used to have eagle-eye vision.  One day, about 10 years ago, I was having trouble reading the mint stamp on a coin.  I assumed it was a double stamp.  My husband said it was perfectly clear. 

Huh? 

My eye doctor laughed and said there was more to come.  Sure enough, I began to have difficulty distinguishing between the shampoo and conditioner bottles in the shower.  Why are they making those labels so small these days?  It didn’t take too long before my computer monitor had vibrating fuzzies instead of words on it. Who changed my display settings? 

I can still see a bird in a treetop a half mile away.  But without computer-reading glasses, I can’t see what I’m typing right now.  

Imagine if special glasses didn’t help. 

Imagine if you could not see what was on your monitor, your iPad, or even a large screen.  Imagine not being able to read an email, see what others are saying on Facebook, get directions to wherever you’re going, or read this blog.  This isn’t just annoying, like having to put on glasses just to read a menu. It limits one’s ability to interact, share, communicate, and learn

Thankfully, there are people who came to this revelation long before I did - and they’ve been doing something about it.  They are creating standards for technology that will not only help the vision-impaired, but those who can’t use a mouse, combine keystrokes, or are otherwise restricted in their use of computer technology.  

The W3 Consortium Web Accessibility Initiative “works with organizations around the world to develop strategies, guidelines, and resources to help make the Web accessible to people with disabilities” and has developed guidelines to support this mission.  Other guidelines exist throughout the world, some of which are legally required.  

How can any of this possibly affect your eLearning courses? 

If eLearning is a component of your business, regardless of what that business is, you should be thinking about how what you do will fit with these standards. 

To give you just a hint at how what you do can affect the ability of your potential client base to use and/or enjoy your eLearning, read this great white paper from the Sloan Consortium that examined Moodle for accessibility.  A seemingly innocuous Moodle text string, “This quiz is limited to 1 attempt(s).” would be read by a screen reader as “This quiz is limited to two attempt open parenthesis ess close parenthesis.”

Yikes!  I had no idea!   

I encourage you to read the entire study; you will probably be shocked with the things that you take for granted.  I was.  I don’t have anything to do with the programming of Moodle, but I do create course content in it.  I have always taken learning styles into consideration, but I hadn’t given that much thought to how a technological interface meant to help someone with a disability might not be able to “get my meaning”.  I will from now on. It isn’t enough that the application you use is web accessible; the content must be as well.

Why should you care?

  • You could be missing a large number of potential clients - either for your eLearning or the products and services you sell that depend on online training.  Not to mention that in order to provide training (much of which is online) to any US Federal agency, that training will be required to meet Section 508 standards.  Similar government requirements will soon be in place throughout the world.
  • Depending upon your business, you could be opening yourself up for legal actions and bad publicity by creating learning (or any web) content that isn’t accessible to everyone who needs it.
  • The best reason:  It’s the right thing to do.   

I hope that I never need a screen reader, but I do appreciate web designers who use readable fonts and stick to non-vibrating colors.  I am most definitely going to make every effort to build my eLearning content in a manner that not only meets these guidelines and standards, but provides quality information that is as interesting and engaging as it is for those without disabilities. 

Please follow me on Twitter and/or subscribe to my RSS feed and newsletter.  I will be covering web accessibility in many posts to come…

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 ***/