Accessible interactions | adactio

So you have a non-page-based navigation: tabs, carousels, accordions, multi-level menus, route changes... we deal with these a lot in modern frontends. Is your "trigger" (the thing you press to make the navigation happen) a link or a button? I tend to side with link (it's taking you to a part of the document, just a hidden one right now). Jeremy has a slightly more considered approach that thinks less about semantics (without ignoring them) and more about actual user experience:

  • Is the target of the trigger close by, or directly adjacent to, the trigger in the DOM? Use a button, because you don't need to worry about a focus change.
  • Otherwise, use a link with a fragment identifier (y'know, href='#target').

As he points out, that means you may end up using a link even where a button is sort of semantically cleaner, such as a login modal. In my head, a modal is always a button: it doesn't take me to a part of the document or another page, it opens a new form entirely (Jeremy sees this differently anyway, and I can understand his reasoning). But using a link means your focus state gets switched to the modal immediately, no extra code required, plus if JS fails the link may still work.

This mental model only gets you so far, but Jeremy also highlights some useful ARIA roles that can be sprinkled on top to further increase the accessibility. I'll try to keep it all in mind 😄

Explore Other Notes

Newer

A tale of two buttons

You have buttons on your website. These can be on a light background, or a dark background, and have active and non-active states, but should be highly visible in any variation. You might think that […]

Older

Gnu extension

A Firefox extension that keeps Terry Pratchett alive through a website-to-website digital "clacks" analogue that is just beautiful in its concept […]
  • So you have a non-page-based navigation: tabs, carousels, accordions, multi-level menus, route changes... we deal with these a lot in modern frontends. Is your "trigger" (the thing you press to make […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.