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