A11Y First Workshop - A Web Accessibility Workshop

Refer to the README for instructions.

Table of Contents

  1. Structure & Semantics
  2. Links
  3. Buttons
  4. Flyouts
  5. Forms
  6. Form Validation
  7. ARIA Widgets
  8. Data Tables

Chapter 1: Introduces Structure & Semantics

Also introduces the concepts of screenreader-only text and ARIA roles

  1. Blank Page
  2. Meta
  3. Paragraphs
  4. Lists
  5. Definition Lists
  6. Headings
  7. Landmarks
  8. Images
  9. Background Images
  10. Table Layout
  11. Grid System
  12. Cards
  13. Inline Frames

Chapter 2: Introduces Links

Also introduces concept of focus management.

  1. Text Links
  2. Tiles
  3. Ambiguous Links
  4. Fake Buttons
  5. New Window Links
  6. Navigation Landmarks
  7. Skip-To Main
  8. Enhanced Skip-To
  9. Custom Focus Indicator
  10. Fake Tabs

Chapter 3: Introduces Buttons

Also introduces concept of ARIA labels.

  1. Button Text
  2. Critical Icon
  3. Access Key

Chapter 4: Introduces Flyouts

  1. Button Flyout
  2. Link Flyout
  3. Fake Menu
  4. Infotip
  5. Tooltip

Chapter 5: Introduces Form Controls

Also introduces concept of ARIA descriptions and ARIA hidden elements.

  1. Textbox
  2. Radio Buttons
  3. Customised Radio Buttons
  4. Select
  5. Customised Select
  6. Form Reset
  7. Form Submit
  8. Textbox Icons
  9. Floating Labels
  10. Checkbox
  11. Customised Checkbox
  12. Field Description

Chapter 6: Introduces Form Validation

Also introduces concept of ARIA live regions and client-side rendering.

  1. Required Field
  2. Page Error
  3. Field Error
  4. Dynamic Field Error
  5. Dynamic Page Error

Chapter 7: Introduces ARIA Widgets

Also introduces concept of widget keyboard navigation.

  1. Menu
  2. Dialog
  3. Tabs
  4. Combobox
  5. Date Picker

Chapter 8: Introduces Data Tables

  1. Data Tables
  2. Interactive Data Tables
  3. Row Select/Actions
  4. Bulk Select