可访问性旨在使每个人都可以使用应用程序或网站，包括视力，听觉，走动或认知障碍等残疾人。
我已经基于如何使用 Material-UI 构建全宽巨型菜单？ 构建了一个 MegaMenu？ 出于可访问性的原因，应该可以通过选项卡浏览菜单中的链接并选择其中一个链接...
为什么我的 Shadow DOM 按钮 (tabindex="0") 在常规按钮 (tabindex="10") 之后获得焦点，如何修复它？
我试图确保 Shadow DOM 中的按钮在主 DOM 中的常规按钮之前获得选项卡焦点。一个按钮的 tabindex="0"，另一个按钮的值为 10，但为常规按钮
所以基本上我有一个 React 的 div 包装器，我构建它作为可点击块的按钮，其内容复杂，没有按钮或链接可以满足。 所以基本上我有一个 React 的 div 包装器，我构建它作为可点击块的按钮，其内容复杂，没有按钮或链接可以满足。 <div ref={ref} role="button" tabIndex={0} aria-label={ariaLabel} {...otherProps} > {children} </div> 子内容基本上是任何通常无法放入按钮或链接内的大型内容，例如多层 div 或图像。该包装器适用于任何需要显示丰富显示内容（如卡片）的可点击块。 唯一的问题是，当进行sonarcloud扫描时，它给我带来了这个错误 Use <input type="button">, <input type="image">, <input type="reset">, <input type="submit">, or <button> instead of the "button" role to ensure accessibility across all devices. 这显然不能在这里完成，因为按钮不支持此类内容。如果可能的话，我不想通过使用抑制注释或禁用注释来跳过它来忽略此错误，但即使我正确设置角色及其选项卡索引以符合其 ARIA 规则，我也无法克服该错误。使用此包装器的组件被设置为整体可点击，而不仅仅是其内容的某些部分。 那么做这个包装器或div as a clickable的正确方法是什么，而不是仅仅使用按钮和链接来遵守sonarcloud的规则？如果可以用按钮完成，我会这样做，但我确定网页中有一些内容，您想要一个可点击的组件，其中包含复杂的内容，而没有按钮和链接可以工作。 基本上你有两个问题。 按钮的内容必须简短 按钮并不是为了在其中包含大量内容而设计的，并且该按钮是标准的 <button> 或使用 ARIA role=button 伪造的事实不会改变任何内容（对于屏幕阅读器和其他辅助工具，两者看起来相同对于最终的用户来说，这正是 ARIA 的目的）。 请记住，屏幕阅读器在聚焦时会一次性读取按钮的全部内容，在按钮列表中创建一个巨大的标签以供单击，而且您可能需要大声说出全部内容才能激活语音控制。 当阅读信息量很大的长篇内容时，不清楚点击会执行什么操作。它会打开一个包含更多详细信息的页面吗？产品是直接加入购物车吗？是否会在没有任何其他确认的情况下立即发射火箭导弹？ 即使实际执行的操作被清楚地写在中间的某个地方，它也会被其他所有操作淹没而难以察觉。 因此，按钮的内容必须简短，直接告诉你点击后会发生什么，否则实际上就无法访问，或者使用起来非常痛苦。 嵌套交互元素 你不能简单地说一个按钮可以有任意内容。您应该防止这种情况发生，或者完全改变您的设计。 事实上，一旦按钮内有另一个交互元素，您就会遇到问题。这就是众所周知的嵌套交互区域问题，必须不惜一切代价避免。 当按下回车键或点击内部元素时，外部元素是否也会被触发？ 当聚焦外部元素时，屏幕阅读器是否也应该读取内部元素的内容？通常是这样，并且会造成很多混乱，因为某些内容会被读取两次，或者读取的内容与执行的操作不对应 视觉焦点指示也可能不清楚 您可以轻松地在内部元素外侧稍稍错误地单击，并在无意的情况下触发外部元素 当鼠标在内部元素内部时，你认为它是在外部元素内部还是外部？ 等等 所有这些问题都没有明确的答案。有时您希望答案是“是”，有时则希望答案是“否”。违背默认行为是很困难的，也不建议这样做。不同的浏览器/操作系统/等可能会有所不同。 完全可点击的卡片不是按钮 您现在应该已经明白，完全可点击的卡片不应被视为按钮。您不应使用 <button>、<input type="button"/> 或 role=button tabindex=0。 都错了！！！ 即使你以任何方式阻止嵌套的交互元素，单张卡片作为整体读取所给出的信息的长度和信息量仍然是一个问题 一个可能的解决方案是保持整个卡片像现在一样可点击，但不要使其可聚焦。但是，请务必小心，因为这样做后，屏幕阅读器和仅使用键盘的用户等将无法再访问它。 您必须提供另一种方式来打开该卡。您可以非常简单地在某处添加明确的“更多详细信息”链接或按钮，或者使用文章标题作为链接等。 例如参见这个问题和链接的文章。 示例中的卡片保持完全可点击，但只有屏幕阅读器和键盘用户与标题链接（即文章的标题）进行交互。 这也可能是适合您的情况的解决方案。
我正在尝试使用 MUI 制作一个可访问的定义列表（键值对），以便屏幕阅读器一起阅读术语和定义。 通过这个 html 标记我得到了想要的结果。 我正在尝试使用 MUI 制作一个可访问的定义列表（键值对），以便屏幕阅读器一起阅读术语和定义。 通过这个 html 标记我得到了想要的结果。 <ul style={{ listStyle: 'none' }}> <li> <div> <span role="term">Product</span> <span role="definition">Car</span> </div> </li> <li> <span role="term">Price</span> <span role="definition">1250$</span> </li> </ul> 我不使用 dl、dt 和 dd 的原因是因为大多数屏幕阅读器不支持它们。 https://a11ysupport.io/ 当使用 MUI 时，我最终得到了这个 <List> <ListItem> <ListItemText primary="Product" secondary="Car" slotProps={{ primary: { role: 'term', }, secondary: { role: 'definition', }, }} /> </ListItem> </List> 这不起作用，需要逐字阅读，而不是作为术语/定义。添加 aria-labelledby 和 aria-describedby 不会改变行为。 两个示例在浏览器中的呈现方式完全相同。为什么使用 MUI 组件时会出现故障？ 这是一个 StackBlitz 展示不同变体的链接 您说过“这两个示例在浏览器中的呈现方式完全相同”，但事实并非如此。 MUI 版本呈现此 HTML（为了清晰起见，删除了类）： <ul> <li> <div> <span role="term">Product</span> <p role="definition">Car</p> </div> </li> </ul> 请注意，定义元素呈现为段落，而不是您在 HTML 示例中使用的跨度。段落是块级元素，屏幕阅读器在块级元素之前和之后中断是正常的。这就是导致中断的原因。将此段落更改为跨度将使其读起来像 HTML 示例一样。
如何仅向屏幕阅读器显示标签 - Web Accessiblity
在 HTML 中，我想显示与文本框一起放置的 ，以便仅对屏幕阅读器或语音浏览器显示。根据 WAG-ARIA 指南，有哪些方法可以实现这一目标，我会...
我有一个具有如下 html 结构的组件： ... 我有一个具有如下 html 结构的组件： <div class="wrapper"> <div class="view"></div> <div class="view"></div> <div class="view"></div> <div class="view"></div> </div> 视图彼此相邻，包装器具有全屏尺寸，并且overflow: hidden 这是一个多步骤表单，基本上是一个整页滑块。 但是，当通过选项卡浏览输入时，我可以聚焦在视图之外的输入字段。你们会采取什么措施来防止这种情况发生？ display: none 并没有真正起作用，因为它必须可见才能使滑动动画起作用。 一个想法是使用 display: none，但在切换幻灯片之前将其删除。 另一个想法是，如果父“视图”具有特定的类，则仅使用 JS 来阻止输入获得焦点 不过，这些感觉并不是 100% 正确，而且有点老套。有谁知道解决办法吗？ 将 tabindex="-1" 添加到您的元素中，将此属性设置为 -1 可以使该元素不可聚焦。
我正在写一篇关于 kbd 元素的博客文章，作为其中的一部分，我试图看看它在可访问性方面是否确实有帮助，例如任何屏幕阅读器是否可以识别 kbd 元素或执行任何操作...
在滚动视图中，如果我有一个带有文本字段和按钮的 VStack，按键盘上的 Tab 将从文本字段转到后退按钮，然后转到按钮文本字段和后退按钮。顺序是...
我的同事正在powerBi中设计一个报告（使用网页版FWIW）。我正在查看生成的可访问性树，我注意到很多奇怪的语义，我们似乎没有c...
Android 12、Kotlin：当显示 ACESSIBLITY INTENT 时，为什么我的应用程序未在 ACESSIBILITY 下列为已安装的应用程序？
我正在编写一个需要辅助服务权限的应用程序。因此，我有以下代码，可以在应用程序启动后立即显示 ACCESSIBILITY 意图。在“可访问性”意图下 ->
我很欣赏 DOM 有时是一个动态的野兽。但是，我想知道是否可以进行一个简单的调用来在任何给定时间获取 DOM 可聚焦元素/节点的有序列表？ T...
包含 QMdiSubWindows 的 QMdiArea 对辅助功能 API 不可见
我正在使用 Qt 应用程序，并尝试通过辅助功能界面实现 UI 自动化。除了这个应用程序有一个 QMdiArea 之外，这一切都运行良好...
我们正在解决网站上的 WCAG 可访问性问题，并遇到主页滑块问题。我们的滑块有四个视频，每个视频都显示文本以突出我们的技术。 我们...
您好，我正在尝试使用撰写语义使对讲从 Text() 读出文本并从 Switch() 读出默认行。这是我的代码： var 通过记住 { 切换 可变状态（真） ...
我在 Angular 应用程序中添加了一个跳转到主链接的功能，但它只能运行一次。如果您按 Tab 返回并再次按它，它会将您导航回主页。单击它一秒钟（总体而言...
使用 aria-live 步骤指示器创建可访问的多步骤表单的最佳方法？
我正在开发一个多步骤表单，其中每个步骤都使用 元素动态显示。随着用户的进展，上一步将被隐藏，下一步将被显示（使用 我正在开发一个多步骤表单，其中每个步骤都使用 <template> 元素动态显示。随着用户的进展，上一步被隐藏，下一步被显示（使用 JavaScript）。 为了便于访问，我已将 aria-live="polite" 添加到 HTML 文档的根目录，并使用 JavaScript 根据所选步骤动态更新内容。 我的问题是：哪种方法更容易实现？ 将 aria-live="polite" 添加到根元素，并在步骤更改时使用 JavaScript 更新它。 或 向每个 aria-live="polite" 元素添加 <template>，步骤标题已包含在模板内。 这两种选择都不推荐。您通常不希望将大面积的内容变成实时区域。在没有看到项目的情况下很难给出一个好的答案，但一种解决方案可能是在每个步骤的开头有一个标题，将 tabindex="-1" 添加到标题中，并在新步骤出现时以编程方式将焦点放在标题上。不需要 aria-live。
硬件键盘焦点永远不会落在 Jetpack compose 中带注释的字符串超链接上
我在 Jetpack 可组合项中创建了一个带注释的字符串，并将其分配给可组合文本视图。它有多个超链接。 代码如下： @可组合 有趣的超链接文本（ 全特...
我正在为 Tcl/Tk 工具包开发辅助功能支持，目前正在 macOS 上使用基于 C 的辅助功能 API。我正在尝试了解如何创建可访问性对象......
我正在为视障人士在 Android 智能手机上制作一个应用程序。现在，我的应用程序的主菜单已经创建，并且我已经使用文本转语音程序为视障人士读出菜单......