Interactive Media

Device Agnosticism

  • All content must be compatible with screen readers
  • Interactive media should be equally accessible for a phone, tablet, or desktop computer.
  • The content should be rendered on a 3g connection in 14 seconds or less when tested on Google's mobile speed tester.
  • The quality of experience should be equal for a phone, tablet, or desktop computer.
  • To ensure consistency, a single version of the media should be able to respond or adapt to any device size. Check your site with the Google Mobile Friendly Tester
  • While developing your site, check it on multiple device sizes right on your laptop or desktop using the Responsive Design Checker
  • Note: over half of all page views on the internet are from mobile devices.
  • If a plugin is required to view the content, a link to a download should be provided

Software

  • Wordpress.org has been a leader in ensuring it's site building software writes compliant code. When choosing a third party theme, look for those that build-in accessibility. KCAD-DAD prefers the DIVI Builder and DIVI accessibility plug-ins in conjunction with the default Wordpress install.
  • New Google Sites (not the legacy version) is the most efficient and easiest tool for building compliant websites. And, it's free.
  • These website building tools write compliant code, but it remains up to the designer to make smart choices in imaging, layout, color, alt tag writing and proper use of headers to achieve an accessible site.

User Experience

Graphic User interfaces (GUIs) typically exist as a means to access content. The design goal is to minimize the extraneous cognitive load and working memory required to gain that access. In the case of interactive design, extraneous cognitive load on the human brain is generated by the the manner in which information is presented.

Visual Hierarchy

Discoverability

  • "Discoverability' is a design method that calls for all possible actions to be visible in the navigation (not hidden).
  • Working memory in our brains has limited capacity and is the system where we temporarily hold information available for processing things like navigation systems. Asking users to create mental maps of hidden navigational elements requires more working memory, which also increases cognitive load.

Feedback

  • Providing information that orients, and confirms the success or failure of the user's choices, is important because that can mirror the physical world, which provides constant feedback to our senses. That is the norm for most of our human experience. Digital interactive systems only provide it if the designer includes it.

Examples of feedback include:

    • Page/screen titles that reinforce where we landed.
    • 'submitted', 'saved' and other confirmations.
    • Consistent brand/product badging that reminds us who or what we are engaging with.

Affordance

  • When users are provided a visual manifestation of a choice, it should be clear what the results of that choice will be.
  • When a user is confronted with a navigation element, it should be clear what will happen when they interact with it. This clarity should be built on the expected, shared understanding of its demographic. That shared understanding can be based in icons that have become part of the universal language of interactive media (such as a Back Arrow, an X for Close or a Gear for Settings). However, any navigational elements outside of universal usage should include text.

Recovery

  • Undo, Redo, and Back are essential navigational elements for usability. Without them, users must return to 'home' pages/screens to reorient themselves

Motion and Sound

  • Motion and sound can engage parts of the brain that will increase attentiveness and recall as well as simple delight.
  • Motion can be used to attract attention to page/screen elements in a way that can effect the overall visual hierarchy.
  • The effect of delight should not be underestimated as many studies have shown that the human brain learns and solves problems more efficiently when it is 'happy'.

WCAG 2.1 level AA and Section 508 Guidelines

Navigation

  • The media should be navigable using keyboard arrow and tab keys
  • Should be consistent from page to page
  • Links in body text should be underlined
  • Links to the same location with different names should not be on the same page and avoid redundant links in general
  • A "skip Menu" invisible or visible button should be included if the menu has more than 4 buttons.
  • Do not differentiate categories of information using color.
  • A site map page should be included for sites with drop down menus.
  • Users should be warned of time limits that are essential or longer than 20 hours. Audio and visual warnings (20 seconds in advance) should tell the user when time limits are at hand. Ideally, time limits should be extendable.

Links

  • Links in body text should be underlined
  • Link text should make sense out of context and it should be obvious where the link will take a user. Users of screen readers will often search the content of the site for links.
  • Don't use 'Click Here' or 'More Information' for your link text. Instead, make the text more descriptive.
  • A good example: Visit our on-line knowledge resource: The Digital Learning Center.
  • A bad example: Click here to visit our on-line knowledge resource: The Digital Learning Center.

Layout

  • The media should be responsive to a variety of screen sizes.
  • The content should be displayed in a left to right, top to bottom hierarchy.
  • Employ a visual hierarchy that guides the viewer through the layout in order of informational relevance. Reference this DLC guide for examples.
  • Use alphabetical, unordered or ordered lists when organizing information
  • Table columns should have headers.
  • No automatic pop-ups or focus changes triggered by scrolling.
  • There should be ample space between navigation elements that allow for ease of use on a small phone
  • Avoid overuse of parallax effects and animation triggered by scrolling. As many as 35% of people over the age of 40 are likely to feel nauseous it subtle when used, due to vestibuler disordersdisorders.
  • Symantec Web Design: When all CSS styling of the page is removed, the elements on the page should still be in a logical reading order in the HTML code. Here's how you can test:
      • Use Firefox Developer Edition (Click View > Page Style > No Style in the top menu)
      • Use the WAVE checker (click the "no styles" tab)
      • Check manually that the elements on the page are in a logical reading order.

Text

  • It is very likely that a sight impaired person will navigate a web page by tabbing through the headers. The headers should be written to maximize that process. Hierarchical, use of text tags is also critical. For example:
    • Title, Heading, Sub-heading, Normal
    • H1, H2, H3, H4, Normal
  • It's best not to rely on visual formatting alone to communicate meaning. Screen readers might not announce formatting changes, such as boldface or highlighting. For example, to mark an important section of text, add the word "Important."
  • Should be high contrast against its background (light on dark or dark on light). Use the Wave Checker tool to test color combinations.
  • Should be sized for easy reading
  • Should be left-aligned in most cases when there is a large volume of text.
  • If you use image based text, the text in the image must be included, in full, in the image alt tag.
  • Should be able to enlarge using devise controls.
  • Avoid redundant text: especially between title and header tags
  • Don't use all upper case type setting. Screen readers will read that text one letter at a time. However setting text to a TT style will make the text appear all caps, even though it is not. TT style text will work well with screen readers.

Images

  • Images should be high contrast to ensure sight impaired persons can understand them. Reference the imaging guidelines in this site.
  • Descriptive alt tags should be included for all images. They need to succinctly describe the image. If the image serves as a link, it should include the link destination.
    • An example of a bad tag: figure 2
    • An example of a good tag: cartoon of a drowning fish
    • An example of a tag with a link destination: fish icon - fishing guide
  • If an image contains complex information that is critical to understanding the content, a "long description" tag can be used. Wordpress has this capability built into it.
  • Icons should always include text with them.
  • Image captions (when used) should always be located directly below the image and work in tandem with (but not be redundant to) the image alt tag to describe the content and meaning of the image.
  • Do not use large rapidly animating images that can cause epileptic seizures (no more than 3 blinks per second... or between 2 and 25 hz). Also, avoid overlaid complimentary colors or stripes that may scintillate. Guidelines from Webaim.
  • Purely decorative images, like those sometimes used as backgrounds in page headers, do not need alt tags.
  • Captions should not be used in place of alt tags. Captions should be used for adding context to an image such as: It's source, why it is important, etc.

Site Impaired Testing

JAWS Screen Reader

  • The Jaws Screen Reader is the only one that will work with Blackboard because both are JAVA based.
  • JAWS costs around $,1000 per user.
  • JAWS was the most used screen reader but, due to competition with better, less expensive (or free software), it has dramatically decreased in popularity
  • Learn more about the JAWS screenreader

NVDA Screen Reader

  • Available for Windows only
  • Is one of the most commonly used software for testing websites.
  • Free!
  • Learn more about NVDA

Mac's VoiceOver screen reader

Vision Simulators

A short video demonstrating MAC's, free, built-in screen reader called VoiceOver.

The video was created by Developer/advocate Rob Dobson and is available on the Google Chrome Developers YouTube channel.

Trying the MAC Voice Over Screen Reader Navigation For Yourself

Activating VoiceOver

  1. Click on on the Apple icon in the upper left corner of your MAC
  2. Choose 'system preferences > accessibility'
  3. Choose 'VoiceOver > Enable VoicOver"

Using VoiceOver Keyboard Commands

  • Command - f5: toggles VoiceOver on and off
  • Control-option-command-h: toggles through headings
  • Control-option-right arrow: reads the content under the heading
  • Control-option-right arrow: navigate by arrowing around
  • Control-option-a: reads the entire page
  • Control-option - spacebar: select
  • Control-option-u: (rotor)access to all browsing methods control
  • Option-shift-down arrow: interact with web page control
  • Control-option-command-arrow up/down: increase/decrease reading speed


A short video demonstrating NVDA, a free, built-in screen reader that runs on Windows.

The video was created by Developer/advocate Rob Dobson and is available on the Google Chrome Developers YouTube channel.

An in-depth video demonstrating screen reading techniques

The video was created by Deque Solution Architect, Steve Sawczyn. Deque Systems is an interactive media accessibility services company. You can view the video below or on the Deque Systems YouTube channel.