@aardrian@toot.cafe avatar



One hoopy frood who really knows where his towel is.

Searchable on tootfinder: https://tootfinder.ch/

This profile is from a federated server and may be incomplete. Browse more on the original instance.

stefan, to accessibility
@stefan@stefanbohacek.online avatar

The thing that trips me up about making hashtags accessible on social media, by capitalizing each word JustLikeThis, are words like WordPress, or ActivityPub.

I'm guessing these should be all lowercase, so that screen readers don't read these as two separate words?

I'm really starting to see the benefits of allowing spaces in hashtags.

@aardrian@toot.cafe avatar

> I'm guessing these should be all lowercase, so that screen readers don't read these as two separate words?

Nope, those are fine as-is. Screen readers already read them as distinct words. Which is what you want and which you want to retain when you hashtag them.

@aardrian@toot.cafe avatar

I have to admit that on Tumblr I do hashtags like I do here — conjoined words. Easier for me to stick to one approach regardless of platform.


@aardrian@toot.cafe avatar

@jupiter_rowland I would watch the shit out of 4 hours of an owl being superb.

aardrian, to random
@aardrian@toot.cafe avatar

“What You Can Do as a Web Builder on Earth Day”

Not thrilled with “web builder,” but wasn’t sure what else to broadly describe us all.

Suggestions not welcome, since I am not going back to edit it. I have lunch to make.

@aardrian@toot.cafe avatar

@a11yMel Probably not outside the dom/sub community.

sarajw, to accessibility
@sarajw@front-end.social avatar

re selects vs radio button groups:

Just got linked to this at work:

And I'm like, jaw-drop, have I just been coding roving tabindex into a custom select for nothing? Should I just have turned them all into radios instead?

Is this as nice to use and accessible as it sounds, or are there pitfalls/traps here?

@aardrian@toot.cafe avatar

@sarajw Watching the video and I am not sure your question.

Radio buttons are a good choice before ever considering a <select> and almost always before building a custom <select>.

But if that particular author is building something, then my experience tells me his accessibility chops are poor, he gets the basics wrong (or misrepresents them), and he generally does nothing to correct his mistakes.

@aardrian@toot.cafe avatar

@sarajw Fair. I have filed bugs on terrible / wrong advice on the Chrome site before and they have all just shrugged.

Anyway, yeah, radios are incredibly useful, but there is 3.2.2 On Input risk when the author does not warn the user appropriately.

@aardrian@toot.cafe avatar

@sarajw I don’t think there is anything to “tell off” here.

If you have a custom <select> in a design that can be more easily built with a group of radios — and is better for users — then it seems like a no-brainer.

aardrian, to accessibility
@aardrian@toot.cafe avatar

Keep your image alternative text brief, devoid of special characters, empty of URLs, and ideally in one language.

@aardrian@toot.cafe avatar

@alvaromontoro I said “brief,” not “short.”

Further, my own testing has shown that appropriate length to convey something varies by subject, context, and reader. Even if you need something detailed, brevity is still a valid goal (getting rid of superfluous words, phrases, and redundancy).

@aardrian@toot.cafe avatar

@svgeesus Nope.

And I use the term “special characters” because IME, outside those familiar with i18n, most devs / authors equate that not with non-Western-language glyphs, but with emoji, symbols, etc. It’s a useful shorthand for those audiences.

@aardrian@toot.cafe avatar

@svgeesus I changed it to “Special characters (symbols, glyphs in a language other than the page language, etc.) could be skipped.”

The CJK characters are spoken in some combos, the symbols (like the bullets) are not in others.

aardrian, to accessibility
@aardrian@toot.cafe avatar

I know that macOS / Safari displayed the alt text for broken images through Safari 17.0 (visually clipping as necessary).

Testing in macOS 14.4.1 / Safari 17.4.1, however, shows me that alt text is no longer displayed.

Has anyone else noticed this regression?

@aardrian@toot.cafe avatar

@simevidas Ah, good lead. Thanks! That is something I can test.

I did notice this behavior change for even single-word alt though.

@aardrian@toot.cafe avatar


I discovered something novel while testing. Turning on VO while in macOS/Safari makes images with images/alt text CSS generated content resize. I’ll make a video later (after meetings), but ref page:


aardrian, to random
@aardrian@toot.cafe avatar

Wow, I didn't expect high quality stuff from the current team at REDACTED but I also didn’t expect to wish this was written by an LLM instead. At least it might not have possessives instead of plurals.

Also, does this mean they think <form> is “accessible” or native controls are? Because, well, both are wrong (<form> is neither accessible nor inaccessible, and this author has clearly never used a native date picker).

aardrian, to random
@aardrian@toot.cafe avatar

LLM code generators are trained on the same crappy sites that make contrast issues one of the top WCAG violations for decades now. So this is not surprising. Just another encoded bias

ahmadhanif768ali, to technology

At Smart Tech Ideas, we believe in making technology accessible to everyone. Explore our range of user-friendly gadgets today!
Read More: https://smarttechideas.xyz/

@aardrian@toot.cafe avatar

@ahmadhanif768ali Something has eaten your image alt text:

! . g el | S pi & -3 T AT _ ' L) r» A - DEID \ AR . h ) = v ";‘., ;-

vic, to accessibility
@vic@howcyborgs.chat avatar

If your "AI powered color palette generator" has as much trouble understanding color requirements as human designers, then you are doing the opposite of helping.

Now I am promised 2 problems, and 2 conversations where I'm trying to explain what WCAG AAA means and why it matters: one with your Spicy Clippy, and one with an actual human who'll clean up after your gizmo is done.

Hard pass. I reckon my odds are better with the human.
Do better or GTFO.

Got some colors, but they are mostly not passing WCAG AAA. Trying to get the color picker to fix WCAG AAA normal text passing against the first color in the feedback prompt.
aaaand... nope. Still not passing on the revision.

@aardrian@toot.cafe avatar
@aardrian@toot.cafe avatar

Not surprised at that, given it’s not final and they still have to meet WCAG. Which will be even harder for an LLM to find then regurgitate.


siblingpastry, to accessibility
@siblingpastry@mastodon.world avatar

Writing up some best-practice patterns for form controls, and I've assembled this list of native HTML controls that should never be used (because they're not universally supported, and/or their native UI has accessibility problems):

<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="number">
<input type="time">
<input type="week">

Any debate on those? Anything I've missed?

@aardrian@toot.cafe avatar

@siblingpastry @joelanman Agreed — do not make the button disabled because sometimes servers take longer than a femtosecond.

@aardrian@toot.cafe avatar

@siblingpastry &lt;select multiple&gt;, &lt;select size&gt;

Not about support, but about how users do not grok them.

@aardrian@toot.cafe avatar

@siblingpastry Exactly. Typically better covered by those controls.

@aardrian@toot.cafe avatar

@siblingpastry I am not.

And &lt;input type="search"&gt; was also harmless:

yatil, to random
@yatil@yatil.social avatar

“Your free consulting was not to my liking.” – The daily ballad of the web-a11y slack. 🤷‍♂️

@aardrian@toot.cafe avatar

I imagine that, given Slack is primarily a team collaboration tool and not social media platform, that level of blocking is not on their radar. But yeah.


  • All
  • Subscribed
  • Moderated
  • Favorites
  • Leos
  • thenastyranch
  • Backrooms
  • modclub
  • magazineikmin
  • hgfsjryuu7
  • Youngstown
  • slotface
  • Durango
  • everett
  • osvaldo12
  • mdbf
  • kavyap
  • rosin
  • JUstTest
  • DreamBathrooms
  • cisconetworking
  • anitta
  • ethstaker
  • tacticalgear
  • GTA5RPClips
  • khanakhh
  • InstantRegret
  • tester
  • provamag3
  • normalnudes
  • cubers
  • lostlight
  • All magazines