博客

js动态提示输入框剩余字符数及accessbility实现（无障碍网页）

  • Post author:
  • Post category:其他


实现如何动态提示输入框剩余子符很简单，获取当前字符数，再修改下标显示的数字就可以。但是谈及如何支持屏幕阅读器，大部分学习前端的小伙伴就有点束手无策了。正好碰到有一个类似的需求，就总结一下。希望能帮助到有需求的小伙伴。

目录

动态显示输入框剩余字符数及accessbility实现



源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">
  .textArea__wrapper{
    position: relative;
    display: inline-block;
  }
  .comments {
    width: 300px;
    height: 200px;
    resize: none;
  }
  .counter__Wrapper{
    position: absolute;
    right: 0;
    bottom: 8px;
  }
  .invisibleTxt{
    position: absolute;
    left: -999em;
  }
</style>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var maxLength = $('#comments').attr('maxLength');
    $('textarea').keyup(function() {
      var inputLength = $(this).val().length;
      var remainLength = maxLength-inputLength;
      $('#charCount').text(remainLength);
    });
  });
</script>
<body>
  <div class='textArea__wrapper'>
    <label class='fieldLabel ' for='comments'>Anything else you&#39;d like us to know?</label></br>
    <textarea id='comments' name="comments" rows='5' placeholder='Maximum 500 characters'
      class='comments'
      maxLength='500'></textarea>
    <div aria-live='polite' aria-atomic='true' class="counter__Wrapper"><span id="charCount">500</span>&nbsp;<span class='invisibleTxt'>characters remaining</span></div>
  </div>
</body>
</html>



涉及知识点：



aria-live

aria-live = POLITENESS_SETTING 用于设置屏幕阅读器处理实时区域更新的优先级

通常情况下只会使用 aria-live = “polite ”

参数
aria-live = “off” 默认设置关闭；屏幕阅读器不作任何处理
aria-live = “polite ” 屏幕阅读器应等到用户闲置后再向用户提供更新
aria-live = “assertive” 优先级高于“polite”,当同时有消息时，屏幕阅读器会优先读取设置aria-live = “assertive”的消息



aria-atomic

配合

aria-live

使用（默认情况下为false，当内容发生变化时，仅读出变化的部分。）

结合上面的例子来说明，

  • 不设置aria-atomic，当文本发生变化的时候，只会听到500， 498…
  • 设置aria-atomic=‘true’，当文本发生变化的时候，会听到500 haracters remaining， 498 characters remaining

我在开发中常用的工具是下面这个chrome的插件ChromeVox

accessbility 工具ChromeVox



例子查看


http://jsrun.pro/SWfKp/edit


版权声明：本文为Cassy_Wu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。