accessibility 相关问题

我的页面上有如下纯文本输入：验证码我的页面上有如下纯文本输入： <label for="tfa_code">Verification Code</label> <input type="text" name="tfa_code" id="tfa_code"/> <button type="submit">Submit</button> 这很简单，不需要为屏幕阅读器提供特殊的便利。但是，前端脚本可以将其转换为更典型的双因素身份验证条目，其中每个数字都输入到单个文本输入中。像这样的东西： <label for="tfa_code">Verification Code</label> <input type="hidden" name="tfa_code" id="tfa_code"/> <input type="text" id="regcode0" maxlength="1"/> <input type="text" id="regcode1" maxlength="1"/> <input type="text" id="regcode2" maxlength="1"/> <input type="text" id="regcode3" maxlength="1"/> <input type="text" id="regcode4" maxlength="1"/> <input type="text" id="regcode5" maxlength="1"/> <button type="submit">Submit</button> 输入上有 keyup 侦听器，用于在字段之间移动光标并更新隐藏输入的值。我关心的是如何标记这一点，以便使用屏幕阅读器的用户受益。我的第一个想法是简单地将输入用 <fieldset> 包装在 <legend> 中，并完全删除 <label> 元素。这是否足以将输入识别为单个逻辑组的一部分，向这些用户正确描述其目的，并且不会向他们发送语音提示垃圾邮件？ <fieldset> <legend>Verification Code</legend> <input type="hidden" name="tfa_code" id="tfa_code"/> <input type="text" id="regcode0" maxlength="1"/> <input type="text" id="regcode1" maxlength="1"/> <input type="text" id="regcode2" maxlength="1"/> <input type="text" id="regcode3" maxlength="1"/> <input type="text" id="regcode4" maxlength="1"/> <input type="text" id="regcode5" maxlength="1"/> </fieldset> <button type="submit">Submit</button> 我查看了像 aria-labelledby 这样的属性，但我认为它不合适，因为（我认为）它会导致每次输入获得焦点时读取标签。像 role="group" 这样的东西似乎没有提供除 <fieldset> 元素之外的任何东西。根据安迪对这个问题的评论，我决定根本不为屏幕阅读器用户分割该字段，从而避免了这个问题。单个字段对于标准浏览器来说是隐藏，而拆分字段对于屏幕阅读器来说是隐藏： <label for="tfa_code">Verification Code</label> <input type="text" name="tfa_code" id="tfa_code" class="visually-hidden" autocomplete="one-time-code"/> <div aria-hidden="true"> <input type="text" id="regcode0" maxlength="1"/> <input type="text" id="regcode1" maxlength="1"/> <input type="text" id="regcode2" maxlength="1"/> <input type="text" id="regcode3" maxlength="1"/> <input type="text" id="regcode4" maxlength="1"/> <input type="text" id="regcode5" maxlength="1"/> </div> <button type="submit">Submit</button> 计划进行测试，以确保视觉上隐藏的输入不会因为自动完成属性而试图抢走标准浏览器的注意力，但到目前为止似乎还不错。

html accessibility wai-aria

回答 1 投票 0

自主自定义元素中是否可以有一个“<li>”，而父元素“<ul>”不在同一个 ShadowDOM 中？

我过去的理解是，列表项标签必须是、或标签的直接子代。但我一直在使用 Web 组件和自主自定义 elem... 我过去的理解是，列表项 <li> 标签必须是 <ul>、<ol> 或 <menu> 标签的直接子代。但我最近一直在使用 Web 组件和自主自定义元素。我读到，对于自主自定义元素，内容模型是透明的。请参阅https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts 我想要一个自主自定义元素 <my-list>，其 ShadowDOM 中有一个 <ul>（或其他有效父元素之一，例如 ol 和 menu），以及第二个自主自定义元素 <my-list-item> ShadowDOM 中有一个 <li>。（参见下面的“示例”。）为什么？几个原因： CSS 样式范围仅限于 ShadowDOM 额外的事件处理程序某些用例可能会发生更多情况，例如每个 <li> 除了 <slot> 之外还包含 ShadowDOM 子级我使用的是 Lit 3，所以很自然地编写一个 Web 组件根据 HTML 5 规范和辅助功能指南，类似下面这个示例的内容是有效还是无效？注意：我使用 <template shadowrootmode="open"> （参见此处 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#shadowrootmode ）使我的示例更加独立。在我的实际代码中，我使用 Lit 框架，它以编程方式创建 ShadowDOM。示例： <my-list role="presentation"> <template shadowrootmode="open"> <ul> <slot /> </ul> </template> <my-list-item role="presentation"> <template shadowrootmode="open"> <li> <slot /> </li> </template> My text here </my-list-item> </my-list> 我认为这可能有效的另一个原因是我看到 axe-core 有一个看起来相似的单元测试： https://github.com/dequelabs/axe-core/blob/develop/test/checks/lists/only-listitems.js#L224-L232 it('should return false in a shadow DOM pass', () => { const node = document.createElement('div'); node.innerHTML = '<li>My list item </li>'; const shadow = node.attachShadow({ mode: 'open' }); shadow.innerHTML = '<ul><slot></slot></ul>'; const checkArgs = checkSetup(node, 'ul'); assert.isFalse(checkEvaluate.apply(checkContext, checkArgs)); }); 但看起来这是 axe-core 中的特定模式/选项，而不是默认行为？在理论上，你所说的都是有道理的。这意味着以下事情是正确的：自定义元素具有符合规范的透明内容模型。根据规范，当透明元素相互嵌套时，必须迭代应用该过程。因此，这意味着您应该被允许创建完全自定义的列表。所以，这应该有效： <script> class MyList extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = ` <ul aria-label="Custom List"> <slot></slot> </ul> `; } } class MyListItem extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = ` <li> <slot></slot> </li> `; } } customElements.define('my-list', MyList); customElements.define('my-list-item', MyListItem); </script> <my-list aria-label="Custom Wrapper"> <my-list-item>Item 1</my-list-item> <my-list-item>Item 2</my-list-item> </my-list> 在这种情况下，<ul> 的影子根与 <li> 元素的影子根不同。对于上述定义，浏览器最终会生成以下可访问性树（来自 Chrome 浏览器）：因此，根据规范，浏览器正确生成了大多数工具应该看到的可访问性树。我最好的猜测是，axe-core 在此给定测试中依赖相同的规格。但在实践中，情况有所不同。许多辅助工具都有自定义解析器，这会破坏和/或对 HTML 结构做出假设（ShadowRoot 是一个常见的障碍）甚至W3C 验证器也无法识别自定义元素。尽管自定义元素规范正式考虑具有透明内容模型的自定义元素，但 <ul> 和 <ol> 的规范仍然明确限制它们仅具有 <li>、<script> 和 <template>。（将来应该解决这个问题）。因此，根据规范，您最好在完全不同的 Shadow DOM 中的自定义列表中拥有自定义列表元素，但实际上，可访问性仍然会受到影响。如果可能，最好依赖经典的 ul > li 或 ol > li 层次结构。

accessibility web-component

回答 1 投票 0

防止某些元素获得焦点

所以我有以下功能。它的作用是监听所有元素的焦点事件。如果该元素位于 $mobileMenu 或 $menuItems 中，则它允许它，否则它将删除焦点： ...

javascript jquery html accessibility

回答 5 投票 0

禁用 CMD 上的文件视图扩展

当光标位于文件中时单击 ⌘ 时，intellij 会在文件顶部的框中显示该文件的大可滚动放大视图：我认为这是我意外的辅助功能...

intellij-idea accessibility

回答 1 投票 0

包含选项卡以外的元素的 Aria tablist 角色

我有关于咏叹调角色列表的问题。选项卡元素是选项卡列表中唯一允许的元素。这是一个 DOM 示例。我有一个关于咏叹调角色的问题tablist。选项卡元素是 tablist 内唯一允许的元素。这是一个 DOM 示例。 <ul role="tablist"> <li> <a role="tab" href="#">My Tab</a> <button class="close">X</button> </li> </ul> 由于 <button> 是一个交互式元素，它将被添加到可访问性树中。规范中规定“允许的辅助功能子角色”是 tab。这也适用于隐含角色吗？如果选项卡角色移至 <li> 那么问题就变得毫无意义了？你把矛头指向了 ARIA 的薄弱环节。正在讨论解决 ARIA 中关闭选项卡等次要操作的问题关于规范，您的陈述是正确的，但我会稍微改一下： tab 角色 tablist内唯一允许的子角色。细微差别在于 ARIA 适用于角色，而不是 HTML 元素。您可以将任何 HTML 元素直接放置在选项卡列表下，只要它没有角色（或 role="none"）。同样重要的是，规范中提到了child角色，而不是可访问性树中更深层次的角色。因此，沿着 DOM 向下，下一个角色不是 none 的元素一定是 tab 的元素。 <li> 具有隐式角色 listitem，因此不允许它作为具有角色 tablist 的元素的子元素。您可以删除它的角色<li role="none">，但不建议这样做，它的使用毫无意义。具有角色 tab 的元素应该是交互式的，因此您不能简单地将其添加到 <li> 元素上而不处理其上的所有交互。任何交互元素都不能有交互子元素。这给模式带来了问题。也许 Github 上的讨论会启发您找到一些解决方法。

html accessibility wai-aria

回答 1 投票 0

让屏幕阅读器 (NDVA) 在登录后宣布菜单项

我根据此示例创建了一个可访问的优先级菜单：https://www.codementor.io/@marys/flexbox-priority-navigation-1bussno6uj。我还为三类用户添加了登录功能...

html jquery accessibility navbar uiaccessibility

回答 1 投票 0

如何从AccessibilityNodeInfo中的所有子节点获取文本

我正在尝试从 AccessiblityNodeInfo 的所有子节点读取文本。我尝试获取 AccessiblityNodeInfo.getParent() 和 AccessibilityNodeInfo.getChildCount() for(int i=0; i<

java android accessibilityservice accessibility accessibility-api

回答 2 投票 0

Highcharts可访问输入和点击事件功能（需要可访问事件数据）

作为 Highcharts 可访问性输入和单击事件功能的后续功能绘图选项：{ 系列： { 观点： { 事件：{ 单击：函数（e）{ console.log('点