Tutorials/Concepts
The notes here is the result of the EOWG F2F right before CSUN 2014.
Participants
- 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
- …
- 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
Concepts
- 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
Topics
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)
- …
(others)
- 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:
Carousels/Sliders
- 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
Notes
- 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