给定以下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"作为属性），则此结构的屏幕读取顺序将为"选项 1 选项 2 选项 3 文本 1 文本 2 文本 3"。但是，如果未设置，阅读顺序将为"选项 1 文本 1 选项 2 文本 2 选项 3 文本 3
我希望阅读第二种可能性，但是，我也想将该元素分配给main角色。如何避免这种行为？这有什么原因吗？这是一个错误吗？
这可能是一个错误，但这并不重要，因为您的标记非常无法访问，需要更改。
此标记违反了两个 WCAG 2 AA 成功标准：
-
1.3.1 信息和关系
标记违反了这一点，因为标签/标题（"选项 1"、"选项 2"等）与其内容之间的关系不明确。
-
4.1.2 名称、角色、值和状态
标记违反了这一点，因为标签/标头的角色不明确
所以我的建议如下：
-
将表格数据放入具有所有相应标记的 HTML
<table>元素中。使用范围属性指示标头和数据之间的关系，并对标头使用<th>元素。 -
在带有
role="main"的表周围放置一个<div>包装器，或使用<main>元素。
您使用的是哪种屏幕阅读器？ 我尝试使用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" 可能不是实现此目的的最佳方式，尽管它可以具有有效的用法。希望这有帮助。