HTML5 辅助功能：如何指示网格和列表布局之间的切换？答案

【问题标题】：HTML5 Accessibility: How to indicate switching between grid and list layout?HTML5 辅助功能：如何指示网格和列表布局之间的切换？
【发布时间】：2016-09-09 07:27:44
【问题描述】：

我想创建按钮来在网格和列表布局之间切换以显示图像表格：

<div>
    <span>Layout:</span>
    <button ng-click="$ctrl.switchToList()">
        <span class="fa fa-list" aria-hidden="true"></span>
        <span class="sr-only">Set list layout</span>
    </button>
    <button ng-click="$ctrl.switchToGrid()">
        <span class="fa fa-th" aria-hidden="true"></span>
        <span class="sr-only">Set grid layout</span>
    </button>
</div>

And if list is chosen layout looks like regular table (<tr> and image data in separated <td>s, no thumbnail), when grid is chosen it looks like grid of thumbnail.但我不知道如何标记Layout 标签描述这两种可能性的屏幕阅读器/搜索引擎。如果涉及到收音机/复选框，这很容易，那么fieldset / legend approach 可以使用，但没有表格。看起来有两种可能的解决方案：aria-describedby 或 aria-labelledby。但它们非常相似，而且 IMO 它们不能 100% 解决我的问题 - 因为我需要像 fieldset / legend 这样的东西来指示可能的值而不是附加描述，我想。有什么可以帮助我的，比如fieldset / legend，但不适用于表格？预先感谢您的每一个答案。

【问题讨论】：

标签： javascript html accessibility wai-aria

【解决方案1】：

您可以使用 fieldset/legend 而不使用 form。

但是您首先需要做任何事情吗？ button 元素已经有描述性标签（它们的内容），并且可以独立存在。像“布局”这样的附加标签并没有真正添加任何东西，因为按钮已经清楚地表明它们设置了布局。

您可以考虑使用menu role（“一种向用户提供选择列表的小部件。”），并为每个按钮指定menuitem role：

menu 或 menubar 包含的一组选项中的一个选项。

请注意，您不能在 fieldset 元素上使用 menu。你可以使用这样的东西：

<div role="menu">
  <button type="button" role="menuitem">Set grid layout</button>
  <button type="button" role="menuitem" disabled>Set list layout</button>
</div>

（注意我添加了type="button"；否则按钮被认为是提交按钮。）

【讨论】：