如何修复可访问性的空按钮？
Posted
技术标签:
【中文标题】如何修复可访问性的空按钮？【英文标题】：How to fix an empty button for accessibility? 【发布时间】：2019-10-28 13:49:54 【问题描述】：我正在使用 React 构建一个聊天 UI，它需要可访问。我正在使用Wolox/react-chat-widget。我不想使用徽章功能。使用 WAVE 工具对其进行测试时，tt 会触发网络聊天启动器按钮的空按钮错误。在不修改基础库的情况下解决此问题的解决方法是什么？
【问题讨论】：
【参考方案1】：如果不扩展或编辑源，则无法解决此问题。
这个错误是因为启动聊天的按钮没有可读的内容，只有一个 SVG 文件。
您可以通过修改components/Widget/components/Launcher/index.js 来简单地向打开和关闭图像中当前为空的 alt 标记添加信息，从而轻松解决此问题（尽管不是理想的解决方法，而是最省力的方法）。 (alt="close chat", alt="open chat")。
最好还是发送一个拉取请求，要求作者更新它，这样每个人都可以从增加的可访问性中受益。
请记住，此聊天还有许多其他可访问性问题需要考虑，例如管理模态中的焦点、退出键以关闭等（可能有这些，但您必须考虑它们。）
【讨论】：
以上是关于如何修复可访问性的空按钮？的主要内容，如果未能解决你的问题，请参考以下文章
如何在本机反应中禁用文本输入的字体缩放（可访问性的动态类型）？
如何在不损害可访问性的情况下删除 Firefox 链接中的虚线轮廓？