JAWS读取IE11中不存在的字符

时间:2016-12-29 18:21:03

标签: javascript html accessibility screen-readers jaws-screen-reader

所以我为textarea元素实现了一个字符计数器。当剩下1个字符时,JAWS 读取“1 字符剩余的150个字符”但读取“1 字符剩余的150个字符”。然后,当我通过输入任何键或退格键来更改字符数时,它会显示“x 字符剩余的150个字符”。任何人都知道为什么JAWS会这样做?以下是演示的链接:http://codepen.io/obliviga/pen/gLyKYj?editors=1010

HTML:

<div class="field">
  <label class="input-label" for="styleguide-input-textarea">Comments</label>
  <textarea class="input-textarea" id="styleguide-input-textarea" aria-describedby="chars-remaining" name="" aria-multiline="true"></textarea>
  <div id="chars-remaining">
    <span id="live-region-text" aria-live="polite">
      <span class="count">150</span> character<span id="styleguide-input-textarea-plural">s</span> remaining
    </span>
    of 150 characters
  </div>
</div>

使用Javascript:

function charsRemaining() {
  // the total number of characters allowed:
  var totalChars = 150;
  // the number of characters that
  // triggers the polite announcement:
  var politeFlag = 80;
  // the number of characters that
  // triggers the assertive announcement:
  var assertiveFlag = 130;
  var $message = $('#styleguide-input-textarea');

  $message.attr('maxlength', totalChars);

  $message.on('keyup', function (e) {
    // maxlength polyfill:
    // Get the value
    var text = $(this).val();
    // Get the maxlength
    var limit = $(this).attr('maxlength') || totalChars;
    // Check if the length exceeds what is permitted
    if(text.length > limit){
      // Truncate the text if necessary
      $(this).val(text.substr(0, limit));
    }

    // chars remaining 
    var realLength = $message.val().length;
    var remaining = totalChars - realLength;
    updateRemaining(remaining);

    // 70-60 atomic true
    // 60 set it to false
    // 20 atomic true

    if (realLength >= politeFlag && realLength < assertiveFlag) {
      // polite announcement
      $('#live-region-text').attr('aria-live', 'polite');

      if (realLength >= 90) {
        $('#live-region-text').attr('aria-atomic', 'false');
      } else {
        $('#live-region-text').attr('aria-atomic', 'true');
      }
    } else if (realLength >= assertiveFlag) {
      // assertive announcement
      $('#live-region-text').attr({
        'aria-live': 'assertive',
        'aria-atomic': 'true'
      });
    } else { // clean up (remove the aria-live and aria-atomic attributes)
      $('#live-region-text')
      .removeAttr('aria-live')
      .removeAttr('aria-atomic');
    }

    if (remaining === 1) {
      $('#styleguide-input-textarea-plural').hide();
    } else {
      $('#styleguide-input-textarea-plural').show();
    }
  });
}

function updateRemaining(charsLeft) {
  $('#chars-remaining .count').html(charsLeft);
}

charsRemaining();

0 个答案:

没有答案