标签: wai-aria
如何为某些HTML页面部件的屏幕阅读器设置优先级？
我想让我的HTML页面适合屏幕阅读器.
目前,该页面有3个主要部分:标题,侧边栏和内容:
屏幕阅读器首先读取标题,然后是侧边栏,最后是搜索结果.
不幸的是,具有视力问题的用户会等待很长时间,而程序会读取所有侧栏内容(导致侧栏包含许多过滤器).如何为搜索结果设置更高的优先级？原因应在侧边栏内容之前阅读搜索结果.
如果有人向我提供HTML教程,告诉我如何提高HTML页面的可访问性级别,那将会很棒:
- 如何更改屏幕阅读器跳过的某些DIV元素？
- 如何更改阅读页面内容的顺序？
- 如何才能使可读的搜索表单和搜索结果(以及一些链接)？
推荐指数
解决办法
查看次数
无障碍,适合移动设备的灯箱？
是否有任何灯箱解决方案(沿着Fancybox等)可以访问(VoiceOver和JAWS等,兼容,可能是WAI-ARIA角色)和移动友好型？
作为jQuery插件的奖励积分.
推荐指数
解决办法
查看次数
wai aria和jquery.html()以及jquery.append()
我似乎无法找到任何资源或代码示例的方式,我可以让屏幕阅读器使用jquery工作(使用wai咏叹调)将html插入dom或将html附加到dom.
任何人都可以请我指出一些我可以用作指南的有用资源,或者提供一些代码示例,我可以用它来开发我的应用程序以满足可访问性标准,并将动态内容添加到我的页面上ajax post-back？
TIA.
编辑(添加了NVDA未读取的代码)...我缺少什么？
<html>
<head>
<script language="javascript" type="text/javascript">
function addText() {
document.getElementById("test").innerHTML = "some test";
}
</script>
</head>
<body>
<h2>NVDA</h2>
<div id="testarea">Some test area</div>
<div id="test" aria-describedby="testarea" aria-live="polite" aria-relevant="additions removals" role="region"></div><br />
<input type="button" value="click me" onclick="addText()" />
</body>
</html>
推荐指数
解决办法
查看次数
ARIA属性用于在HTML中读取替代文本(例如罗马数字)
在我的HTML文档中,我使用的是罗马数字(例如:MMXV = 2015).
有没有办法通知屏幕阅读器以另一种方式解释某些文本(例如:罗马数字为"二千一十五"而不是MMXV)？
我的猜测是会有一个ARIA属性,但我似乎无法找到它.例如:
<time datetime="2015" aria-?="Two thousand and fifteen">MMXV</time>
推荐指数
解决办法
查看次数
<abbr /> - 元素:aria-label或title属性
虽然建议title在<abbr />元素上使用该属性,但这对屏幕阅读器没有影响(至少在chromevox上没有).
<abbr title="as soon as possible">ASAP</abbr>
有用的东西当然是aria-label:
<abbr aria-label="as soon as possible">ASAP</abbr>
因此,为了兼顾语义和屏幕阅读器,我需要标记两者:
<abbr aria-label="as soon as possible" title="as soon as possible">ASAP</abbr>
这看起来有点像黑客.为什么chromevox只是不读取title属性？
推荐指数
解决办法
查看次数
防止背景项目在模式叠加覆盖它们时获得焦点？
我正在努力使叠加模式更易于访问。它的工作原理基本上类似于此JSFiddle。当您打开模态时，焦点不会正确地进入模态，并且它将继续聚焦于页面中的其他（隐藏的背景）项目。
你可以在我的jsfiddle演示中看到，我已经使用aria-controls，aria-owns，aria-haspopup甚至aria-flowto。
<button
aria-controls="two"
aria-owns="true"
aria-haspopup="true"
aria-flowto="two"
onclick="toggleTwo();"
>
TOGGLE DIV #2
</button>
但是，在使用MacOS VoiceOver时，这些功能都不符合我的预期（尽管VoiceOver确实尊重aria-hidden我在div上设置的功能two）。
我知道我可以操纵tabindex，但是0以上的值对可访问性不利，因此我唯一的选择是手动找到页面上所有可聚焦的元素并将它们设置为tabindex=-1，这在这个大型，复杂的网站上不可行。
另外，我研究了使用Javascript手动拦截和控制选项卡行为的方法，以便将焦点移到弹出窗口中，并在退出底部时又回到顶部，但是，这也影响了可访问性。
accessibility screen-readers voiceover wai-aria jaws-screen-reader
推荐指数
解决办法
查看次数
使用aria-live在vue.js中向屏幕阅读器发布信息
我正在尝试获取一个vue组件,以便在我的网站上发生不同事件时动态地向屏幕阅读器发布信息.
我有它的工作,点击一个按钮将填充一个aria-live="assertive"和role="alert"文本的跨度.这在第一次正常工作,但是,单击具有类似行为的其他按钮会导致NVDA在读取新文本之前两次读取前一个文本.这似乎是在vue中发生的,但是没有使用jquery的类似设置,所以我猜它与vue呈现给DOM的方式有关.
我希望有一些方法可以解决这个问题,或者更好的方法来向用户阅读没有此问题的文本.任何帮助是极大的赞赏.
这是我在工作代码沙箱中设置的一个简单组件,用于显示我遇到的问题(导航到代码的组件/ HelloWorld.vue) - 注意:根据下面的答案,此沙箱已更改.该组件的完整代码如下:
export default {
name: "HelloWorld",
data() {
return {
ariaText: ""
};
},
methods: {
button1() {
this.ariaText = "This is a bunch of cool text to read to screen readers.";
},
button2() {
this.ariaText = "This is more cool text to read to screen readers.";
},
button3() {
this.ariaText = "This text is not cool.";
}
}
};<template>
<div>
<button @click="button1">1</button>
<button @click="button2">2</button> …推荐指数
解决办法
查看次数
当我使用 HTML5 约束验证 API 使字段无效时，我必须使用 aria-invalid 吗？
据我了解，不建议向元素添加重复的角色：
<nav role="navigation"></nav>
这是多余的，因为nav告诉屏幕阅读器内容的语义已经是什么。到现在为止还挺好。
现在我想使表单字段无效。我明白经典的我应该改变这个：
<input type="text" name="username">
… 进入
<input type="text" name="username" aria-invalid="true">
...提交表单后。
但是，我们使用 JavaScript 和HTML5 约束验证 API来检查输入，然后再将其发送到 API。是的，输入再次在服务器端进行测试。
所以，假设我使该字段无效：
input.setCustomValidity('This value is invalid');
我还需要添加吗 aria-invalid="true"到输入中吗？
我会说不，因为它对于引擎已经知道的来说是多余的。但我找不到任何明确描述这种情况的来源。
推荐指数
解决办法
查看次数
Ant Design Select 下拉列表 aria 标签可访问性
我正在尝试为我的下拉列表实现可访问性。我使用了 antd 的 Select 组件。但我的问题是，当我使用键盘向上和向下箭头键在列表框（下拉列表）中导航时，计算机没有读取我传入的 aria 标签，实际上我什至无法通过 aria 标签和 tabIndex进入选项。你知道我该如何解决这个问题吗？
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<div aria-label={"jack"} tabIndex={0}><Option aria-label={"jack"} tabIndex={0} value="jack">Jack</Option>
<Select.Option aria-label={"lucy"} tabIndex={0} value="lucy">
Lucy
</Select.Option>
<Select.Option aria-label={"tom"} tabIndex={0} value="tom">
Tom
</Select.Option>
</Select>
谢谢
推荐指数
解决办法
查看次数
ARIA 让读者阅读非重点元素内容
我在页面上有“可聚焦”的元素（按钮、带有 tabindex 的元素等），屏幕阅读器可以很好地读取内容。
但是，我还有一些其他不可聚焦的元素（由于它们很多 - 下拉列表结果等），所以我不希望用户无数次单击选项卡，但它们可以通过左/右/向上/向下键，它们会“选择”CSS 类（尽管其他一些元素 - 它们的父元素 - 实际上是重点）
我想让读者阅读这些特定元素，并使用“selected”类。我该怎么做？
（我尝试将属性 aria-label="read this" 应用于它们，但它不起作用；它仅在元素实际聚焦时才起作用）
以下是更多详细信息，可帮助您了解我想要实现的目标：
<div tabindex="0" >
<span>title1</span>
<ul>
<li class="selected">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div tabindex="0">
<span>title2</span>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
这是小提琴：https : //jsfiddle.net/d5gbjst1/1/
您可以在这两个 div 之间来回切换，任何屏幕阅读器（我尝试使用 Windows 讲述人、NVDA 和 JAWS）都会读取“title1”以及第一个和“title2”的所有项目以及第二个的所有项目，取决于焦点在哪里。
注意第一个 ul 中第一个项目的类“选择”。现在，我使用向上/向下箭头浏览我的 ul 列表，并且“选定”类相应地从一个项目转移到另一个项目。（那是单独的 JS 代码，为了简单起见，这个例子中没有包含）
当类“selected”应用于元素时，我想强制读者阅读它。有可能吗？
编辑：我还尝试向 ul 和 li 添加属性，但仍然没有运气：
<ul role="list">
<li role="listitem">
推荐指数
解决办法
查看次数