数据加载时的可访问性 [英] Accessibility when data is loaded

问题描述

我正在研究可访问性问题. 我有一个棘手的/加载器，它在加载数据时显示在屏幕上.

I am working on accessibility issue. I have a spinny/loader which appears on screen when data is getting loaded.

<spinny aria-live="polite" role="alert" aria-label="Loading Page">

因此，当屏幕上出现细线时，屏幕阅读器会提醒我细线已加载. 现在，我希望当棘手的物体离开屏幕时，我希望屏幕阅读器提供诸如加载的数据之类的消息.

So when the spinny appears on screen, screen readers give me alert that spinny is loaded. Now I want that when the spinny goes away from screen i want the screen reader to provide message such as data loaded or something like that.

我尝试了与咏叹调相关的，咏叹调原子的等，但是似乎没有任何作用.

I have tried aria-relevant, aria-atomic etc but nothing seems to have worked.

推荐答案

首先，您的代码示例指定了冲突的信息.使用 role="alert" 可为您提供隐式aria-live="assertive"，但您也指定了aria-live="polite".我建议删除 role="alert".拥有aria-live="polite"就足够了.

First off, your code sample is specifying conflicting information. Using role="alert" gives you an implicit aria-live="assertive" but you are also specifying aria-live="polite". I would recommend removing role="alert". Having aria-live="polite" is sufficient.

但是，如果您从<spinny>中删除角色(我猜这是自定义html标签?)，那么您的aria-label可能就不受欢迎，因为带有aria标签的东西通常还需要一个角色到标签上，以便屏幕阅读器可以读取标签.请参阅"实际支持:aria-label，aria-labelledby和aria- describeby "

However, if you remove the role from <spinny> (which I'm guessing is a custom html tag?), then your aria-label may not be honored because aria-label'ed things often need a role in addition to the label in order for the label to be read by a screen reader. See "Practical Support: aria-label, aria-labelledby and aria-describedby"

但是，我认为您可能仍然错误地使用了aria标签.您的居住区域应类似于:

But, I think you might be using aria-label incorrectly anyway. Your live region should look something like:

<div aria-live="polite" class="sr-only" id="myspinny"></div>

(请参阅什么是Bootstrap 3中的sr-only? (仅用于"sr-only"类).它将在视觉上隐藏" <div>，以便您看到的所有文本对于可见的用户都是不可见的，但仍对屏幕阅读器用户可用.)

(See What is sr-only in Bootstrap 3? for the "sr-only" class. It will visually "hide" the <div> so that any text you put inside it will not be visible to the sighted user but will still be available to screen reader users.)

在加载数据时，应将文本(通过javascript)注入" myspinny "中，使其看起来像:

When data is loading, you should inject text (via javascript) into "myspinny" so that it looks like:

<div aria-live="polite" class="sr-only" id="myspinny">Loading Page</div>

由于<div>是实时区域，因此将宣布文本(加载页面").

Since the <div> is a live region, the text ("Loading Page") will be announced.

当数据加载完成并且您想要删除微调器时，将新文本插入" myspinny "中，如下所示:

When the data is finished loading and you want to remove the spinner, inject new text into "myspinny" so that it looks like:

<div aria-live="polite" class="sr-only" id="myspinny">Data Loaded</div>

，屏幕阅读器将显示已加载数据".

and the screen reader will say "Data Loaded".

这篇关于数据加载时的可访问性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！