许多ARIA演示网站使用以下代码:
<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">
但aria-labelledby在这种情况下使用属性的目的是什么？该input元素已被label使用for属性的元素标记,不是吗？
在ARIA演示网站上,role="contentinfo"通常会添加footer元素.
但是,现代网页设计中的页脚可以具有创造性,因此它们还可以包含诸如辅助导航链接,社交网站链接或甚至新闻简报形式之类的内容.
以下面的页脚代码为例.如果role="contentinfo"要在添加footer或p元素？
<footer>
<nav>
<ul>
........
........
........
........
........
</ul>
</nav>
<form>
........
........
........
</form>
<p>© 2012 Website.com. All rights reserved.</p>
</footer>
编辑:我通过使用W3C ARIA邮件列表问了这个问题,W3C HTML工作组成员Steve Faulkner回复道.以下是他的建议:
我还会考虑浏览器如何将页脚元素映射到辅助功能API.
在Firefox中,页脚被映射到ARIA role = contentinfo
在Webkit/safari/chrome中,页脚被映射到ARIA role = group,如果它包含在section或article元素中,否则它被映射到role = contentinfo
在IE中它没有被映射所以这样做:
<div role ="contentinfo">
一些内容
<footer>一些内容</ footer>
</ div>将导致在已经将页脚映射到contentinfo的浏览器中宣布嵌套的contentinfo地标.
因此我建议将role = contentinfo添加到主页脚,而不要过多担心您认为可能不适合页脚的内容.
所以建议的方法是增加role="contentinfo"主要footer.
如何检查浏览器是否具有内置的HTML5表单验证功能？通过这样做,我们不需要在可以自己验证表单的浏览器上应用jQuery表单验证功能.
[解决]根据ThinkingStiff的回答,这是一种方式:
if (typeof document.createElement("input").checkValidity == "function") {
alert("Your browser has built-in form validation!");
}
以下代码利用DOM Mutation Event DOMNodeInserted来检测body元素的存在并将其innerHTML包装到包装器中.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function DOMmanipulation() {
if (document.body) {
document.removeEventListener('DOMNodeInserted', DOMmanipulation);
// DOM manipulation start
document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
// DOM manipulation end
}
}
document.addEventListener('DOMNodeInserted', DOMmanipulation);
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
尽管包装成功,但是有一个错误表明找不到节点.这个问题的答案解释说,这是因为当jQuery被加载时,它div在主体中添加了一个元素来进行一些测试,但它无法删除该div元素,因为该元素已被包装到包装器中,因此它不是一个孩子身体的元素了.
上面的实验告诉我们DOMNodeInserted事件比jQuery的测试更快,因为jQuery的test element(div)在被jQuery删除之前就被包装了.
现在,下面的代码可以实现相同的操作,并且它使用新引入的DOM Mutation Observers.截至此时(2012-07-11),它仅适用于Chrome 18及更高版本.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> …使用以下代码有什么好处吗？
<ul role="list">
<li role="listitem"></li>
<li role="listitem"></li>
<li role="listitem"></li>
</ul>
以下代码与辅助技术具有相同的含义吗？
<ul>
<li></li>
<li></li>
<li></li>
</ul>
考虑以下JavaScript，CSS和HTML代码：
console.log(getComputedStyle(document.querySelector('p'), '::after').getPropertyValue('content'));p::after {
content: "Hello" attr(data-after);
}<p data-after=" World"></p>Firefox和IE11都返回CSS：中定义的原始值"Hello" attr(data-after)，这就是我所需要的。
但是Chrome返回"Hello World"，解析后的值。
当我使用Chrome DevTools检查元素时，可以在“样式”面板中看到它显示以下信息：
p::after {
content: "Hello" attr(data-after);
}
因此，看起来Chrome仍然有能力知道原始值。
是否有任何JavaScript解决方案可以使Chrome返回Firefox和IE11这样的CSS定义的原始值？只要可以在JavaScript中使用，即使Chrome独有的方法也很好。
情况说明
在回答成员关于原因的问题时，情况如下：
我正在尝试speak: never在伪元素上为CSS创建一个“ polyfill” 。目前，任何浏览器均不支持该speak属性。
屏幕阅读器可以读取CSS伪元素，目前无法从屏幕阅读器中轻松隐藏它们。解决该问题的常用方法是使用HTML代码（例如）<span aria-hidden="true">...</span>代替方便的CSS伪元素和speak: never，而我认为这种方法既不方便又令人失望。
因此，此polyfill主要与Web可访问性有关。
这种polyfill的工作方式将要求CSS开发人员编写一些额外的CSS代码作为指标，例如attr(speak-never)：
p::after {
content: "please make me inaudible" attr(speak-never);
}
然后在JavaScript中，polyfill循环浏览页面上的每个元素，并检查其伪元素::before和::afterCSS content属性的值是否包含attr(speak-never)。如果找到指示字符串，则填充工具固定伪元素（通过添加自定义元素<before aria-hidden="true">...</before>和<after aria-hidden="true">...</after>编程）。
现在的问题是Chrome无法attr(speak-never)以JavaScript 返回上述内容。尽管polyfill也可以通过要求CSS开发人员添加其他指标（例如 …
有一个div通过Ajax加载的元素(图像,iframe等).这些元素完全加载后,我需要执行一个函数div.
如何确定所有元素div是否已完全加载？
我使用jQuery作为库.
在文档中,有多个<nav>和<aside>元件.我应该加上role="navigation"所有<nav>s和role="complementary"所有<aside>s吗？
换句话说,文档中有多个<nav role="navigation">...</nav>s和多个<aside role="complementary">...</aside>s 是更有益还是更冗余？
通常在博客的首页上，有几篇最近的博客文章，每篇博客文章都是一个<article>. 通常博客评论也使用<article>s标记。
我的问题是：将这些<article>s 放入<li>s是一个好习惯吗？我曾经这样做的话，因为我自己的解释那些<article>小号一起在一定的方式呈现量/数量。因此，当涉及到列表元素一定量/数量，<ul>并且<ol>是最好的选择。
但是，也许我需要重新考虑我的解释，因为将<article>s 放入<li>s 似乎是对<li>. 而且我还想考虑可访问性。我不确定这样做是否会导致对辅助技术的混淆。
html ×5
wai-aria ×4
javascript ×2
semantics ×2
article ×1
breadcrumbs ×1
css ×1
events ×1
footer ×1
html-lists ×1
html5 ×1
jquery ×1
label ×1
list ×1
load ×1
observers ×1
performance ×1
role ×1
validation ×1