Question

我的目标是一个可访问的网站，其中包含用于分组内容的图块。它们被实现为一个样式div，除了对其内容进行分组之外没有其他语法目的。

  <div class="tile">
    <a href="#profile">Profile</a>
    <a href="#messages">Messages</a>
    <a href="#documents">My Documents</a>
  </div>
  <div class="tile">
    <a href="#jobs">Jobs</a>
    <a href="#education">Education</a>
    <a href="#faq">FAQ</a>
  </div>

    .tile {
    background-color: white;
      border-width:   2px;
      border-radius:  4px;
      border-color:   transparent;
    }

我想为屏幕阅读器提供其内容所属的信息。另一方面，我不能使用全局ID（比如使用WAI ARIA组角色）。

是否有任何语法技巧可以告诉我的屏幕阅读器 - 用户哪些富文本内容属于一起而不使用全局ID？

（Q1）<section>会是一个有效的，可理解的解决方案吗？

亲切的问候

编辑：添加示例;增加了问题（Q1）

Answer 1

我的第一直觉是将这些列表中的每一个 - 它添加了一些额外的标记，但它是一种很好的方法来分组相关的概念。另一种选择（如果你愿意，可以同时使用这两种选项）是使用不可见的标题。 h2，h3或其他适当的标题级别适用于每个块，但css使其不可见（不是通过display: none或visibility: hidden;查找“可访问的屏幕阅读器文本”有关此模式的更多详细信息。）

如果需要，您还可以在每个父div上使用role=group和aria-label，但我认为列表和/或标头语义更常见。

无障碍瓷砖

1 个答案: