Applied ARIA: creating a custom button component

The Duck Test states that

If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck.

Relevante Success Criteria

SC 2.1.1 Keyboard (Level A)
XXX
SC 2.1.2 No Keyboard Trap (Level A)
xxx
SC 2.1.4 Character Key Shortcuts (Level A)
xxx
SC 2.1.3 Keyboard (No Exception) (Level AAA)
xxx

Bei Custom Elements muss sichergestellt werden, dass die Interaktivität genau den Benutzererwartungen entspricht!

<div>
  <a href="#">Tab Stop #1</a>
  <div class="btn" role="button" tabindex="0">customButton</div>
  <button class="btn">HTMLbutton</button>
  <button class="btn" disabled>HTMLbutton</button>
  <a href="#">Tab Stop #2</a>
</div>
Tab Stop #1
customButton
Tab Stop #2

Das ist noch nicht alles: die Custom Control Accessible Development Checklist sollte auch abgearbeitet werden (touch operable, high contrast mode, ...)

Links