标签: wai-aria
建立无href可访问的链接
我正在使用的网站上使用了第三方脚本,用于替换<a href="">简单的几个实例<a>.由于脚本的另一部分,链接仍然有效.但它们不再被用户代理视为链接.
我可以通过添加将它们恢复到选项卡式导航顺序,tabindex="0"但是如何让辅助技术将它们声明为链接或将它们包含在页面上所有链接的列表中？
会添加role="link"帮助吗？
我正在推动第三方改进他们的脚本,以便href保持不变.但与此同时,我如何才能最好地修复正在进行的损坏？
更新:我无法将原始内容href或类似内容添加href="#"回链接,因为第三方代码将不再执行其操作.我希望他们能够改进他们的代码,但是现在我需要在不使用'href'的情况下访问链接.
推荐指数
解决办法
查看次数
咏叹调标签和标签都没有读过
请考虑以下标记.
<label for="i1" class="inforLabel">This is a label</label>
<input id="i1" type="text" class="inforTextbox" aria-label="Title, not label" />
对我来说,这个标记是在我的自定义工具提示控件之后生成的.我在IE上看到JAWS的问题是它只读取"标题,而不是标签",但是对于其他屏幕阅读器,例如,标签和文本框上的语音都aria-label被读取.我认为它应该同时阅读.
这是一个设置还是一个错误？或者还有别人可以推荐的东西吗？
推荐指数
解决办法
查看次数
我需要<button>上的role ="button"吗？
我在Bootstrap的所有示例中都注意到了使用button元素,它们包括role="button"(和type="button"),例如:
<div class="dropdown">
<button id="dLabel" type="button" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown trigger <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
无法访问的软件是否已经知道某个button元素是否可以充当按钮？有什么理由我应该包含role="button"和/或type="button"在我的代码中？
推荐指数
解决办法
查看次数
在我的选项卡标记中放置aria-controls属性的位置
我正在使用遵循以下语法的脚本在我的页面中设置选项卡式内容部分:
<!-- Clickable tab links -->
<ul class="js-tablist">
<li id="tab1" class="js-tab active"><a href="#tabpanel1">Tab 1</a></li>
<li id="tab2" class="js-tab"><a href="#tabpanel2">Tab 2</a></li>
<li id="tab3" class="js-tab"><a href="#tabpanel3">Tab 3</a></li>
</ul>
<!-- Tab panels -->
<div id="tab-set" class="js-tabpanel-group">
<section id="tabpanel1" class="js-tabpanel">__CONTENT__</section>
<section id="tabpanel2" class="js-tabpanel">__CONTENT__</section>
<section id="tabpanel3" class="js-tabpanel">__CONTENT__</section>
</div>
我会设置各种ARIA角色(role="tablist",role="tab",role="tabpanel"在这种结构性标记通过JavaScript等)(因为如果没有脚本则没有标签),但我不确定相当哪里把我的"咏叹调-控制"的属性.他们应该继续 <li>元素还是<a>子元素？或者没关系？事实上,同样的问题可以问role="tab"及tabindex="0"-应这些东西在列表项或锚去？
推荐指数
解决办法
查看次数
像药丸/徽章这样的 HTML 元素是否需要额外的 Aria 角色？
我正在尝试为我的网页添加可访问性，但我不确定如何处理此徽章元素。它类似于您在在线购物车图标上看到的数字圆圈。（参见下面的示例图片）
我无法决定应该给它分配什么样的咏叹调角色。或者我是否需要特别为其指定一个咏叹调角色？很确定它不是“role=button”，因为这里没有点击事件。
推荐指数
解决办法
查看次数
语义HTML5结构与CSS布局需求
我有一个类似下面的网页:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<header>
<span>Logo</span>
<nav>Navigation</nav>
</header>
<main>
<h1>Page heading</h1>
<div>
Page content
</div>
</main>
<footer>
Content information
</footer>
</body>
</html>
页面结构类似于当前HTML5草案中的一个示例:http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element,我认为它是语义正确.
现在我想使用CSS设置此文档的样式.我想成为顶部的页眉和底部的页脚,当然,这很容易实现.在标题内部,我想将徽标放在右侧,并在中心导航,这也没关系(例如,使用灵活的盒子布局模型,这是现代浏览器支持的一种或另一种方式,或者使用花车).
当我想将主要的内容标题(h1元素)放在标题的左侧时,我的问题就开始了.我可以使用position:absolute,但是这样的布局不是很灵活,并且只要标题或标题的大小发生变化就会中断.建议的CSS网格布局http://www.w3.org/TR/css3-grid-layout/可能能够完全符合我的要求,但据我所知,它仅在IE 10中得到支持(不知何故) .
一个简单而有效的解决方案是简单地重构我的页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div>
<h1 id="heading">Page heading</h1>
<header>
<span>Logo</span>
<nav>Navigation</nav>
</header>
</div>
<main aria-labelledby="heading">
<div>
Page content
</div>
</main>
<footer>
Content information
</footer>
</body>
</html>
然而,这个解决方案虽然易于布局,但它的完整语义只能通过aria-*属性表达,并且似乎违背了HTML5语义的精神(特别是主要元素).
虽然我的示例页面可能很简单,但您可以轻松想象一个更复杂的页面,其中更多元素的视觉位置与HTML5标记的流顺序的顺序不同(并且嵌套以便灵活的框布局顺序属性赢得还不够.你会如何解决这个问题？用非语义元素(例如div)重写HTML5标记,使其更多地与视觉布局相对应,然后尽可能用新结构通过语义元素(例如页脚或主要元素)交换非语义元素？
推荐指数
解决办法
查看次数
如何使用jQuery选择具有特定ARIA值的所有元素？
鉴于我有一个如下所示的示例页面:
<!DOCTYPE html>
<html>
<body>
<h1 aria-controls="name1">heading</h1>
<p aria-controls="name2">paragraph</p>
<span aria-controls="name1">span</span>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
我如何使用jQuery选择aria-controls属性设置为的(2)元素name1？(忽略元素类型不同的事实).
谢谢!
推荐指数
解决办法
查看次数
咏叹调和咏叹调控制有什么区别
使用时对元素的真正影响是什么
aria-owns="id"
和(!)
aria-controls="id"
当使用这两个属性时,浏览器如何通知屏幕阅读器？
推荐指数
解决办法
查看次数
在单页pushState Web应用程序中模拟画外音页面加载
我正在开发一个单页面应用程序(SPA),我们正在使用HTML 5模拟多页面应用程序history.pushState.它在视觉上看起来很好,但在iOS Voiceover中表现不正常.(我认为它不适用于任何屏幕阅读器,但是我首先尝试使用画外音.)
这是我想要实现的行为的一个例子.这是两个普通的网页:
1.html
<!DOCTYPE html><html>
<body>This is page 1. <a href=2.html>Click here for page 2.</a></body>
</html>
2.html
<!DOCTYPE html><html>
<body>This is page 2. <a href=1.html>Click here for page 1.</a></body>
</html>
很好,很简单.画外音如下所示:
网页已加载.这是第1页.
[向右滑动]单击此处查看第2页.链接.
[双击]加载网页.这是第2页.
[向右滑动]单击此处查看第1页.访问过.链接.
[双击]加载网页.这是第1页.
这里它再次作为单页面应用程序,使用历史记录操作来模拟实际的页面加载.
spa1.html
<!DOCTYPE html><html>
<body>This is page 1.
<a href='spa2.html'>Click here for page 2.</a></body>
<script src="switchPage.js"></script>
</html>
spa2.html
<!DOCTYPE html><html>
<body>This is page 2.
<a href='spa1.html'>Click here for page 1.</a></body>
<script src="switchPage.js"></script>
</html>
switchPage.js
console.log("load");
attachHandler();
function attachHandler() {
document.querySelector('a').onclick …推荐指数
解决办法
查看次数
ARIA组合框的IE兼容标记
我正在寻找一种让Ext JS Combobox组件与IE/JAWS兼容的方法.目前我们正在使用以下标记:
<div role="presentation" id="combobox-1011">
<label id="combobox-1011-labelEl" for="combobox-1011-inputEl">
<span>Choose:</span>
</label>
<div id="combobox-1011-bodyEl" role="presentation">
<!-- This wraps both input and triggers -->
<div id="combobox-1011-triggerWrap" role="presentation">
<div id="combobox-1011-inputWrap" role="presentation">
<input id="combobox-1011-inputEl" type="text" name="choose"
role="combobox" aria-readonly="false"
aria-haspopup="true" aria-expanded="true"
aria-autocomplete="none" aria-owns="boundlist-1014-listEl"/>
</div>
<!-- Trigger element styled to look like a button -->
<div id="combobox-1011-trigger-picker"></div>
</div>
<!-- This is used to announce input validation errors -->
<div id="combobox-1011-ariaErrorEl" role="alert" aria-live="polite"></div>
</div>
</div>
<div id="boundlist-1014">
<div id="boundlist-1014-listWrap">
<ul id="boundlist-1014-listEl" role="listbox" aria-hidden="false">
<li role="option" tabindex="-1" aria-selected="true" …推荐指数
解决办法
查看次数