Accessibility Guidelines: @Work

Technology Requirements and General Recommendations

@Work training modules have been developed in compliance with WCAG 2.0 AA standards and have been tested in multiple configurations. Since there are numerous types of disabilities that impact user interaction on the web, as well as many assistive technology tools, not all testing combinations are possible. Our goal is to provide a good web experience for all visitors and we welcome user feedback. Below are technology requirements and specific tips for improving the user experience.

Minimum Technical Specifications 

  • Minimum screen size: 1024 X 786
  • Audio Soundcard enabled
  • Broadband connection with 512kbps bandwidth or better
  • Input devices: keyboard (or equivalent) and Mouse (or equivalent)
  • Flash Player for multimedia content

Minimum Browser Versions 

  • Chrome (latest version since it auto-updates)
  • Microsoft Internet Explorer 11
  • Safari 9+Firefox is not a supported browser. If used, we recommend Firefox 52 Extended Support Release (ESR).

Minimum OS Versions

  • Windows 10, Windows 8.x, and
    Windows 7
  • Mac OS X 10.10 (Yosemite)

Recommended Browser/Screen Reader Configurations

  • Chrome/NVDA (latest version)
  • Chrome/Voiceover (latest version)
  • IE/JAWS 16+
  • Safari/Voiceover (latest version)

Recommended Browser/Screen Reader Settings

The following tips will be helpful for navigating through the modules using a screen reader.

NVDA

  • NVDA overwrites many keyboard events, for example: pressing SPACE, ENTER or other keys affects interactive elements like buttons, links, drag-n-drops, sliders, etc. Because of this, please use the modifier key (SHIFT), e.g. SHIFT+ENTER or SHIFT+SPACE, to access ALL interactive elements.
  • Disable the “clickable” setting for NVDA. To do so, under Preferences > Document Formatting, uncheck “clickable”.

JAWS

  • Like NVDA, JAWS overwrites many keyboard events, for example: pressing SPACE or ENTER or other keys affects interactive elements like buttons, links, drag-n-drops, drop-downs, etc. Because of this, please use the modifier key (SHIFT), e.g. SHIFT+ENTER or SHIFT+SPACE, to access ALL interactive elements.

Voiceover

  • Disable VoiceOver focusing style “Show VoiceOver cursor”. To do this, under System Preferences > Accessibility > VoiceOver > Open VoiceOver Utility > Visuals, uncheck “Show VoiceOver cursor”.
  • In order to use the keyboard arrows (e.g. for the sliders), disable “QuickNav”. This can be done by pressing the “left” and “right” arrow at the same time when VO is opened, which will toggle QuickNav.
  • To enable sliders to work properly on Safari, disable “Always allow keyboard commands to navigate websites”. To do this, under System Preferences > Accessibility > VoiceOver > Open VoiceOver Utility > Web, uncheck “Always allow keyboard commands to navigate websites”.

Safari

  • Enable tab navigation in Safari in order to have all the content fully accessible. To do this, go to Safari > Preferences > Advanced, and select “Press Tab to highlight each item on a webpage”.

Tips for Navigating Through the Module

General Navigation

Users have the option of skipping to the Main Content on each page or tabbing through the top navigation to reach the main content. Upon completing interactions on each slide, the user can return to the previous slide (Back arrow), proceed to the next slide (Forward arrow), or return to the Main Menu (Home page) by tabbing past the Forward arrow.

To access audio controls, users can tab past the Main Menu button and reach the audio buttons listed below it. The audio transcript and Action Plan buttons are next in order.

Tab order

  1. Skip to the Main Content
  2. Top Navigation
  3. Page Heading
  4. Main Page Content
    1. Inside Page Content (Page Specific)
  5. Back Button
  6. Forward Button
  7. Action Bar Buttons: Main Menu, Closed Captions, Play/Pause, Mute/Unmute Audio
  8. Transcript Button
  9. View Action Plan/Portfolio Button (Module Specific)
  10. Footer Links

Audio

Many modules include audio to enhance the learning experience.  If you are using a screen reader, the screen reader audio will overlap with the audio on the slide. We recommend stopping the screen reader speech (Ctrl key) to first listen to the audio on the slide. Then, resume the screen reader (tab key or arrow down) to navigate through the interactive elements on the slide or proceed to the next slide.

Additionally, an action bar is included in each module to provide easy access to the following audio controls on audio enabled pages.

  • Show Narration button (Closed Caption)
  • Media Completed, Click to Replay button (Play/Pause Audio)
  • Turn Audio Off button (Audio On/Off)

The action bar can be navigated to by tabbing past the forward arrow. Audio buttons are not active on pages that do not contain audio.

Transcript

A full text description of audio content is also accessible via a Transcript button. The Transcript button can be navigated to by tabbing past the Action Bar. In the case of videos, the Transcript augments the audio text to include any additional important video details.

Video Players

Video player controls can be accessed via the following keyboard shortcuts:

  • Fullscreen (Enter/Exit fullscreen): F (or Shift+F on NVDA)
  • Closed Captions (On/Off): C (or Shift +C on NVDA) – only when synchronized CC is available in the Video itself. Otherwise, Closed Captioning for the entire video is available via the Action Bar CC icon.
  • Mute/Unmute video volume: M (or Shift+M on NVDA)
  • Play/Pause Video: Space (Shift+Space on NVDA)
  • Seek: Left/Right Arrow to skip forward/backward
  • Volume: Up/Down Arrow to raise/lower volume

 Sliders

Sliders are interactive page types that contain a range of values (minimum, maximum, and graduated steps) and a resulting calculation. The user can select a value on the slider, such as a dollar amount or time period, in order to calculate the effect of the selection. The user can change the value of the slider with “left” and “right” arrow keys and then access the resulting calculation via the TAB (forward) key or SHIFT+TAB (backward) key, depending on where the slider/calculation is positioned on the page.

Flipcards

Flipcards are a custom feature of the @Work modules and behave similar to buttons. The user will be instructed to select the flipcard to learn more.  When clicked, the card ‘flips’ to reveal additional information. In some cases, the flipcard will have more than one slide and each slide will then be announced as flipcard 1 of n, button, flipcard 2 of n, button, etc. A page can contain one or more flipcards. Each will be announced as a button.

When the card is flipped, the screen reader will read the contents of the card or the user can read the contents of the card with keyboard shortcuts specific to the screen reader.

Accessibility Help

If you are experiencing difficulty accessing our modules, please navigate to your course menu page and use the Help button in the footer to submit your issue. Please provide the assistive technology tools along with the browser and version you are using to access the site.