Verbose, rich live regions are a sign an author has not tested with browsers, screen readers, and users. This post has an example that I see too often in the wild.
“On ARIA and Experiential Design”
jamesscholes.com/2025/10/31/on…
Search
Items tagged with: aria
Interesting, when a modal dialog (nested within a `<main>` element or some sectioning content) opens in Chrome it seems to disregard its context, so elements like `<header>` and `<footer>` will have `banner` and `contentinfo` roles as if they were scoped to `<body>`. When opened non-modally, they have `sectionheader` and `sectionfooter` (new ARIA roles + mapping) which means that it is computing the roles based on the dialog’s context.
Safari and Firefox keep the context is both scenarios (i.e. modal and non-modal). I have no idea what is correct. Need to read more.
Anyway, here’s a playground for the bug: knowler.dev/demos/MR4JmQW
“main+header+footer nested in a dialog nested in main with adjacent header+footer” demo by Nathan Knowler
Demonstrates a browser inconsistency for the computed ARIA roles of header + footer within a modal dialog.knowler.dev
👁️ Know your Standards
Updated 20/10/2025
"Regularly people link to or quote from some outdated version of a specification. This can be confusing and detrimental to understanding, if the information is no longer correct or relevant."
#a11y #HTML #ARIA #webStandards
What I Wish Someone Told Me When I Was Getting Into ARIA
smashingmagazine.com/2025/06/w…
by @eric #webdev #webdevelopment #aria #a11y
smashingmagazine.com/2025/06/w…
by @eric #webdev #webdevelopment #aria #a11y
What I Wish Someone Told Me When I Was Getting Into ARIA — Smashing Magazine
[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
⭐️ K.I.S.S. ARIA ⭐️
tarnoff.info/2025/05/05/k-i-s-…
#webdev #webdevelopment #aria #a11y
tarnoff.info/2025/05/05/k-i-s-…
#webdev #webdevelopment #aria #a11y
K.I.S.S. ARIA
The article emphasizes the importance of simplicity in web development, warning against over-engineering and excessive use of ARIA. It highlights that while ARIA can enhance accessibility, improper…Nat Tarnoff
a label and a name walk into a bar
"When is a label also an (accessible) name, when is it not and when is it neither?"
short note: WCAG/ARIA – state of confusion
"If something a person does to a thing causes it to change then the change is reflected in the code"
Interview with Lola Odelola @lolaodelola
"Lola Odelola is a force to be reckoned with. Which is why TetraLogical are delighted to sponsor her work on the W3C Technical Architecture Group (TAG)"
#ARIA #AT #a11y #WebStandards
tetralogical.com/blog/2025/07/…
Interview with Lola Odelola - TetraLogical
Lola Odelola is a force to be reckoned with. Which is why TetraLogical are delighted to sponsor her work on the W3C Technical Architecture Group (TAG).TetraLogical
⚠️ JAWS bug and no apparent support with NVDA when aria-label/labelledby used on table headers
github.com/FreedomScientific/s…
JAWS ignores aria-labelledby on TH · Issue #909 · FreedomScientific/standards-support
Summary Navigate to https://stackblitz.com/edit/stackblitz-starters-bsnuekeb?file=index.html or run locally. Tab to the two buttons in the table'sGitHub
ARIA/HTML relationship Severence
"You could use standard HTML controls without all that stinking DOM darkness and encapsulation fandango fucking up your relationships."
#HTML #ARIA #a11y #WebDev #WebStandards
🫥 @aardrian explains the reasoning behind the only one <main> per page rule.
#HTML #WebStandards #a11y #ARIA
adrianroselli.com/2025/04/main…
Mainlining Mains
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.Adrian Roselli
Should the 'row' role really be necessary for parents of 'gridcell' and other cell role elements?
#ARIA #WebStandards #a11y #Nerdvana
github.com/w3c/aria/issues/240…
Should the 'row' role really be necessary for parents of 'gridcell' and other cell role elements? · Issue #2402 · w3c/aria
Discussed in #2128 Originally posted by turjmner8 February 22, 2024 In general, would it be possible to remove the requirement for role 'gridcell' elements to be contained within role 'row' element...GitHub
Icon-Only-Buttons and Their Impact on Screen Readers htmhell.dev/adventcalendar/202… #webdev #aria #a11y
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers - HTMHell
A collection of bad practices in HTML, copied from real websites.Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers - HTMHell
Don't Use aria-label on Static Text Elements benmyers.dev/blog/dont-use-ari… #webdev #webdevelopment #aria
Don’t Use aria-label on Static Text Elements
Don’t use the aria-label or aria-labelledby attributes on divs, spans, or other elements representing static/noninteractive text-level semantics, unless you’re also updating roles.Ben Myers
HTML Developers: Please Consider – in the year of 2025
@aardrian returns to the Mastophone
#HTML #ARIA #WebDev #WebStandards #a11y
html5accessibility.com/stuff/2…
Great stuff on ARIA usage: "aria-labelledby = self" htmhell.dev/adventcalendar/202… #aria #webdev #a11y
aria-labelledby = self - HTMHell
A collection of bad practices in HTML, copied from real websites.aria-labelledby = self - HTMHell
ARIA in HTML Conformance Checker Bookmarklet
github.com/gezlemon/WAI-ARIA-U…
GitHub - gezlemon/WAI-ARIA-Usage: Bookmarklet to evaluate WAI-ARIA usage
Bookmarklet to evaluate WAI-ARIA usage. Contribute to gezlemon/WAI-ARIA-Usage development by creating an account on GitHub.GitHub
I don't know how many times we have to say this. Last I counted it was 1.2 million times and almost 20 years.
"Developers should always prefer using the correct semantic HTML element over using ARIA."
developer.mozilla.org/en-US/do…
#webdev #javascript #html #webdevelopment #a11y #aria
An overview of accessible web applications and widgets - Accessibility | MDN
Most JavaScript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces. Sliders, menu bars, file list views, and more can be built with a combination of JavaScript, CSS, and HTML.MDN Web Docs
Not so short note on aria-label usage – Big Table Edition
“aria-label is one of a number of secondary methods to label native HTML UI elements. It works particularly well on interactive elements, it also works well on most block level elements old skoolterm that have explicitly or implicitly defined structural roles. It works less well or not at all on text level semantics.”
#aria #HTML #accessibility #WebDev
✍🏽 drugs button popover - updated October 1 2024
"Several people have questioned my reasoning for writing about the use case of popover as a tooltip, no I was not on drugs, at the time of writing I noticed that GitHub was using popover as a tooltip"
Anyone running macOS 15 and want to test to see if this `aria-activedescendant` bug is really fixed?
bugs.webkit.org/show_bug.cgi?i…
It’s not that I don’t trust Apple folks, it’s just that I have learned never to take the “Fixed!” assertion at face value.
#a11y #accessibility #Safari #ARIA
@graeme on using the @w3c #ARIA Design Patterns in relation to conformance with #WCAG, on the @TetraLogical blog:
tetralogical.com/blog/2024/08/…
tetralogical.com/blog/2024/08/…
Design patterns and WCAG - TetraLogical
The ARIA Authoring Practices Guide (APG) contains an extensive range of design patterns aimed at helping developers to create accessible web experiences using WAI-ARIA.TetraLogical
In 2014, Steve Faulkner wrote an article What ARIA does not do. 10 years later, the message is unchanged.
#WebDev #WebDevelopment #ARIA #HTML #DigitalAccessibility #Accessibility #A11y
😑🆕 What ARIA still does not do
"Use of ARIA is a promise you as a developer make to screen reader users."
Why are my live regions not working? by @patrick_h_lauke
'Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by developers misunderstanding how live regions are intended to work.'
#accessibility #HTML #ARIA #WebDev
New post, another in my series of using the right lingo while also carrying the IKEA vibe:
“Be Careful Using ‘Grid’”
adrianroselli.com/2024/07/be-c…
I try to disambiguate between 8 different meanings of the word ‘grid’ in a web dev context.
#HTML #ARIA #CSS #accessibility #a11y
Be Careful Using ‘Grid’
TL;DR: Be careful when using the word grid on its own. Be certain you have chosen the term that accurately describes the pattern you want.Adrian Roselli
aria-label is one of a number of secondary methods to label native HTML UI elements. It works in some scenarios, less well or not at all on others. Get the details on it's proper and effective usage.
#HTML #ARIA #WebDev #WebDevelopment #DigitalAccessibility #Accessibility #A11y
🗒️Not so short note on aria-label usage – Big Table Edition
Updated: 22 May 2024
#HTML #ARIA #WebDev #accessibility
Why are my live regions not working? by @patrick_h_lauke
"Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by developers misunderstanding how live regions are intended to work."
A preview of the WAI-ARIA 1.3 draft craigabbott.co.uk/blog/a-look-… #aria #webdev #a11y
A look at the new WAI-ARIA 1.3 draft
Exploring WAI-ARIA 1.3: A Future look at Web Accessibility.Craig Abbott (craigabbott.co.uk)
🤡 The wrong way to use aria-roledescription to call out someone as a fascist:
html5accessibility.com/stuff/2…
#a11y #webDev #politics #ARIA
[share author='stevef' profile='https://html5accessibility.com/stuff/author/stevef/' avatar='' link='https://html5accessibility.com/stuff/2020/10/06/micro-note-on-aria-roledescription/' posted='2020-10-06 13:28:50' guid='81daf735-8b2361906e7d629a-214181df' message_id='https://html5accessibility.com/stuff/2020/10/06/micro-note-on-aria-roledescription/']aria-roledescription is not a label
It is an alternative expression of the Aural UI of the role of an element.
inappropriately using aria-roledescription may inhibit users’ ability to understand or interact with an element.
ARIA 1.1
The wrong way to use aria-roledescription and call out someone as a fascist:
code
<img aria-roledescription="fascist" src="dt.PNG"
alt="Donald Trump">
This is wrong because you are not identifying the subject of the image as a fascist, you are overwriting the <img> element role so it effectively becomes a <fascist> element. Also, there is no explicit text identification of the subject as a fascist.
A much better way to achieve the aim of identifying a fascist (and not misusing aria-roledescription):
Example of a fascist
code
<figure>
<figcaption>Example of a fascist</figcaption>
<img src="dt.PNG" alt="Donald Trump">
</figure>
You Don't Need ARIA For That [HTMHell 2022] htmhell.dev/adventcalendar/202… #a11y #aria #webdev #html #tips
You Don't Need ARIA For That - HTMHell
A collection of bad practices in HTML, copied from real websites.You Don't Need ARIA For That - HTMHell
Nice to see 17 years of my articles while at TPGi are now collected together:
#accessibility #html #webStandards #ARIA
tpgi.com/author/steve/
#accessibility #html #webStandards #ARIA
tpgi.com/author/steve/
With the help of ChatGPT I have added alt text to images in my slide deck "No Industry for Old Men" from #a11yTO 2023
#a11y #webStandards #HTML #ARIA #Depression #aging #ai
"The more ARIA attributes that were present, the more detected accessibility errors could be expected." webaim.org/projects/million/#a… #webdev #aria #ariaSerious #a11y
What Is ARIA Even For? vimeo.com/478398140 by @heydon #aria #webdev #a11y
What Is ARIA Even For?
In this inaugural episode, I talk about some common pitfalls of using ARIA with the help of Ada Lovelace, a goat, and a dinosaur with a for a head. Thanks to everyone…Vimeo
"Home pages with ARIA present averaged 68.6% more detected errors than those without ARIA" webaim.org/projects/million/#a… #webdev #aria #ariaSerious #a11y
The aria-modal attribute is just terrific. Now we need TalkBack and Narrator to support it.
The spec: w3.org/TR/wai-aria-1.1/#aria-m…
Support: a11ysupport.io/tech/aria/aria-…
#aria #webdev #modals #dialogs
Accessible Rich Internet Applications (WAI-ARIA) 1.1
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.www.w3.org
Related, my HTMHell article "You Don't Need ARIA For That" htmhell.dev/adventcalendar/202… #aria #webdev #a11y #html
You Don't Need ARIA For That - HTMHell
A collection of bad practices in HTML, copied from real websites.You Don't Need ARIA For That - HTMHell