javascript - 使 jQuery 倒计时变得可访问

Question

我在网站上运行了一个简单的 jQuery 倒计时。 我正在尝试使这个小部件符合 WAI-ARIA 要求。

要求如下:

• 使该区域活跃起来，以便它随着倒计时而更新。
• 不要读取秒数，因为这会分散用户的注意力。
• 以易于理解的方式阅读(例如“59 分钟”，而不是“59”)。
• 按顺序阅读(小时，然后分钟)。
• 无法更改 HTML 源代码。

下面是 jQuery 倒计时小部件的代码。

<div id="countdown" class="countdown">
    <div class="seconds">
        <div class="seconds-digits">07</div>
        <div class="label">seconds</div>
    </div>
    <div class="minutes">
        <div class="minutes-digits">03</div>
        <div class="label">minutes</div>
    </div>
    <div class="hours">
        <div class="hours-digits">118</div>
        <div class="label">hours</div>
    </div>
</div>

我最初的想法是使 .months 和 .hours 具有实时性和原子性。这将确保正确读取更新的值以及“分钟”和“小时”后缀。然而遗憾的是，这并没有以正确的顺序读取它们。我也不完全确定这是最正确的做事方式，因为 MDN使用 role=timer 来描述倒计时。

[timer] or any kind of timer or clock, such as a countdown timer or stopwatch readout.

倒计时的语义目的是向用户更新截止日期之前剩余的时间。这可能会持续几天(但不会是几周)。

这是我尝试过的:

// Correct position of elements
$('#countdown').append($('.seconds')).append($('.minutes'));

// Make wanted elements live
$('.minutes, .hours').attr({
    'aria-live': 'assertive',
    'aria-atomic': 'true'
});

但是更正元素的位置并没有改变元素的读取顺序。我认为这是因为网页的作者首先更新了秒，然后是分钟，然后是小时( .html('%S') 行位于 .html(' %M') 行)。

我从解决方案中收到的输出是

03 minutes 118 hours 

预期输出是

118 hours and 03 minutes to deadline

Answer 1

从技术上讲，aria-live 的有效值分别是自信、淡定和礼貌。将其设置为 true 可能会产生意外结果。有些浏览器可能会将 true 解释为 polite，但你会很幸运。

此外，您将两个不同的元素设置为实时 - 分钟和小时 - 这意味着它们可以单独更新并按照更改的顺序堆叠在 aria-live 队列中。您应该在整个倒计时期间使用 aria-live。由于您不希望宣布秒数，因此可以将 aria-hidden 添加到秒数，以便仅宣布分钟和小时。像这样的东西(未经测试):

// Make countdown live
$('.countdown').attr({
    'aria-live': 'polite',
    'aria-atomic': 'true'
});
// Hide seconds
$('.seconds').attr({
    'aria-hidden': 'true'
});