Léonie Watson's personal website. Writing about the web, accessibility, and other things.
- Public lists
-
btconf 2025 speakers
- Fetched
People often presume I would jump at the chance to be able to see again. The fact of the matter is that I really don't know whether I would or not, because there is more to it than you might think.
I lost my sight at the turn of the century, over the course of about 12 month...
Playing with the Accessibility Object Model (AOM)
Updated on 27th February 2019: The Accessibility Object Model (AOM) specification has been updated and accessibleNode has been dropped. Read the AOM explainer for more information.
The Accessibility Object Model (AOM) is an experimental JavaScript API that enables developers...
Accessible SVG line graphs
SVG is often used for data visualisation, but because SVG lacks the semantics to express structures like bar charts, line graphs, and scatter plots, the content is difficult for screen reader users to interpret. The solution is to use the technique for creating accessible SV...
Accessible SVG tables
SVG has no native semantics for representing structures like tables, but ARIA1.1 introduces a number of roles that can be used to polyfill the necessary semantic information.
If you're using HTML, use the relevant HTML elements to create tables. The table, thead, tfooter, tb...
Using a custom domain with multiple Github repositories
It's possible to use a single custom domain with multiple Github repositories that use Github Pages. The available documentation makes it seem more complicated than it is, so this is an effort to provide some more simple instructions.
This post assumes you have a custom doma...
Quick guide to the ARIA specifications
ARIA (Accessible Rich Internet Applications) is a suite of specifications from the W3C. Knowing which specification has the information you need isn't always obvious, so this post briefly introduces each specification and where it fits into the overall ARIA landscape.
ARIA
T...
Using the aria-current attribute
It is common on the web for the current thing in a collection to be highlighted visually, but providing an alternative for screen reader users has often involved something of a hack. The aria-current attribute is intended to solve this problem.
Common patterns
There are seve...
Accessible emoji
Emoji help us communicate complex ideas very easily. When used in native apps and applications, emoji are reasonably accessible to screen readers, but on the web we need to do a little more to make sure everyone can understand emoji.
An emoji is an ideogram (a picture that r...
Using Narrator dev mode
Narrator is the integrated screen reader for Windows 10. The August 2nd Windows 10 Anniversary update introduces several new Narrator features, including a Narrator mode designed specifically for developers.
When you develop accessible apps, webapps or websites, one of the c...
And yet somehow we’re all still here
When my friend Tim Norris posted this to Facebook recently, it made me stop and think. One of those "thinks" was that his words were worth sharing, so here (with Tim's permission) they are...
The earliest "historical" thing I can vaguely remember was the tail end of the Vie...
Understanding semantics
Эта статья на русском
The word “semantic” is regularly used in the context of web development. We talk about “semantic code” and the “semantics” of a given element, but what do we really mean by it, and why is it important?
The word semantic comes from the French sémantique,...
Proposed ARIA password role
Let me ask you a question: Would you enter your password into a password field, if you couldn’t be confident it was protected from being viewed by other people? The answer is probably not, but a proposed ARIA role could put screen reader users in exactly this position.
When ...
Using the ARIA application role
The ARIA application role changes the way screen readers interact with web content. Several good articles explain (rightly) why the application role should be used with caution, but this post looks at a use case where the application role is used to good effect.
Screen reade...
Flexbox & the keyboard navigation disconnect
CSS Flexbox can create a disconnect between the DOM order and visual presentation of content, causing keyboard navigation to break. For this reason, the CSS Flexible Box Layout module warns against resequencing content logic, but asking authors not to use flexbox in this way...
Mulled cider
This is one of my favourite winter things. You can make it at any time of year of course, but there is something about the smell of apples and spices that makes me all warm and fuzzy. You might put that down to the cider, I couldn't possibly comment...
Information
Makes: Ei...
Adrian Rosellli's Strawberry & balsamic sorbet
The 12th in a series of posts that bring together the two sides of my blog: Food and technology. I’ve asked the great and the good from the web standards community to share their favourite recipes. This versatile dessert is from Adrian Roselli.
Information
Makes: Two quarts...
Using the aria-owns attribute
When a parent/child relationship is evident on-screen, but it isn’t represented in the DOM, the aria-owns attribute can be used to establish that relationship in the accessibility layer.
The parent/child relationship is a cornerstone of HTML structure. Every element in an HT...
Losing sight
Deutsche Übersetzung
I don’t know who will read this. I don’t even know why it has suddenly become important to write it, but for whatever it’s worth, this is an account of an event in my life that changed everything.
I lost my sight over the course of 12 months from late 19...
Fixing the Jaws cursor in Firefox
When keyboard access doesn't work, the Jaws screen reader makes it possible to explore content using simulated mouse movements instead. This function is broken in Firefox, due to changes made (some time ago) in its graphics rendering engine. This post describes a workaround ...
Using the Web Speech API to simulate CSS Speech support
Updated on 4th February 2018.
The CSS Speech properties are intended to give content aural style, in the same way other CSS properties give content visual style. The CSS Speech module is largely unsupported in browsers, but the Web Speech API can be used to demonstrate somet...
Crème brulée
When a friend generously gave me some saffron recently, it presented me with an opportunity to make crème brulée with a little extra magic in it. crème brulée is ridiculously easy to make, exudes classic style, and even has an element of danger about it... so even if (like m...
Time to revisit accesskey?
Many websites provide keyboard shortcuts for common tasks. Keyboard shortcuts are useful things to have, but the way in which they’re provided is often problematic for Windows screen reader users.
Websites like Facebook, Twitter and Google provide keyboard shortcuts for repe...
Accessibility support for CSS generated content
The CSS before/after pseudo-selectors can be used to insert content into a page. In some situations this technique is a useful thing to do, but how do browsers and screen readers handle the generated content?
Quick recap: The before/after selectors insert content either befo...
Using Schema.org with Microdata
Search engines have ways of extracting meaning from content, but they're prone to error because information on the webb can be presented in so many different ways. Marking up information so it's easier for search engines to index is a good thing to do, and thanks to the voca...
Accessible timeout notifications
When a web application has a session timeout, it’s a good idea to warn users about the impending timeout and give them the opportunity to do something about it. It’s therefore important to make sure that all users know when the warning notification appears.
When you set the ...
Henny Swan's 5 spice beef 5 ways
The 11th in a series of posts that bring together the two sides of my blog: Food and technology. I’ve asked the great and the good from the web standards community to share their favourite recipes. This bundle of awesome Chinese dishes is from Henny Swan.
Information
Makes:...
Using the aria-controls attribute
There are a handful of ARIA1.0 attributes that can be used to indicate relationships between elements, when those relationships can’t be ascertained easily from the DOM. One such attribute is aria-controls.
The aria-controls attribute creates a cause and effect relationship....
W3C TPAC: Lightning talks
TPAC is the annual gathering of the W3C. It was held at the Santa Clara Marriott between 27th and 31st October 2014.
It was the week that HTML5 became a W3C Recommendation, the week we celebrated the 25th anniversary of the web, and 20 years of the W3C itself.
It was also a ...
Scrambled eggs on toast
Breakfast at the weekend can be delightfully indulgent, and sometimes the simple things are the most tempting of all. Throw in some interesting company, a little conversation and this uncomplicated breakfast, and that's my idea of heaven on a Sunday.
Information
Makes: Two ...
Understanding screen reader interaction modes
Traduction française
Windows screen readers have multiple modes of interaction, and depending on the task being carried out they’ll automatically switch to the most appropriate mode. This post explains why Windows screen readers behave the way they do, and how your code can ...