Sometimes you run into a main landmark where you don’t expect one. Like Main Street USA in Hong Kong Disney. So you grab a snack in a diner that serves no hot dogs. You can buy little American flags in the heart of Hong Kong and clothes telling Hong Kong…| Adrian Roselli
In my post Brief Note on Figure and Figcaption Support I demonstrate how, when encountering a figure with a screen reader, you won’t hear everything announced at once: No screen reader combo treats the caption as the accessible name nor accessible description, not even for an image that lacks one.…| Adrian Roselli
What does “built in accessibility” actually mean for browsers that support popover?| Hidde's blog
Open UI| open-ui.org
[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is an inevitability when working on web accessibility. That said, it’s everyone’s first time learning about ARIA at some point.| Smashing Magazine
It’s weird to me that after I urged everyone not to disable form controls, a bunch of them decided that making them read-only was somehow better. But here we are. What’s in the box? Photo by Michael Heiss, no edits, CC BY-NC-SA 2.0. HTML The readonly attribute is only allowed…| Adrian Roselli
I am not going to dive into the details of and . Go read Scott’s 2019 post How do you figure? for an overview. That said, since Scott’s post there has been movement on the AAPI mapping (partly by Scott). Specifically, the element should not provide the accName…| Adrian Roselli
The [LocatorAssertions] class provides assertion methods that can be used to make assertions about the [Locator] state in the tests.| playwright.dev
The [LocatorAssertions] class provides assertion methods that can be used to make assertions about the [Locator] state in the tests.| playwright.dev
In 2017 I wrote Tweaking Text Level Styles (terrible name in retrospect) and I made regular updates over the years. Stop reading it. Remove it from your bookmarks. Unlink it from your posts. Print it onto paper and then burn it. Demo Wrap-up The conclusions and…| Adrian Roselli
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
Callouts play a dominant role in technical writing. What are folks doing with their markup semantics (a.k.a. admonitions) & why isn’t there a native option? Maybe we can propose one.| toast.al
1. Introduction| drafts.csswg.org
If you have little experience with ARIA, screen readers, or testing in general, understanding accessible descriptions can be trickier than understanding accessible names (already confusing for many). I have written explanations so many times for clients and in fora that I opted to put this together so I maybe never…| Adrian Roselli
The [LocatorAssertions] class provides assertion methods that can be used to make assertions about the [Locator] state in the tests.| playwright.dev
Visual Studio Code extensions (plug-in) API Reference.| code.visualstudio.com
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
TL;DR: Description list support continues to be generally good (with VoiceOver still the outlier), even if you may not like how it is supported. For background, the has existed since HTML+, or 1993, when it was called definition list. In December 2022 I wrote Brief Note on Description List…| Adrian Roselli
This post is about exposing field errors programmatically. I have already shared some opinions (such as a caution about displaying messages below fields or avoiding default browser field validation), but this post dives into using ARIA to convey them to screen reader users. With fields that produce error messages on…| Adrian Roselli
Does what it says on the tin. Uses and with a bit of ARIA to create an accordion that works without JavaScript while working better with JavaScript. Mostly. See the Pen Progressively Enhanced HTML Accordion by Adrian Roselli (@aardrian) on CodePen. Visit the standalone version for testing or…| Adrian Roselli
Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too Under-Engineered Text Boxen Under-Engineered Responsive Tables Under-Engineered Select Menus Under-Engineered Dependency Questions This post is not about| Adrian Roselli
3 January 2025: This post is out of date. Read my post Updated Brief Note on Description List Support for the most recent results of testing. TL;DR: Description list support is generally good (with Safari being the outlier), even if you may not like how it is supported. This post…| Adrian Roselli
Who, what, when, where, and why is aria-activedescendant. Or: two focus outlines in a trenchcoat approach you in a dark alley and offer you a combobox.| Sarah Higley
Separation of concerns is a great principle, but you're drawing the line in the wrong place.| Unplanned Obsolescence
Learn about the different global attributes along with attributes specific to particular HTML elements.| web.dev
The ARIA tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.| MDN Web Docs
The aria-selected attribute indicates the current "selected" state of various widgets.| MDN Web Docs
The aria-multiselectable attribute indicates that the user may select more than one item from the current selectable descendants.| MDN Web Docs
This document describes how user agents determine the names and descriptions of accessible objects from web content languages. This information is in turn exposed through accessibility APIs so that assistive technologies can identify these objects and present their names or descriptions to users. Documenting the algorithm through which names and descriptions are to be determined promotes interoperable exposure of these properties among different accessibility APIs and helps to ensure that thi...| w3c.github.io
Shadow DOM is a kind of retcon for the web. As I’ve written in the past, shadow DOM upends a lot of developer expectations and invalidates many tried-and-true techniques that worked fine in t…| Read the Tea Leaves
InfraUnicode and Encoding| html.spec.whatwg.org
I have spent a few years banging on about ensuring scrolling areas on a page are accessible to keyboard-only users. This is partly because the term “keyboard” maps to other input types that we distill to “keyboard” for ease of reference (speech input, sip-and-puff, on-screen keyboards, scanning software, etc.). When…| Adrian Roselli
Shadow DOM promises to allow developers to create more maintainable, cross-framework components, but there is an as-yet unsolved conundrum for accessibility.| alice.pages.igalia.com
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
The global aria-controls property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.| MDN Web Docs
In this article, Olushuyi explores a mental model that helps you decide between the `` and `` elements when writing documents. You will explore how grouping content affects accessibility and how you can make it all count for users.| Smashing Magazine
HTML| html.spec.whatwg.org
How do we know which patterns are good, better, best when it comes to accessibility? Is it better to use an established pattern/library or create new ones? With the myriad of choices available, we can quickly become caught up in a web of confusion on this topic.| cariefisher.com
So long as they’re used appropriately, landmarks can be a useful structural mechanism to help people who use screen readers orient themselves to important ar...| www.scottohara.me
1. Introduction| www.w3.org
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
HTML| html.spec.whatwg.org
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
Accordion| davatron5000.github.io
Liking an idea does not mean the idea is exempt from criticism…| ericwbailey.website
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
As of my 28 January 2024 update at the end of this post, aria-label auto-translation support is seemingly as spotty as when I first wrote this post. It does, actually. Sometimes. One of the big risks of using ARIA to define text content is that it often gets overlooked in…| Adrian Roselli
HTML| html.spec.whatwg.org
HTML: The Living Standard| html.spec.whatwg.org
The beginning of a series on interactive grid accessibility, starting with a look at when you need a grid, a table, or neither.| Sarah Higley
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).| Web Accessibility Initiative (WAI)
Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user ...| w3c.github.io
I've already written about the and elements, but there is more to tell, and there have been some changes since I la...| www.scottohara.me
