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

   <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 2

好吧，与其操纵您完全符合标准的 HTML，我只想更好地了解您正在使用的工具。我尝试了很多 js hack，但这就是它们的本质（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);

然后您可以选择以下选项之一：

1. 删除占位符文本
2. 用常规文本替换它，这将直接在输入之后/之前附加/前置，您可以在 css 中对其进行格式化以覆盖在输入上，使用 js 设置aria-hidden="true"，然后在输入焦点上隐藏文本

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

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

Answer 3

这是对这个问题的迟到回应，但防止文本被多次大声朗读的更好解决方案可能是根本不使用占位符，但可能会在文本框中动态定位标签，例如占位符。

$('#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 4

您是否尝试过删除输入焦点上的占位符？比如：

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

这不是最好的解决方案，但它可以为你工作。