accessibility-patterns
Installation
SKILL.md
Accessibility Patterns
Semantic HTML First
Use the correct HTML element before reaching for ARIA. Native elements provide keyboard behavior, focus management, and screen reader semantics for free:
| Need | Use | Not |
|---|---|---|
| Button | <button> |
<div onClick> |
| Link | <a href> |
<span onClick> |
| Navigation | <nav> |
<div class="nav"> |
| List | <ul> / <ol> |
<div> with divs |
| Heading | <h1>–<h6> |
<div class="title"> |
| Form field | <input> / <select> / <textarea> |
<div contenteditable> |
| Dialog | <dialog> |
<div class="modal"> |
The first rule of ARIA: don't use ARIA if a native HTML element does the job.