如何使动态可折叠菜单易于访问？
How can I make a dynamic collapsible menu accessible?
我有一个应用程序使用 footable 插件来允许响应式 table。本质上，它从 table 中获取列并将它们变成一个可折叠菜单，当用户单击按钮展开时，该菜单将作为新行动态注入 table ，然后在用户折叠时将其删除又来了。
如果您查看 this example，它会在 列 上设置 display: none，但还会附加一个新 tr 元素具有 class of .footable-detail-row 并且 tr 包含显示数据的菜单（您必须缩小浏览器window 查看此功能）。
不幸的是，此插件没有内置任何辅助功能。我已经分叉了他们的 repo，并试图让它可以访问。我目前用它来切换 aria-expanded 属性，span“按钮”现在 button 在我的 fork 中。
我对如何使它易于访问感到困惑，因为展开的菜单内容被动态注入到 DOM 中，然后一旦再次单击切换按钮，它就会从 DOM 中删除。
也许我可以为按钮添加一个 aria-label，这样的内容如下：
When this button is clicked it will toggle a menu that is inserted into this table as a new row immediately below this one. The new row contains additional column information. To avoid this button use a screen with a width of at least 992 pixels.
显然这是一个巨大的标签，但它描述了正在发生的事情以及原因。想法？
如果我只有这样一个按钮：<button id="myButton" aria-expanded="false">Expand Content</button> 我通常会添加一个 aria-controls="myCollapsibleMenu"，但是，在这种情况下 myCollapsibleMenu 不存在于 DOM.
除了像这样构建我自己的插件（在脚本加载时添加菜单并且不从 DOM 中删除菜单）之外，是否有任何方法可以使这样的菜单易于访问？
我已经研究了其他 aria 属性，例如 aria-live，但是有没有办法使它与 aria-live 一起工作，因为这些菜单应该与特定图标相关联？我可以使用任何其他 aria 属性来实现它的可访问性吗？也许如果我在插入的行上使用 aria-describedby，它会让用户知道这一行与它上面的行有何关系。
我可以向我想要的菜单添加任何属性在创建之后。是否可以接受 table 添加一个描述性 aria-label 当用户点击按钮时会发生什么？
评论里的建议是最好的建议，换库
但是，与任何事情一样，需要做出妥协，并且由于您目前无法替换库，我们至少可以将可访问性提高到仅需几个小的“可用”水平调整。
请注意，如果这是一项要求，它可能不会通过 WCAG AA。
你已经完成的事情，只是为了清楚/检查
第一件事是让打开和关闭附加信息的部分可以通过键盘访问并改进语义。
如果可以的话，我会用 <button> 元素替换该列的内容，而不仅仅是带有点击处理程序的文本。
这为您提供了所需的所有相关键盘功能。
显然，这意味着找到并调整负责扩展行并替换它的 click 处理程序，但希望它会像更改 CSS 选择器一样简单。
按钮操作
您需要做的第二件事是向屏幕 reader 用户指示按钮的操作。
这可以通过 aria-label 或使用一些 轻松实现（我的偏好是由于兼容性）
这只是需要说明它揭示了更多信息。
类似于“{name}（在下面一行显示所有信息）”。
整理一下图标和按钮 ARIA
最后，让我们从屏幕 readers 中隐藏加号，以确保它不会被使用 aria-hidden="true"
宣布
哦，添加 aria-expanded="false" 到按钮并在添加下面的行时切换它。
所需输出的快速示例
所需 HTML 输出的示例（基于您的 fiddle）如下：
<td style="display: table-cell;" class="footable-first-visible">
<button aria-expanded="false">
<span class="footable-toggle fooicon fooicon-plus" aria-hidden="true"></span>
Annemarie
<span class="visually-hidden">(reveal all information in row below)</span>
</td>
</button>
你还没有做但仍然值得做的事情
你提到了aria-controls，我会说用aria-owns代替（只是根据细微的差异判断调用，实际上它不会对用户体验产生太大影响）。
正如您所指出的，您遇到了一个问题，即您要使用 aria-owns 指向的项目不在 DOM.
中
因此，您可以将其动态添加为“我们能做的最好的”场景。
因此第二个新行被添加到 table，向该行添加一个 ID，然后将 aria-owns="your-id" 添加到控制 <button>.
美妙之处在于，如果行被展开并且按钮重新聚焦（或者屏幕 reader 用户要求再次读出当前元素）它会宣布关系。
再次折叠该行时，删除 aria-owns 属性。
示例 aria-owns 和 aria-expanded="true"
请注意我还如何将视觉隐藏的文本更改为“关闭所有信息...”，因为按钮用途已更改。
<td style="display: table-cell;" class="footable-first-visible">
<button aria-expanded="true" aria-owns="your-new-id">
<span class="footable-toggle fooicon fooicon-plus" aria-hidden="true"></span>
Annemarie
<span class="visually-hidden">(close all information in row below)</span>
</td>
</button>
最后一件事可以提高可访问性
现在您已经可以通过键盘使用它并提供了关于关系的提示，您还可以做一件事来提高屏幕 reader 用户的可访问性。
添加说明！
我经常遇到修复需要很长时间但可访问性的唯一大问题实际上是可发现性的情况（即，一旦您知道小部件的构造方式和导航方式，就没那么重要了它不是完美的。）
所以在 table 之前有一个名为“帮助”的按钮。
这可以解释 table（“单击第一列中的人名以在下面的新行中展开其他信息。在该行中有一个小 table将添加其他字段").
这个简单的步骤可以真正帮助筛选 reader 用户，因为他们可以“好的所以有一个按钮，如果我按下它就会添加一个新行，在该行中有一个嵌套的 table" 并知道在哪里寻找信息。
结论
将说明与前面的步骤结合起来，我相信尽管 table 不是“可访问的”，但对于屏幕 reader 用户和仅使用键盘的用户来说，它是完全可用的和合理的体验一样。
显然（对于任何其他登陆这个问题的人）这不是理想的解决方案，这里的重点是尽我们所能，并计划在下一次迭代中替换当前的解决方案.
我有一个应用程序使用 footable 插件来允许响应式 table。本质上，它从 table 中获取列并将它们变成一个可折叠菜单，当用户单击按钮展开时，该菜单将作为新行动态注入 table ，然后在用户折叠时将其删除又来了。
如果您查看 this example，它会在 列 上设置 display: none，但还会附加一个新 tr 元素具有 class of .footable-detail-row 并且 tr 包含显示数据的菜单（您必须缩小浏览器window 查看此功能）。
不幸的是，此插件没有内置任何辅助功能。我已经分叉了他们的 repo，并试图让它可以访问。我目前用它来切换 aria-expanded 属性，span“按钮”现在 button 在我的 fork 中。
我对如何使它易于访问感到困惑，因为展开的菜单内容被动态注入到 DOM 中，然后一旦再次单击切换按钮，它就会从 DOM 中删除。
也许我可以为按钮添加一个 aria-label，这样的内容如下：
When this button is clicked it will toggle a menu that is inserted into this table as a new row immediately below this one. The new row contains additional column information. To avoid this button use a screen with a width of at least 992 pixels.
显然这是一个巨大的标签，但它描述了正在发生的事情以及原因。想法？
如果我只有这样一个按钮：<button id="myButton" aria-expanded="false">Expand Content</button> 我通常会添加一个 aria-controls="myCollapsibleMenu"，但是，在这种情况下 myCollapsibleMenu 不存在于 DOM.
除了像这样构建我自己的插件（在脚本加载时添加菜单并且不从 DOM 中删除菜单）之外，是否有任何方法可以使这样的菜单易于访问？
我已经研究了其他 aria 属性，例如 aria-live，但是有没有办法使它与 aria-live 一起工作，因为这些菜单应该与特定图标相关联？我可以使用任何其他 aria 属性来实现它的可访问性吗？也许如果我在插入的行上使用 aria-describedby，它会让用户知道这一行与它上面的行有何关系。
我可以向我想要的菜单添加任何属性在创建之后。是否可以接受 table 添加一个描述性 aria-label 当用户点击按钮时会发生什么？
评论里的建议是最好的建议，换库
但是，与任何事情一样，需要做出妥协，并且由于您目前无法替换库，我们至少可以将可访问性提高到仅需几个小的“可用”水平调整。
请注意，如果这是一项要求，它可能不会通过 WCAG AA。
你已经完成的事情，只是为了清楚/检查
第一件事是让打开和关闭附加信息的部分可以通过键盘访问并改进语义。
如果可以的话，我会用 <button> 元素替换该列的内容，而不仅仅是带有点击处理程序的文本。
这为您提供了所需的所有相关键盘功能。
显然，这意味着找到并调整负责扩展行并替换它的 click 处理程序，但希望它会像更改 CSS 选择器一样简单。
按钮操作
您需要做的第二件事是向屏幕 reader 用户指示按钮的操作。
这可以通过 aria-label 或使用一些
这只是需要说明它揭示了更多信息。
类似于“{name}（在下面一行显示所有信息）”。
整理一下图标和按钮 ARIA
最后，让我们从屏幕 readers 中隐藏加号，以确保它不会被使用 aria-hidden="true"
哦，添加 aria-expanded="false" 到按钮并在添加下面的行时切换它。
所需输出的快速示例
所需 HTML 输出的示例（基于您的 fiddle）如下：
<td style="display: table-cell;" class="footable-first-visible">
<button aria-expanded="false">
<span class="footable-toggle fooicon fooicon-plus" aria-hidden="true"></span>
Annemarie
<span class="visually-hidden">(reveal all information in row below)</span>
</td>
</button>
你还没有做但仍然值得做的事情
你提到了aria-controls，我会说用aria-owns代替（只是根据细微的差异判断调用，实际上它不会对用户体验产生太大影响）。
正如您所指出的，您遇到了一个问题，即您要使用 aria-owns 指向的项目不在 DOM.
因此，您可以将其动态添加为“我们能做的最好的”场景。
因此第二个新行被添加到 table，向该行添加一个 ID，然后将 aria-owns="your-id" 添加到控制 <button>.
美妙之处在于，如果行被展开并且按钮重新聚焦（或者屏幕 reader 用户要求再次读出当前元素）它会宣布关系。
再次折叠该行时，删除 aria-owns 属性。
示例 aria-owns 和 aria-expanded="true"
请注意我还如何将视觉隐藏的文本更改为“关闭所有信息...”，因为按钮用途已更改。
<td style="display: table-cell;" class="footable-first-visible">
<button aria-expanded="true" aria-owns="your-new-id">
<span class="footable-toggle fooicon fooicon-plus" aria-hidden="true"></span>
Annemarie
<span class="visually-hidden">(close all information in row below)</span>
</td>
</button>
最后一件事可以提高可访问性
现在您已经可以通过键盘使用它并提供了关于关系的提示，您还可以做一件事来提高屏幕 reader 用户的可访问性。
添加说明！
我经常遇到修复需要很长时间但可访问性的唯一大问题实际上是可发现性的情况（即，一旦您知道小部件的构造方式和导航方式，就没那么重要了它不是完美的。）
所以在 table 之前有一个名为“帮助”的按钮。
这可以解释 table（“单击第一列中的人名以在下面的新行中展开其他信息。在该行中有一个小 table将添加其他字段").
这个简单的步骤可以真正帮助筛选 reader 用户，因为他们可以“好的所以有一个按钮，如果我按下它就会添加一个新行，在该行中有一个嵌套的 table" 并知道在哪里寻找信息。
结论
将说明与前面的步骤结合起来，我相信尽管 table 不是“可访问的”，但对于屏幕 reader 用户和仅使用键盘的用户来说，它是完全可用的和合理的体验一样。
显然（对于任何其他登陆这个问题的人）这不是理想的解决方案，这里的重点是尽我们所能，并计划在下一次迭代中替换当前的解决方案.