Question

我正在制作响应表，我希望每个人都能完全访问它。但在这种情况下，我不知道我应该在哪里使用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:

对于供应商，我应该使用rowheader还是columnheader？我应该如何标记＆＃34;我能唱歌多久？＆＃34;一旦它是行头并且在不同的屏幕尺寸上，它就可以是列标题。

我知道，我很难理解我的意思，所以我做了两次嘲讽，但多亏了StackOverflow，我无法发布它，因为我的声誉很低......

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

Answer 1

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

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

您应明确指出关系

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

请注意，您可以引用＆＃34; display：none＆＃34; aria-describedby属性中的元素。我会说更多的语义选择是在你的rowheader元素上设置aria-hidden属性。

TL; DR：

在网格上设置aria-readonly=true
在＆＃34; gridcell＆＃34;上设置aria-describedby属性细胞引用你的每一个＆＃34;并不总是可见＆＃34;的columnHeader
移除role="rowheader"并设置aria-hidden="true"

Answer 2

很抱歉，如果我遗漏了明显的东西，但应在每列的顶部使用columnheader。（你可能在表格的中间有一个列标题，但这并不典型，但我可以看到它在页面中分割时用作重复标题。）

rowheader通常是该行表中的第一个单元格。除非您显示多维表格（例如，所有行都有年度标题的销售报表，然后是每三个月的季度标题，然后是月份，否则您可以拥有多个行标题但它并不常见头）。

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

我假设您不想使用＆lt; table＆gt;和＆lt; th scope =＆＃39; row | col＆＃39;＆gt;

适当的ARIA元标记用于响应表

2 个答案: