NVDA 在 Chrome 中兩次讀取文本

Question

對於以下標記：

<div class="form-group">
   <label class="control-label" for="email">Email Address</label>
   <input type="text" name="email" id="email" placeholder="Email Address" class="form-control">
</div>

這是 NVDA 正在讀出的內容：

火狐

電子郵件地址編輯空白

IE

電子郵件地址編輯空白

鉻合金

電子郵件地址 編輯電子郵件地址 空白

似乎 chrome 也在讀出placeholder文本，但 Firefox 和 IE 沒有。 刪除placeholder文本不是一個選項，因為它是必需的。

在這種情況下，有沒有辦法讓 Chrome 不讀取placeholder文本？

Answer 1

好的，與其操縱完全符合標准的 HTML，我只想更好地了解您正在使用的工具。 我已經嘗試了很多 js hack，但這就是它們的本質（hacks）。 Chrome 傾向於簡單地閱讀占位符文本。 僅此而已。 這里有一些參考資料供您查看。 他們非常有幫助。

瀏覽器/屏幕閱讀器組合

詠嘆調支持崩潰

但是，如果你真的想在 Chrome 中解決這個問題，你會檢測 Chrome/webit（通過如何檢測 chrome 和 safari 瀏覽器（webkit） ）

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

然后，您可以執行以下選項之一：

1. 刪除占位符文本
2. 用常規文本替換它，這些文本將直接在輸入之后/之前附加/前置，您可以在 css 中對其進行格式化以覆蓋在輸入上，使用 js 設置aria-hidden="true"然后隱藏輸入焦點上的文本

這是一個 plnkr 來展示如何做到這一點： plnkr

****注意**** plnkr 是草率的代碼。 我會編寫一個模塊來接受參數，以便它可以用於任何輸入。

Answer 2

這是對這個問題的一種遲到的回答，但防止文本被多次大聲朗讀的更好解決方案可能是根本不使用占位符，但可能像占位符一樣在文本框中動態定位標簽。

 $('#form').find('input').on('keyup blur focus', function(e) { var $this = $(this), label = $this.prev('label'), val = $this.val(); if (e.type === 'keyup') { if (val === '') { label.removeClass('active highlight'); label.addClass('focused'); } else { label.addClass('active highlight'); label.removeClass('focused'); } } else if (e.type === 'blur') { if (val === '') { label.removeClass('active highlight focused'); } else { label.removeClass('highlight focused'); } } else if (e.type === 'focus') { if (val === '') { label.removeClass('highlight'); label.addClass('focused'); } else if (val !== '') { label.addClass('highlight'); label.removeClass('focused'); } } });

 #form { padding: 40px; width: 300px; height: 75px; margin: 40px 40px; float: left; } #form .field-wrap { position: relative; margin-bottom: 40px; } #form .field-wrap label { position: absolute; transform: translateY(6px); left: 13px; transition: all 0.25s ease; -webkit-backface-visibility: hidden; pointer-events: none; font-size: 22px; } #form .field-wrap label.active { transform: translateY(-20px); left: 2px; font-size: 14px; } #form .field-wrap input { font-size: 22px; display: block; width: 100%; height: 100%; padding: 5px 10px; background: none; background-image: none; border-radius: 0; transition: border-color .25s ease, box-shadow .25s ease; } #form .field-wrap input:focus { outline: 0; } #form .field-wrap p.context { font-size: 1em; margin: .5rem 0rem 0rem 0rem; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="form"> <div class="field-wrap"> <label for="textField">Label Placeholder Text</label> <input type="text" name="textField" id="textField" autocomplete="off" aria-describedby="textFieldDescription" /> <p id="textFieldDescription" class="context">Type in some text.</p> </div> </div>

Answer 3

   <input aria-hidden="true" role="alert" class="range from hasDatepicker" type="text" value="" data-type="range" id="range-from" data-uniq-id="11/19/2020" name="range-from" aria-label="11/19/2020"> 

對我來說，在上面的例子中重復閱讀的解決方案是添加 aria-hidden = "true" 好主意，它起作用了。

Answer 4

您是否嘗試刪除輸入焦點上的占位符？ 就像是：

<input type="text" name="email" id="email" placeholder="Email Address" 
       onfocus="this.placeholder=''"/>

這不是最好的解決方案，但它可以為您工作。