Fatal编程技术网
  • html/
  • Html 如何为WAI-ARIA加载动画添加标签？

Html 如何为WAI-ARIA加载动画添加标签？

html

Html 如何为WAI-ARIA加载动画添加标签？,html,accessibility,wai-aria,Html,Accessibility,Wai Aria,我正在修复网页上的一些可访问性问题。我有一个充当对话框的div，其中有一个div包含加载动画和文本“Working…” 我不确定如何标记这两个项目，以便正确地通知盲人用户有一个进度动画，它正在工作，他应该等待 <div id="loading" style="display: none;"> <div class="mgBot15"><span class="txt16" role="alert">Working...</span>

我正在修复网页上的一些可访问性问题。我有一个充当对话框的div，其中有一个div包含加载动画和文本“Working…”

我不确定如何标记这两个项目，以便正确地通知盲人用户有一个进度动画，它正在工作，他应该等待

<div id="loading" style="display: none;">
        <div class="mgBot15"><span class="txt16" role="alert">Working...</span></div>
        <img src="loading.png" role="progressbar" aria-busy="true"/>
    </div>


工作
我尝试将role和aria busy属性添加到img（最初也添加到父div）

当这个div出现时（通过更改display style属性），它正确地显示为“Working…”，但我没有听到它正忙以及用户应该等待的指示，我是否遗漏了什么

我已经到处寻找加载动画的例子，到目前为止没有任何效果

注意：我正在使用作为屏幕阅读器进行测试

谢谢

您是否尝试在span上使用
role=“alertdialog”aria busy=“true”
？

我能想到的最佳解决方案是使用role alert和aria busy=“true”


工作
注意，这个组合也回答了这个问题：
role=“alertdialog”aria busy=“true”aria live=“assertive”

我认为最明智的方法是使用组合 
aria busy=“true”aria live=“polite”

这是因为有些页面可能有很多单独的加载程序（比如说每个组件一个，而不是整个页面一个加载程序），您可以使用
aria live=“assertive”
或
role=“alert”
这将非常具有侵入性，每个装载机都会被叫出。

这里使用的正确角色是
progressbar
，正如最初使用的问题一样。其他角色，如
alert
，也可以工作，但它们不太具体，这意味着辅助技术可能以不太理想的方式呈现信息

不过，原始问题的示例存在一些问题：

  • 如果您希望以与警报相同的方式发布文本，则应使用
    aria live=“assertive”
    而不是
    alert
    角色。该
    aria live
    值是导致屏幕阅读器在发出警报时宣布文本的原因
  • 应使用
    aria valuetext
    属性在具有
    progressbar
    角色的元素上设置要宣布的文本。它不应仅设置在单独的相邻元件上。如果出于表示的原因还需要将其包含在另一个元素中，则该元素应具有
    aria hidden=“true”
  • 根据规范，即使进度不确定（如旋转加载指示器），也要指定
    aria valuemin
    和
    aria valuemax
    。它们可以分别设置为0和100，作为表示百分比的简单占位符
加载完成后，
aria valuenow
可以设置为用于
aria valuemax
的任何值，并且
aria busy
可以设置为
false

这就引出了原始问题的一个潜在替代方案：

<div id="loading" role="progressbar" aria-valuetext="Working…" aria-busy="true"
    aria-live="assertive" aria-valuemin="0" aria-valuemax="100">
    <div class="mgBot15" aria-hidden="true"><span class="txt16">Working...</span></div>
    <img src="loading.png" alt="" />
</div>


工作
在处理了一天类似的问题后，我终于能够通过大量阅读和实验来实现这一点。我正在使用NVDA作为屏幕阅读器

<div class="loader" show.bind="isLoading" role="alert" aria-label="Loading"></div>
以下属性是关键：角色和aria标签。
上述示例使NVDA在isLoading变为真时宣布“Loading alert”。需要注意的是，NVDA发出aria标签值，后跟“alert”。使用角色“log”或“status”并没有出现在任何公告中。

我看到一篇很好的文章，解释了这个场景需要做什么

微调器应包含在容器内。它的可见性可以相对于aria busy属性进行切换。它们应该始终是相反的，即，如果当前正在加载，[aria busy=“true”]，.tn微调器[aria hidden=“false”]，一旦加载内容，就分别切换到false和true

像这样使用role=“status”：

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>


加载。。。
信中说：

状态角色是一种活动区域类型和一个容器，其内容 是否为用户提供的建议信息不够重要 调整警报，通常显示为状态栏。当 角色添加到元素后，浏览器将发送可访问的 向辅助技术产品发送状态事件，然后通知 用户对此进行了讨论

就这么做了，屏幕阅读器（NVDA）没有说任何比目前更有意义的东西。你有测试的URL吗？目前，屏幕阅读器正在宣布您提供的文本，但听起来您希望它说的不仅仅是这些。我希望它宣布它正在工作，以指示用户他应该等待，aria在警报项上忙着似乎已经完成了操作。后续问题：一旦加载操作完成，你是如何宣布新数据的？我不会投反对票，因为这回答了这个问题，但我必须注意，一个可访问性问题的答案是由于缺少
alt
属性而无法通过所有测试的代码。当加载程序因网络请求而显示时，你将如何处理最小值和最大值？如果你像上面那样使用它，那么它总是会说“0%”，如果你把它们一起拿出来，它会说“工作未确定”之类的话。如果你知道实际的进度，你应该在下载时将
aria valuenow
设置并更新到适当的数量。如果你不知道实际的进度，那么去掉
min
和
max
可能是避免你所描述的真实世界行为的最佳选择，尽管这在技术上与规范相反。在进度未知的情况下，让它说“工作待定”是准确的。（注一） 
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>