响应式 table 的正确 ARIA 元标签

Proper ARIA metatags for responsive table

我正在制作响应式 table，我希望每个人都能完全访问它。但是在这种情况下，我不确定应该在哪里使用 rowheader 以及在哪里使用 columheader。

这是我的代码（当然只是例子，没有实际数据）：

<div role="grid">
        <div class="row" role="row">
            <div class="hidden-xs col-sm-offset-4 col-sm-3 " role="columnheader">
              <img class="img-responsive" style="width:200px;" src="http://blogmedia.whoishostingthis.com/wp-content/uploads/2013/04/free-hosting.jpg" alt="Vendor 1">
            </div>
            <div class="hidden-xs col-sm-offset-1 col-sm-3 " role="columnheader">
                <img class="img-responsive" style="width:200px;" src="http://jennmoney.biz/assets/free.gif" alt="Vendor 2">             
            </div>
        </div>
        <hr class="line">
        <div class="raty-table" role="row">
            <span class="col-xs-12 col-sm-4" role="rowheader">
                Title 1
            </span>
            <span class="visible-xs-block col-xs-4" role="rowheader">
                Vendor 1
            </span>
            <span class="col-xs-8 col-sm-4" role="gridcell">
                Content
            </span>
            <span class="visible-xs-block col-xs-4" role="rowheader">
                Vendor 2
            </span>
            <span class="col-xs-8 col-sm-4" role="gridcell">
                Content
            </span>
        </div>
</div>

Here is a fiddle:

对于供应商，我应该使用行标题还是列标题？以及我应该如何标记 "How long can I sing?" 一旦它是行标题并且在不同的屏幕尺寸上它可以是列标题。

我明白了，很难理解我的意思，所以我做了两个模拟，但是感谢 Whosebug 我不能 post 它，因为我必须低声望...

我必须 post 它作为 link：http://postimg.org/gallery/j2elhzmc/ - 第一张图片显示它在桌面上的外观，第二张图片显示它在智能手机上的外观（如果您的订单与我）。

抱歉，如果我遗漏了一些明显的东西，但应该在每列的顶部使用列header。 （你 可以 在 table 的中间有一个列 header ，但这不是典型的，虽然我可以看到它被用作重复 header 如果它跨页拆分。）

行header 通常是该行 table 中的第一个单元格。您可以有多个行 header，但这种情况并不常见，除非您显示的是 multi-dimensional table（例如，所有行的年份为 header 的销售报告，然后每三个月 header 季度，然后 header 月）。

如果您的行 header 分布在多个 non-contiguous 单元格中，您开始（从屏幕阅读器）得到不可靠的结果。

我假设您不想使用

和

  1. 您的网格必须定义为不可编辑

A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true.

  1. 您应该明确指出关系

If relevant headers cannot be determined from the DOM structure, authors SHOULD explicitly indicate which header cells are relevant to the cell by referencing elements with role rowheader or columnheader using the aria-describedby attribute.

请注意，您可以在 aria-describedby 属性中引用 "display:none" 元素。我会说更多的语义选择将是在你的行标题元素上设置 aria-hidden 属性。

长话短说：

  1. 在网格上设置aria-readonly=true
  2. 在引用每个 "not always visible" 列标题的 "gridcell" 单元格上设置 aria-describedby 属性
  3. 删除 role="rowheader" 并设置 aria-hidden="true"