无障碍瓷砖

Question

我的目标是一个可访问的网站与瓦片，以组内容。它们被实现为一个样式化为div的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组角色一样)。

有没有什么语法技术可以告诉我的屏幕阅读器用户哪些富文本内容不需要使用全局Is就可以放在一起？

(Q1) <section>是有效的、可理解的解决方案吗？

亲切的问候

编辑:添加示例；添加问题(Q1)

Answer 1

我的第一反应是把它们都做成一个列表--它增加了一些额外的标记，但这是一种对相关概念进行分组的好方法。另一种选择(如果您愿意，可以同时使用这两种方法)是使用不可见的头部。一个h2、h3或这些块的适当头级别，使用css使其不可见(不过，不是通过display: none或visibility: hidden；有关此模式的更多详细信息，请查看“可访问的屏幕阅读器文本”)。

如果您愿意，您也可以在每个父aria-label上使用带有适当div的role=group，但我认为列表和/或标题语义更常见。