Html 使用选项卡访问抽屉菜单

如何让用户在菜单打开后立即通过应用程序抽屉进行制表。在与以下示例类似的菜单中（但抽屉位于右侧）：

现在，我希望用户能够在应用程序中使用tab键，并在菜单打开后直接将焦点放在菜单上

期望的结果：

• 用户按tab键
• [焦点在“打开菜单”按钮上]
• 用户按下空格键
• [菜单打开]
• 用户再次按tab键
• [焦点在“关闭菜单”图标上]
• 用户再次按tab键
• [焦点在第一个菜单项上]（耶！）

实际结果：

• 用户按tab键
• [焦点在“打开菜单”按钮上]
• 用户按下空格键
• [菜单打开]
• 用户再次按tab键
• [焦点是页面中的第一个按钮（“这是某个按钮”）（哦，不：（.它应该转到抽屉中的导航栏）

代码示例 对于这个代码示例，我将遵循w3.org中所述的步骤

/*此JS代码是任意的，用于演示*/
/*它很可能是一个HTML解决方案*/
const buttonpenmenu=document.getElementById（'open-menu'）；
const buttonCloseMenu=document.getElementById（“关闭菜单”）；
const drawer=document.getElementById（'drawer'）；
ButtonPenMenu.onclick=函数（）{
抽屉.classList.add（'open'）；
drawer.setAttribute（“aria展开”，true）；
}
buttonCloseMenu.onclick=函数（）{
抽屉.classList.remove（'open'）；
drawer.setAttribute（“aria展开”，false）；
}

/*CSS也是任意的*/
主要{
柔性生长：1；
宽度：100%；
}
#抽屉{
宽度：240px；
flex:0自动；
排名：0；
身高：100%；
位置：固定；
左：自动；
右：-240px；
}
#抽屉打开{
右：0；
}

打开菜单
标题
这是一个按钮
一些身体内容

另一个按钮
关闭菜单

选项卡顺序不能按您希望的方式工作的原因是，它没有反映DOM顺序。元素将按照它们在标记中出现的顺序接收焦点，除非您设置了焦点

您可以通过使用在菜单打开时设置焦点来解决此问题

HTML:

向

nav

元素添加

id

和

tabindex

属性

<nav id="nav" aria-labelledby="open-menu" role="menu" tabindex="0">

---

请参见此处的一个工作示例：

选项卡顺序不能按您希望的方式工作的原因是它不能反映DOM顺序。元素将按照它们在标记中的显示顺序接收焦点，除非您设置了焦点

您可以通过使用在菜单打开时设置焦点来解决此问题

HTML:

向

nav

元素添加

id

和

tabindex

属性

<nav id="nav" aria-labelledby="open-menu" role="menu" tabindex="0">

---

请参见此处的一个工作示例：

一个快速建议，将初始焦点更改为关闭按钮，而不是将

tabindex

添加到

元素。在大多数情况下，您不应该使容器可聚焦。或者，您可以将其更改为

tabindex=“-1”

，而不是

tabindex=“0”

因此它可以通过编程进行聚焦，但不会出现在选项卡顺序中，尽管我的第一个建议更可取。OP-关闭抽屉时，不要忘记将焦点返回到“打开”按钮，并在抽屉中捕获焦点，因为它实际上像一个模式。一个快速建议，将初始焦点更改为“关闭”按钮，而不是“关闭”将

tabindex

添加到

元素中。在大多数情况下，不应使容器可聚焦。或者，您可以将其更改为

tabindex=“-1”

，而不是

tabindex=“0”

因此它可以编程聚焦，但不会出现在选项卡顺序中，尽管我的第一个建议更可取。OP-关闭抽屉时，不要忘记将焦点返回到打开按钮，并在抽屉中捕获焦点，因为它实际上就像一个模式。