[英]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. 我尝试了与咏叹调相关的,咏叹调原子的等,但是似乎没有任何效果。
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"
. 使用
role="alert"
给您一个隐式的aria-live="assertive"
但您也要指定aria-live="polite"
。 I would recommend removing role="alert"
. 我建议删除
role="alert"
。 Having aria-live="polite"
is sufficient. 拥有
aria-live="polite"
就足够了。
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. 但是,如果您从
<spinny>
删除角色(我猜这是自定义html标签?),那么您的aria-label
可能就不兑现,因为带有aria标签的东西通常除了标签之外还需要一个角色为了让屏幕阅读器读取标签。 See " Practical Support: aria-label, aria-labelledby and aria-describedby " 请参阅“ 实践支持:aria标签,aria标签由和aria描述由 ”
But, I think you might be using aria-label incorrectly anyway. 但是,我认为您可能仍然会错误地使用aria标签。 Your live region should look something like:
您的居住区域应类似于:
<div aria-live="polite" class="sr-only" id="myspinny"></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.) (请参阅Bootstrap 3中的什么是sr-only?有关“仅sr”类的信息。它将在视觉上“隐藏”
<div>
以便您看到的所有文本对于可见的用户而言都是不可见的,但仍然可以屏幕阅读器用户可用。)
When data is loading, you should inject text (via javascript) into " myspinny " so that it looks like: 加载数据时,应将文本(通过javascript)注入“ myspinny ”中,使其看起来像:
<div aria-live="polite" class="sr-only" id="myspinny">Loading Page</div>
Since the <div>
is a live region, the text ("Loading Page") will be announced. 由于
<div>
是实时区域,因此将宣布文本(“加载页面”)。
When the data is finished loading and you want to remove the spinner, inject new text into " myspinny " so that it looks like: 当数据加载完成并且您想要删除微调器时,将新文本插入“ myspinny ”中,如下所示:
<div aria-live="polite" class="sr-only" id="myspinny">Data Loaded</div>
and the screen reader will say "Data Loaded". 屏幕阅读器将显示“数据已加载”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.