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

#HTML #ARIA #accessibility

“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
#Accessibility #html #aria

#a11y #html #aria #webstandards

#a11y #webdev #aria #webdevelopment @Eric

#a11y #webdev #aria #webdevelopment

#Accessibility #html #aria

#html #aria #wcag

#a11y #aria #webstandards #at @lola

#a11y #html #aria

#a11y #webdev #html #aria #webstandards

#a11y #html #aria #webstandards @Adrian Roselli

#a11y #aria #webstandards #nerdvana

#a11y #webdev #aria

#webdev #aria #webdevelopment

#a11y #webdev #aria

#html #aria #checker

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
#a11y #webdev #html #aria #javascript #webdevelopment

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

html5accessibility.com/stuff/2…

Not so short note on aria-label usage – Big Table Edition – HTML Accessibility

html5accessibility.com
#Accessibility #webdev #html #aria

✍🏽 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"

#accessibility #HTML #ARIA

html5accessibility.com/stuff/2…

#Accessibility #html #aria

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

#a11y #Accessibility #aria #safari

#aria #wcag @Graeme Coleman @World Wide Web Consortium @TetraLogical

#a11y #Accessibility #webdev #html #aria #webdevelopment #digitalaccessibility

#a11y #webdev #html #aria

#Accessibility #webdev #html #aria @Patrick H. Lauke

#a11y #Accessibility #html #aria #css

#a11y #Accessibility #webdev #html #aria #webdevelopment #digitalaccessibility

#Accessibility #webdev #html #aria

#a11y #webdev #html #aria @Patrick H. Lauke

#a11y #webdev #aria

🤡 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>

html5accessibility.com/stuff/2…

#a11y #webdev #politics #aria

#a11y #webdev #html #aria #tips

#Accessibility #html #aria #webstandards

#a11y #html #AI #aria #aging #depression #webstandards #a11yto

#a11y #webdev #aria #ariaserious

#a11y #webdev #aria @Large Heydon Collider

#a11y #webdev #aria #ariaserious

#webdev #aria #modals #dialogs

#a11y #webdev #html #aria

#a11y #webdev #aria

⇧