M-1: Briefing

• Task: Implement the form controls needed for an autocomplete!
   
• What form elements?
  • Filter: <input type="text" />
  • Suggestions: group of <input type="radio" />
     
• Let's implement! (Only HTML at this stage!)
   
• More info:
  • ADG: Knowledge > Semantics and their importance for accessibility
  • ADG: Examples > Forms

M-1: Debriefing and discussion

• Who wants to demonstrate?
  • What has been easy, obvious?
  • What has been hard, unclear?

• Pull request
• Codepen

M-2: Briefing

• Task: Implement interaction between form controls!
  • Keep them in sync
• What exactly?
  • Apply entered filter to radio buttons (toggle visibility)
  • Move selection using Up/Down
  • Reset selection using Esc (unset selected radio)
  • Apply clicked radio to filter
• Go! Implement! (With JavaScript)
  • Keyboard focus stays in filter <input>
• More info:
  • ADG: Examples > Hiding elements

M-2: Debriefing and discussion

• Who wants to demonstrate?
  • What has been easy, obvious?
  • What has been hard, unclear?

• Pull request
• Codepen

M-3: Briefing

• Optimise solution for screen readers
  • According to 3 commandments
• Meaning must be clear: "This is an autocomplete"
• Interaction must be clear:
  • With keyboard and touch
• Feedback must be given:
  • "2 suggestions available for X"
  • "Y selected"
  • "3 suggestions in total"
• Go! Implement! (Yes, with ARIA)
• More info:
  • ADG: Knowledge > ARIA

M-3: Debriefing and discussion

• Who wants to demonstrate?
  • What has been easy, obvious?
  • What has been hard, unclear?

• Pull request
• Codepen

M-4: Briefing

• Add styles and style-related interactivity to resemble an autocomplete!
  • According to 3 commandments
     
• What exactly?
  • Fancy styles!
  • Show/hide suggestions
    (Focus-in/Focus-out/Up/Down/ Enter/Space/Esc)
     
• Go! Implement! (Yes, with CSS - and some more JavaScript)

M-4: Debriefing and discussion

• Who wants to demonstrate?
  • What has been easy, obvious?
  • What has been hard, unclear?

• Pull request
• Codepen

• Again: plain HTML offers a lot
   
• Offering good interactivity is UX
• Offering instructions/feedback is UX
   
• Good UX can be turned easily into accessibility
  • Took only 4 lines of code (see pull request)
    ​
• The biggest parts were general interactivity (~230 lines of
  JavaScript) and visuals (~60 lines of CSS)

• Again: plain HTML offers a lot
   
• Offering good interactivity is UX
• Offering instructions/feedback is UX
   
• Good UX can be turned easily into accessibility
  • Took only 4 lines of code (see pull request)
    ​
• The biggest parts were general interactivity (~230 lines of
  JavaScript) and visuals (~60 lines of CSS)