有一些ARIA教程网站使用非语义标记和一些JavaScript在于向世人证明使用role="radiogroup",并role="radio"如下面的例子:
<ul role="radiogroup">
<li tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif">
Option1
</li>
<li tabindex="0" role="radio" aria-checked="true">
<img role="presentation" src="radio-checked.gif">
Option2
</li>
</ul>
但是,role当我们已经拥有语义和无javascript方法时,使用这些方法有什么意义:
<ul>
<li>
<input id="opt1" type="radio" name="opt" value="1">
<label for="opt1">Option1</label>
</li>
<li>
<input id="opt2" type="radio" name="opt" value="2">
<label for="opt2">Option2</label>
</li>
</ul>
我正在研究使用HTML5实现ARIA,并在我的localhost上构建了一个技术演示,以便在导出到生产网站之前管理范围.
在为HTML5标签添加地标角色后,我使用IE11/Firefox 23和Jaws 15/Fangs - Firefox插件进行了测试.
上述浏览器/屏幕阅读器组合均未识别ARIA角色或地标(即,在将角色属性添加到现有标签之前/之后,页面的公布方式没有变化).
我正在测试的代码:
<!DOCTYPE html>
<html>
<head>
<title>ARIA Test</title>
</head>
<body role="document">
<div role="banner"> Hello world!</div>
<div role="main">Greetings Earth!</div>
</body>
</html>
有没有人有任何关于在屏幕阅读器中触发ARIA角色的建议？
我正在实施的设计有一个通用的“帐户”按钮，其唯一内容是用户图标（和一个小的下拉图标）。
向按钮（“您的帐户”）添加标题属性是否足够，或者我应该在按钮内添加文本，我只是在视觉上隐藏（同时保持屏幕阅读器可以访问），还是两者兼而有之？
我的页面上有多组动态内容,在一些用户交互后会更新.我希望屏幕阅读器能够读取更新的内容,但NVDA不会在Chrome上读取实时区域.它虽然在Firefox上工作.请帮忙.铬上的钳口和chromevox也不起作用.
accessibility google-chrome wai-aria nvda jaws-screen-reader
我不确定是否所有浏览器都这样做，但如果我for在标签上提供与输入相对应的属性id，这会使将鼠标悬停在标签上触发输入的悬停样式，这在我的情况下是不可取的。有什么方法可以阻止这种行为，同时仍然可以让屏幕阅读器访问表单？
.field label {
display: block;
margin: 0 0 0.5em 0;
}
.field input {
background: white;
border: 1px solid #999;
border-radius: 0px;
color: black;
display: inline-block;
padding: 0.5em 0.7em
}
.field input:hover {
background: #efefff;
border-color: #333;
}<div class="field">
<label for="myInput">Hover over this label:</label>
<input id="myInput" type="text">
</div>我有一个页面,我正在尝试编码,用户必须从许多选项中选择一个,显示为缩略图网格.类似的网页,我已经使用role="radiogroup"和role="radio"(及相应的脚本,标签等),而且运作良好-这一个区别是,有较大的RadioGroup中内的多个部分.
编辑,澄清:我宁愿使用原生的单选按钮,正如几个人所指出的那样.我可能无法做到,因为这是一个很大的角度应用程序,我需要解决很多奇怪的行李,但我正在研究它.也就是说,无论他们是role="radio"或者type="radio",我的问题都是关于沟通的最佳方式,其中一些是组合在一起的.
用户只能从这些部分中选择一个选项.结构如下:
选择一张图片
艺术家1
艺术家2
基本上,我正在寻找一种方法来保留"艺术家"背景,同时在图像选项中移动.optgroup从select元素中得到的东西.我试过fieldset,哪种作品; 我想知道这是不是最好的方式？
这是我目前拥有的,结构方面的.(将根据需要通过JS添加适当的焦点和键盘管理.)
<form id="select-design" aria-label="Design Options">
<h2>Choose an image</h2>
<div role="radiogroup" id="collections-list" aria-label="Options" tabindex="0">
<fieldset id="group-1">
<legend>Artist: Jack Kirby</legend>
<div role="radio" aria-checked="false" tabindex="-1">
<img src="//placehold.it/200x200/bada55/fff" alt="Cool Picture">
</div>
<div role="radio" aria-checked="false" tabindex="-1">
<img src="//placehold.it/200x200/0de/fff" alt="Also Cool Picture">
</div>
</fieldset>
<fieldset id="group-2">
<legend>Artist: Kevin Maguire</legend>
<div role="radio" aria-checked="false" tabindex="-1">
<img src="//placehold.it/200x200" alt="Nice Art"> …我正在使用 CSS 内容从字体集生成图标。问题是屏幕阅读器，尤其是 JAW，也在读出内容！
所以如下：
<span class="uxf-icon uxf-search"></span>
和：
.uxf-search::before {
content: ";"
}
因此屏幕阅读器实际上会读出“分号”。有没有办法阻止它这样做？我知道 say:none CSS 标签实际上不起作用！
css accessibility screen-readers wai-aria jaws-screen-reader
我找到了两种可能的解决方案:
对<li>标签应用role ="menuitem" :
<li role="menuitem"><a ...>some menuitem</a></li>
对<a>标签应用role ="menuitem" :
<li role="presentation"><a role="menuitem" ...>some menuitem</a></li>
我认为第二种解决方案是合乎逻辑的,但我不确定.我不能在更复杂的情况下使用它,只有2,因为子菜单不是<a>标记的子代:
<li role="menuitem"><a ...>some menuitem</a></li>
<li role="menuitem" aria-haspopup="true">
<a ...>some menuitem with children </a>
<div><ul>
<li role="menuitem"><a ...>submenuitem</a></li>
...
</ul></div>
</li>
这是对的吗？它还有一些可能的改进吗？
HTML结构由我使用的框架定义,我无法更改它.
来自反应文档
请注意，JSX 完全支持所有 aria-* HTML 属性。虽然 React 中的大多数 DOM 属性和属性都是驼峰式的，但这些属性应该是连字符（也称为 kebab-case、lisp-case 等），因为它们在纯 HTML 中：
AFAIK，每个 HTML 属性在反应中都被重命名为驼峰命名法。有什么理由可以解释为什么aria-*保留他们原来的名字吗？
奖金，有没有人知道，应该是<input autoFocus='autofocus'/>还是<input autofocus='autofocus'/>。前者看起来是正确的，因为我的编辑器没有发出任何警告。但是属性名和它的值不一致吗？
它也应该是autocomplete或autoComplete，而在原始属性名称中auto和之间没有连字符complete？
accessibility camelcasing naming-conventions wai-aria reactjs
这两种屏幕阅读器技术在表单上是否有任何区别，一种比另一种更受鼓励：
<label for="titleInput">Title</label>
<input type="text" id="titleInput" name="title" value="">
<div>Title</div>
<input type="text" aria-label="Title" name="title" value="">第一种方法一直是设置它的方法，但是自从引入 WAI-ARIA 后，我开始思考使用aria-label表单是否比使用<label for="x">.