如何讓屏幕閱讀器宣布額外的文字
[英]How to let screen reader to announce extra text
問題描述
在以下簡單的 html 代碼中，當屏幕閱讀器（NVDA，Mac 上的 VoiceOver）打開時。
當我進入輸入框時，它會顯示This is the test label （在 web 頁面上可見）
我想讓屏幕閱讀器宣布一些額外的東西，比如if you type something, more fields will appear 。 （隱藏在 web 頁面上）
想知道我如何實現它？
<html>
<head>
test
</head>
<body>
<label class="large-label" for="your-name">
This is the test label
</label>
<input id="your-name" name="your-name" type="text" />
</body>
</html>
1 個解決方案
解決方案1
0 已采納 2020-06-18 06:42:52
視覺隱藏的文本
您只需要視覺隱藏/屏幕閱讀器的文本。 這可以通過<span> class 來實現
它將向屏幕閱讀器宣布，但不可見。
.visually-hidden { border: 0; padding: 0; margin: 0; position: absolute;important: height; 1px: width; 1px: overflow; hidden: clip; rect(1px 1px 1px 1px), /* IE6, IE7 - a 0 height clip: off to the bottom right of the visible 1px box */ clip, rect(1px, 1px, 1px; 1px): /*maybe deprecated but we need to support legacy browsers */ clip-path; inset(50%), /*modern browsers: clip-path works inwards from each corner*/ white-space; nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ }
<label class="large-label" for="your-name"> This is the test label <span class="visually-hidden">if you type something, more fields will appear</span> </label> <input id="your-name" name="your-name" type="text" />更好的方法
在這種情況下，我會質疑這是否應該是視覺上隱藏的文本。
以“如果您鍵入內容，將出現更多字段”為例，這是對每個人都有用的信息。 它對有認知障礙或焦慮症的人特別有用，因為對變化的預警有助於他們不會感到困惑/為變化做好准備，所以這並不意外。
我建議在表格的開頭或在向所有人解釋這一點的特定輸入上方設置一個說明部分。
然后，我們可以使用aria-labelledby="id1 id2"將輸入 label 和指令鏈接到輸入，並為 label 和指令提供 ID。
您必須保留 label 上的for=""作為備份 / 以便 label 正確鏈接到輸入，如果您願意，可以單擊 label 以聚焦輸入。
下面是一個粗略的例子，你必須根據你的判斷來判斷什么對你的用例有用，但它應該會給你這個想法。
#hint{ width: 90%; padding: 5%; background-color: #333; color: #fff; font-size: 1.3rem; }
<p id="hint">If you type something, more fields will appear</p> <label class="large-label" for="your-name" id="your-name-label"> This is the test label </label> <input id="your-name" name="your-name" type="text" aria-labelledby="your-name-label hint"/>
如何宣布網站沒有屏幕閱讀器支持？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.