Thread of 5 posts1 min read

Accessible tooltips are incredibly hard

  1. Accessible tooltips are incredibly hard to build as a generic component in React (and I assume other component-based frameworks) It's way harder than just linking the tooltip text to the trigger with aria-describedby

    1/52 replies0 reposts3 likes

  2. Firstly, what if the trigger supplies a description of it's own? Should Tooltip content A: Override it B: Merge with it C: Yield to it I'd say B is the best default behaviour because A & B throw away context

    2/51 reply0 reposts1 like

  3. But this is actually impossible to implement in React without relying on mutation observers. And even that relies on being able to get a ref to the trigger's HTML node, which isn't always possible

    3/51 reply0 reposts0 likes

  4. On top of that it's not even clear what the best default experience is, because there are always use cases where having an accessible label is required and where it absolutely shouldn't exist

    4/51 reply0 reposts1 like

  5. For example if a tooltip just shows the full value of a piece of truncated text, it shouldn't be linked with aria-describedby lest the label be announced twice by screen readers In this use case the tooltip only exists for users _not_ using a screen reader

    5/51 reply0 reposts2 likes