爲視覺上挑剔的人添加文本

在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自己做到嗎，這樣我就可以將更改應用到整個應用程序，只需將它放在一個地方即可？

來源

2017-03-21 user1447718

如果我理解你是正確的，你想添加一個屏幕閱讀器可讀的標籤。

爲此，我們有ARIA標準，這是一組屬性，您可以添加到HTML元素中，通過瀏覽器中實現的輔助功能API將角色，狀態和屬性語義與輔助技術進行通信。

我沒有太多的信息，因爲我從來沒有真正使用它，但我可以提供一些鏈接，所以你可以閱讀它，希望它有幫助。此外，據我所知，你可以添加這個JavaScript，所以你不必對你的應用程序做很多改變。

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

來源

2017-03-21 17:41:00 egvaldes

是，我明白我們需要使用ARIA標籤，但知道哪一個，以及如何... – user1447718

@ user1447718嗯，正如我所說的，我從來沒有真正使用過，所以我可以沒有直接的答案，但是這裏有一個關於如何使用它們的例子的唱片公司的指南，希望它能幫助你更多。 [鏈接]（https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships） – egvaldes

爲視覺上挑剔的人添加文本

回答

相關問題