标签: wai-aria

使用Bootstrap模式,我已经看到aria了很多这些属性,但我从来不知道如何使用它们.

有谁知道使用这些属性的情况？我google了 - 只是没有找到任何直截了当的答案.

什么是HTML5 ARIA？我不明白如何实现它.

在使用Angular Material时,我一直在看到aria属性.有人可以向我解释,咏叹调前缀是什么意思？但最重要的是,我想要了解的是aria-hidden和hidden属性之间的区别.

我想知道aria-*属性的用途.他们可以拥有什么价值,他们是定义价值还是我可以创造自己的价值观？

许多ARIA演示网站使用以下代码:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">

但aria-labelledby在这种情况下使用属性的目的是什么？该input元素已被label使用for属性的元素标记,不是吗？

我们正在实施(即添加)WAI-ARIA支持到Web门户的主导航菜单.菜单如下所示:

菜单是通过经典的<ul>/ <li>/ <a>DOM树实现的,用CSS设计样式,看起来像水平标签.

对于这样的小部件,推荐的WAI-ARIA实现是什么？

我将在这里发布一个可能的实现作为答案,以便让事情顺利进行.

如果您知道/不关心WAI-ARIA上下文中的CSS导航菜单,请跳过其余段落.

TA

序言(可以这么说)

我已经阅读了来自w3org的最新WAI-ARIA规范的许多部分,以获得一般性理解,分类等.然后我读了几个UI小部件实现的例子.我找不到任何专门针对这样的CSS导航菜单的例子.我一直找到的最近的小部件是Menu,MenuBar和TabPanel.当然,我也查看过免费ARIA社区小组(这个问题最初发布的地方).

我会说这些小部件都没有与(CSS)导航菜单完全匹配.例如,TabPanel可以控制页面中的一些内容( - > aria-controls),也可以控制MenuBar; 但我完全不确定导航菜单是否控制了页面中的内容(它控制下一页显示).不进一步,还有一些其他差异.参考文献在帖子的最后.如果有人作为更好(或更合适)的导航菜单示例,我们很高兴知道它们.

参考

• https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases#Menubar_and_Menu
• http://wiki.jqueryui.com/w/page/38666403/Menubar
• http://www.oaa-accessibility.org/examplep/menubar2/
• http://test.cita.illinois.edu/aria/menubar/
• http://dev.aol.com/dhtml_style_guide#menu
• http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
• http://www.w3.org/TR/wai-aria-practices/#menu
• http://www.w3.org/TR/wai-aria/roles
• http://www-03.ibm.com/able/resources/wai_aria_intro.html

我习惯使用title=""我的链接/按钮/ ...上的属性来详细说明它们.但aria-label=""据我所知,bootstrap使用了很多属性,出于可访问性的原因.

所以我来创建按钮,如:

<button
    id="show-raw-result"
    class="btn btn-default btn-sm btn-twigfiddle"
    title="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw"
    aria-label="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw">
    <span class="glyphicon glyphicon-asterisk"></span> Show raw result
</button>

但复制/粘贴标题以创建一个咏叹调标签看起来很丑陋.我应该选择哪一个,为什么？

我有一个组件<Button>.
如果组件没有this.props.children,我想将prop设置ariaLabel为isRequired,否则可以是可选的.我怎么做？

ariaLabel 道具不需要:

<Button>Add to bag</Button>

ariaLabel 必须要求道具:

<Button ariaLabel="Add to bag" icon={ favorite } />

if this.props.children和this.props.ariaLabel是空的,它会抛出一个错误,说this.props.ariaLabel是的isRequired

<Button icon={ favorite } />

propTypes:

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: React.PropTypes.string, /*isRequired if children is empty */
};

谢谢

有人可以详细说明aria-live="assertive"和之间的区别aria-live="polite"吗？

根据我的理解,aria-live="assertive"将获得更高的优先级并擦除队列,而aria-live="polite"具有低优先级aria-live="assertive"并将继续队列.

在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.