Where should keyboard focus go in modals?

Generally speaking, when a modal opens, focus should move directly to the first interactive element in the modal. With that in mind, it would be appropriate for focus to be placed on the close button first. That way the user can navigate away from the modal quickly if needed. After the close button receives focus, focus should move to the next interactive element within the modal in a logical and predictable manner.

As the user navigates through the modal, keyboard and screen reader focus should not go to any content behind the modal. The keyboard focus needs to be trapped within the modal content, meaning that the user should not be able to tab away from the modal without intentionally closing it. This helps prevent users from becoming disoriented or confused about which content has keyboard focus. Furthermore, interactive components should receive focus in an order that is logical, predictable, and usable.

For additional help determining whether a page's focus order is predictable and logical, the Guided Manual WCAG Audit Tool from Accessible Web includes a helper tool for visualizing focus order.