Question

在Web应用程序中，当用户输入数据和标签时，我在控件右侧给出一个刻度标记，表示所需的字段验证成功。如果用户在没有输入数据的情况下选择另一个控件，我会显示一个十字标记。

我正在使用的样式是：

表示打勾

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

for cross

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

但对于有视力挑战的人来说，看到这个蜱或十字架是一个问题。所以，只要验证成功，我想读出文本“验证成功”。我该怎么做？我可以通过CSS本身来完成，以便我可以将更改应用到整个应用程序中吗？

Answer 1

如果我理解你，你想添加一个屏幕阅读器可读的标签。

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

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

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

为视觉上挑战的人添加文字

1 个答案: