@ben@a11y.info
@ben@a11y.info avatar

ben

@ben@a11y.info

Accessibility person and human T-rex. In my Great Gonzo era.

(Searchable)

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

aardrian, to random
@aardrian@toot.cafe avatar

Rough “toggle” guidelines:

  1. Use <button aria-pressed> for immediate effect and when JS is known to exist:
    https://adrianroselli.com/2019/08/under-engineered-toggles-too.html

  2. Use a checkbox for submissions and when maybe no JS (PE):
    https://adrianroselli.com/2019/03/under-engineered-toggles.html

  3. Use either of above with role="switch" only when it will never have an indeterminate state:
    https://adrianroselli.com/2021/10/switch-role-support.html

  4. Avoid Apple’s proposed switch attribute for now (anchor link):
    https://adrianroselli.com/2021/10/switch-role-support.html#Update02

Adjust as appropriate.

cc @Lukew

ben,
@ben@a11y.info avatar

@aardrian In case you hadn't seen, Luke had asked the same question on Mastodon as well: https://toot.wales/@Lukew/112532207640641722

geoff, to random
@geoff@front-end.social avatar

Struggling With AI Iconography for UI Design https://geoffgraham.me/struggling-with-ai-iconography-for-ui-design/

ben,
@ben@a11y.info avatar

@geoff Ha, I ran into this problem when picking the icon I wanted to use for my “generative AI” tag on https://benmyers.dev/tags/ - I ultimately landed on a little robot head with a speech bubble.

One issue I found was that a lot of the icons that focused on communicating some sort of cybernetic cognition felt like they really oversold the capabilities of the tooling in a way that I really didn't feel like contributing to.

ben, to random
@ben@a11y.info avatar

Who has two thumbs and just reached RSS zero? Not me, I have no thumbs.

But who has no thumbs and just reached RSS zero? Me, and I hereby declare this to be the end of content. No more blogposts, please.

ben, to random
@ben@a11y.info avatar

Tornado warnings, hail, and flash floods, oh my!

(We are all safe right now)

zersiax, to random
@zersiax@cupoftea.social avatar

hey @ben someone pointed me at your showmy.chat project which looks amazing :) I just had a comment, maybe this is in the more extensive instructions already, but the quickstart currently doesn't indicate how wide/high the chat overlay should be :) THis might be somewhat subjective but a bit of guidance would be really helpful for screen reader users who have a hard time figuring out if text is going to overflow/get cropped :)

ben,
@ben@a11y.info avatar

@zersiax This might have been our mutual friend Liz!

But this is a great callout — I can get some info added.

It is subjective, which is why I probably avoided giving explicit advice, but:

  • The themes have all been designed responsively, so you shouldn't(?) need to worry about overflow.

  • It's in the extensive docs, not the homepage (worth changing!), but most themes look best around 600px wide and 600px tall, with plenty of flexibility in either direction.

ben,
@ben@a11y.info avatar

@zersiax Please let me know if you have other questions, or want to hop on a call to troubleshoot!

siblingpastry, (edited ) to keyboard
@siblingpastry@mastodon.world avatar

I've been playing around with keyboard scrolling of overflow regions, and I was interested to note how Firefox's native behavior doesn't expose any additional semantics -- i.e., it doesn't apply a role or accessible name when the scrolling region becomes focusable.

And I think that's the right thing to do -- that our standard workaround of including role="region" and aria-label or aria-labelledby (along with tabindex="0") creates unnecessary verbosity.

(1/3)

ben,
@ben@a11y.info avatar

@siblingpastry @cwilcox808 I spent a little while the other day trying to find this out for a similar script on my own site, and yeah, I couldn't find anything either.

Even the elem.tabIndex, which is implicitly set to 0 for focusable elements like links, isn't set as such for scrollable regions in Firefox.

ben, to random
@ben@a11y.info avatar

Do we do changelogs for blog redesigns? If not, we do now:

benmyers.dev v3, now with:

  • More polish
  • Dark mode (user-toggleable!)
  • Even more purple 💜

I'd love it if you gave it a look and let me know what you think!
https://benmyers.dev/

ben, to random
@ben@a11y.info avatar

Working on a change to my blog to feature some articles a bit more prominently.

For those who've read my posts, what are 2–4 articles of mine that you'd consider some of my better or more quintessential ones?

ben,
@ben@a11y.info avatar

@sarajw Are you thinking of https://benmyers.dev/blog/native-visually-hidden/ ?

ben, to accessibility
@ben@a11y.info avatar

This Global Accessibility Awareness Day is a wonderful opportunity to read (or reread!) this incredible essay on disability dongles from Liz Jackson, @alexhaagaard, and @FractalEcho.
https://blog.castac.org/2022/04/disability-dongle/

ben, to accessibility
@ben@a11y.info avatar

There was an interesting #accessibility question in the #11tyConf chat I wanted to surface.

Say your site styles are responding to the prefers-contrast: less media query. Must they still conform to the relevant 4.5:1 and 3:1 contrast ratios when the media query is active?

ben,
@ben@a11y.info avatar

@sarajw I miiiight have made use of my work Teams to ask @scottohara. His take was that since prefers-contrast is an explicit user choice, then no, WCAG wouldn't require you to meet those contrast thresholds when the media query is active, so long as the default theme is totally conformant. That said, he thought it'd still probably be good to ensure text is still at least 3:1, since "less contrast" doesn't mean "text should be illegible."

ben,
@ben@a11y.info avatar

@Kilian @sarajw @scottohara There's a lot of really good back and forth on this at https://github.com/w3c/wcag/issues/2889, but it doesn't actually seem to have landed on any one direction.

Possible It Depends™️ factors include whether there's a "default" experience, and whether the site is purely keying off of OS/browser preferences or if it (also?) has a theme selector.

Generally, default experiences should conform, and changing themes should be easy and accessible.

ben, to random
@ben@a11y.info avatar

He's cozied up for the day.

Tuna's eyes squint a little as he exit his yawn.

ben,
@ben@a11y.info avatar

@cferdinandi I'd be nervous of the possibility of this happening if I felt there was a chance of you ever setting foot in Texas 😛

ben, to random
@ben@a11y.info avatar

Right now, @mia is sharing an excellent and incredibly thought-provoking talk about the philosophy of treating styles as hints to the browser. It's so good, y'all.
https://conf.11ty.dev

hi_mayank, to random
@hi_mayank@hachyderm.io avatar

i'm writing a book called "how to burn out in 10 seconds or less"

🔔 subscribe for updates

ben,
@ben@a11y.info avatar

@hi_mayank "update: the book has been cancelled, i am moving to a hut on a remote island. please never speak to me again."

ben, to random
@ben@a11y.info avatar

Welp, we've officially put in our first offer on a house. And so it begins! 🤞🏻

zachleat, to random
@zachleat@zachleat.com avatar

Tornados have interrupted @eleventy Merch Bundle packing operations! 🌪️🫣

ben,
@ben@a11y.info avatar

@zachleat @eleventy Stay safe, Zach!

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

What's a budget decent microphone for use in streaming/recording speech that won't break the bank and is available to order swiftly into Germany?

Thanks!

ben,
@ben@a11y.info avatar

@sarajw You might want to check out @chantastic's guide at https://chan.dev/microphones/ — I used the Samson Q2U on Chan's recommendation for a while, and it worked perfectly fine without breaking the bank.

ben,
@ben@a11y.info avatar

@mrtrimble @sarajw @chantastic I also used the Fifine K678 for a bit, for an even more budget-friendly option - also totally fine!

ben, to accessibility
@ben@a11y.info avatar

A little accessible and inclusive content creation hot tip:

Instead of just linking directly to xkcd, consider additionally or alternatively linking to the relevant entry on https://explainxkcd.com instead.

There, each xkcd comic has a full, descriptive transcript, and the hover text is printed as plain text, making the comic much more accessible for your blind (or otherwise screenreader-using) followers and for mobile users alike.

Plus, the joke explanations are helpful!

cferdinandi, to random
@cferdinandi@mastodon.social avatar

Maybe a ridiculous question, but... are Web Components the next "design system"?

ben,
@ben@a11y.info avatar

@cferdinandi Can you help me understand what you're getting at here?

Is the question whether web components will be used to assemble design systems? If so, yes, they already are.

Is the question whether web components will be buzzwordy like design systems are? If so, I think this is a really apples-to-oranges comparison, since design systems are nebulae of business processes, documentation, code artifacts, and more — comparing their impact to one implementation detail kinda doesn't compute.

ben, to random
@ben@a11y.info avatar

This is an SVGOMG appreciation post
https://svgomg.net/

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