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

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

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

好的，我不会操纵你完全符合标准的HTML，而是简单地理解你正在使用的工具。我已经尝试了很多js hacks，但这就是它们（黑客）。 Chrome倾向于简单地阅读占位符文本。就是这样。这里有几个参考退房。他们非常有帮助。

browser/screenreader combos

aria support breakdown

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

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

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

删除占位符文字
使用常规文本替换它，它将在输入之后/之前直接附加/预先添加，您可以将其格式化为css以覆盖输入，使用js设置aria-hidden="true"然后隐藏输入中的文本集中

以下是展示如何操作的方法：plnkr

**** ****注那个plnkr是邋code的代码。我会编写一个接受参数的模块，以便可以在任何输入上使用。

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=''"/>

这不是最佳解决方案，但它可以为您服务。

NVDA在Chrome中读取文字两次

火狐

IE

铬

4 个答案: