Accessible Component Patterns

Component Patterns

Button

• Use <button>, never <div onclick> or <a> for actions
• Toggle buttons: aria-pressed="true|false"
• Icon-only buttons: aria-label="descriptive text"
• Loading state: aria-disabled="true" + aria-busy="true", keep label readable
• Keyboard: Enter and Space activate

Link vs Button

• Link: navigates somewhere (<a href>)
• Button: does something (<button>)
• Never use <a> without href. Never use <a href="#" onclick> for actions.