3

Where would the first focus be on when a modal window opens? Some say the focus order should be sequential, so the first tab stop should be on the close button and some say, it should be on the first logically actionable element. According to me, it should be on the first actionable item. Let's say if a modal window is opened to Search something, then the focus should be on the search edit box. What are your thoughts? Which is better and what are the reasons?

user 9631883
  • 466
  • 5
  • 14

2 Answers2

4

The answer is, it dependsĀ®.

In fact it's mostly a question of good sense. You should put the focus where the user is the most likely to do his first action in the modal. Therefore:

  • If you are prompting for input, the most logical is to put the focus on the first required field
  • If you are asking a yes-no or multiple choice question, the focus should go on the most probable or recommanded answer
  • Exception to the previous one: if you are asking a question about whether or not to proceed on a unrecoverable action such as "are you sure to delete ?", the focus should be set to the no button eventhough the most probable answer is yes, so that the user has a last chance to cancel something triggered by misstake
  • If the modal dialog is just showing a message, it's logical to put the focus on the OK or close button, since it's the only possible action

Putting the focus on the close button when something else is expected is kind of weird, especially for screen reader users, who don't necessarily know what the dialog is for immediately.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
2

I always put it on the first heading or label, so blind users can confirm where they are after clicking the link or button which opened the modal. Then focus can move to the close button as the next item in sequence - if opening the modal was a mistake (happens often when you can't see the layout or with ambiguously labelled links) this makes it easy to correct.

Jumping to the first focusable item isn't technically wrong but gives poor usability for screenreader users while only saving one click for sighted keyboard users.

stringy
  • 1,323
  • 7
  • 16