@siblingpastry@mastodon.world
@siblingpastry@mastodon.world avatar

siblingpastry

@siblingpastry@mastodon.world

Technical consultant at TPGi, JavaScript accessibility specialist, writer, musician, neurodivergent (ADHD), vegetarian, socialist.

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

urlyman, to random
@urlyman@mastodon.social avatar

Been wielding font-variant-numeric: tabular-nums which makes things line up proper.

Was going to make a shit joke about CSS numchucks but then realised it’s nunchucks – which also sounds like a cruel sport

siblingpastry,
@siblingpastry@mastodon.world avatar

@urlyman Makes me think of It’s a Knockout

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)

siblingpastry,
@siblingpastry@mastodon.world avatar

Because navigating an element with the virtual cursor isn't affected by scrolling. Virtual navigation already allows for keyboard access to the overflow, and it makes no difference to navigation or spoken output.

Tab navigation is affected of course, because it's the difference between whether an element creates a Tab stop or not, but this also doesn't require a label, I don't think, because Tabbing to such an element causes the first line to be read anyway.

(2/3) #keyboard #accessibility

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

I've created a demo script on that basis, which doesn't add a role or label, it simply adds or removes tabindex based on whether the region actually has overflowing content.

It's triggered by a ResizeObserver so it continually updates in response to anything that changes the element's size (and you can test this by resizing the window, increasing zoom or font-size).

https://cdpn.io/pen/debug/dyEXeKg/32a2f63b9f70a8727dc0c6bf9e5e69a7

Thoughts etc.?

(3/3)

siblingpastry,
@siblingpastry@mastodon.world avatar

@cwilcox808 Not that I know of, it doesn't seem to expose anything in the DOM. There's a change in the accTree (the element gains a "focusable" state) but nothing that JS can read, as far as I know.

joelanman, to random
@joelanman@hachyderm.io avatar

https://www.eurogamer.net/senuas-saga-hellblade-2-review

siblingpastry,
@siblingpastry@mastodon.world avatar

@joelanman I really loved the first game, but I couldn't finish it, because of the ambiguous perma-death feature. Each time I die, I'm one step closer to perma-death, but I have no idea when that will actually happen. The further through the game I got, the more I stood to lose, so the less inclined I was to carry on.

Plus the combat was kinda janky -- I can't deal with fixed-camera combat, it makes me feel trapped and impotent. Maybe that was the point lol.

accudio, to random
@accudio@mastodon.scot avatar

I assume there's a spec reason why loads of new HTML attributes are inaccessible and ugly? I mean seriously, popovertargetaction?

I appreciate the API and new features but we know all lowercase text without spaces is hard to read and messes with assistive technologies.

siblingpastry,
@siblingpastry@mastodon.world avatar

@accudio What do you suggest, given that attribute names are case-insensitive and can’t contain spaces?

siblingpastry,
@siblingpastry@mastodon.world avatar

@accudio There’s nothing preventing you from writing them that way, but your point is that the spec and documentation would be more accessible if they were written that way?

(Yeah dashes are reserved for custom element names in web components.)

@hi_mayank

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

Writing to handle browsing is interesting.

Since keydown only fires for targets that can be activeElement, the event target from caret navigating plain text is always <body>.

However you can identify which element contains the caret, by evaluating the range data, which you can also do from selectionchange events.

And get this -- Safari still fires those events, even though it doesn't support caret browsing ... because it actually does, it just doesn't show the caret!

siblingpastry,
@siblingpastry@mastodon.world avatar

@aardrian Seriously -- check this out: https://cdpn.io/pen/debug/NWVGBLG

You can make it visible with a custom caret indicator that's positioned by selectionchange. Place the cursor somewhere in the text, then you can navigate with arrows. Now try Shift + arrows, and it selects the text 😎

siblingpastry,
@siblingpastry@mastodon.world avatar

@aardrian Just noting that it doesn't bring focus with it, you still have to Tab to those.

lonekorean, to CSS
@lonekorean@front-end.social avatar

Are folks using things like margin-inline as shorthand for left/right and margin-block as shorthand for top/bottom?

Or do you avoid that because of writing-mode/direction/text-orientation?

Or are those not really a concern in your usage?

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

@lonekorean I don't use them as syntactical shorthand, because they're not. They're different properties that mean something different.

But I do use them, when it's necessary to support multiple writing modes.

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

Best intention barriers (ARIA edition)

🔗 https://marcus.io/blog/best-intention-barriers-aria

—
"Instead of not being aware about the problematic approach the developer chose, they try to improve accessibility but – unbeknownst to them - create new barriers in the first place doing it." @marcus

siblingpastry,
@siblingpastry@mastodon.world avatar

@marcus I wonder about the statement “But what ARIA properties do not do is implement anything” since it isn’t exactly true, but maybe it would just cloud the article’s intent to describe that in more detail? @SaraSoueidan

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

@SaraSoueidan @marcus That's my point though -- in some cases, they do. Like mode-switching triggered by role=application, which affects what keyboard events are reported, not to mention VoiceOver's nonsense with role=listbox -- https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-2/#:~:text=MacOS/VoiceOver%20(used%20with%20Safari)%20implements%20an%20auto%2Dselection%20and%20navigation%20model%20for%20listboxes (masto previews remove the link info, look in the section "Selection vs navigation")

siblingpastry,
@siblingpastry@mastodon.world avatar

@SaraSoueidan @marcus You know how they say about JS that "everything is an object -- except when it isn't" ... it's kinda like that :-)

siblingpastry,
@siblingpastry@mastodon.world avatar

@marcus @SaraSoueidan That works 👍 You've inspired me to write and expand on this tangent, something like "ARIA doesn't do anything ... except when it does".

siblingpastry,
@siblingpastry@mastodon.world avatar

@patrick_h_lauke @marcus @SaraSoueidan I wasn't planning to go into that much detail, more just general notes on the fact that ARIA sometimes does shit and that's why you always have to test for real.

But what are your plans? I'm happy to wait for you, then I can just link to you for details :-)

siblingpastry,
@siblingpastry@mastodon.world avatar

@patrick_h_lauke

Okay we won't conflict, I'm gonna be much more high level. I'll let you know when I'm about to publish and we can compare cross-references as applicable.

@marcus @SaraSoueidan

siblingpastry, to javascript
@siblingpastry@mastodon.world avatar

Saturday fun -- a little helper function for closest() that handles the possibility of the input being a text node:

const getClosest = (node, query) =&gt; {  
 if(!node) {  
 return null;  
 }  
 while(node.nodeType !== Node.ELEMENT_NODE) {  
 if(!(node = node.parentNode)) {  
 return null;  
 }  
 }  
 return node.closest(query);  
};
urlyman, to design
@urlyman@mastodon.social avatar

Justified web text
is never justifiable

siblingpastry,
@siblingpastry@mastodon.world avatar

@urlyman Not even if it's ancient and mu mu?

siblingpastry,
@siblingpastry@mastodon.world avatar

@urlyman 🕒🖖

aardrian, to accessibility
@aardrian@toot.cafe avatar

“Level-Setting Heading Levels”
https://adrianroselli.com/2024/05/level-setting-heading-levels.html

TL;DR: Avoid setting heading levels greater than six (6). This applies whether using aria-level or the proposed headingstart HTML attribute. Use HTML &lt;h#&gt; elements whenever possible.

siblingpastry,
@siblingpastry@mastodon.world avatar

@r343l @aardrian In 25 years I've never had to go below <h4>

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

I always want to start conversations about WCAG/guidance changes that I would like to see in the A11y Slack, but I feel like most folks want to talk about compliance instead.

For example: I want a link element to respond to the same keyboard keys as a button element does.

Another example: I think if you have alt="" and role="none" it is an acceptable demonstration of author intent and should not fail validators.

siblingpastry,
@siblingpastry@mastodon.world avatar

@kizu @patrick_h_lauke @a11yMel I dunno ... silently fixing invalid HTML is kinda critical to how HTML5 works. Whether that was a good idea remains debatable, but that ship has sailed, I don't think we can go back without causing more problems than we solve.

siblingpastry,
@siblingpastry@mastodon.world avatar

@kizu @patrick_h_lauke @a11yMel Then how would the difference be reported or manifested?

joelanman, to CSS
@joelanman@hachyderm.io avatar

big fan of flexbox for web app layouts!

siblingpastry,
@siblingpastry@mastodon.world avatar

@joelanman It rules at 1D layouts like toolbars, reminds me of XUL lol.

No so good for 2D layouts though, in my estimation. I'd go grid every time.

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