Question

您好！我目前正在尝试通过良好的无障碍访问实践来增强网站。

我对一个页面感兴趣，该页面列出了大量重复的结果块，每个块都有5个链接。

使用键盘导航时，从一个块跳转到另一个块需要5个选项卡，这确实很痛苦。因此，我想到了一个隐藏的select下拉列表，该下拉列表创建了指向正确块的锚链接。

select的工作原理很像，但是有一些可用性或设计问题：

如果隐藏，则会为可见的用户创建一个“空”标签。
我试图完全隐藏它，但是当聚焦时，这些选项将由浏览器强制显示。如果有意发现的用户不小心打开了它，这会使他们产生奇怪的行为（通过标签，在第一点看到）。
我试图将其推出视口（左：-999px或通过div溢出隐藏），但Chrome使其无法选择。
从一开始就显示它会使设计难看。（在页面中间进行单独选择并不是很友好。）

总的来说，我会尽力使页面保持光明和可持续发展，并尽可能避免完整的JS功能。

您对此有何看法？您还有其他适合的想法吗？任何见解都是无价的！

谢谢！

---编辑---

我在这里添加了结果列表的全局结构（我不赘述，但主要的重复元素在这里）：

<section>

<h2> Nb of results + query </h2>
<!-- first idea : add a select here -->
<ul>
    <li>
        <!-- second idea : add hidden link here with focusable switched -->
        <h3>
            <a> Result name</a>
        </h3>
        <p> description </p>

        <a> link 1</a>
        <a> link 2</a>
        <a> link 3</a>
        <a> link 4</a>
    </li>

    <!-- repeating this li more than 10 times -->

</ul>

<!-- pagination goes here -->

</section>
<aside>
<!-- aside content -->
</aside>

Answer 1

如您所见，隐藏表单域或下拉列表并使其集中显示不是一个好主意，因为容易产生功能性错误或不良的视觉效果。

此外，它没有太大帮助。屏幕阅读器用户不是仅标签用户。我本人是屏幕阅读器用户，与重复按下Tab键（下面进一步阅读）相比，我们拥有更有效的方法来获取我们感兴趣的信息。只有大的初学者才能做到这一点。仅使用制表符的用户更有可能被看到。他们可能会从下拉菜单中受益，但当然只有在始终可见的情况下。

对于屏幕阅读器用户，我宁愿建议添加适当的标记以便对项目进行分组：有几种方法可以做到这一点：

使用标题H1-6
使用<article>，<section>（另一种可自动创建地标的标签），或使用ARIA自己创建地标。
使用列表，定义列表并适当嵌套

屏幕阅读器提供了特殊的快捷方式，可按标题或地标导航到地标。实际上，我们可以并且只要有可能就滥用它，可以使用这些快捷方式快速跳过我们不感兴趣的块。

上面的这个小列表是按优先顺序排列的。标题比地标更好，因为地标是最近才添加的，因此仍然有许多用途是首先用于查找标题。嵌套列表不太好，因为很难跳过不感兴趣的部分，但是如果您没有解决方案来正确添加标题或地标，那么嵌套列表总比没有好。

以Google搜索结果为例。每个结果都是一个标题。如果标题说明所有内容并立即倾斜，则它也是我们可以直接单击的链接。如果不确定，我们可以阅读下面的说明或访问其他选项。如果我们对结果不感兴趣，我们可以按快捷方式转到下一个标题，因此我们迅速跳过了我们不感兴趣的结果。

Answer 2

不确定“结果块”是什么意思，但是在a11y游戏中浏览过去在每个页面上重复导航都是一种令人讨厌的麻烦。

某种隐藏的“跳至主要内容”功能（在导航之前）显示为第一个制表位之一，这是非常此类问题的常见解决方案。在网络上搜索“辅助功能跳至主要页面” ，您会发现很多建议。是的，您可能需要一些JavaScript来聚焦并显示隐藏的链接。

如果页面上有非交互式内容，则屏幕阅读器用户可以使用特殊技巧快速访问它，而无需进行所有制表。您也可以考虑使用标志性角色，甚至使用自定义键盘快捷键在文档中导航。

如果您担心（第2点）有视力的用户不小心按Tab键会看到一个丑陋的小部件，那么... 使其美观。

页面中的辅助功能和快捷方式

2 个答案: