在现代的web应用程序中，用户界面的交互是至关重要的。但是，对于一些使用辅助技术的用户，这个交互可能并不容易或者根本就靠不住。在这篇文章中，我们将学习如何使用aria-live来提高你的无障碍交互的质量，让每一个用户都能有更好的使用体验。
什么是 aria-live ？
aria-live是一种用于指定在内容发生更改时需要向用户发出通知的ARIA属性。通过使用aria-live，屏幕阅读器会注意到这些更改，并将其通知给用户。例如，当一个新的聊天消息到达时，aria-live属性可以通知这个事件并去向用户报告这个消息。
如何使用 aria-live
要使用aria-live，你需要先知道它可以用于哪些元素。aria-live属性可以添加到以下元素：
- div
- span
- section
- article
- main
- nav
- aside
- header
- footer
- form
为了使用aria-live，你需要简单地将其添加到上面列出的元素上，并设置其值为以下之一：
- off（关闭）
- polite（有礼貌）
- assertive（断言）
在这些中，_polite_协议和_assertive_协议是最常用的。
_polite_协议表示该更改是不需要立即得到用户的回应的。这可能是一个例子是，当新的聊天消息到达时，一个屏幕阅读器会通知用户，而不是强制中断他们的当前活动。同时， assertive 表示应该立即通知用户，因为这个更改可能至关重要。
以下是具有aria-live属性的一个简单示例：
<div id="log" aria-live="polite"> <p><em>Jason</em>加入了聊天室</p> </div>
在这个例子中，aria-live属性作用在div上，通知时机设置为有礼貌的。 在这个demo中，一个屏幕阅读器将告知用户，有人加入聊天室这条消息是有礼貌的被通知的，这是一个更改而不是重要的信息，不需要立即提醒用户。
在 JavaScript 中实现 Aria-Live
虽然在静态HTML中添加aria-live属性并将其从中加载发送到屏幕的通知很好，但在动态交互界面中，我们可能需要使用JavaScript来添加这个属性。在这种情况下，我们可以使用以下代码：
const element = document.querySelector('#log');
const notification = document.createElement('div');
notification.textContent = 'Jason 加入了聊天室';
notification.setAttribute('aria-live', 'polite');
element.appendChild(notification);在这个例子中，我们创建了一个使用aria-live的新元素，然后附加到原来的div。 在这个代码中，我们可以通过对setAttribute()的调用来给刚刚创建的Div添加aria-live属性，最后附加到‘log’ div上面。
结论
通过使用aria-live，你可以将你的web应用程序变得更加无障碍和易于使用，使所有用户都能够更轻松且方便地与应用程序进行交互。 无论你是一个开发者还是一个设计师，都应该始终考虑到无障碍性测试，以确保网站的无障碍体验能够为每一位用户提供出色的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c32ff208e8e1a085bf696