如何通过包含图像和文本的链接来满足PageSpeed Insight中的可访问性？-解网

问：

PageSpeed Insights 一直在 Accessibiliy 上惩罚我，因为我有一个带有图像和文本的按钮（锚链接）。锚标记的值与链接内的文本相同。aria-label

下面是 HTML：

<style>
    a {
        display: inline-block;
        padding: 20px;
        background-color: #000;
        color:#fff;
    }
</style>

<a aria-label="Call us now" href="tel:123456">
    <img src="images/phone.png" width="20" height="20">
    Call us now
</a>

我尝试了以下解决方案：

溶液	可访问性惩罚
图片没有alt属性	[-9]图像元素没有 [alt] 属性（加上 [-8] 的额外 SEO 惩罚）
图像具有 alt-attribute	[-7]具有可见文本标签的元素没有匹配的辅助名称。
图像具有值匹配的 alt-attribute aria-label	[-8]具有可见文本标签的元素没有匹配的辅助名称。和图像元素具有冗余文本的 [alt] 属性。

我不想引入黑客来解决这个问题（例如，使用伪类、背景图像或列表样式图像通过 css 添加图像），因为我认为这是一个相当正常的用例，应该没问题。但也许我错了？这是PageSpeed Insights的缺点，还是我应该以不同的方式执行此操作？

可访问性 PageSpeed-Insights

@Jerry 回复：“第一个解决方案感觉不对” < - 这没有错。跳过使用装饰性图标被认为是标准（最佳）做法。如果您已经有相关文本（“立即致电我们”），则标记图标只会减慢屏幕阅读器的速度。用户不需要听到“链接电话图标立即呼叫我们”alt=""

1赞 tdy 11/14/2023

@Jerry 缺失与空 .如果缺少，某些屏幕阅读器将大声朗读文件/URL（而不是跳过图像）。设置空是保证屏幕阅读器跳过图像的唯一方法。altalt=""altsrcalt=""

1赞 Barry Pollard 11/14/2023

alt=""最初可能看起来很奇怪，这有点特例。这是一个众所周知的、使用良好的快捷方式，用于从 a11y 树中隐藏图像（它基本上是的简写，但支持时间甚至比这更长）。始终包含一个属性来提醒您考虑 a11y 并且仅在您真正认真的情况下将其显式设置为空字符串也是一种很好的做法。事实上，从技术上讲，没有元素的 HTML 是无效的，HTML 验证器会坚持要求你添加一个（即使它是空的）。aria-hidden=truealt<img>alt

0赞 Jerry 11/11/2023 #2

Barry 的回答解释了大部分内容，但为了完整起见，他想添加这个。他的回答让我更深入地了解这个问题。aria-label

取自 mozilla 上的定义，“aria-label 可用于可以标记元素的文本不可见的情况。"

因此，当锚标记之间有文本时，就不需要 aria-label。以下是 3 种可能的情况，它们都将在辅助功能上获得满分：

与图像链接

使用 aria-label，图像标签具有 alt 属性

<a aria-label="Call us now" href="tel:45678">
    <img src="images/just-phone.png" width="40" height="40" alt=phone icon>
</a>

与图像链接

如果没有 aria-label，image 具有 alt 属性

<a href="tel:45678">
    <img src="images/just-phone.png" width="40" height="40" alt="phone icon">
</a>

与图像和文本链接

如果没有 aria-label，image 在锚标记之间具有 alt 属性和文本。

<a href="tel:45678">
    <img src="images/just-phone.png" width="40" height="40" alt="phone icon">
    Call us now
</a>

这些示例不被视为良好做法。过度标签是一个常见的可访问性陷阱。我建议使用屏幕阅读器试用它们，看看最终用户的实际体验。考虑一下在整个页面中听到这么多无关的单词“链接电话图标立即致电我们，链接twitter图标，现在链接我们，链接facebook图标，在facebook上分享此页面，链接个人资料图片，转到用户个人资料链接房屋图标，转到主页链接齿轮图标，转到设置......”

0赞 Jerry 11/14/2023

@tdy 这是一个很好的观点。

1赞 Barry Pollard 11/14/2023

+1 到 @tdy 的评论。ARIA （w3.org/TR/using-aria/#firstrule）的第一条规则是，如果没有必要，就不要使用它。有一种众所周知的、被广泛接受的方法来标记它（使用图像和/或文本），而无需诉诸 .第一个示例意味着图像替代文本被覆盖，可能不会被使用，因此在不使用时指定它会令人困惑。第二个不是很好，因为它没有解释链接的作用（拨打一个号码）——尽管可以说视力正常的用户也必须猜测。第三个可能确实过于冗长。altaria-label

上一个：在 Jetpack Compose 中，如何使文本字段字符串中的特定字词在辅助功能中具有可识别性？

下一个：辅助功能焦点不会转到 Andorid 中 ScrollView 中最后一项的键上的DPAD_RIGHT下一个视图

如何通过包含图像和文本的链接来满足PageSpeed Insight中的可访问性？

How to satisfy Accessibility in PageSpeed Insight with a link that contains both an image and text?

评论

评论

与图像链接

与图像链接

与图像和文本链接

评论