Articles on accessibility, HTML and CSS
Dark mode checklist
A practical checklist for designing, developing and testing dark mode, including colour choices, contrast, images, CSS colour schemes, toggles and forced colours.
Understanding readonly and aria-readonly
The readonly and aria-readonly attributes both communicate that a value cannot be changed, but only one of them changes behaviour.
Understanding aria-controls
A plain-English explainer on aria-controls: What it does, when it is useful, and current support.
Understanding aria-haspopup
A plain-English explainer on aria-haspopup: what it does and the seven values it can take.
Understanding aria-current
A plain-English explainer on aria-current: what it does and the seven values it can take.
Understanding aria-posinset and aria-setsize
A plain-English explainer on aria-posinset and aria-setsize: what they do, which roles support them, and when you actually need them.
Understanding aria-level
A quick explanation of aria-level - including three possible real-world examples.
Understanding aria-pressed
A quick explanation of aria-pressed - including an example, when it can be used, and when it should not be used.
Understanding aria-valuemin and aria-valuemax
This article explains aria-valuemin and aria-valuemax in plain language. It shows how assistive technology can understand the boundaries of a range control.
Understanding aria-valuetext
This article explains aria-valuetext in plain language, building on aria-valuenow to show how a numeric value can be given a more useful text description for assistive technology.
Understanding aria-valuenow
This article explains aria-valuenow in plain language, starting with a familiar native range input and then showing what changes when developers build their own custom slider.
Understanding aria-details
This article explains aria-details in plain language, showing how it connects elements on a page to additional content, how that content is exposed to screen reader users, and how it differs from aria-describedby.
Understanding aria-roledescription
This article explains aria-roledescription in plain language, starting with how native and ARIA roles work, then showing how it can override how a role is announced, without creating a new role.
Understanding aria-activedescendant
This article explains aria-activedescendant in plain language, starting with a familiar native select and then showing what changes when developers build their own custom version.
A bookmarklet highlighting mismatches between the visible label and accessible name
A bookmarklet that highlights accessible names for links that match, partially match or mismatch.
Using the browser console for accessibility testing - Part 2
Build on browser-based accessibility testing techniques using the console. This article explores additional JavaScript snippets that help inspect accessible names, descriptions, roles, states and properties directly in the browser.
A bookmarklet highlighting roles that must never have author-provided names
A bookmarklet that highlights ARIA roles where author-provided accessible names are forbidden. A practical way to find naming errors and better understand ARIA naming rules.
Where can aria-label and aria-labelledby be used for naming elements?
A simple explanation of how aria-label and aria-labelledby work, where they can be used, and why some elements and roles do not support accessible naming.
Editable tables: choosing the right approach
A practical guide to the three common approaches to editable tables, when to use each, and their accessibility trade-offs.
Three accessibility assumptions
Three accessibility assumptions about the DOM, accessibility trees, and screen reader output that shape how we test, debug, and interpret results.
What is the minimum markup needed to create a modal?
A practical look at the minimum HTML needed to create a modal dialog, with an optional enhancement based on real user testing.
Do screen readers announce “bullet” when a list uses list-style: none?
An explanation of why list-style: none removes bullet announcements in screen readers by tracing browser, accessibility tree, and screen reader behaviour.
Is aria-label allowed on static elements?
An examination of how aria-label behaves on static elements across browsers, and why real-world support differs from common assumptions.
How can you tell what's allowed inside each HTML element?
A practical guide to reading the HTML Living Standard to check where elements can be used and what they are allowed to contain.
HTML content categories
HTML content categories define where elements can appear and what they’re allowed to contain with a clear, rules-based approach that improves validity, accessibility, and maintainability.
People with reduced vision: technology settings and possible impacts
How people with low vision adjust system settings, browsers, and apps. Six key categories designers and developers should understand.
Tests for CSS generated content alternative text
Tests to determine how CSS generated content alternative text is exposed to assistive technologies.
Eight quick things to remember when using aria-owns
Eight quick things to rememer when using aria-owns including what it is, when to use it and when not to use it.
Why role="button" on a <button> does nothing
Adding role="button" to a native <button> looks harmless, but it doesn’t change anything. This article explains why that ARIA role is ignored and how this behaviour is defined in the specification.
Did you know some ARIA roles remove child semantics?
A series of tests to determine how hidden content is used by aria-labelledby and aria-describedby.
Tests for aria-labelledby and aria-describedby
A series of tests to determine how hidden content is used by aria-labelledby and aria-describedby.
More about screen reader speech queues
This article explores a single example to show why they don’t always behave the way you might expect. In fact, we are going to look at one specific vehicle type - motor scooters.
How aria-labelledby really works
How aria-labelledby works, including naming precedence, multiple references, hidden content, broken IDs, and shadow DOM boundaries.
Does Chrome get the <header> element wrong?
When a <header> sits inside another landmark, the ARIA in HTML spec says its implicit role becomes generic — yet Chrome exposes it as sectionHeader in the accessibility tree. At first glance, that feels like a spec violation. But is it?
What does “hidden” actually mean in Accessible Name computation?
A plain English translation of the specification, so you can clearly see which elements are treated as hidden and which ones still count toward the accessible name.
Using the browser console for accessibility testing
Learn how to use the browser console to highlight headings, links, buttons, images, landmarks, and other accessibility features with simple JavaScript snippets.
How does the Shadow DOM appear in the accessibility tree?
Browsers flatten the shadow tree when building the accessibility tree. Flattening removes the accessibility boundary of the shadow root and exposes the internal nodes as if they were normal children in the accessibility tree, not the DOM tree.
What is an “accumulated text bucket”?
Learn how browsers build accessible names using the idea of an accumulated text bucket, and why some naming rules empty and replace it.
Did you know your browser has two accessibility trees?
This article traces the full lifecycle of an accessibility event. From the moment the DOM changes, through Blink’s internal systems, through its internal accessibility tree, and finally back out into the BrowserAccessibility tree that screen readers query.
How Chrome builds the accessibility tree - start to finish
We are often told that the browser builds its accessibility tree from the DOM, but what does that actually involve?
Understanding screen reader speech queues
This article explores the concept of utterances and how the screen reader speech queue works.
What is an AXEvent?
An AXEvent is a notification generated by the browser and sent to assistive technologies when something meaningful changes.
What happens when an event occurs? — the quick answer
This is the short version that explains what happens inside the browser and what happens outside the browser when a user triggers an event.
What are DOM mutations?
DOM mutations are any events that change this tree. These mutations can happen with or without JavaScript.
What really happens when a user clicks an accordion button?
An exploration of the entire browser process once a button has been clicked.
End-to-end browser and accessibility event architecture
This diagram maps that entire path and shows how user input, JavaScript, layout, accessibility events, and assistive technology output move through the browser in sequence.
Understanding aria-live timing: a two-Layer model
Two separate systems define when aria-live events are announced.
Layers that affect assistive technology output
A quick review of layers that can affect how assistive technologies announce information.
A simple, styled checkbox
A simple method for styling checkboxes without resorting to non-native solutions.
Chat GPT's accessible dropdown
How good is Chat GPT's accessible dropdown suggestion?
Methods of applying accessible descriptions to elements
This article explores a range of different methods that can be used to generate an accessible descriptions for elements.
Methods of applying accessible names to elements
This article explores a range of different methods that can be used to generate an accessible names for elements.
All 22 input types
Can you list all of the 22 different input types without having to resort to using Google?
The shape-shifting "a" element
A look at the strange and wonderful <a> element and which elements are allowed as child or descendant elements.
The <label> element
Let's take a deep dive into the <label> element, including which elements need labelling, explicit vs implicit labelling and more.
The hidden and aria-hidden attributes
Do you know the difference between the hidden and aria-hidden attributes?
Concatenated accessible names
Did you know that the <button> element's content, and the content of its decendants may be concatenated to create an accessible name.
Three quick tips for accessibility and HTML5
A look at HTML through the lense of the <section> element, summary attribute and <a> element.
Ideal line length in ems
What is the optimal line length for your body copy? How many characters should be presented per line?
A simple (and very rough) responsive table solution
Is there a simple method for creating responsive tables, without the need to radicially alter the table content or layout?
Using the required attribute with the select element
Did you know there are some specific rules around how the required attribute can be applied with the select element?
Anonymous boxes
What are anonymous boxes in HTML? And what's the difference between anonymous block boxes and anonymous inline boxes?
<iframe> scrollbars and borders in HTML5
Are you aware that a range of key attributes have now been deprecated from use within the <iframe>?
CSS font stacks
Font stacks are about creating a relevant and comprehensive list of fall-back fonts - based on aspect ratio, platforms, operating systems.
Sign in, register, join?
Which of the following phrases is better for users? Join, sign in or register?
Aligning inline images with the vertical-align property
Let's look at all the ways that images can be vertically aligned within paragraphs.
Checked inputs and attribute minimization
Are you aware that in XHTML, you cannot use attribute minimization? Let's look at the issue!
Anatomy of a comment
What are all the components for a comment? Author, date, avatar, permalink? There's so much more!
"Dumbing down" vs "Writing more intelligently"
Have you ever heard someone say that they need to dumb down their content? We need to change the way we think!
Styling abbreviations
Have you ever wanted to learn how to markup and style abbreviations via the <abbr> element? This article is for you!
Let go and allow users to control their own experience
Slides from my presentation at Webstock on Friday 26 May 2006. Explore how we can let go and allow users to take control!
About structural labels
Structural labels are descriptive headings used to indicate the main components of a web page. They are designed to improve accessibility.
Simple, accessible external links
Did you know that we should always clearly identify the target of each link - especially when they are links to exnternal sites!
Page source order and accessibility
Slides from a presentation by Roger Hudson and Russ Weakley at OZeWAI 2005.
A quick and dirty introduction to accessibility
Accessibility is about building web experiences that can be navigated, read and understood by everyone, regardless of disability, location, experience or technology.
Web standards checklist
An incredibly detailed web standards checklist for designers, developers and testers.
The benefits of Web Standards to your visitors, your clients and you!
Lets explore the benefits of web standards - including valid, sematic and accessible markup, as well as who benefits most from these practices.
Definition lists - misused or misunderstood?
Everything you ever wanted to know about marking up or styling the definition list, including markup and a wide range of styling options.
CSS centering - fun for all!
How do you center a containing block on a page using CSS? Let's look at main methods for liquid and fixed width layouts.
Ideal line length for content
Is there an ideal line length for content? We need to understand how the human eye works in order to get to the bottom of this question!
Styling the <hr> element
A quick look at two methods for stying the horizontal rule element!