- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们的页面上有一些具有以下结构的选项卡:
<ul role="tablist">
<li>
<div role="tab" tabindex="0" aria-selected="true" aria-controls="id1">First tab content...</div>
</li>
<li>
<div role="tab">Second tab content...</div>
</li>
</ul>
这在运行 Ax 可访问性测试时会导致两个违规行为,即: <li> elements must be contained in a <ul> or <ol>
, 和 Certain ARIA roles must contain particular children
(反过来,某些 child 需要特定的 parent 角色)。
据我所知,第一次违规是由于 tablist
角色含义 <ul>
不再被视为 <ul>
.我不明白第二个违规行为,因为规范不强制使用 role="tab"
的元素是 tablist
的直系子女.
防止这些违规行为的一个可能的修复方法是移动 role="tab"
直到 <li>
元素。然而,问题是不同的违规行为:Nested interactive controls are not announced by screen readers
, 由于包含 <div>
大概是可以集中注意力的。将其更改为外部 <li>
需要大量的 js 和 css 更改,所以这不是一个简单的修复。
这在多大程度上真正需要修复?最佳方法是什么?
最佳答案
斧头错了。 spec for the tab
role说:
Authors MUST ensure elements with role
tab
are contained in, or owned by, an element with the roletablist
.
强调我的。注意这是说 tab
必须包含一个tablist
. 包含在 并不意味着直系子代,而是后代。
如果您查看下一个短语或拥有者,则会进一步强调这一点。 “拥有”有一个 definition :
An 'owned element' is any DOM descendant of the element, any element specified as a child via
aria-owns
, or any DOM descendant of the owned child.
再说一遍,只要tab
是 tablist
的后代( child 、孙子、曾孙等),那么从技术上讲它是有效的,而 ax 是错误的。
现在,“拥有”的定义为您提供了一条线索,告诉您如何解决 axe 的错误,以防违规行为困扰您。添加aria-owns
给你的<ul>
并将其指向 tab
元素(你的 <div>
s)。您的原始代码将像这样通过 ax:
<ul role="tablist" aria-owns="foo1 foo2">
<li>
<div id="foo1" role="tab" tabindex="0" aria-selected="true" aria-controls="id1">First tab content...</div>
</li>
<li>
<div id="foo2" role="tab">Second tab content...</div>
</li>
</ul>
您仍然有 <li>
的问题不包含在 <ul>
中. @graham 涵盖了那部分。我也同意@graham 的观点,你应该遵循 authoring practice for the tab design pattern .
关于html - 如何修复角色 ="tablist"/角色 ="tab"Ax 违规?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69756534/
我有一个模板化的自定义小部件,它继承自 dijit.layout._LayoutWidget、dijit._Container 和 dijit._Templated,它为我的小部件原生小部件提供了调整
我们的页面上有一些具有以下结构的选项卡: First tab content... Second tab content... 这在运行 Ax 可访问性测试
我们的页面上有一些具有以下结构的选项卡: First tab content... Second tab content... 这在运行 Ax 可访问性测试
li.nav-item { display: block; width: 100%; position: relative; display: lock; min-height: 40px;
我是一名优秀的程序员,十分优秀!