4

We have a live support chat on our website, accessible via a button that always floats in the bottom right of the page, above other content. This chat widget inserts itself as the first child of the body tag, and so it comes first in the tab order. It feels kinda weird for it to come before any of the navigation elements on the page.

Logically, where should a button like this go in the tab order? Putting it at the very bottom also seems weird, making it harder to find, especially on pages with a lot of interactive elements.

Improve this question
0

2 Answers 2

Reset to default
1

That's a tricky one, with a lot of possible solutions, for example:

  1. Dynamic Tab Index: Make it so that the tab index changes depending on user actions. For example, after completing the primary actions on a page, the next tab could go to the floating button. This is technically more challenging to implement but can offer a highly intuitive experience.

  2. After Primary Actions: As it doesn't serve a primary function, you can place it after the main content but before the footer.

  3. Always Last: Making it the very last item in the tab order, just before looping back to the top, ensures that it doesn't disrupt the normal content flow. However, it could be difficult for users to find, especially on a lengthy page.

  4. Hot key: Make it accessible through a hot key (F1 is a common one for "Help" and "Support"). Make sure it's obvious for the user. That'd also mean you could just put it last, or even disable tab order at all.

Things to Avoid:

  1. Don't Make It First: As you've identified, having it be the first element in the tab order can be disruptive, especially if it's not a primary go to feature.

  2. Don't Make It Random: The placement in the tab order should be predictable and make logical sense to the user, to help with usability and accessibility.

Whichever approach you choose, be sure to test it with actual users, including those who rely on keyboard navigation and screen readers, to ensure that it meets their needs effectively.

Improve this answer
1
  • 1
    Good recommendations. I often find these types of buttons as the last DOM element. Most users probably wouldn't do this but I just put my focus in the browser's address bar then start tabbing backward and it's easy to get to. I like the "after primary actions" idea.
    – slugolicious
    Commented Aug 30, 2023 at 20:56
-1

Why does the floating button need to be in the tab sequence?
It's not like it would be natural to go to that button in the normal scheme of things.

It's in an obvious and fixed location should anyone need it, so just set its tabindex="-1" attribute.

Improve this answer
2
  • 3
    For accessibility reasons, for example? People who don't use mouse might want to be able to contact support too
    – exp
    Commented Aug 30, 2023 at 13:31
  • 2
    It absolutely must be in the tab order. Not everyone is a mouse user. For example, someone with Parkinsons Disease might have hand tremors and find it difficult to use a mouse so they'll TAB through a website.
    – slugolicious
    Commented Aug 30, 2023 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.