Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Accessibility

4 lessonsAbout 24 minutesAdvanced

This part of the CSS Tutorial runs from Accessible CSS through to CSS User Interface. There are 4 lessons here, and working through them takes about 24 minutes at a steady pace.

It follows on from Modern CSS Authoring, so finish that first if you have not already — the examples below assume you are comfortable with it.

Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.

  1. 1Accessible CSSPreserve focus, readable contrast, zoom behavior, target size, and semantic reading order while styling interfaces. It addresses focus visibility, contrast, zoom and text resizing, target size, source order, hidden content, and the boundary between CSS and semantic HTML.
  2. 2CSS ThemingBuild light and dark themes that work with browser controls, user preferences, and forced colors. You will coordinate system preferences, color-scheme, light-dark(), custom-property tokens, explicit overrides, and forced-color behavior.
  3. 3Modern Form StylingStyle native controls without discarding their states, platform behavior, or accessibility. The examples style inherited typography, borders, accent-color, validation, disabled controls, focus, autofill, and the risks of appearance: none.
  4. 4CSS User InterfaceControl selection, pointer hit testing, resizing, caret appearance, cursors, and other interaction-facing CSS without hiding usable states. It covers pointer hit testing, selection, resizing, carets, cursors, control feedback, and accessibility boundaries.
All of CSS TutorialNext: CSS Output & Performance