Question

给出以下HTML结构：

<body>
<div style="display: table;" id="main">
    <div style="display: table-cell;">
        <p>Option 1</p>
        <p>Text 1</p>
    </div>
    <div style="display: table-cell;">
        <p>Option 2</p>
        <p>Text 2</p>
    </div>
    <div style="display: table-cell;">
        <p>Option 3</p>
        <p>Text 3</p>
    </div>
</div>
</body>

如果为#main分配了ARIA主要角色（role="main"作为属性），则此结构的屏幕阅读顺序为＆＃34;选项1选项2选项3文本1文本2文本3＆＃34 ;.但是，如果未设置，则阅读顺序为＆＃34;选项1文本1选项2文本2选项3文本3＆＃34;。

我希望第二种可能性被阅读，但是，我也希望将该元素分配给main角色。如何避免这种行为？有原因吗？这是一个错误吗？

Answer 1

这可能是一个错误，但这并不重要，因为您的标记非常难以访问，需要更改。

此标记违反了两项WCAG 2 AA成功标准：

1.3.1 Info and Relationships

标记违反了这一点，因为标签/标题（“选项1”，“选项2”等）与其内容之间的关系并不明确。
4.1.2 Name, Role, Value and State

标记违反了这一点，因为标签/标题的作用不明确

所以我的建议如下：

将表格数据放入带有所有相应标记的HTML <table>元素中。使用范围属性指示标题和数据之间的关系，并使用标题的<th>元素。
使用<div>将role="main"包装在该表周围，或使用<main>元素。

Answer 2

您使用的是哪种屏幕阅读器？我尝试使用NVDA（最新更新），它似乎以添加role="main"的方式阅读。但是，我确实添加了role="columnheader"，这可能有助于您的事业。

<style>
    #container { display: table; }
    .tc { display: table-cell; }
</style>

<div role="main">
    <div id="container">
        <div class="tc">
            <span role="columnheader">Option 1</span>
            <p>Text 1</p>
        </div>
        <div class="tc">
            <span role="columnheader">Option 2</span>
            <p>Text 2</p>
        </div>
        <div class="tc">
            <span role="columnheader">Option 3</span>
            <p>Text 3</p>
        </div>
    </div>
</div>

那就是说，我同意@unobf和@unor关于标记。此外，在布局方面使用"display: table"可能不是实现此目的的最佳方式，尽管它可以有valid usages。希望这会有所帮助。

ARIA主要角色改变了屏幕阅读顺序

2 个答案: