Resources on accessibility, HTML and CSS
HTML Content Model Categories
An exploration of the HTML content types including Flow, Phrasing, Sectioning, Heading and Interactive content.
HTML elements and accessible names
A chart listing all HTML elements and the roles and possible accessible names available via Chrome's accessibility tree.
HTML test cases
A series of HTML test cases to determine how they are announced in different screen reader / browser combinations.
Max Design Slides
A wide range of CSS Slide Decks for self-paced leaarning - from absolute beginner to advanced.
Form control states
A diagram showing how to systemise component states (visited, focus, active, checked/selected, open and more) when building design systems.
ARIA Role Categories
A chart listing all ARIA roles, including changes to the different categories from ARIA 1.0, 1.1 and 1.2.
ARIA States and Properties
A chart listing all ARIA states and properties, including changes to the different categories from ARIA 1.0, 1.1 and 1.2.
Segmented Control
This example demonstrates how to convert a semantic radio group into a segmented control, or button group.
Simplex Component Library
A simple, flexible component library that can be used as a base for complex websites and applications.
Date picker example
The example demonstrates how to create an accessible date picker using standard form-related elements.
The srcset attribute
This example shows how to determine if devices will display different images based on their device-pixel-ratio - using the srcset attribute.
Floating label
This example explores how to make accessible floating labels - labels that slide up and out of the way of inputs.
Loading button
This example demonstrates how to mark and and style a button when in a loading state - including loading animation.
Checkbox and radio button switch
The example demonstrates how to style checkbox and radio button elements to look like on/off switches.
Styling the aria-label attribute to act like a popover
A quick and dirty demonstration showing how to display the aria-label information of a button on hover or when the element receives focus.