如何确保 html 元素的 Tab 键顺序始终保持不变，无论页面刷新还是导航到页面？

Question

我正在处理的项目正在使用 AngularJS 并使用 UI-Router 插件来管理所有 state/page 更改。

当我通过单击应用程序主页上的按钮转到某个页面时，该页面的 Tab 键顺序从页脚开始。但是，当我刷新同一页面时，Tab 键顺序正确地从页面顶部开始。我确实注意到，当我通过主页上的按钮转到该页面并在开始跳转之前单击页面顶部时，跳转顺序的行为是正确的。

我确实尝试将 tabIndex="0" 添加到主导航栏中的链接，但这没有任何区别。正如我所说，当我刷新页面时，页面的 Tab 键顺序工作得很好。当我从网站的其他部分导航到该页面时，它只会搞砸。

有没有办法确保无论我刷新页面还是从站点的另一个页面导航到该页面，Tab 键顺序都完全相同？

Answer 1

在状态改变时或初始化控制器时以及 DOM 呈现后，将焦点设置到符合您的条件的第一个控件。

包含视图：

  <body ng-app="myApp">
    <div id="tabContent" ui-view></div>
  </body>

Javascript:

var rootElementName='tabContent';
$timeout(function () {
                var formElements = $('#' + rootElementId)
                                     .find('select[disabled!="disabled"],input[disabled!="disabled"],textarea[disabled!="disabled"]');
                if(formElements && formElements.length > 0) {
                    formElements[0].focus();
                    return true;
                    } else {
                    return false;
                    }
            }, 0);

*您可以在服务或指令中执行此操作。或者您可以将它绑定到 onEnter 或 $viewContentLoaded 事件。

我包含了 id，这样您就可以将控件定位到页面的特定部分，并且此示例将聚焦未禁用的第一个 select、input 或 textarea 控件。

如何确保 html 元素的 Tab 键顺序始终保持不变，无论页面刷新还是导航到页面？

How can I make sure the tab order for html elements will always behave the same regardless of page refresh or having navigated to the page?

angularjs

angular-ui-router

accessibility

tabindex

section508