Twitter bootstrap 3 响应表的正确ARIA元标记

我正在制作一张反应灵敏的桌子，我希望每个人都能完全接触到它。但在这种情况下，我不确定应该在哪里使用rowheader，在哪里使用columheader

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

标题1
供应商1
内容
供应商2
内容

对于供应商，我应该使用rowheader还是columnheader？以及我应该如何标记“我能唱多久？”一旦它是行标题，在不同的屏幕大小上它可以是列标题

我明白了，很难理解我的意思，所以我做了两次嘲弄，但多亏了StackOverflow，我无法发布它，因为我的声誉太低了

---

我必须将其作为链接发布：-第一张图片显示它在桌面上的外观，第二张图片显示它在智能手机上的外观（如果您的订单与我相同）。

如果我遗漏了一些明显的内容，很抱歉，但应该在每一列的顶部使用columnheader。（您可以在表中间有一个柱头，但这不是典型的，虽然我可以看到它是一个重复的头，如果它在页面上分裂）。< /P> rowheader通常是表中该行的第一个单元格。您可以有多个行标题，但除非您显示多维表（例如，销售报告的所有行都有一个年度标题，然后每三个月有一个季度标题，然后是月份标题），否则这并不常见

如果行标题分布在多个不连续的单元格中，则会得到不可靠的结果（来自屏幕阅读器）

我假设你不想使用

网格必须定义为不可编辑

除非另有规定，否则栅格视为可编辑。要使网格为只读，请将网格的aria readonly属性设置为true

您应该明确指出关系

如果无法从DOM结构中确定相关的头，则作者应使用aria describedby属性通过引用具有rowheader或columnheader角色的元素来明确指示哪些头单元格与单元格相关

请注意，您可能会在aria descripeby属性中引用“display:none”元素。我要说的是，更多的语义选择将是在rowheader元素上设置

aria hidden

属性

TL；博士：

在网格上设置

aria readonly=true

在引用每个“不总是可见”列标题的“gridcell”单元格上设置“aria descripbeby属性

删除

role=“rowheader”

并设置

aria hidden=“true”

---

你应该用一个有效的例子来编辑你的文章。。。您有两行：一行有两列（2列标题），一行有5列，一行有3行标题2网格单元格。看着你的提琴，情况有所不同，但我看不到你的“供应商”栏，它有两个大的“免费”图像，没有文本替代…嘿，我的提琴100%工作，我明白了，你没有使用引导。若要查看“缺失”元素，必须将浏览器窗口调整为智能手机大小。出现了问题-桌面上的行变成了智能手机上的列…好吧，我想你可能会错过一些东西-供应商1、供应商2的行标题在某些分辨率（例如智能手机）之前不可见，这里出现了我的问题-桌面上的行标题变成了智能手机上的列标题。。。

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