The Logical Blog by IconLogic

WEBSITE ACCESSIBILITY: The Problem with Popups

by Mary Gillen, COTP

Do you have content, such as a survey, on your website that automatically opens in a popup window? If the answer is yes, it's likely that your website will fail compliance testing. The Web Content Accessibility Guidelines (WCAG 2.0) define how to make web content as accessible as possible to people with disabilities. And according to WCAG, you should not use popup windows without an explicit alert beforehand. If you're new to accessibility, you should know that accessibility covers a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological. WCAG Guideline 3.2.1, which covers website predictability, compares two possible interactive areas of a website says that dropdown menus are better than popups because users don't lose focus as they tab through menus but can get thrown off by popups. Here's what the WCAG specifically says about dropdown menus: "A dropdown menu on a page allows users to choose between jump destinations. If the person uses the keyboard to move down to a choice and activates it (with a spacebar or enter key) it will jump to a new page. However, if the person moves down to a choice and either hits the escape or the tab key to move out of the pulldown menu – it does not jump to a new screen as the focus shifts out of the dropdown menu." Compare the success of a dropdown menu to the the following failed scenario of a popup window: "When a field receives focus, a help dialog window describing the field and providing options opens. As a keyboard user tabs through the Web page, the dialog opens, moving the keyboard focus away from the control every time the user attempts to tab past the field."

***

Want to learn more about creating accessible websites? Check out Mary's upcoming mini course: Website Accessibility: 17 Steps You Can Take Today to Ensure Future 508 Compliance.

***

Since 1995, Mary Gillen has designed and developed Web sites and applications that serve all responsive, 508-compliant, accessible and search engine-optimized. Over the years, she has developed responsive and accessible-compliant Web sites for large corporations, small startups, non-profits, associations, Federal government agencies, and more. Clients include: National Institutes of Health, The World Bank, International Brotherhood of Teamsters, Cancer Research Foundation of America, American Pharmacists Association, McKinsey & Company, and many others. Responsive design, search engine optimization, 508-compliant, and WCAG 2.0 standards (from A to AAA) are always applied.

Creating Accessible Websites: Don't Just "Click Here!"

by Mary Gillen

Most people who surf websites don't think twice about the link they're about to click. The linked text typically says "click here." The web surfer assumes the link will load a page based on something seen earlier in the text. However, if the web surfer is visually impaired, assistive devices such as screen readers will inform the surfer where the link will take them. When you use generic text like "Click Here" or "Read More" as instructions in linked text, it is confusing because the link says nothing about the content that will appear once the link is clicked. Another thing to note: screen readers often tab from one link to the next. Tabbing between links labeled "click here" sounds like "click here, tab, click here, tab, click here" when read by an assisitive device. As an alternative, consider changing the link text so it is an explanation of the target content. This will make more sense when read by a screen reader. EXAMPLE Original Instruction Text: Click here Revised Instruction Text: Click here to read the latest news

***

Looking to learn more about creating accessible websites? Check out Mary's upcoming mini course: Website Accessibility: 17 Steps You Can Take Today to Ensure Future 508 Compliance.

***

Since 1995, Mary Gillen has designed and developed Web sites and applications that serve, all responsive, 508-compliant, accessible and search engine-optimized. Over the years, she has developed responsive and accessible-compliant Web sites for large corporations, small startups, non-profits, associations, Federal government agencies, and more. Clients include: National Institutes of Health, The World Bank, International Brotherhood of Teamsters, Cancer Research Foundation of America, American Pharmacists Association, McKinsey & Company, and many others. Responsive design, search engine optimization, 508-compliant, and WCAG 2.0 standards (from A to AAA) are always applied.

Adobe Captivate: Accessibility Text

by Kevin Siegel, CTT, COTP,

 

I received the following email last week concerning Adobe Captivate and accessibility.

Hi,

 

I’m using your Adobe Captivate 9: Beyond the Essentials workbook to learn how to make an eLearning module accessible and I have a question.

On page 75, Adding Accessibility Text to Slides you state, in step 2, that …”Screen readers will not see slide background images. When a visually impaired learner accesses this slide, the assistive device reads the Slide Accessibility text aloud.”   

Following this statement in the instruction below, you have us type what looks to be the script of the narration into the Accessibility dialog box.

I am a bit confused by this. If my module includes a narration (voiceover audio) and closed captioning of the narration, what additional information should I include in the Accessibility dialog box?  Do I also add the narration there too or do I simply add descriptive text only to explain what the image of the slide is?

 

The developer's email above is referring a slide's Accessibility dialog box which can be accessed via the drop-down menu at the top of the Properties Inspector.

 

 

Once the Accessibility dialog box is open, you can type anything you'd like, import the text from the slide notes, or copy/paste the text from an existing voiceover script.

 

 

I am frequently asked why it's necessary to add Accessibility text if a lesson already has voiceover audio and closed captions. It's a great question. Keep in mind that closed captions are intended for a person with a hearing disability. If the learner has a visual disability, the closed captions aren't going to offer any assistance.

 

Let's pretend for a moment that you are visually impaired. You will rely on a screen reader to read aloud what you cannot see. The voiceover audio, even if it features James Earl Jones, isn’t meant for you. In fact, the cadence of the words spoken by Mr. Jones would likely be sooo slowwwww you’d go nuts and probably fast forward through the lesson. 

 

Accessibility readers read at a much higher speed than most people without a disability can handle. It's a best eLearning practice that the Accessibility text be identical to the voiceover audio. When a hearing impaired learner accesses your content, most will mute the audio being used in the presentation (meaning they will not hear the Mr. Jones at all). Instead, learners will rely on the accessibility text (which is read aloud by a screen reader even if the audio is muted in the lesson).

 

eLearning Accessibility: Hidden Buttons

by JoAnne Juett

 

Often an interaction in Adobe Captivate demands a different approach from a user with a disability. An example might be that a sighted user will click buttons on a slide to reveal information, while a visually impaired user might listen to information through a screen reader without ever clicking any buttons. 

Usually, these different approaches do not affect the ability of a visually impaired learner from moving forward through an eLearning module. However, there are times when engaging in the interaction will actually trigger the appearance of a forward button. Obviously the learner who doesn't click can't trigger the forward button, so what can you do?

The answer is to add a hidden button somewhere on the slide that impaired learners will access with the keyboard. My colleagues will often place the hidden object on a slide's title banner--probably the least likely place for a sighted user to inadvertently click.

How does the visually impaired learner get there? I would suggest adding instructions, probably at the end of the information on the slide that tell the user to TAB to the forward button and press ENTER to proceed. Admittedly, a focus box will appear around the hidden object, but I find that this is more of an annoyance to a low vision user than a hindrance.

***

Looking to create awesome accessible eLearning? Check out this live, online mini course.

eLearning Accessibility: Keyboard Focus and Adobe Captivate

by JoAnne Juett

 

One important eLearning accessibility requirement is keyboard focus visibility. Users of visible keyboard focus may include people with low vision and people with motor or cognitive disabilities, and they will often only use the tab button to move through the interactive elements on each slide. As the user tabs through the slide, a focus indicator should appear around each interactive element.

 

Captivate conveniently defaults to a yellow focus indicator around each interactive element. If this indicator does not appear, be sure that no object is obstructing the interactive element. Prior to publishing as HTML5, display Captivate's Publish Settings (via File > Publish Settings) and ensure Hide Selection Rectangle For Slide Items in HTML5 is unchecked.

 

 

 

The trick remains, then, to ensure the user tabs through the focus indicator boxes in a meaningful sequence (per WCAG 2.0 guideline 2.4.3). You can do this by placing the interactive elements in order of appearance bottom to top on the Captivate Timeline. The learner will then be able to see focus indicators in the descending order on the XY axis, and the user can loop back through these indicators as needed but will not be able to skip any element in the sequence.

 

Note: Keyboard focus when using a screen reader may sometimes be in random order and cannot be controlled by the Timeline. Hopefully later versions of screen readers and Captivate will be more compatible.

***

Looking to create awesome accessible eLearning? Check out this eLearning and accessibility mini course.

eLearning Accessibility: Guidelines and Standards Offer for Interpretation That Can Enhance the Design Process

In the world of accessibility, it is sometimes a struggle to sort through all of our standards and resources to determine the best ways to design and test our products for compliance. Unfortunately, it is too easy to simply find a solution by limiting design and development to a few standardized elements that can be easily passed or failed. In actuality, the guidelines and standards offer us room for interpretation that can enhance the design process and produce both creative and compliant results. 

Here are some examples:

• Don't sacrifice layout tables. Just be sure your layout tables don't have identified headers and don't use blank cells for layout purposes.
• Don't force sequential tabbing order on all Captivate slides. You can allow random tabbing as long as the information is not sequential and the user experience isn't negatively affected.
• Don't merely mirror slide text in the slide notes on every eLearning slide in your eLearning authoring tool. Create slide notes and alt text for the visually impaired user that contain additional instructive and helpful information that will enhance user experience, especially for interactions.
• Don't give up on colors that don't initially meet the color contrast requirements. Experiment with enlarging the text, bolding the text, or creating borders around the text where you can.

I totally agree with this quote from the W3C accessibility testing wiki: "accessibility is a goal, not a yes/no setting." I hope to use this space to offer helpful information and tips to assist you in developing creative and conscientious approaches to accessibility.

 

***

Looking to create awesome accessible eLearning? Check out JoAnne's live, online mini courses.

eLearning: Creating Accessible Content, Part 2

by Anita Horsley  

 

In the first article in this series, I discussed the definitions for Section 508, the amendment to the Rehabilitation Act of 1973, which requires all Federal agencies (typically schools and government institutions) to make information technology accessible to people with disabilities.

I also discussed the use of assistive devices that provide a way for people with seeing, hearing, or dexterity challenges a way to communicate and train using technology. People who have visual impairments use assistive devices such as Jaws, Window Eyes, and HAL. They also use screen magnification and braille displays/keyboards. People with hearing impairments need visual representation of auditory information such a closed captions and graphic displays. People with mobility impairments may need alternative methods to moving through your eLearning content, such as keyboard shortcuts.

The goal of creating accessible eLearning is to enhance your lessons by ensuring that all learners can master the instructional material and meet the learning objectives. When learning is accessible to all types of learners, you are not only complying with regulations, but you are reaching a larger audience.

Designing eLearning to Include 508 Compliance Standards

Most learners retain information through seeing, hearing, and doing. Keep that in mind when creating eLearning courses. It's relatively easy to ensure that a person who cannot see can hear your course content by adding narration and using accessibility text for images (also known as ALT text). However, the more challenging component to eLearning is keeping the lesson interactive.

When creating interactive eLearning, it's important to include accessibility that all learners can use. All learners need to be able to easily identify and select interactive screen objects. You should ensure you are using a tab order for any interactive components. And you should always provide meaningful feedback in your lessons... and offer remediation if necessary.

Here are a few general tips to Instructional Designers to improve effectiveness of accessible eLearning:

1. Use accessible online help (programs such as Adobe RoboHelp and MadCap Flare allow you to create Help Systems that adhere to Section 508 standards).
2. Alt (alternative) text for images, tables, and graphs (any purely visual object). For the visually impaired, Alt text is read aloud by assistive devices.
3. Use contrasting colors for learners who are color blind.
4. If you're using a slide-based eLearning development tool like Adobe Captivate or Articulate Storyline, name your slides. (The slide names are read aloud by assistive devices.)
5. Set a tab order for every interactive object (for keyboard accessibility)
6. Include keyboard shortcuts for all interactive objects (again, for keyboard accessibility).
7. Be consistent when adding slide-to-slide navigation.
8. Use tool tips. (Tool tips are read aloud by assistive devices.)
9. Use Closed Captions for learners with hearing disabilities.
10. Provide Printable versions of your course materials (for learners with hearing disabilities).

Watch for my next article which will cover a step-by-step accessibility eLearning plan.

***

If you'd like to take a 3-hour deep-dive into the best practices for creating accessible eLearning, check out Anita's live, online course. 

eLearning: Creating Accessible Content

by Anita Horsley  

 

While I don't have a disability, I have experience, both personally and professionally, with people who have physical and learning disabilities. I have assisted people with developmental disabilities, and I volunteer for a Therapeutic Horseback riding program that helps children with disabilities ride horses. 

When it comes to eLearning, I develop content for many government and education organizations where Section 508 Compliance is required. Section 508, the Rehabilitation Act of 1973, requires all Federal agencies to make electronic and information technology accessible to people with disabilities.

If you want to make your eLearning courses accessible for everyone, it's a good idea to think about people who are hearing, visually, and dexterity (motor skills) impaired. Additionally, it's important to consider the elderly population and people who speak English as a second language.

Assistive devices provide a way for people with disabilities to communicate and train using technology. People who are visually impaired or blind need devices such as:

• Screen readers (Jaws, Window Eyes)
• Screen magnification
• Braille displays

People with hearing impairments need visual representation of auditory information such as:

• Closed captions
• Graphic displays

People who have mobility impairments may need:

• Alternative keyboards
• Keyboard shortcuts

Although creating accessible eLearning can feel like an additional task, the goal is to enhance your eLearning courses by ensuring that all learners can master the instructional material and meet the learning objectives. When learning is accessible to all types of learners, you are not only complying with regulations, but you are reaching a larger audience, upholding social responsibility, and increasing your effectiveness as an eLearning developer and instructor.

Note: This is the first in a series of articles covering accessible eLearning from Anita. Stay tuned for more! And if you'd like to take a 3-hour deep-dive into the best practices for creating accessible eLearning, check out Anita's live, online course. 

Adobe Captivate & eLearning: Screen Reader Best Practices

by Kevin Siegel

Last week I wrote about some Best Practices for Creating Compliant eLearning. I'd like to follow up that article with information about screen readers.

Screen readers are programs designed to allow visually impaired learners to navigate through a website or eLearning lesson by reading the content aloud.

Two popular screen readers are JAWS (Job Access With Speech) and Window-Eyes. According to Microsoft, "Windows 8 has built-in assistive technologies that work with both Windows 8 applications and with desktop software to provide seamless access to the entire Windows experience."

If you'd like to see a review of some of the top screen readers, Top 10 Reviews has some great information. For instance, there's a section in the article that deals with compatible applications, something that is often overlooked.

According to the article, "This (compatibility) is one category that should not vary (between screen readers) no matter what your vision level is. You want your software to be compatible with the basics of your computer--word processing applications, internet, email, PDF reading--but not all screen readers are. The best ones work well with newer versions of Microsoft Office, especially Word and Excel. They also include at least two different internet browser options, usually Internet Explorer and Firefox. A variety of email applications is nice, but at the least the software should work with Outlook and Outlook Express."

Each screen reader uses different methods to translate screen information into speech. As you create eLearning projects in Captivate, you can certainly add accessibility, but you cannot control how a screen reader interprets the accessible components you add to any one lesson. For instance, you cannot force a screen reader to read screen text exactly when you want, or how you want. For that reason, it is best practice to test your projects with multiple screen readers and learn for yourself how each screen reader behaves.

Tips for Testing Screen Reader Compliance

Adobe has invested significant resources into Captivate to ensure the lessons you create have the capability of being compliant. And Adobe offers the following tips for testing your lessons for compliance:

• If you are designing your projects to work with screen readers, download several screen readers. Then test each project by playing it in a browser with the screen reader enabled.
• Ensure that the screen reader is not attempting to "talk over" places in your project where you have inserted separate audio.
• Several screen reader applications provide a demonstration version of the software as a free download. Try as many as you can to ensure compatibility across screen readers.
• If you are creating interactive content, test it and verify that users can navigate your content effectively using only the keyboard. Screen readers work in different ways when processing input from the keyboard. For this reason, your Adobe Captivate content might not receive keystrokes as you intended. Make sure that you test all keyboard shortcuts.

See also: Establishing a screen reader test plan

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.

Adobe Captivate: Best Practices for Creating Compliant eLearning

by Kevin Siegel

A few years ago I was in Canada teaching Captivate for a large Toronto-based company. We were just getting ready to cover the accessible features found in Captivate when I was informed that I could skip the section because Canadians were not required to create accessible content.

Fast forward to a recent online Advanced Captivate class that included students from South America, Australia, and Canada.In speaking about accessibility with the class, it became apparent not only does the Canadian government now require compliant eLearning, but according to the Canadian students in class, the rules in Canada are often more stringent than those in the United States. I was also happy to learn that other counties, such as Australia, are also addressing accessibility when it comes to eLearning.

If compliant eLearning is a requirement for you, I would encourage you to review your local laws to familiarize yourself with as much information as possible. If you work in the United States, or create eLearning content for a U.S. company, you can learn everything you ever wanted to know about Section 508 compliance online. If you are working with Canadian companies, you should familiarize yourself with the Canadian compliance laws. (Note: The Section 508 website may be down due to the U.S. Govt. shutdown. If so, you'll need to try accessing the site once the shutdown is over.)

What Does Captivate do to be Section 508 Compliant?

Selecting the Enable Accessibility option (Edit > Preferences > Publishing) makes certain elements in Adobe Captivate projects accessible or open to accessibility technology. For example, if you select the Enable Accessibility option and you have filled in the project name and project description text boxes in Project preferences, a screen reader will read the name and description when the Adobe Captivate SWF file is played.

The following Adobe Captivate elements are accessible when Enable Accessibility is selected:

• Project name (derived from Project Properties)
• Project description (derived from Project Properties)
• Slide accessibility text
• Slide label (derived from Slide Properties)
• Buttons
• Playback controls (The function of each button is read by screen readers)
• Password protection (If an Adobe Captivate SWF file is password protected, the prompt for a password is read by screen readers)
• Question slides (Title, question, answers, button text, and scoring report are read by screen readers)

Output generated with the Section 508 option is displayed by all supported browsers. However, your output may not be Section 508-compliant unless it is viewed with Internet Explorer. Internet Explorer is the only browser with support for MSAA (Microsoft Active Accessibility).

Note: To access Flash files using a screen reader, users must have Flash Player 9 or later installed.

Tips for Creating 508-compliant Adobe Captivate SWF Files

While Adobe Captivate Section 508 output is compliant for navigation, make sure that other elements are also compliant in your project. Assistive software must be able to "read" elements on the screen to visually impaired users. Use these tips to design accessible projects.

• In the Project preferences, write a meaningful name and description for your Adobe Captivate projects.
• For users with hearing impairment, add text equivalents for audio elements. For example, when delivering narrative audio, it is important to provide captions at the same time. One option is to place a transparent caption in a fixed location on slides, then synchronize the text with the audio using the Timeline.
• If your project contains visual multimedia, provide information about the multimedia for users with visual impairment. If a name and description are given for visual elements, Adobe Captivate can send the information to the user through the screen reader. Make sure that audio in your Adobe Captivate projects does not prevent users from hearing the screen reader.
• Supply text for individual slides that screen readers can read.
• Ensure that color is not the only means of conveying information. For example, if you use blue to indicate active links, also use bold, italics, underlining, or some other visual clue. In addition, make sure that foreground and background contrast sufficiently to make text readable by people with low vision or color blindness.
• For users with either visual or mobility impairment, ensure that controls are device independent or accessible by keyboard.
• Users with cognitive impairments often respond best to uncluttered design that is easily navigable.
• If mouse movement is critical in your Adobe Captivate project, consider making the pointer twice its normal size for easier viewing.
• Document methods of accessibility for users.
• Avoid looping objects. When a screen reader encounters content meant for Flash Player, the screen reader notifies the user with audio, such as "Loading....load done." As content in a project changes, Flash Player sends an event to the screen reader notifying it of a change. In response, the screen reader returns to the top of the page and begins reading again. Therefore, a looping text animation on a slide, for example, can cause the screen reader to continually return to the top of the page.
• If you are creating click boxes, you can make them more accessible by adding sound. The sound can play when users tab to the click box or hover over it. To add this accessibility feature, attach a sound file to the hint caption. (If you do not want the hint caption to appear on the slide, you can make the caption transparent and add no text.)
• Accessibility in Adobe Captivate works better when all the slides have interactive content.

Source: Adobe, Creating Accessible Projects

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.