an app to share curated trails sidetrail.app
atproto nextjs react rsc

Accessibility problem - Avatars #1

closed
opened by vicwalker.dev.br

The little avatars floating around each stop are very cute and creative. But they are messing up the keyboard navigation a lot. There is no clear order when I keep pressing TAB, I can go from an avatar from my current stop to one from the previous stop anytime, then it goes back into the buttons inside the stop, then it goes back to another random avatar.

Ah interesting, I haven't thought about that... Would it make sense to make them inaccessible by keyboard? Or maybe give them a single "trap" you have to enter, kind of like a modal? Conceptually I think each stop has "people on it" but it's not structured this way in the DOM for... reasons.

I've changed avis to being unfocusable in https://tangled.org/danabra.mov/sidetrail/commit/d8d65c2caa5800cc3b0b7655178abf07667c4dab. This is not ideal but they're primarily a decorative element and I don't earnestly expect people to even click on them either. Maybe this could be improved in the future.

It's interesting being able to click and see each account but I don't know how to approach this in an accessible way without losing the cute floating of the spheres. Maybe the solution could be an accessible mode that change it to a list of users that could be navigated using keyboard or the screen reader navigation used on phones.

sign up or login to add to the discussion
Labels

None yet.

assignee

None yet.

Participants 2
AT URI
at://did:plc:fip3nyk6tjo3senpq4ei2cxw/sh.tangled.repo.issue/3m7c667a7ok22