What makes a website accessible and why does it matter?

Accessibility (a11y) ensures people with disabilities can use your website. It's also required by law in many contexts and benefits everyone.

Semantic HTML is the foundation. Use <button> for buttons, <nav> for navigation, <main> for main content, <h1>-<h6> for headings in order. Screen readers and assistive technologies understand semantic elements. div and span mean nothing to them.

Keyboard navigation lets users without mice navigate your site. All interactive elements must be focusable and operable with keyboard. Tab moves focus, Enter/Space activates. Visible focus indicators show where you are. Never remove the focus outline without providing an alternative.

ARIA (Accessible Rich Internet Applications) adds meaning when HTML isn't enough. aria-label describes elements, aria-expanded indicates toggle state, role assigns purposes. But prefer semantic HTML over ARIA when possible—ARIA is a supplement, not a replacement.

Color considerations: don't convey information by color alone (use icons, text too). Ensure sufficient contrast ratios (4.5:1 for normal text, 3:1 for large text). Tools like WebAIM Contrast Checker help verify.

Alt text describes images for screen reader users. Be descriptive and contextual. Decorative images get empty alt="" to be skipped.

Test with keyboard-only navigation, browser accessibility audits (Lighthouse), and screen readers (VoiceOver, NVDA) to experience your site as users with disabilities do.