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
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
Für den Misskey Fork #Sharkey, mit dem ich ganz zufrieden bin, nutze ich die App #Aria, @aria_app@misskey.io
Ich glaub, ich hab noch keine andere #FediVerse App gefunden die so gut zu meinen Bedürfnissen passt und so umfangreich konfigurierbar ist.
Würde mich interessieren, ob sie auch für #blinde Menschen nutzbar ist...
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…
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
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
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
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."
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>
A collection of bad practices in HTML, copied from real websites.You Don't Need ARIA For That - HTMHell
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
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
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
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
A collection of bad practices in HTML, copied from real websites.You Don't Need ARIA For That - HTMHell
ARIA roles and attributes can make your website more accessible, if you know what you're doing.www.oidaisdes.org
Usually. I originally titled this InacCSS-onlyible. I even made this typographically, er, distinct image. Then I realized it was silly and will instead use the neologism in a talk so I can hear the groans IRL.Adrian Roselli
The CSS3 logo as a head atop a torso with its arms folded across its chest. I am a big proponent of the First Rule of ARIA (don’t use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that…Adrian Roselli
ARIA roles and attributes can make your website more accessible, if you know what you're doing.www.oidaisdes.org
A collection of bad practices in HTML, copied from real websites.Meaningful labels using ARIA – or not. - HTMHell
A collection of bad practices in HTML, copied from real websites.You Don't Need ARIA For That - HTMHell
The omnibus guide to understanding and making select components and comboboxesSarah Higley
This specification defines the authoring rules (author conformance requirements) for the use of Accessible Rich Internet Applications (WAI-ARIA) 1.2 and Digital Publishing WAI-ARIA Module 1.0 attributes on [HTML] elements.www.w3.org