Resources on accessibility, HTML and CSS for designers and developers.
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.