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>

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

[计时器]或任何类型的计时器或时钟，例如倒数计时器或秒表读数。

倒计时的语义目的是在截止日期前的剩余时间内更新用户。这可能会持续数天（但不是数周）。

这就是我的尝试：

// 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的有效值为assertive，off和polite。将其设置为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'
});

使jQuery倒计时可访问

1 个答案: