问题标签 [wai-aria]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - Invalid role attribute value for section element?
In a website I'm working on right now, I have a section element which type is set to "main
". According to WAI-ARIA, the section
element can use main
as role
attribute (role="main"
).
However, when I run my site through the W3C validator, I get a "Bad value main for attribute role on element section." error. I used the main
value in another website previously, and it did pass the validation, but now it's no longer valid, reporting the same error.
Has the HTML5 specification changed recently and took out the main
value? Should I believe the WAI-ARIA or the W3C validator? Is the WAI-ARIA page out of date? Should I just keep the section
element without any role attribute (which will revert to the "region" default value)?
Any thoughts and tips on this would be appreciated :)
javascript - 为 twitter bootstrap 手风琴添加 Web 可访问性
我试图将键盘导航添加到 Twitter 引导手风琴以启用 Web 可访问性,类似于http://hanshillen.github.io/jqtest/#goto_accordion。
我无法执行以下操作:
- 一旦重点放在手风琴标签上,我就不能只浏览手风琴标题。当我点击选项卡时,它会导航组中的所有内部链接,然后导航到下一个标题。
- 我无法使用向上/向下箭头键
- 在最后一个手风琴标题选项卡 thro' 之后,焦点转移到手风琴之外。
html - 如何格式化HTML5 中的元素为辅助设备用户提供有意义的洞察力?
最好的方法是让屏幕阅读器类型的辅助设备以有洞察力的方式宣布部分?
理想情况下,与其将这项工作传递给子<h1>
标签,有没有办法标记<section>
可以用于此目的的实际标签?
将 an<article>
分解为<section>
s 的想法是<section>
s 不适合联合,但它们仍应在文档结构中具有自己的固有身份。作为 HTML 作者,我们如何记录这一点?
示例:给定这棵树:
我们如何标记<section>
s 以使辅助设备能够从<section>
标签中提取部分焦点?
这是一个 HTML 示例:
那么:示例 1 到 3 中的任何一个都是不错的选择,还是有更好的选择?
accessibility - 如何告诉屏幕阅读器使用属性而不是链接文本?
我在无序列表中有一个链接,如下所示:
通常,屏幕阅读器会读取“保存”。是否可以在不更改实际链接文本的情况下更改它,以及使用哪个属性?
业务需求是有一个链接,带有图标样式。该图标将作为链接文本的补充。例如:
- 一个“+”号图标和一个与“添加菜单项”操作相同的链接文本“菜单”。
我尝试了 aria-label,但没有成功。
accessibility - NVDA 未看到 Aria 角色 =“警报”
我有以下 div 标签:
当我触发这个 jQuery 时,它会变得可见,但不会被宣布为警报。
这是在我进行 isvalid 检查后添加到页面中的,如下所示:
我正在使用 NVDA 进行测试,该页面是一个带有更新面板的 aspx 页面。我尝试移除面板,但这似乎不是问题。一切正常,只是没有警报通知。正在检查的文本框设置了 describeby 标记并指向 div 标记 id。
html - 具有 alt 属性但没有文本的 img 是否满足 WCAG 2.0:技术 H30?
我正在阅读WCAG 2.0 技术 H30。
该程序说:
对于使用此技术的内容中的每个链接:
- 检查文本或非文本内容的替代文本是否包含在 a 元素中
- 如果 img 元素是 a 元素的唯一内容,请检查其替代文本是否描述了链接的目的
- 如果 a 元素包含一个或多个 img 元素并且 img 元素的替代文本为空,请检查链接的文本是否描述了链接的目的
- 如果 a 元素只包含文本,请检查文本是否描述了链接的目的
我专注于第 2 点:如果img
有一个alt
属性,但没有替代文本怎么办?
例如,以下代码是否满足该技术要求?
html - HTML5 细节元素和旁白
我目前在我的 JSP 中使用 details/summary 元素。当我打开 VoiceOver 以测试可访问性时,VoiceOver 会在到达详细信息元素时停止。听起来它不知道如何处理它。
知道是否有解决方法吗?我已经尝试将 role="button" 和 aria-expanded="false" 添加到摘要元素中,如http://www.accessibleculture.org/articles/2012/03/screen-readers-and-details-summary/中所述但这并没有改变任何东西。
我正在使用带有 iOS 6.1.3 的 iPhone 进行测试。
html - 为什么`ul`有ARIA角色`menu`但`li`禁止`menuitem`?
刚刚介绍了一些关于ARIA 角色的战略规格。为什么ul
有 ARIA 角色menu
却被menuitem
禁止li
?
我想描述一个使用ul
,li
和 HTML5 的nav
元素结合 ARIA 角色navigation
,menu
和menuitem
.
W3 的 HTML5 验证器在这里唠叨我:
元素 li 上属性角色的错误值 menuitem。
css - 语义 HTML5 结构与 CSS 布局需求
我有一个类似以下的网页:
页面结构类似于当前 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 中(不知何故)受支持.
一种简单且可行的解决方案是简单地重组我的页面:
然而,这种解决方案虽然易于布局,但其完整语义仅通过 aria-* 属性表示,并且似乎违背了 HTML5 语义的精神(尤其是主要元素)。
虽然我的示例页面可能很简单,但您可以轻松想象一个更复杂的页面,其中更多元素的视觉位置与 HTML5 标记的流顺序不同(并且嵌套以便灵活的框布局顺序属性获胜不够)。你会如何解决这个问题?用非语义元素(例如 div)重写 HTML5 标记,使其更符合视觉布局,然后尽可能使用新结构通过语义元素(例如页脚或主)交换非语义元素?