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.
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
Accessibility problem - Avatars #1
closed
opened by
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.
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.