空标题能否通过可访问性测试

Question

目前我们正在处理一个 AEM 项目，它要求我们有一个卡片组件，其中包含某种图像、标题和描述。

此组件用于卡片的不同变体，在某些情况下只有图像和一些文本，在其他情况下是描述和标题。

所以为了保持相同的结构，我们合并了一个<img> 标签、<h3> 标签和一个<p> 标签。

如果卡片没有标题，<h3> 标签将留空。

当我们使用 wave 和 ax 等工具测试可访问性时，会弹出空标题的错误，因此我使用 aria-hidden="true" 绕过屏幕阅读器将其拾起。

但是，如果我们使用这种方式进行测试，wave 工具仍然会选择错误，而 ax 不会。

我该如何解决这个问题，或者在这种情况下应该怎么做。

Answer 1

波形工具错误

如果你用aria-hidden="true" 隐藏它，那么拥有一个空的<h3> 并没有错，因为aria-hidden="true" 应该从可访问性树中完全删除一个元素。 （您应该真正删除它以节省浪费的字节，但这只是模板系统的问题！）

我认为 wave 工具在这里误报，但必须检查您的源代码才能确认。

该怎么做。

在您的情况下，我认为您应该始终在 <h3>s 中包含内容以保持一致性

这取决于屏幕阅读器用户浏览页面的方式。如果用户在卡片上看到标题级别 3 的模式，他们会期望这种情况会继续下去。这是因为屏幕阅读器用户倾向于通过标题、链接或区域进行导航。如果您向他们展示每张卡片都有一个 h3，他们会期望这种情况会继续下去，并且通过使 h3 不可见，他们会错过重要的文章/信息。

装饰图片

对于装饰性图像，我建议将您的图像放在<h3> 中，并使用alt="" 使它们对屏幕阅读器不可见（您可以添加role="presentation" 以及我在下面所做的，但不需要）。

然后在标题中添加一些视觉上隐藏的文本，以便屏幕阅读器用户获得一致的体验。

将图像放在<h3> 中是有效的 HTML，这很好。

传达重要信息的图片（非装饰性）

简单地添加image with an alt attribute to a heading as it is well supported并没有错，这完全取决于您的图像是用于装饰目的还是传达意义。

您只需要确定图像是否具有装饰性。

示例

以下示例以最简单的形式演示了这两种技术。

.card{
  padding: 10px;
  margin: 20px;
  border: 2px solid #333;
}


.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class="card">
<h3>this card has a heading</h3>
<p>The user would hear "heading level 3 - this card has a heading"</p>
</div>

<div class="card">
<h3><img src="https://placehold.it/150"/ alt="" role="presentation"><span class="visually-hidden">This heading has an image but it is for presentation</span></h3>
<!--notice how this version does not announce there is an image-->
<p>The user would hear "heading level 3 - this heading has an image but it is for presentation"</p>
</div>


<div class="card">
<h3><img src="https://placehold.it/150"/ alt="Important image that converys information"></h3>
<p>The user would hear "heading level 3 - image - Important image that converys information"</p>
</div>