我可以刪除屏幕閱讀器提示並保留占位符文本嗎

Question

我正在與谷歌瀏覽器屏幕閱讀器一起進行調查。 我注意到占位符值呈現為“提示，輸入您的姓名”。

所以屏幕閱讀器說。 “輸入你的名字，提示輸入你的名字”

屏幕閱讀器已經在閱讀標簽，所以我的問題是，這個占位符提示似乎是多余的。 我可以在保留占位符文本的同時刪除屏幕閱讀器提示嗎？

<fieldset class="about">
          <legend>About you</legend>
          <label id="name-label" for="name">Enter your name</label>
          <input id="name" name="name" type="text" placeholder="enter your name">
          <label id="email-label" for="email">Email</label>
          <input id="email" name="email" type="email" placeholder="Enter your email">
          <label id="age-label" for="number">Age</label>
          <input id="number" name="number" type="number min="10" max="100" placeholder="Age">
</fieldset>

我嘗試在屏幕閱讀器選項上使用 display: none ，但是輸入不可聚焦。 還有其他選擇嗎？

<form id="survey-form">
    <fieldset class="Enter your name">
      <legend>Enter Your name</legend>
      <label id="name-vis" for="name-vis"></label>
      <input id="name-vis" name="name" type="text" placeholder="enter your name" aria-hidden="true">
      <label id="name-read" for="name-read">Enter your name</label>
      <input id="name-read" name="name" type="text">
    </fieldset>
</form>

謝謝你的幫助

Answer 1

可以有多種方法，使用 aria-label 和 aria-labelledby 以及 aria descriptionby

嘗試使用 aria-label 應該可以

<form id="survey-form">
        <fieldset class="Enter your name">
          <legend>Enter Your name</legend>
          <label id="name-vis-label" for="name-vis"></label>
// added aria-label for input element
          <input id="name-vis" aria-label="Enter your name" name="name" type="text" placeholder="enter your name">
        </fieldset>
    </form>

Answer 2

該特定屏幕閱讀器（chromevox）正在添加“提示”一詞。 JAWS、NVDA 和 VoiceOver 都沒有說“提示”。

確保您了解“可訪問名稱”和“可訪問描述”之間的區別。 我在這兩個答案中談到了這兩個概念：

• 為文本框指定屏幕閱讀器通知
• 當使用語義 HTML 制作 <table> 時，我可以使用 <h1> 和 aria-describedby 而不是 <caption> 嗎？

在“可訪問名稱計算”中使用placeholder屬性來計算“可訪問描述”。 正如我在前兩個答案中所指出的，屏幕閱讀器將宣布元素的“可訪問名稱”，然后是“可訪問描述”。 使用 chromevox，聽起來像是添加了“帶提示”，即使它不是您元素的一部分。 我不會試圖擺弄屏幕閱讀器如何宣布事情。

但是回到您的原始代碼，我發現占位符與標簽的文本相同有點奇怪。 重復文本對用戶有何幫助？ 占位符的規范說：

“占位符屬性表示旨在幫助用戶輸入數據的簡短提示（單詞或短語）”

有趣的是，規范說占位符是一個“提示”，而 chromevox 在宣布它時會注入“提示”。