时间戳

首页 > 解决方案 > Accessibility and shortcuts in pages

html - Accessibility and shortcuts in pages

问题描述

Hello to the community! I'm currently trying to enhance a website with good accessibility practices.

I have some concerns about a page that lists a huge amount of repeated results blocks, each having 5 links.

When navigating with the keyboard, jumping from one block to the other requires 5 tabs, which is really painful. So I thought about a hidden select dropdown that creates anchor links to the right block.

The select works like a charm, but has some usability or design issues:

  1. If hidden, this makes an "empty" tab for sighted users.
  2. I tried to totally hide it but when focused, the options are force-shown by the browser. This makes weird behaviour for sighted users if they accidentally open it (via a tab, seen on first point).
  3. I tried to push it out of the viewport (left:-999px or via div overflow hidden) but Chrome then makes it unselectable.
  4. Showing it from the start makes the design ugly. (Having a solo select in the middle of the page is not really friendly.)

And overall, I try as much as possible to keep the page light and sustainable and avoid, as much as possible full JS features.

What is your opinion about this? Do you have any other ideas that would fit? Any insight would be invaluable!

Thank you!

--- EDIT ---

I added here the global structure of the results list (I don't go in details but main repeated elements are here): 

<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>

标签： htmlaccessibility

解决方案

如您所见，隐藏表单字段或下拉菜单并显示在焦点上并不是一个好主意，因为它很容易产生功能错误或不需要的视觉效果。

此外，它不太可能有太大帮助。屏幕阅读器用户不是仅使用选项卡的用户。我自己是一个屏幕阅读器用户，我们有更有效的方法来访问我们感兴趣的信息，而不是重复按 Tab（请阅读下文）。只有大初学者才能这样做。仅选项卡的用户更有可能被看到。他们可能会从下拉菜单中受益，但当然前提是它始终可见。

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

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

屏幕阅读器提供了特殊的快捷方式，可以通过标题或地标导航标题到地标。事实上，我们可以，而且我们尽可能地滥用它，使用这些快捷方式来快速跳过我们不感兴趣的块。

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

以 Google 搜索结果为例。每个结果都是一个标题。如果标题说明一切并立即倾斜，这也是我们可以直接点击的链接。如果我们不确定，我们可以阅读下面的描述或访问其他选项。如果我们对结果不感兴趣，我们可以直接按快捷键转到下一个标题，因此我们很快就跳过了我们不感兴趣的结果。

推荐阅读