首先，我没有任何代码可以分享，但更多的是一个通用的帮助问题。我已经建立了一个自定义的WordPress网站，我想让页眉/页脚导航元素键盘可聚焦，并能够使用键盘打开。我想知道是否：
- 我可以使用HTML标记(例如，使用Tabindex(或
- 我需要用JavaScript自定义编写此功能吗
这是我的实时演示网站，请随意检查源代码
主要问题是，通过加载页面并在元素之间进行选项卡切换，浏览器会跳过页眉和页脚，并进一步跳到页面下方。这在所有页面上都很常见。
期望的功能：我希望用户标记到第一个帐户/搜索链接，然后是电子商务链接，最后是导航链接。我使用Bootstrap 4.6。
有什么想法吗？
页面上的选项卡顺序似乎是正确的。不起作用的是正确地展开子菜单。
从导航栏下拉菜单的引导文件来看，这将是正确的标记：
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
为了更好地访问，需要通过JavaScript添加和更新role="button"和aria-expanded。JS Dropdown插件将接收data-toggle="dropdown"并处理所有这些。
目前在链接页面上，扩展逻辑添加在CSS中，用于：悬停，触摸屏和键盘用户无法访问。
这种下拉导航菜单的一个常见问题是，触摸屏和键盘用户被排除在外，因为设计决策是打开子菜单，同时为父项提供可点击的链接。
你需要摆脱它。一个常见的解决方法是在每个子菜单的顶部添加一个视觉上不同的概览链接。
在菜单中标记当前页面
您还存在可用性问题，即当前页面没有进行视觉标记，也没有使用辅助技术。
Bootstrap 4为menu-item使用active类，并建议在链接中添加隐藏的(current)文本。
但您也可以将其与Bootstrap 5将aria-current="page"添加到链接的方式相结合：
<li class="nav-item active"><a aria-current="page" href="https://www.fralinpickups.com/blog/" class="nav-link">The Workbench</a>