From Education & Outreach
The work on this deliverable has primarily moved to Github. If you can, leave your comments as issues there. This wiki page is still monitored.

The notes here is the result of the EOWG F2F right before CSUN 2014.


  • Eric
  • Denis
  • Wayne
  • EO

Principles tutorials

We have decided that we need to have different foundational tutorials that can be referenced from the practical tutorials. Possible topics:

  • Document outline
  • Keyboard navigation

Keyboard navigation brainstorm

  • Mouseless
  • Traps?
  • Conventions
  • Focus order/precticability → meaningful sequence
  • Managing focus
  • Tabindex 0/-1
  • :hover/:focus → visibility → Don’t remove outline!!
  • accesskeys?
  • bypass blocks of content (→ landmark roles, headings until supported)
    • We want to push landmark roles. Keyboard navigation to landmarks w/o screen reader by using a Browser extension.
    • (dboudreau) - Until either landmark or headings navigation is widely and natively supported in browsers however, we need to keep promoting skip links
  • skiplinks
  • focus styling
  • mobile platform considerations with no keyboard?

Practical tutorials

Basically those are very, very similar to the Images tutorials. We aim for the following structure:

  • Tutorial
    • Concepts page
    • Decision tree
    • At least 1 topic page
    • Maybe a Tips and FAQ page

Show/Hide tutorial content brainstorm


  • only specific content is shown
  • mechanism to show and hide content
  • convey state of the widget (Ref: Discoverability tutorial)
  • Ref: Keyboard access tutorial
    • tab panel: Navigation with left/right – Content is after the list of navigation switches
    • accordeon: Navigation with tab – Content is inline between the switches

Benefits for PwD: motor, visual, cognitive

Decision tree

  • one part of content to switch on → tab panels
  • multiple parts of content → accordion
  • aria-selected → tab panels
  • aria-expanded or multiselect → accordion


1. Disclosure
  • Heading + Button CSS Example
  • JavaScript Example
2. Simple hide/show components
  • Switches: List of links. Activation of one: revealing one, hiding others. (tab panel)
  • Switches: Headings. Activation of one: revealing one, hiding others. (accordion)
3. Complex hide/show components
  • Switches: Headings. Activation of one: revealing one, not hiding the others. (accordion)
  • Hide things to visual users, hide from screen readers and vice-versa (route as an alternative text for a google map)
  • offscreen
  • aria-hidden

Modal dialog tutorial brainstorm

  • Pretty severe screen reader problems: Switching to forms mode in modals. Possible solution: nest a
    inside the
  • Esc-Key -> Close

Consideration Page

For tutorials we can’t cover in full, we want to have a page with simple considerations when using components. Example for Carousels:


  • Animations should be stoppable
  • Switching from one panel to another must be possible with the keyboard
  • Tabbing should not advance the carousel but skip invisible panels
  • If the focus is in a panel, don’t advance to the next panel
  • If the mouse is hovered over a panel, don’t advance to the next panel


  • Tables Tutorial: Calendar table (headers/id, to use in the Form: Datepicker)
  • Tables Tutorial: Splitting complex table into multiple tables
  • Tab panels have to be visually distinctive
  • Table tutorial has to be more conceptual
  • Forms Tutorial: Change of Context