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 正在读取的内容：

火狐

Email Address Edit Blank

IE

Email Address Edit Blank

Chrome

Email Address Edit Email Address Blank

似乎 chrome 也在读出 placeholder 文本，但 Firefox 和 IE 不是。删除 placeholder 文本不是一个选项，因为这是一项要求。

在这种情况下，有没有办法让 Chrome 不阅读 placeholder 文本？

Answer 1

您是否尝试删除输入焦点上的占位符？类似于：

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

这不是最好的解决方案，但它适合您。

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

好吧，与其操纵完全符合标准的 HTML，我只想更好地了解您正在使用的工具。我已经尝试了很多 js hacks，但这就是它们的本质（hacks）。 Chrome 倾向于简单地阅读占位符文本。仅此而已。这里有一些参考资料可供查看。他们非常乐于助人。

browser/screenreader combos

aria support breakdown

但是，如果您真的想在 Chrome 中解决此问题，您会检测到 Chrome/webit（通过 How to detect chrome and safari browser (webkit)）

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

那么您可以执行以下选项之一：

删除占位符文本
将其替换为常规文本，这将是 appended/prepended 直接 after/before 输入，您可以将其格式化为 css 以覆盖在输入上，使用 js 设置 aria-hidden="true" 然后隐藏输入焦点上的文本

这里有一个 plnkr 来展示如何做：plnkr

****注意**** 那个 plnkr 是草率的代码。我会写一个模块来接受参数，这样它就可以用于任何输入。

Answer 4

   <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" 好主意并且有效。

NVDA 在 Chrome 中读出文本两次

NVDA Reading out Text Twice in Chrome

html

google-chrome

screen-readers

nvda

火狐

IE

Chrome