Carousels

Basic structure:
You have slides...

  

    
    Some text content about Slide 1... 
  
  

    
    Some text content about Slide 2... 
  
   

            

And you have controls...

Most carousels today are inaccessible

• Evaluated carousels on home pages of 65 departments at a major research university
• 62 played automatically (95%)
• 60 offered no accessible means of stopping or pausing (92%)
• 52 were not operable at all by keyboard (80%)
• 54 had missing or inadequate alt text on images (83%)
• Many had color contrast problems

Playing Automatically

• People who are easily distracted can find it difficult to access other content on the page.
• People who need more time to read can find it frustrating if the slide advances before they're finished.
• Option #1 (recommended): Provide a prominent play button. Users can choose whether to explore this feature.
• Option #2 (minimum requirement): Provide a prominent, accessible pause button.

All images need alt text

And those buttons should be <button>s

Dropdown Menus

Add support for standard keystrokes

The standard: W3C Recommended Design Pattern for Menu

• Tab gives menu focus
• Left and right arrows move through top-level menu item
• Enter, space, or down arrow expand submenu; first item receives focus
• Up and down arrow moves through submenu; wraps to top or bottom
• Escape closes the submenu; focus returns to top-level item
• First character of any submenu item jumps to that item

Problem:

Screen readers intercept keystrokes for other functions. So our elaborate keyboard model isn't necessarily accessible to screen reader users.

One possible solution: role="application"

Choices and Tradeoffs

• With role="menu", links are treated as menu items, not links. But screen readers support role="menu" pretty well.
• Without role="menu", screen readers are less reliable. NVDA in Firefox works well.
• With role="application", your elaborate keyboard model is fully supported. But other screen reader keystrokes stop working. Can be confusing for users.

My Conclusion Today (which may change tomorrow)

• Use role="menu"
• Provide keyboard help
• Redundantly provide navigation links in the footer

Modal Windows

Basic CSS

#modalMask { 
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0; 
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.75;
  z-index: 10; 
}
#modalContent { 
  position: fixed;
  background-color: #FFC;
  width: 50%;
  top: 25%;
  left: 25%;
  margin: 0 auto;
  opacity: 1;
  z-index: 100;
}
            

Manage keystrokes

• When the window opens, place focus on the first focusable element
• Trap tab key so it cycles through focusable elements in the modal window only (all other elements are inaccessible)
• Escape closes the window