4

I have a create password form that looks like the following:

An image showing a "change password" form containing 3 password inputs stacked vertically (show password, new password, confirm password). Each input has an eye icon within the extreme right of the field

As you can see from the image, the reveal password button (eye icon) is the next sequential thing for the browser to focus. As such, without explicitly adding tabindex attributes to the fields, the order of focus will be:

  1. Current password input
  2. Reveal current password
  3. New password input
  4. Reveal new password

etc.

When I use this, I find it slightly irritating (I want tab to take me to the next input). As such, I'm tempted to change the tab index so that the reveal password buttons are selected last (after all inputs and the change password button), but I feel like this is a choice informed by my own habits/preferences rather than anything else.

The MDN docs suggest:

Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.

I assume it would be arrogant to consider this form an exception?

Interested to gather people's opinions on this one.

Improve this question

3 Answers 3

Reset to default
3

You are faced with a conundrum of wanting something that is counter to user expectation. Your choices, as you quite rightly stated, are

  1. manipulating the tabindex
  2. placing the "eyes" after input boxes.

Manipulating the tabindex will make it a horrible experience for those with screen readers. Placing the eyes at the bottom will ... be interesting. I would love to see the user testing on that.

A solution is possible. Place the "eyes" in a separate div and place them so they appear to the right of the text entry boxes. This would allow the tab selections to work as desired.

I don't know if visually impaired people use the "show password" icon or how it works for them. This will have to be researched or user-tested.

Improve this answer
1
  • I'm not sold on moving the eye icons so that they are no longer within/next to the inputs. You're right that I could potentially create a div and position it, but that seems like a hacky solution which is done to avoid explicitly changing the tabindex because the MDN docs say so, but without regard for their reasoning - ultimately you're still messing up the order there.
    – Ed_
    May 8, 2020 at 14:43
2

I feel like this is a choice informed by my own habits/preferences rather than anything else.

Yes, I have rarely if ever met people that use keyboard tabs for navigation, at least for people without the need of an assistive technology.

My suggestion: Don't do any changes, keep them in their sequential order: Input, Eye, Input, Eye, etc. Your users with assistive technology will appreciate it.

Improve this answer
1

Keyboard users, screen reader users (they will hear the password instead of "8 bullet" for example), and users with cognitive disabilities will most definitely be using the icon, and it would be very confusing to dissociate the icon from the form field it refers to. Keep it in the default (and appropriate) tab order.

Improve this answer

Your Answer

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

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