Javascript 使jQuery倒计时可访问

我在一个网站上运行了一个简单的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>

但是纠正元素的位置并没有改变元素的读取顺序。我认为这是因为网页的作者首先更新了秒，然后是分钟，然后是小时（

.html（'%S'）

行在

.html（'%M'）

行之前）

我从解决方案中获得的输出是

03 minutes 118 hours 

预期产量为

118 hours and 03 minutes to deadline

---

从技术上讲，的有效值是断言、

关闭

、和

礼貌

。将其设置为

true

可能会产生意外结果。有些浏览器可能会将

true

解释为

礼貌的
，但你会很幸运

此外，您还将两个不同的元素设置为live—分钟和小时—这意味着它们可以单独更新，并按照更改的顺序堆叠在aria live队列中。在整个倒计时过程中，您应该有
aria live
。由于您不希望宣布秒数，因此可以将
aria hidden
添加到秒数中，以便只宣布分钟和小时数。类似这样（未经测试）：

从技术上讲，的有效值是
断言

、

关闭

、和

礼貌

。将其设置为

true

可能会产生意外结果。有些浏览器可能会将

true

解释为

礼貌的
，但你会很幸运

此外，您还将两个不同的元素设置为live—分钟和小时—这意味着它们可以单独更新，并按照更改的顺序堆叠在aria live队列中。在整个倒计时过程中，您应该有
aria live
。由于您不希望宣布秒数，因此可以将
aria hidden
添加到秒数中，以便只宣布分钟和小时数。类似这样（未经测试）：

添加你首先做的任何事情，JS，HTML，解释你想输出的任何东西：）我的解决方案是在jQuery中，因为我不能接触源HTML或源JS。我只需要在DOM中创建一个新元素，按照你想读取的顺序，使用你想要的aria属性，并在现有倒计时以您想要的频率更新时进行更新。将可见性设置为隐藏或将其置于屏幕外。这将是最直观的解决方案，但我想检查是否有更有效的解决方案。向站点添加实际上是另一个倒计时计时器的东西似乎不是最佳选择。添加您首先做的任何事情，JS，HTML，解释您想要输出的任何东西：）我的解决方案是使用jQuery，因为我无法接触源HTML或源JS。我只需在DOM中创建一个新元素，其中包含您想要的元素，按照您希望读取的顺序，使用您想要的aria属性，并在现有倒计时以您想要的频率更新时进行更新。将可见性设置为隐藏或将其置于屏幕外。这将是最直观的解决方案，但我想检查是否有更有效的解决方案。向站点添加实际上是另一个倒计时的计时器似乎不是最佳选择。抱歉！我的意思是，
aria live=assertive
。我已经纠正了这篇帖子。不幸的是，此解决方案无法提供所需的输出。
礼貌设置不会读取“分钟”和“小时”文本，只读取数字。它还将只更新更改的值，因此屏幕阅读器仅在小时更改时读取小时数。请确保编码正确。在“倒计时”容器上设置
aria-atomic='true'
，意味着所有的文本，无论是更改的还是未更改的，都将被读取，因此“分钟”和“小时”将被读取。我刚刚用JAWS和NVDA试用过，效果很好。我在JSFIDLE上测试过，它可以工作，但在具有完全相同HTML的原始网站上不起作用。因为这是一个很好的答案，所以投票率上升。只是错过了事物被读取的顺序（分秒之前）。@AlexOsheter谢谢你的投票。这是一个困难的情况，因为您无法更改html。读的顺序有什么问题？你说的是“秒前几分钟”，这实际上是正常的倒计时顺序（5分32秒），但你也说你不想要秒。你是说分钟比小时早？这听起来有些倒退（5分钟3小时），但这也是DOM的顺序。计时器是否实际显示“07秒03分118小时”（来自原始html示例）？抱歉！我的意思是，
aria live=assertive
。我已经纠正了这篇帖子。不幸的是，此解决方案无法提供所需的输出。
礼貌设置不会读取“分钟”和“小时”文本，只读取数字。它还将只更新更改的值，因此屏幕阅读器仅在小时更改时读取小时数。请确保编码正确。在“倒计时”容器上设置
aria-atomic='true'
，意味着所有的文本，无论是更改的还是未更改的，都将被读取，因此“分钟”和“小时”将被读取。我刚刚用JAWS和NVDA试用过，效果很好。我在JSFIDLE上测试过，它可以工作，但在具有完全相同HTML的原始网站上不起作用。因为这是一个很好的答案，所以投票率上升。只是错过了事物被读取的顺序（分秒之前）。@AlexOsheter谢谢你的投票。这是一个困难的情况，因为您无法更改html。读的顺序有什么问题？你说“秒前几分钟”，这实际上是正常的倒计时顺序（5分32秒），但你也说
118 hours and 03 minutes to deadline

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