I built a bot that features two HTML elements every day: @DailyHTML

I thought this might be interesting to all #a11y #Accessibility people. If you find it usefull, follow, repost, share 😊

(Cc @SteveFaulkner @tink @aardrian @patrick_h_lauke @matuzo @yatil @kc @marcus @jkphl @ginader @webaim @NVAccess @wai @heydon @hdv @jensimmons …)

I am again reminding y’all not to auto-fail regions / landmarks that have no accName:
https://adrianroselli.com/2024/06/maybe-dont-name-that-landmark.html

I am also begging y’all to stop using `aria-label`:
• https://adrianroselli.com/2019/11/aria-label-does-not-translate.html
• https://ericwbailey.website/published/aria-label-is-a-code-smell/

If you aren’t testing in screen readers (not just VoiceOver or ChromeVox) then please just stop already.

#accessibility #a11y

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>

https://html5accessibility.com/stuff/2020/10/06/micro-note-on-aria-roledescription/