html - 为视障人士添加文字

Question

在 Web 应用程序中，当用户输入数据并跳出时，我会在控件右侧添加一个勾号，表示所需的字段验证成功。如果用户在没有输入数据的情况下切换到另一个控件，我会显示一个十字标记。

我使用的样式是:

打勾

input-valid::after {
    position: relative;
    display: inline-block;
    margin-left: -1em;
    content: "\2714";
    font-size: 18px;
    color: #438D5B;
}

交叉

input-invalid::after {
    position: relative;
    display: inline-block;
    margin-left: -1em;
    content: "\2716";
    font-size: 18px;
    color: #D60036; 
}

但对于有视力障碍的人来说，看到这个勾号或叉号是个问题。所以，我想在验证成功时读出文本“验证成功”。我该怎么做？我可以通过 CSS 本身来完成它，以便我可以通过在一个地方进行更改来将更改应用到整个应用程序吗？

Answer 1

如果我没理解错的话，您想添加屏幕阅读器可读的标签。

为此，我们拥有 ARIA 标准，它是一组属性，您可以将这些属性添加到 HTML 元素中，这些元素通过浏览器中实现的可访问性 API 将 Angular 色、状态和属性语义传达给辅助技术。

我没有太多关于此的信息，因为我自己从未实际使用过它，但我可以为您提供一些链接，以便您阅读它，希望它有所帮助。此外，据我所知，您可以使用 JavaScript 添加它，这样您就不必对应用程序进行大量更改。

http://html5doctor.com/using-aria-in-html/ http://w3c.github.io/aria-in-html/