Engaging and Accessible eLearning Presentation Handout



center000Table of Contents TOC \o "1-3" \h \z \u Engaging and Accessible eLearning PAGEREF _Toc517337379 \h 3Main Considerations for CBTs PAGEREF _Toc517337380 \h 3Who else benefits? PAGEREF _Toc517337381 \h 3Use Headings PAGEREF _Toc517337382 \h 4Choose a readable font PAGEREF _Toc517337383 \h 4Interactions like quiz questions PAGEREF _Toc517337384 \h 5Interactions that typically don’t work PAGEREF _Toc517337385 \h 6Quiz Instructions for Screen Reader Users Using SoftChalk PAGEREF _Toc517337386 \h 6Helping a JAWS user (and the developer and everyone else) find the next question easily PAGEREF _Toc517337387 \h 6Asking good questions PAGEREF _Toc517337388 \h 8Which Interaction types should you use? PAGEREF _Toc517337389 \h 9Alternative Text for Images PAGEREF _Toc517337390 \h 11Best practices PAGEREF _Toc517337391 \h 11Color Contrast and Your Templates PAGEREF _Toc517337392 \h 12Pick a template with good color contrast PAGEREF _Toc517337393 \h 12Colour Contrast Analyser PAGEREF _Toc517337394 \h 12Test your Style Template PAGEREF _Toc517337395 \h 13Gradients and Patterns PAGEREF _Toc517337396 \h 15Images in the Banner PAGEREF _Toc517337397 \h 16Hyperlinks PAGEREF _Toc517337398 \h 17Open most links in a new window PAGEREF _Toc517337399 \h 17Descriptive link or exposed URL? PAGEREF _Toc517337400 \h 18Top tips for hyperlinks: PAGEREF _Toc517337401 \h 18Short URLs? PAGEREF _Toc517337402 \h 20Links for emails and downloadable documents (pdfs, word) PAGEREF _Toc517337403 \h 21Video PAGEREF _Toc517337404 \h 21Basic Guidelines PAGEREF _Toc517337405 \h 21Video Accessibility for Blind PAGEREF _Toc517337406 \h 22Accessible Video Players PAGEREF _Toc517337407 \h 23Video Accessibility for Deaf – Providing Captions PAGEREF _Toc517337408 \h 23Additional Accessibility Tips and Guidelines PAGEREF _Toc517337409 \h 24Does your CBT allow users to modify contrast settings? PAGEREF _Toc517337410 \h 24Left Justify most Text and Objects PAGEREF _Toc517337411 \h 25Coding Tips PAGEREF _Toc517337412 \h 26Eliminating related videos at the end of embedded YouTube video PAGEREF _Toc517337413 \h 26Email hyperlink tip PAGEREF _Toc517337414 \h 27JAWS Tips for Training PAGEREF _Toc517337415 \h 27Tools to Help you Evaluate and Create Accessible content PAGEREF _Toc517337416 \h 27Web Accessibility Checkers PAGEREF _Toc517337417 \h 27Contrast Analyzers PAGEREF _Toc517337418 \h 28Engaging and Accessible eLearningMain Considerations for CBTsWe 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?Older usersPower users (keyboard shortcuts)ESL usersUsers in loud environmentsUsers with motor impairmentsThe user who just sprained their wristUse HeadingsUsing 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 doesn’t cut it.Headings also help Softchalk create a table of contents and the “on this page” sidebar.Choose a readable fontFont 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 questionsAny 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 aren’t correctly labeled so a screen reader can’t “see” them).Interactions that typically don’t workSince 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 dropCrossword puzzlesHotspotsJigsaw puzzlesQuiz 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 doesn’t 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 easilyJAWS 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 can’t 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 questionsCompare these two multiple choice questions: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 it’s 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. Here’s 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 doesn’t easily find out: the number of characters in each word answer. But is this accessible? Consider these questions:Is it equivalent? That’s 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 it’s a graded assessment)?Because the alternative “activity” cannot be checked for correct answers, nor scored, it doesn’t really qualify as an equivalent alternative.Alternative Text for ImagesA blind person (or a low vision person) needs to know what your images are all about. That’s what alternative text, or alt text, is for.Best practicesPut 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.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 wouldn’t 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. Here’s a real (and terrible) example we found (don’t 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 doesn’t 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 contrastOur 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. It’s in the screenshots that follow. It will run from a flash drive so you don’t have to install it if you don’t want to. Here’s where to get it: Colour Contrast Analyser that Colour Contrast Analyser recently changed its “look.” The screenshots below may show the older version of CCA.Test your Style TemplateWhen 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 PatternsCareful with Gradients and Patterns for the Banner, as well as tiling images in the Banner and Footer.It’s not just contrast you’re trying to deal with, it’s 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 don’t pass color contrast.Images in the BannerCareful 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 windowWhen 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?Expose the link? Example: sites.site/lukesfreewareandtechtips/jawstipsforsoftchalk Link from a meaningful phrase? Example: JAWS users can follow this link for?Tips 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 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 don’t 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 that’s 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 won’t 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.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 don’t interfere with ease of reading and comprehension. The following screenshot shows an example:Short URLs?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, . Google also has its own URL shortening service. The authors like a service called . Unlike services like Google, you can specify your own ending for the URL. Even better, unlike any other service we’ve 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 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: JAWSsoftchalk or lukefree.With any short URL service, test what you’ve 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.VideoBasic GuidelinesProvide the following:CaptionsAccessible PlayerAudio Description – this is a higher level standard (WCAG AAA).Two accessibility concerns:Accessibility for blindAccessibility for deafVideo Accessibility for BlindMany people have never thought of it, but blind people watch videos! They play them, and listen. Check that your CBT’s built in video player is accessible. Do this in two stages:Check that you can navigate to the player’s 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 tool’s 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 doesn’t 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:Don’t set video to auto play – it will talk over JAWS.Consider Audio Description if the narration or dialog alone doesn’t allow a blind user full understanding. Here are some links about Audio Description: Frozen movie trailer with audio description Audio description on Wikipedia VSA Texas nonprofit website Accessible Video PlayersAFB Player Able Player (I couldn’t get this to work but it sounds like it would be even better) Video Accessibility for Deaf – Providing CaptionsCaptions – 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 speaker’s accent)You can create captions from scratch in Youtube if it’s your own videoAlso, you can edit or repair YouTube’s Auto Captions, but they are so bad that it’s often easier to start from scratch. For the humorous results of YouTube’s bad auto-captioning, see the famous Jamaican Vacation Caption Fail video at 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 doesn’t really meet accessibility guidelines like it should.Left Justify most Text and ObjectsScreen 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 it’s 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 videoUnrelated 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.<iframe width="640" height="360"src="" frameborder="0"allowfullscreen></iframe>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:<iframe width="640" height="360"src="" frameborder="0"allowfullscreen></iframe>Email hyperlink tipThis code fills out the To: field in the email, but also adds in the subject line.mailto:training.development@twc.state.tx.us?subject=Diabetes Training for Rehabilitation Professionals InfoDo not choose “open in a new window.”JAWS Tips for TrainingThis 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 Tools to Help You Evaluate and Create Accessible contentWeb Accessibility CheckersWeb Access Toolbar: for Internet Explorer (up to 11 I think).Paul J Adam’s bookmarklets 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.Contrast AnalyzersColour Contrast Analyser use this one all the time. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download