空的Heading能否通过无障碍测试
Can the empty Heading pass the accessibility test
目前我们正在开展一个 AEM 项目，它要求我们有一个卡片组件，其中包含某种图像、标题和描述。
此组件用于卡片的不同变体，在某些情况下只有图像和一些文本，在其他情况下则有描述和标题。
因此，为了保持相同的结构，我们合并了一个 <img> 标签、<h3> 标签和一个 <p> 标签。
如果卡片没有标题，<h3> 标签将留空。
当我们使用 wave 和 ax 之类的工具测试可访问性时，会弹出一个空标题的错误，因此我使用 aria-hidden="true" 绕过屏幕 reader 将其拾取。
但是，如果我们使用这种方式进行测试，wave 工具仍然会发现错误，而 ax 则不会。
我该如何解决这个问题，或者在这种情况下正确的做法是什么。
波形工具错误
如果您使用 aria-hidden="true" 隐藏它，那么空的 <h3> 并没有错，因为 aria-hidden="true" 应该从可访问性树中完全删除一个元素。 （你真的应该删除它以节省浪费的字节，但这只是模板系统的问题！）
我认为 wave 工具在这里误报了，但必须检查您的源代码才能确认。
该怎么做。
在您的情况下，我认为您应该始终在 <h3> 中包含内容以保持一致性
这取决于屏幕 reader 用户浏览页面的方式。如果用户在卡片上看到标题级别 3 的模式，他们会希望这种情况继续下去。这是因为屏幕 reader 用户倾向于按标题、链接或区域进行导航。如果您向他们展示每张卡片都有一个 h3，他们会希望这种情况继续下去，并且通过使 h3 不可见，他们会错过重要的文章/信息。
装饰图片
对于装饰性图像，我建议将您的图像放在 <h3> 中，并使用 alt="" 使它们在屏幕 reader 中不可见（您也可以添加 role="presentation"正如我在下面所做的那样，但这不是必需的）。
然后在标题中添加一些视觉上隐藏的文本，以便屏幕 reader 用户获得一致的体验。
将图像放在 <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>
目前我们正在开展一个 AEM 项目，它要求我们有一个卡片组件，其中包含某种图像、标题和描述。
此组件用于卡片的不同变体，在某些情况下只有图像和一些文本，在其他情况下则有描述和标题。
因此，为了保持相同的结构，我们合并了一个 <img> 标签、<h3> 标签和一个 <p> 标签。
如果卡片没有标题，<h3> 标签将留空。
当我们使用 wave 和 ax 之类的工具测试可访问性时，会弹出一个空标题的错误，因此我使用 aria-hidden="true" 绕过屏幕 reader 将其拾取。
但是，如果我们使用这种方式进行测试，wave 工具仍然会发现错误，而 ax 则不会。
我该如何解决这个问题，或者在这种情况下正确的做法是什么。
波形工具错误
如果您使用 aria-hidden="true" 隐藏它，那么空的 <h3> 并没有错，因为 aria-hidden="true" 应该从可访问性树中完全删除一个元素。 （你真的应该删除它以节省浪费的字节，但这只是模板系统的问题！）
我认为 wave 工具在这里误报了，但必须检查您的源代码才能确认。
该怎么做。
在您的情况下，我认为您应该始终在 <h3> 中包含内容以保持一致性
这取决于屏幕 reader 用户浏览页面的方式。如果用户在卡片上看到标题级别 3 的模式，他们会希望这种情况继续下去。这是因为屏幕 reader 用户倾向于按标题、链接或区域进行导航。如果您向他们展示每张卡片都有一个 h3，他们会希望这种情况继续下去，并且通过使 h3 不可见，他们会错过重要的文章/信息。
装饰图片
对于装饰性图像，我建议将您的图像放在 <h3> 中，并使用 alt="" 使它们在屏幕 reader 中不可见（您也可以添加 role="presentation"正如我在下面所做的那样，但这不是必需的）。
然后在标题中添加一些视觉上隐藏的文本，以便屏幕 reader 用户获得一致的体验。
将图像放在 <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>