3

对于以下标记：

<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文本？

4

4 回答 4

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" 好主意，它可以工作。

于 2020-11-23T07:55:57.320 回答
1

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

浏览器/屏幕阅读器组合

咏叹调支持故障

但是，如果您真的想在 Chrome 中解决此问题，您将检测 Chrome/webbit（通过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 是草率的代码。我会编写一个模块来接受参数，以便可以在任何输入上使用它。

于 2017-04-04T14:21:52.963 回答
0

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

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

于 2016-12-13T17:35:43.317 回答
-1

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

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

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

于 2016-02-11T14:38:00.617 回答