Question

基本上，对于我们的一个可访问性要求，我们必须使用role =“list”和role =“listitem”进行显式列表标记。

我面临的一个问题是尝试在搜索结果的搜索页面上执行此操作。但是，每个搜索结果都包含在“行”div中。所以它是：

<div role="list">
    <div class="row">
        <a role="listitem"
    </div>
    <div class="row">
        <a role="listitem"></a>
    </div>
    <div class="row">
        <a role="listitem"></a>
    </div>
</div>

^我想做什么。

然而，屏幕阅读器读出它只有1/1列表项。我有什么方法可以解决这个问题吗？

Answer 1

您的role="listitem"应该放在“行” <div>上。 row="list"唯一允许使用的子项是列表项。

<div role="list">
    <div class="row" role="listitem">
        <a></a>
    </div>
    <div class="row" role="listitem">
        <a></a>
    </div>
    <div class="row" role="listitem">
        <a></a>
    </div>
</div>

对于不是具有role =“list”的元素的直接子元素的元素，使用role =“listitem”？

1 个答案: