<aside> 💡

Study Tasks

• Create accessible interfaces with Javascript
  • Understand the concept of progressive enhancement.
  • Understand how JavaScript can improve or damage accessibility and user experience depending on its use.
  • Describe the impact of device-independent event handlers on accessibility.
  • Understand the impact of an onClick()event applied to a native <a> or <button> element in contrast to applying it to a non-semantic element, such as a generic <div>.
  • Be familiar with the user’s expectations regarding focus movement.
  • Know when and how to send focus to new content using JavaScript.
  • Understand the methods that can be used to notify screen readers that new content has been added dynamically. </aside>

Resources

Javascript

• Generally recommended to develop web content with a progressive enhancement approach in mind.
  • Progressive enhancement - a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.
  • Native HTML elements provide built in keyboard functionality

    • onClick()

      • If used on a <div> or <span>, it must have focus (tab-index) and a keyup/keydown event because those features will not be added automatically

      Use...	...with
      mousedown	keydown
      mouseup	keyup
      click	keypress
      mouseover	focus
      mouseout	blur

• Should be device-independent
• One type of event per interactive element

Managing Focus/State Changes

Option 1: Load or Reload Page

• Ensure the page title accurately reflects the content of the page AND the result of any user actions.
• Make it easy to navigate to the main content.

Option 2: Move the Focus

• Strategy 1: Roving Index - The container where the focus is sent must have tabindex="-1".
• Strategy 2: active-descendant
• The container must not be empty.
• Don't move the focus unexpectedly.
• Sending the focus must be the last event, and it will probably be necessary to delay before sending the focus.

Option 3: ARIA Live

• aria-live="assertive" and aria-live="polite".
• Setting an element to role="alert" turns it into an assertive ARIA live region
• The ARIA live region must be present and must be empty before making an announcement.
• ARIA live announcements should be brief.
• Remove the announcement soon after it is inserted (in most cases).
• If the announcement is not meant to be seen, hide with CSS clip.