标签: wai-aria
你能在<section role ="main">元素中使用<aside>元素吗？
我正在使用HTML5和WAI-ARIA改进HTML中的可访问性.
可以进行以下设置吗？
<!-- main content -->
<section id="main" role="main">
<h1>The main content</h1>
<!-- This div needs to be here for styling reasons -->
<div class="the-content">
<p>All the text that goes with the main content</p>
</div>
<!-- the sidebar -->
<aside id="sidebar" role="complementary">
<h2>A title</h2>
<p>Some text</p>
<aside>
</section>
我不确定的是,我是否应该在容器<aside>外面放置元素.那有关系吗？<section>role="main"
推荐指数
解决办法
查看次数
何时使用必需属性与输入元素的aria-required属性？
我正在尝试使表格可访问.我应该让我的输入双双required和aria-required属性,或只是一个？
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" required>
或者像这样？
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-required="true">
或者像这样？
<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-required="true" required>
文章Accessible HTML5 Forms - Required Inputs声称最好同时实现这两者.
推荐指数
解决办法
查看次数
为什么`ul`有ARIA角色`menu`但``menuitem`是禁止`li`？
刚刚介绍了一些关于ARIA角色的策略规范.为什么ul有ARIA角色menu但是menuitem被禁止li？
我想描述一个导航栏使用ul,li和HTML5的nav元素结合ARIA角色navigation,menu和menuitem.
<!DOCTYPE html>
<html>
<head><title>ARIA role bug?</title></head>
<body>
<nav role="navigation">
<ul role="menu">
<li role="menuitem"><a href="http://example.com/">example.com</a></li>
</ul>
</nav>
</body>
</html>
W3的HTML5验证器在这里唠叨我:
元素li上属性角色的错误值menuitem.
推荐指数
解决办法
查看次数
可访问性:仅限sr或aria-label
在下面的示例中,按钮的样式看起来像一个典型的"关闭"按钮,中间有一个X. 由于没有任何迹象表明按钮的用途是关闭对话框,因此aria-label属性用于为任何辅助技术提供标签.
Run Code Online (Sandbox Code Playgroud)<button aria-label="Close" onclick="myDialog.close()">X</button>
根据Bootstrap文档:
将元素隐藏到除.sr-only的屏幕阅读器以外的所有设备
所以我想我也可以写:
<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button>
在Bootstrap项目中,我如何选择更喜欢哪一个？
推荐指数
解决办法
查看次数
React JSX 无效的 ARIA 属性 `ariaLabel`
反应jsx：
<button ariaLabel='label'>click</button>
呈现的html：
<button arialabel="label">click</button>
控制台警告：
index.js:1 Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`?
嗯，不，我的意思是 ariaLabel，因为我们总是在 jsx 中使用驼峰命名法。为什么渲染的 html 中全部是小写？
推荐指数
解决办法
查看次数
咏叹调和JAWS
我正试图让一个咏叹调生活区域与JAWS 11和IE8正常工作.
使用下面的代码,我可以让JAWS在单击按钮时宣布新值,但行为不是我所期望的.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="document.getElementById('statusbar').innerHTML = parseInt(document.getElementById('statusbar').innerHTML) + 1">Update</button>
<div id="statusbar" aria-live="polite">0</div>
</body>
</html>
使用我的JAWS11/IE8配置,每按一下按钮,我听到:
Click number HTML Value (after click) JAWS says ------------ ------------------------- --------- 1 1 "Update button 0" 2 2 "1" 3 3 "2"
问题,我的问题是:如何让JAWS公布aria-live区域的当前值,而不是aria-live区域的先前值？
我也对其他屏幕阅读器如何处理这个功能感兴趣.
推荐指数
解决办法
查看次数
WAI-ARIA旋转木马的角色(又名滑块,幻灯片,画廊)
推荐指数
解决办法
查看次数
正确的ARIA处理面包屑导航
可以采取哪些措施来改善面包屑菜单的可访问性,类似于:
<ul class="breadcrumbs" aria-label="breadcrumb navigation" role="navigation">
<li><a href="~/">Home</a></li>
<li><a href="~/news">News</a></li>
<li class="unavailable"><a href="#">@Model.Title</a></li>
</ul>
在此示例中给出Home是站点根目录,News是第一个子节点,不可用类是当前项目/ news/article项目.
是否可以采取任何措施来改善这一点,例如使用rel属性或aria-level属性？
推荐指数
解决办法
查看次数
HTML表格中隐藏的咏叹调标签(用于屏幕阅读器辅助功能)
在我的网页中,我需要创建一个表,该表具有根据某些用户配置可见或隐藏的标题行.此表也需要完全可访问(具体来说,因为表可能很长,我希望读取行/列标题的快捷方式可以工作).我只有ChromeVox进行测试(我将详细介绍与我发现的博客文章中其他读者的行为).
我目前的布局与此类似:
CSS:
.table-header-show {
}
.table-header-hide {
display: none;
}
HTML:
<table>
<!-- ${show} is used to choose the right class the user configuration -->
<thead class="table-header-${show}">
<tr>
<th>Name</th>
<th>Value 1</th>
<th>Value 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Value 1a</td>
<td>Value 2a</td>
</tr>
</tbody>
</table>
当标题可见时,根本没有问题.标题隐藏后,取决于屏幕阅读器是否读取这些标签:
- 我想在屏幕阅读器上使用常规导航*时跳过标题行,但是使用标题行来宣布列标签
- 使用ChromeVox,第一个工作(跳过导航),但第二个失败(隐藏的行不用于标记列)
- 再次使用ChromeVox,将隐藏移动声明为
style属性而不是aclass,会导致所需的行为都起作用 - 根据我发现的博客文章,屏幕阅读器
display: none有时会忽略内容,有时他们不会 - 所以我不确定我可以依靠这种隐藏来保证我的目的是可靠的(隐藏导航,用于标签)
那么,我如何以跨浏览器阅读器的方式实现我想要的行为呢？
- AFAIK,屏幕外/ 1px大小的隐藏问题(如此处所示)是,如果我为标题行执行此操作,那么将始终读出所有列标题...
推荐指数
解决办法
查看次数
咏叹调标签是否会阻止辅助设备读取内部内容？
该MDN文档说,你应该使用aria-label这样的:
<button aria-label="Close" onclick="myDialog.close()">X</button>
我无法访问屏幕阅读器,但我看到Stack Overflow上的注释表明aria-label它不会替换内部内容,它只是前缀.因此,在上述情况下,它会读出"关闭X",这显然不是理想的.
这是真的？如果是这样,解决方案是什么？我猜测用一个[aria-hidden=true]元素包装内部内容是有意义的,如下所示:
<button aria-label="Close" onclick="myDialog.close()"><span aria-hidden="true">X</span></button>
...但我很谨慎,因为我无法在真正的屏幕阅读器上测试它.
推荐指数
解决办法
查看次数
标签 统计
wai-aria ×10
html ×5
html5 ×5
breadcrumbs ×1
css ×1
html-input ×1
html-table ×1
javascript ×1
jsx ×1
reactjs ×1
required ×1