这是什么
现代网站上许多按钮只使用图标，没有可见文字——一个放大镜代表搜索，一个汉堡图标代表菜单，一个 X 代表关闭弹窗。视力正常的访客凭借熟悉度和上下文能立刻认出这些图标，但屏幕阅读器却没有任何东西可以朗读，除非这个按钮在幕后还附带了无障碍文本，通常通过一个 aria-label 属性（例如 aria-label="搜索"）实现，它不会在视觉上显示出来，但会被朗读给屏幕阅读器。
如果没有这个，屏幕阅读器就只会朗读通用的「按钮」这个词，不提供任何进一步的信息，完全没有指示按下它实际会发生什么。
为什么重要
一个对视力正常的人来说视觉上一目了然的图标，对看不见它的人来说本身不携带任何信息——图标本身如果没有视觉，并不天然具有意义，只有它所代表的概念才有意义，而这个概念对屏幕阅读器用户来说必须通过其他方式传达。一个页面上满是仅有图标的按钮，每一个都只被朗读成「按钮、按钮、按钮」，让屏幕阅读器用户完全无从知道它们各自的作用，除非靠猜测并按下去试试看。
这是一个普遍存在、又容易被忽略的问题，恰恰是因为仅有图标的按钮是一种常见、视觉上简洁的设计模式——这个无障碍缺口只有在实际用屏幕阅读器测试时才会变得明显，而不是仅仅看着页面。
如何解决
- 找出你网站上所有仅使用图标、没有可见文字标签的按钮。
- 添加一个
aria-label属性，用几个字描述按钮的操作，例如aria-label="关闭菜单"或aria-label="搜索"。 - 在可能的情况下，考虑在图标旁边额外加一个简短的可见文字标签——这也有助于视力正常的访客，并减少对记住图标含义的依赖。
- 如果你使用的是网站建设工具，检查平台生成的图标按钮是否默认已经包含了无障碍标签——有些平台有，有些则需要你手动填写「可访问名称」或「屏幕阅读器文本」字段。
- 用免费的屏幕阅读器（NVDA、VoiceOver）测试，逐一切换到每个图标按钮，确认它朗读出的是清晰、具体的操作，而不仅仅是「按钮」。