HTML and CSS Accessibility

HTML & CSS: Accessibility

Accessibility ensures everyone-including people with disabilities-can perceive, understand, navigate, and interact with your product.

Build inclusive experiences from the first line of HTML and CSS.

Semantic structure

• Use meaningful elements (<header>, <nav>, <main>, <article>, <section>, <footer>).
• Provide unique page titles, headings in order (h1 → h2 → h3).
• Group related content with <fieldset> and <legend> for forms.

If you want to read more about Semantic HTML or get an in-depth understanding, go to HTML Semantic Elements in our HTML tutorial.

Text alternatives

• Add descriptive alt text to images; leave decorative images empty (alt="").
• Caption videos, provide transcripts for audio.
• Use <figcaption> for diagrams requiring long descriptions.

Keyboard support

• Ensure all interactive elements are reachable with Tab/Shift+Tab.
• Use native controls (<button>, <a>, <input>) or manage focus and ARIA for custom widgets.
• Visible focus styles are essential-never remove them.

Color & contrast

• Maintain at least 4.5:1 contrast for body text, 3:1 for large text.
• Do not rely on color alone to convey state; add icons, text, or patterns.
• Test with contrast checkers and simulate color blindness when possible.

If you want to read more about CSS Accessibility or get an in-depth understanding, go to CSS Accessibility in our CSS tutorial.

ARIA and labeling

• Use ARIA roles sparingly-only when native elements can't express behavior.
• `aria-label` or `aria-labelledby` provides accessible names.
• Keep ARIA state attributes in sync with UI changes.

Testing & auditing

• Run automated checks (Lighthouse, axe) to catch common issues.
• Navigate with keyboard only and screen readers (NVDA, VoiceOver).
• Invite real users with disabilities to test workflows.