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

aardrian

@aardrian@toot.cafe

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.

aardrian, to random
@aardrian@toot.cafe avatar

I have failed more than once to dump Adobe products. Today, prior to hearing about this, I bought the Affinity suite. It opens my PSD & AI files.
https://social.ericwbailey.website/@eric/112587540531838008

I still have to figure out if I can just get a one-off Acrobat license for PDF work, but frankly I am happy to sub any PDF work.

aardrian,
@aardrian@toot.cafe avatar

@sysop408 My Mac is a testing rig, but I’ll check it out. Thanks!

aardrian, to accessibility
@aardrian@toot.cafe avatar

I outline my approach to crafting image alternative text:
https://adrianroselli.com/2024/05/my-approach-to-alt-text.html

This does not mean it is correct. Or ideal. Or even good. It’s just how I do it.

aardrian, to random
@aardrian@toot.cafe avatar

Trying to figure out how to see streams from the last few days of events in Amsterdam.

#a11yClub #summit appears to require a ticket but no info on if there is/was a stream:
https://ti.to/tollwerk/accessibility-club-summit-2024

#CSSDay also requires payment for access to the stream but it’s not clear if the vids are available yet nor which level to buy:
https://www.youtube.com/channel/UCuZeHD5SGecQomz2pVDHGzg/join

So… any tips?

aardrian,
@aardrian@toot.cafe avatar

I got answers. Thanks all!

aardrian, to random
@aardrian@toot.cafe avatar

I created this web components logo using insight from @mayank and @zachleat into existing logos.

Whether you use custom elements, Shadow DOM, slots, custom events, <template>, or whatever else makes you choose to call your mundane thing a “web component”, this is the logo for you.

And yes, I am using this in a blog post coming out next week.

aardrian,
@aardrian@toot.cafe avatar

@zachleat @mayank Thank you?

aardrian, to accessibility
@aardrian@toot.cafe avatar

Oh GitHub.

@sclower filed a discussion item (with @jscholes confirming) and since I was bumping into it during a call today I also made a video:
https://github.com/orgs/community/discussions/127592

A lot going on here:
• Verbose.
• The instructions sometimes lie.
• Some triggers are a problem.
• Fake-dialog has issues.
• Those are links, not disclosure triggers.
• Verbose.
• Also, verbose.

NVDA navigating this “hover card” pattern, first via link shortcut keys (through 0:22), then tabbing at 0:25, then virtual cursor at 0:38. I try to trigger it at 0:08 and 0:10 to no avail.

aardrian,
@aardrian@toot.cafe avatar

It has been rolled back:
https://github.com/orgs/community/discussions/127592#discussioncomment-9703373

Pleased to see acknowledgment that getting user feedback prior to release is A Good Idea.

Thank you people of GitHub!

@sclower @jscholes

aardrian, to random
@aardrian@toot.cafe avatar

Oh, authors will do this
https://mastodon.social/@charis/112569015618159293

I have done many audits where the devs claim their framework won’t let them reorder the HTML, so they use CSS techniques and fail an SC they never knew existed (1.3.2 Meaningful Sequence).

aardrian,
@aardrian@toot.cafe avatar

Also, I keep updating both of my 2015 posts when new info about CSS efforts comes out:
• https://adrianroselli.com/2015/09/source-order-matters.html
• https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html

This really is an HTML thing, not CSS. But CSS has the responsibility to fix things CSS breaks.

aardrian, to accessibility
@aardrian@toot.cafe avatar

“Maybe Don’t Name That Landmark”
https://adrianroselli.com/2024/06/maybe-dont-name-that-landmark.html

TL;DR: You probably don’t need to name that landmark. Even if you have two of the same landmark.

aardrian,
@aardrian@toot.cafe avatar

The post was inspired by this what-not-to-do real life example from Vercel.

The Captain Picard facepalm is because the logo is a link with aria-expanded.

The rest of the video demonstrates how (the now changed) aria-label is verbose, wrong, and unnecessary.

Open captions because Masto does not support CC.

Tabbing to the Vercel logo (with a Captain Picard facepalm because the logo is a link with aria-expanded) and then tabbing into the first navigation item, which announces the landmark name and then a count of links.

aardrian, to random
@aardrian@toot.cafe avatar

Over on hell-site @ashleemboyer shared the following she found in the wild:

<nav aria-label="Navigation header with 5 links and 1 dropdown menu with links">

It gave wrong counts, it was verbose, it used lingo, and it was utterly unnecessary (there was one other <nav> on the page, but in the <footer>).

Most sites don’t need to (shouldn’t) have accNames on <nav>. If you have more than on <nav> in the same landmark, then maybe?

But her example was wow.

aardrian,
@aardrian@toot.cafe avatar

The site ‘fixed’ it by changing it to:

<nav aria-label="Main">

It has one other navigation landmark, in the footer:

<nav aria-label="Vercel Directory" role="navigation">

Anyway, stop over-labeling and maybe test with the users you think you are helping.

aardrian,
@aardrian@toot.cafe avatar

Related:
“Maybe Don’t Name That Landmark”
https://adrianroselli.com/2024/06/maybe-dont-name-that-landmark.html

aardrian, to random
@aardrian@toot.cafe avatar

The one-eyed squirrel that I occasionally feed in response to its screen-climbing demands has left us a thank-you gift.

The is the table on the front porch where it typically waits after it believes I have seen it.

A couple weeks back I had dropped and abandoned a pretzel while snacking out there and the squirrel later placed it on the chair.

This is all speculation — it could have been done by one of the handful of cats that visits. But cats aren’t that courteous.

A lawn chair with a mini-pretzel sitting on the front center of the seat.

aardrian, (edited ) to random
@aardrian@toot.cafe avatar

While this news from @bkardell is indeed good news:
https://toot.cafe/@bkardell/112585809345823330

Please do not use it for accNames unless you are prepared to test the accName calculation and voice control:
https://adrianroselli.com/2020/10/alternative-text-for-css-generated-content.html#Update01

I do not want to be debugging basic WCAG failures because folks can’t be arsed to test the new shiny.

aardrian, to random
@aardrian@toot.cafe avatar

I love that I have an 11-year-old post that’s still getting useful comments:
https://adrianroselli.com/2013/05/my-kingdom-for-decimal-alignment-on.html#comment-294331

My post was mostly just a rant about lack of decimal alignment for numbers in tables.

aardrian, to random
@aardrian@toot.cafe avatar

Which is the web components logo (like HTML and CSS have logos)?

The last logo on this page?
https://webcomponents.github.io/assets/

Or the logo on this page?
https://www.webcomponents.org/assets

I think the latter is more recent, but it seems like it’s the dot-org logo.

What do the cool tech-savvy kids use?

aardrian, to random
@aardrian@toot.cafe avatar

It’s at 69.
Nice
https://mastodon.social/@karlgroves/112570088715933281

But really he wants more.

aardrian, to random
@aardrian@toot.cafe avatar

🎶🎵
The sun’ll go out tomorrow…
Or eight minutes ago not tomorrow…
Could be gone…
🎵🎶

aardrian, to random
@aardrian@toot.cafe avatar

HTML and ARIA each have tri-state controls: the checkbox (HTML) and the toggle (ARIA, and ‘toggle’ is not its formal name). They have different purposes (form participant and not). They, appropriately, look and function differently. They live in isolation unless you group them appropriately. They are always watching you, judging.

“Check-All / Expand-All Controls”
https://adrianroselli.com/2024/03/check-all-expand-all-controls.html

This is an oblique reminder to choose the right control for the right purpose.

aardrian, to accessibility
@aardrian@toot.cafe avatar

[1/2]
VoiceOver / Safari / macOS bug(s) confirmation requested.

Visit https://cdpn.io/aardrian/debug/VoQbLm

Navigate the first table using VO table navigation commands.

Using Safari 17.5 / macOS 14.5, VO returns the count of all rows, even hidden rows. It also lets me navigate hidden rows.

VO with Chrome has no issue.

Attached video (no captions other than speech viewer) shows this in action.

Navigating a table in VO / Safari, where it announces every row in the table, even the hidden ones.

aardrian, to accessibility
@aardrian@toot.cafe avatar

I am not the only one to say this:

Please remember that WCAG itself is the bare minimum of . Conforming to WCAG does not guarantee something is accessible. It does not even guarantee something is usable. All WCAG does is provide you with a starting point. Lots of WCAG failures suggest the page has not even made it to the starting line.

Which I say at the end of this post comparing free automated WCAG testing with manual testing:
https://adrianroselli.com/2023/01/comparing-manual-and-free-automated-wcag-reviews.html#Takeaways

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