HTML5可访问性:如何指示网格和列表布局之间的切换

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

本文关键字：列表 网格 表布局 之间 指示 访问 何指示 HTML5      更新时间：2023-09-26

我想创建按钮，用于在显示图像表的网格和列表布局之间切换:

<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>

如果选择列表，布局看起来像普通表格(<tr>和图像数据在分开的<td>中，没有缩略图)，当选择网格时，布局看起来像缩略图的网格。但我不知道如何标记屏幕阅读器/搜索引擎，Layout标签描述了这2种可能性。如果涉及到无线电/复选框，这很容易，因为可以使用字段集/图例方法，但没有形式。看起来有两种可能的解决方案:咏叹调描述或咏叹调标签。但它们非常相似，在我看来，它们并不完全适合我的问题——因为我需要像fieldset / legend这样的东西来指示可能的值，而不是额外的描述，我想。有什么东西可以帮助我，像fieldset / legend的东西，但不是形式?提前感谢你的每一个答案。

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

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

您可以考虑使用menu角色("一种为用户提供选项列表的小部件")，并为每个按钮赋予menuitem角色:

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";否则，按钮被认为是提交按钮。)

相关文章：