engaging and accessible elearning presentation...
Click here to load reader
Post on 12-Oct-2018
Embed Size (px)
Engaging and Accessible eLearning Presentation Handout
eLearning for All: Creating Engaging and Accessible Online Training
Table of ContentsEngaging and Accessible eLearning3Main Considerations for CBTs3Who else benefits?3Use Headings4Choose a readable font4Interactions like quiz questions5Interactions that typically dont work6Quiz Instructions for Screen Reader Users Using SoftChalk6Helping a JAWS user (and the developer and everyone else) find the next question easily6Asking good questions8Which Interaction types should you use?9Alternative Text for Images11Best practices11Color Contrast and Your Templates12Pick a template with good color contrast12Colour Contrast Analyser12Test your Style Template13Gradients and Patterns15Images in the Banner16Hyperlinks17Open most links in a new window17Descriptive link or exposed URL?18Top tips for hyperlinks:18Short URLs?20Links for emails and downloadable documents (pdfs, word)21Video21Basic Guidelines21Video Accessibility for Blind22Accessible Video Players23Video Accessibility for Deaf Providing Captions23Additional Accessibility Tips and Guidelines24Does your CBT allow users to modify contrast settings?24Left Justify most Text and Objects25Coding Tips26Eliminating related videos at the end of embedded YouTube video26Email hyperlink tip27JAWS Tips for Training27Tools to Help you Evaluate and Create Accessible content27Web Accessibility Checkers27Contrast Analyzers28
Engaging and Accessible eLearningMain Considerations for CBTs
We are trying to develop training that works for EVERYONE. There are several groups that need special consideration, some of which are users of Accessible Technology (AT):
Blind users (employ screen reader software)
Low Vision users (employ screen magnifier software and/or screen readers and/or modified color settings)
Keyboard-only users (may only strike one key at a time)
Deaf Users (need captions/transcripts for audio)
Anyone who uses special technology to help them access the information on their computers are using Assistive Technology, or AT for short. Following Accessible Design Principles helps all these users AND improves the training for other users too.
Who else benefits?
Power users (keyboard shortcuts)
Users in loud environments
Users with motor impairments
The user who just sprained their wrist
Using headings (Heading 1, Heading 2, Heading 3) on each page helps you organize what you are sharing. Real headings are created when you choose a heading style from the text style drop box. Headings also help a blind user navigate your page. Just making up your own headings (pseudoheadings) by bolding and changing the font size or other text attributes doesnt cut it.
Headings also help Softchalk create a table of contents and the on this page sidebar.
Choose a readable font
Font choice helps readers read more easily. Most experts think that for web applications, a sans serif font is best, but not all are created equal. In the screenshot below, you can see that the number one, the lower-case L, and the capital I are often similar looking which can cause problems, especially in situations like passwords. The same is true for zero compared to the capital o.
Of the fonts shown below, the authors like Tahoma the best for distinguishing visually among these letters and numbers. Font known to be the worst to use is Franklin Gothic Book.
Interactions like quiz questions
Any interactions, activities, quiz questions need to be keyboard navigable, first and foremost. Can you tab to different options, select using the spacebar or enter key, check your answer all without touching the mouse? They also need to be operable with a screen reader (sometimes you can navigate with a keyboard, but the buttons arent correctly labeled so a screen reader cant see them).
Interactions that typically dont work
Since the following usually require clicking and dragging or moving the mouse, they are usually not considered accessible. It may depend on the authoring tool.
Drag and drop
Quiz Instructions for Screen Reader Users Using SoftChalk
Screen reader users get used to how to select items that are a set of radio buttons or checkboxes, but in the case of SoftChalk, it doesnt group the radio buttons, so some instructions can help your screen reader or keyboard-only people:
KEYBOARD-ONLY USERS: Arrow down through the questions. The radio button for each answer comes before the text. To choose your answer, use the space bar or enter key when you hear the text you want to select. After you have made your selection, arrow down and select the Check Answer button before you move to the next question.Feedback is found directly below the Check Answer button after it is selected.
Helping a JAWS user (and the developer and everyone else) find the next question easily
JAWS users get good at skimming web pages in various ways. One way is to jump from heading to heading (pressing the H key does this). If your CBT is in HTML (web page format), putting a title before each question that is also a heading (usually Heading 3) makes it easier to find and navigate the quiz questions, especially if the user has to go back and try again.
This also helps the SoftChalk developer because, as the screenshot below shows, in SoftChalk Create, you cant tell which question you are looking at without some title outside the quiz popper itself.
Screenshot of editor's view of several quizpoppers showing the Heading 3 titles labeling them, and the Heading 3 at the end which says End of Summary Assessment.
Put a title before each question, labeling it as question 1, question 2, etc.
Make these titles heading 3 (or 2) so JAWS users can easily navigate to the next question.
Put an end of quiz as a heading 3 (or 2) at the end of the set of questions to easily tell when the quiz is over.
Asking good questions
Compare these two multiple choice questions:
1. The acronym TGIF stands for "Thank Goodness
What are the last two words in the acronym TGIF?
Listening to a screen reader read the first question convinces us the first one is not ideal for screen readers. JAWS reads the homemade blanks as four or more blanks with no indication of the spaces, so its not at all clear you are looking for two words.
So avoid fill in the blanks in the way you write your question prompt, if using multiple choice questions. Rewrite them to be actual questions (rather than statements with blanks) whenever possible (like the second example above). If you must use fill in the blank, use a sentence completion type quiz (with dropdown choices) or a multiple blanks question type, not a multiple choice one.
Which Interaction types should you use?
Not all quiz questions (and other interactions) in eLearning development tools are equally accessible. SoftChalk for one has attempted to support otherwise inaccessible quiz poppers with a neat keyhole icon that is supposed to provide an accessible version of the activity for AT users.
However, if you see a keyhole icon, BEWARE. It means that the interaction as a non-AT user sees it CANNOT be seen or read by a screen reader. Make a sober assessment about whether what the keyhole provides really provides an equivalent, accessible alternative. In our opinion they do not. Heres an example, using a crossword puzzle quiz popper in SoftChalk:
When you select the keyhole icon, a new window opens (shown below) with a list of clues, including how many letters it is. It does not include across or down, nor which letters intersect which other letters.
At first glance, this seems like a suitable alternative. It even shows something the non-AT user doesnt easily find out: the number of characters in each word answer. But is this accessible? Consider these questions:
Is it equivalent? Thats the goal when providing an alternative.
Does it provide an interaction?
Is there a way for the user to know if they got the right answer? The original interaction turns yellow, and at the end they get scored.
Do they get a score?
Does it count toward their total score (if its a graded assessment)?
Because the alternative activity cannot be checked for correct answers, nor scored, it doesnt really qualify as an equivalent alternative.
Alternative Text for Images
A blind person (or a low vision person) needs to know what your images are all about. Thats what alternative text, or alt text, is for.
1. Put a period at the end of every alt text, even if it is just one word. This causes the screen reader to pause briefly, making it easier to tell that the alt text has ended.
1. If using acronyms or initialisms, consider putting a space between each letter so JAWS will say it letter by letter. Alternatively, if it is a pronounceable acronym like NASA, ensure JAWS is reading it correctly by listening with JAWS and adjusting the spelling as needed (NOTE: experienced JAWS users can set up their custom acronym definitions so this step wouldnt be necessary for them).
Rarely if ever use the Long Description. It creates a hyperlink to a new web page that opens and contains only the text in the long description. Heres a real (and terrible) example we found (dont do this!):
Perhaps the long description MIGHT be a good idea for a really complex infographic image, so a blind user could read all the data in the graphic. Another example might be a screenshot of a spreadsheet or graph. However, SoftChalk as a development tool doesnt really give you the space you need to type in or format paragraphs of complex information.
Color Contrast and Your TemplatesPick a template with good color contrast
Our TWC agency standard for color contrast is to pass the WCAG AA standard for both large and small text (i.e., to pass small text standard even for large text like headings).
Colour Contrast Analyser
Colour Contrast Analyser (CCA) is the best tool for quickly checking contrast. It is from Australia, hence the British spelling.
We use this tool all the time. Its in the screenshots that follow. It will run from a flash drive so you dont have to install it if you dont want to. Heres where to get it: Colour Contrast Analyser http://www.visionaustralia.org/digital-access-cca.
Note that Colour Contrast Analyser recently changed its look. The screenshots below may show the older version of CCA.
Test your Style Template
When choosing a Template in your eLearning development tool, select the template and check its contrast before you commit to building it.
Here are some examples from SoftChalk. However, SoftChalk 11 has removed the ability to preview the templates, so you just have to select one, apply it to your project, and then check the contrast.
Then once you have chosen a template, you can check further some of the details.
In the case below, the regular headings fail but the designer headings pass. If you really like the rest of the template, you can adjust the colors in the StyleBuilder. NOTE: SoftChalk 11 now removed the stylebuilder. Some of the adjustments to parts of a template are still available; others are not.
Gradients and Patterns
Careful with Gradients and Patterns for the Banner, as well as tiling images in the Banner and Footer.
Its not just contrast youre trying to deal with, its also distracting patterns under the text that can make it hard to read.
These gradient passes in the Stylebuilder when I check the darkest and lightest parts, but be sure to check it out in a real preview too. There are plenty of gradients that dont pass color contrast.
Images in the Banner
Careful with tiling images. This next one looks great on a huge monitor, but has problems on a laptop. Note how the title text overlaps the images, making it impossible to read.
HyperlinksOpen most links in a new window
When creating hyperlinks to outside content, if you expect the user to return to the current page, then select an option like Open link in a new window, so that closing that window brings them back to where they were in your CBT. Not opening in a new window will replace your CBT with the external link they just clicked. The user might have difficulty getting back to the training, have to start the training over, or end up closing the browser tab completely.
Exceptions to this would include bookmarks within the same CBT.
Also tell your user that a link will open in a new window. That helps the blind user know what is happening.
Descriptive link or exposed URL?
What is the best way to insert a hyperlink?
1. Expose the link? Example: sites.google.com/site/lukesfreewareandtechtips/jawstipsforsoftchalk
1. Link from a meaningful phrase? Example: JAWS users can follow this link forTips on taking TWC T&D Online Training with JAWS (opens in a new window)
Our answer: the best is both, whenever possible. See our top tips below.
Top tips for hyperlinks:
Avoid Click here to find out more about taking SoftChalk Training with JAWS. When JAWS users bring up a list of hyperlinks they will get a list that sounds like this: here here here here. This gives them no meaningful information. Furthermore, a single word hyperlink is a significantly smaller target for a mouse user to hit, so it is less user friendly.
Giving a meaningful description for the link is most helpful for JAWS users because JAWS tells them both what the link points to (in English) as well as the URL and is especially helpful if they skim the links by bringing up a list of links (which pulls the link out of its paragraph or sentence context).
Tell your user if a link will open in a new window, as a part of the meaningful description. That helps the blind user know what is happening.
Tell your user if the link opens a different application (e.g., hyperlink called, Top Tricky Tips (pdf)). If you do this you dont need to say opens in a new window because that is pretty much a given.
Spelling out the actual URL (exposed URL or visible web address) is the only way someone who prints the page out or screenshots the page (or converts it to braille) would be able to access the link. So, think about the use cases of your CBT and decide if thats important.
Help reduce cognitive load for your users by taking off the http:// part, and the www part (do sites still use that?) unless the URL wont work without it. Test it!
Avoid duplicating links for JAWS users by not hyperlinking the exposed URL. So your final product might look like this: Tips on taking TWC T&D Online Training with JAWS (opens in a new window) (sites.google.com/site/lukesfreewareandtechtips/jawstipsforsoftchalk).
An even better alternative to the bullet above might be to expose the URLs at the bottom of the page, so they dont interfere with ease of reading and comprehension. The following screenshot shows an example:
If you are trying to use a descriptive link AND an exposed link, you might consider using a short URL, created by using a service like bit.ly, tinyurl.com. Google also has its own URL shortening service.
The authors like a service called tiny.cc. Unlike services like Google, you can specify your own ending for the URL. Even better, unlike any other service weve found, you can go back later and edit the target of these short URLs (as long as you sign up so it remembers your tinies). This can be a real help later, if the target address of your link changes. You can fix your broken link at tiny.cc instead of having to go in and edit your training.
One disadvantage of short URLs is that they hide the true identity of the target site. Some people hate this, and sometimes filters may block them. You can help a little by using a meaningful short code, like this one: tiny.cc/JAWSsoftchalk or tiny.cc/lukefree.
With any short URL service, test what youve created behind whatever firewalls and with whatever restrictions your organization places on those who will be taking your CBT.
Links for emails and downloadable documents (pdfs, word)
For emails, you choose the Mailto: option and Do NOT open the link in a new window. It will open up your mail client anyway, so opening a new web page just leaves it blank. See the Coding Tips section for a neat trick for email links.
For word documents or pdfs, go ahead and use Open in a new window since modern browsers today often open these documents in the browser instead of in the native application.
Provide the following:
Audio Description this is a higher level standard (WCAG AAA).
Two accessibility concerns:
Accessibility for blind
Accessibility for deaf
Video Accessibility for Blind
Many people have never thought of it, but blind people watch videos! They play them, and listen. Check that your CBTs built in video player is accessible. Do this in two stages:
Check that you can navigate to the players play/pause button using keyboard only. Ideally there will be a highlighted box that shows where tab focus is.
Use a screen reader to ensure that it can find the play button (i.e., announces it when focus arrives on play).
If your built-in player is not accessible, here are alternatives to an eLearning development tools built-in player:
Link directly to mp4 (can also be right-clicked and downloaded for playing offline).
Link to an accessible player (AFB player (see below) is one, but it doesnt handle captions so you have to used Open Captions, or burned-in captions). You need to know a little bit of coding to get the AFB player to work.
Link to YouTube or embed from YouTube .
Other video considerations:
Dont set video to auto play it will talk over JAWS.
Consider Audio Description if the narration or dialog alone doesnt allow a blind user full understanding. Here are some links about Audio Description:
Frozen movie trailer with audio description https://www.youtube.com/watch?v=O7j4_aP8dWA
Audio description on Wikipedia https://en.wikipedia.org/wiki/Audio_description
VSA Texas nonprofit website http://www.vsatx.org/aboutUs.html
Accessible Video Players
AFB Player http://www.afb.org/info/programs-and-services/technology-evaluation/creating-accessible-websites/download-afbs-accessible-html5-video-player/1235
Able Player (I couldnt get this to work but it sounds like it would be even better) http://ableplayer.github.io/ableplayer/
Video Accessibility for Deaf Providing Captions
Captions closed or open? Depends on your player. See above.
Who else does this help? (anyone with hearing loss, ESL viewers, English speakers not used to your speakers accent)
You can create captions from scratch in Youtube if its your own video
Also, you can edit or repair YouTubes Auto Captions, but they are so bad that its often easier to start from scratch. For the humorous results of YouTubes bad auto-captioning, see the famous Jamaican Vacation Caption Fail video at https://www.youtube.com/watch?v=23H8IdaS3tk.
Additional Accessibility Tips and GuidelinesDoes your CBT allow users to modify contrast settings?
The fastest way to see if a low-vision or vision-impaired end user can override the CSS (Cascading Style Sheet) settings on your CBT to change color contrast to something different that works better for them, is to use (in Windows) this keyboard shortcut to switch to Windows high contrast mode:
SHIFT + Left ALT + PRINTSCREEN (then hit OK if you get an are you sure prompt. You toggle back to normal view using the same combination again.
Here is a before and after view of this document in Word:
If the body of your CBT basically looks the same, then its content has probably been produced in Flash and doesnt really meet accessibility guidelines like it should.
Left Justify most Text and Objects
Screen magnifier users (those with certain visual impairments) blow up the screen with special tools (like Zoomtext) so that sometimes only a few words at a time are visible.
If you randomly have some objects right justified then its easy for the screen magnifier user to miss them completely.
In the image below from a SoftChalk CBT, imagine that ZoomText is only showing you the part of the screen that is found within the double red squares. You see some titles, and a big blank space. Would you know to look to the far right for the quizpopper icon to click?
Coding TipsEliminating related videos at the end of embedded YouTube video
Unrelated to SoftChalk, but very germane for eLearning, this avoids the sometimes embarrassing but always distracting matrix of suggested follow-up videos that appear once your video is over.
The only edit you need to make is to add six characters of text (?rel=0) to the end of the video name, as highlighted and bolded below:
Email hyperlink tip
This code fills out the To: field in the email, but also adds in the subject line.
mailto:[email protected]?subject=Diabetes Training for Rehabilitation Professionals Info
Do not choose open in a new window.
JAWS Tips for Training
This is a work in progress, but offers some good tips for JAWS users taking SoftChalk Training from the SoftChalk Cloud. I challenge you to find a resource like that anywhere else! Thanks to the TWC accessibility team for allowing us to copy it over from their intranet page for public use.
JAWS tips for SoftChalk https://sites.google.com/site/lukesfreewareandtechtips/jawstipsforsoftchalk
Tools to Help You Evaluate and Create Accessible contentWeb Accessibility Checkers
Web Access Toolbar: http://www.visionaustralia.org/digital-access-wat for Internet Explorer (up to 11 I think).
Paul J Adams bookmarklets http://pauljadam.com/bookmarklets/for any browser, and work with offline and intranet content. Save his links as favorites, then just select them when you are viewing a web page. One of them lets you see the alt text of all images on a page, another one identifies the headers.
Colour Contrast Analyser http://www.visionaustralia.org/digital-access-cca
We use this one all the time.
26TWC Training and Development
TWC Training and Development27