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

Question

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

<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缩略图。但我不知道如何向 Layout 标签描述这两种可能性的屏幕阅读器/搜索引擎添加标签。如果涉及到 radios/checkboxes 就很容易，因为然后 can be used, but there is no form. It looks like there is 2 possible solutions: aria-describedby or aria-labelledby。但它们与 IMO 非常相似，它们并不 100% 适合我的问题 - 因为我认为我需要 fieldset / legend 之类的东西来指示可能的值而不是额外的描述。有什么可以帮助我的东西，比如 fieldset / legend 但不是表格？预先感谢您的每一个回答。

Answer 1

您可以在没有 form 的情况下使用 fieldset/legend。

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

您可以考虑使用 menu role ("A type of widget that offers a list of choices to the user."), and give each button the menuitem role:

An option in a group of choices contained by a menu or 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"；否则按钮被认为是提交按钮。）

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

HTML5 Accessibility: How to indicate switching between grid and list layout?

html

javascript

accessibility

wai-aria