accessibility 相关问题

role="tab" 必须是role="tablist" 的直接子级吗？

我有一个手风琴，其结构如下： 标题 ... &... 我有一个手风琴，其结构如下： <section... role="tablist"> <div> <h3 role="tab">Title</h3> <div role="tabpanel"> ... </div> </div> </section> tab 是否必须是 tablist 的直接子级才能符合 wai aria 最佳实践，还是可以包裹在 div 中？ 作者必须确保具有角色选项卡的元素包含在具有角色选项卡列表的元素中或由其拥有。 https://www.w3.org/TR/wai-aria-1.1/#tab 因此你的例子是正确的。 我建议您仔细阅读规范，以确保您遵循最佳 ARIA 实践。 例如，在 role 上添加 div，而不是 section 元素，按照最佳实践示例。 它不一定是直系孩子。只要是“的后代”就有效。 您的 <div> 在辅助功能树中没有 role，因此它不会影响辅助功能体验。 （如果您使用的元素确实具有特定的辅助功能角色，那么您可以使用role="none"或role="presentation"覆盖它。） 有效示例： <ul role="tablist"> <li role="none"> <a id="tab-1" href="#panel-1" role="tab" aria-selected="true" aria-controls="panel-1" tabindex="0"> Tab 1 </a> </li> <li role="none"> <a id="tab-2" href="#panel-1" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1"> Tab 2 </a> </li> ... </ul> <div class="tab-panels"> <section id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> Panel content </section> <section id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> Panel content </section> ... </div>

如何访问特定第三方应用程序窗口中的文本框元素？

我的要求是从我的应用程序启动第三方应用程序并将用户名自动填充到指定的文本框中。目前，我可以启动该应用程序并尝试使用

辅助功能自动化测试

关于可访问性和自动化测试有什么建议吗？ WAVE 错误、屏幕阅读器可访问性、颜色对比度等 我猜大部分都需要手动测试，但只是想知道......

如何在 IonCheckbox 上包含 aria 标签并且仍然具有可见标签渲染？

我正在使用 Ionic 7 和 React 18。我有一个像这样构建的 IonCheckbox 杰夫·勒博夫斯基 我正在使用 Ionic 7 和 React 18。我有一个像这样构建的 IonCheckbox <IonItem> <IonLabel id="label1">Jeff Lebowski</IonLabel> <IonCheckbox value="123" checked={true} /> </IonItem> 这会产生可访问性警告 [Ionic Warning]: ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute. 示例： <ion-checkbox>Label</ion-checkbox> 带有 aria-label 的示例： <ion-checkbox aria-label="Label"></ion-checkbox> 但是，如果我包含 aria 标签， <IonItem> <IonLabel id="label1">Jeff Lebowski</IonLabel> <IonCheckbox value="123" checked={true} aria-label="Jeff Lebowski" /> </IonItem> 我看不到复选框旁边的文字。这个例子在这里 - https://stackblitz.com/edit/an5yjh-ef4kj7?file=src%2FApp.tsx,src%2Fcomponents%2FMyForm.tsx <IonCheckbox value="123" checked={true}> Jeff Lebowski </IonCheckbox> 似乎产生了预期的结果。

使用react-testing-library关闭最近禁用的元素不会继续Tab顺序，如何模拟浏览器Tab顺序？

我对带有两个按钮和其他一些元素的组件进行了一个非常简单的测试。 一个最小的例子是： const { useState, useMemo } = React; const { 按钮 } = 窗口['MaterialUI']; c...

当辅助功能选项更改时，TextView 自动调整缩减内容的大小

我有一个非常简单的TextView，启用了自动调整大小，文本字体大小被正确更改，直到我将设备字体大小（可访问性）更改为大或巨大，此时文本被削减...

有没有办法防止屏幕阅读器阅读由无视图按钮折叠的文本

我正在使用 Angular、JavaScript 和 CSS 在论坛应用程序中开发一个用于评论的“查看更多/查看更少”按钮。当卡片折叠时，只会出现前两行文字，其余的将...

空格键切换无线电输入

我有一个单选按钮列表，出于可访问性的目的，我试图确保按空格键可以切换单选按钮的状态。但是，当我按 sp 时它不会切换...

使用 javascript 在 true 和 false 之间切换 aria-expanded

我试图在单击按钮时在 true 和 false 之间切换 aria 标签。我已经尝试了几种实现，但似乎完全没有任何作用。以下是我目前正在使用的

他们对于嵌入一个带有计时器的大按钮是否存在可访问性问题？

我正在研究一个项目的要求，我担心嵌入计时器的按钮可能无法访问。我担心的是，将计时器和按钮放在页面上......

模式窗口中什么标题级别是正确的？ [已关闭]

在 HTML 中创建模态框（显示在当前页面顶部的对话框窗口）时，将 HTML 标题放在 div 顶部时最合适的是： H1？ H2？什么是最正确的？

Android - 如何阅读触摸监听器的辅助功能

我正在使用 Android 触摸监听器。当我在 Android 中激活辅助功能时，它显示为“双击即可激活”。但是当我双击操作时不起作用。 Insteed Action 有效...

有人可以解释一下 HTML5 aria-* 属性吗？

我想知道 aria-* 属性的用途。他们可以拥有哪些价值观？它们是定义的价值观还是我可以创建自己的价值观？

使用 iOS 15+ API (@AccessibilityFocusState)，而不放弃对早期 iOS 版本的支持

Apple 为 iOS 15 引入了 @FocusState 和 @AccessibilityFocusState 及其各自的 API。通常，当我有一个支持多个版本的应用程序并且需要使用新的 API 时，我会...

React Native 中嵌套元素的辅助功能焦点顺序不正确

我正在一个混合匹配应用程序中工作，我们在几个模块中使用 React Native 组件。在本例中，我有一个表格视图，我们在其中的一些单元格中添加了 RN 组件。 我能够启用

如何在 HTML 中正确禁用按钮？

可以通过设置disabled属性来禁用元素，例如使用 document.querySelector("button").disabled = true; 不过，这也有一些不利之处 可以通过设置 <button> 属性来禁用 disabled 元素，例如使用 document.querySelector("button").disabled = true; 但是，这会产生一些“不利的可用性影响”，例如导致按钮失去焦点并无法通过键盘导航进行访问。有些用户会看到按钮被禁用的视觉提示，例如因为表单中可能缺少某些内容。对于依赖键盘导航和屏幕阅读器的用户来说，获取此信息会困难得多。 禁用按钮的好方法是什么？ 可以使按钮的行为就像被禁用一样，而无需实际禁用它。您可以使用 aria-disabled 属性 来执行此操作： /** * Adds eventListeners to the buttons. * Here, not the action is added but the guard. */ document.querySelectorAll("button").forEach(button => { button.addEventListener("click", actionGuard(action)) }); /** * This guard prevents the action if the button * is disabled or event handling was prevented. * @param {EventListener} action * @returns {EventListener} */ function actionGuard(action) { return (evt) => { if (evt.target?.ariaDisabled) evt.preventDefault(); else if (!evt.defaultPrevented) action(evt) } } /** * The action you want your button to perfom. * @type {EventListener} */ function action(evt) { console.log("Event callback triggered:", evt.type) } button[aria-disabled="true"] { opacity: .65; cursor: not-allowed; } <button type="button">Enabled</button> <button type="button" aria-disabled="true">Disabled</button> 基于 aria-disabled 属性，按钮的样式已更改，以便您仍然可以获得该按钮处于非活动状态的视觉提示。此外，只有当 aria-disabled 属性不为 true 并且事件尚未被阻止时，守卫才会允许执行该操作。为了提高可用性，您可以考虑向此禁用按钮添加工具提示，告知用户该按钮被禁用的原因。添加工具提示时，请务必通过添加 aria-live 元素来帮助屏幕阅读器用户。

可访问的值，0:00 作为持续时间而不是时间，1/12/2023 作为日期，等等

我有一些 html 文本，NVDA 屏幕阅读器（通过语音查看器）显示为以下文本 第 9 行 星期二 28/11/23 第一个小时 6:00 第二个小时 0:00 第三个小时 0:00 第 7 栏 并大声朗读...

在 Jetpack Compose 中，如何检查屏幕是否已重新组合？

我希望能够在 Text 对象上设置辅助功能焦点，但只有在它变得可见时（通过记住的可变状态布尔值）。这意味着屏幕需要完成重新启动...

用户不会收到有关如何打开农业网格上的列菜单的通知

用户只需使用键盘上的 CTRL 和 ENTER 键即可打开列菜单。 我遇到的问题是用户没有收到如何仅使用键盘打开列菜单的通知。如果用户您...

Axe 开发工具引发不必要的违规行为

所以我的导航栏具有以下结构： 点击查看代码片段 我遵循 https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/men 中存在的相同结构...