辅助功能 - 如何在元素上设置自定义选项卡焦点顺序

Question

My use case is a traditional form page. My page contains a few buttons on the top right followed by form input fields.

When using mouse-less navigation and pressing tab, the standard behavior is exhibited where first focus is set on the browser tab and the browser URL and then into my actual web page in the order of elements (buttons on the top right into the form fields).

However, it seems better accessibility would have pressing tab on the last form field jump straight to the "Save" button on the top right of the page instead of having to loop through the browser tab and then browser URL again. So essentially, I want to "skip" the traditional order of focus on elements after pressing tab on a specific element (the last focusable element on my page which is the last form field) so that it goes to another specific element I want. Is there a way to set this behavior using HTML/CSS/JS?

Answer 1

There are two ways to handle this.

The first is with tabindex . You can control the order of all elements but you have to be very careful. It can make the tab order more confusing. The bigger the tabindex, the higher precedence the element has in the tab order. So you could put tabindex='2' on all your form elements and tabindex='1' on your buttons and leave the rest of the elements on the page without a tabindex. (Multiple elements can have the same tabindex value. The browser will tab through them in their respective DOM order.)

The second way to handle this is with the DOM order itself and then use CSS to move the elements where you want them. So the DOM could have the form elements first and then the buttons second. You can then use CSS to put the buttons in the upper right. This would be the preferred method because it's not as "dangerous" as tabindex.