无障碍瓷砖
Accessible Tiles
我的目标是创建一个可访问的网站,其中包含用于对内容进行分组的图块。它们作为样式 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)
我的第一直觉是将其中的每一个都列成一个列表——它添加了一些额外的标记,但这是对相关概念进行分组的好方法。另一种选择(如果你愿意,你可以同时使用这两种方法)是使用不可见的 header。 h2、h3 或任何适合这些块的 header 级别,css 使其不可见(不过,不是通过 display: none
或 visibility: hidden
;看向上 "accessible screen-reader text" 了解有关此模式的更多详细信息。)
如果需要,您也可以在每个 parent div 上使用 role=group
和适当的 aria-label
,但我认为列表 and/or header 语义更常见。
我的目标是创建一个可访问的网站,其中包含用于对内容进行分组的图块。它们作为样式 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)
我的第一直觉是将其中的每一个都列成一个列表——它添加了一些额外的标记,但这是对相关概念进行分组的好方法。另一种选择(如果你愿意,你可以同时使用这两种方法)是使用不可见的 header。 h2、h3 或任何适合这些块的 header 级别,css 使其不可见(不过,不是通过 display: none
或 visibility: hidden
;看向上 "accessible screen-reader text" 了解有关此模式的更多详细信息。)
如果需要,您也可以在每个 parent div 上使用 role=group
和适当的 aria-label
,但我认为列表 and/or header 语义更常见。