所以我为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();