可访问性旨在使每个人都可以使用应用程序或网站，包括视力，听觉，走动或认知障碍等残疾人。
我需要添加 Enter 或空格键事件以实现辅助功能。当您单击鼠标时它可以工作，但不能使用 Enter 或空格键 绘图选项：{ 系列： { 允许点选择：
辅助功能团队告诉我，单个页面上应该只有一个 H1。 互联网上的参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#
目前，在使用 Cypress 编写端到端测试时，使用测试库，我注意到应用程序中通过 ionic 的 ion-button 呈现的一些按钮在按钮角色下找不到。
在 React 应用程序中，我有一个 组件网格。每个 渲染多个 组件。 由于我无法控制的限制，Button 的效率很低 在 React 应用程序中，我有一个由 <Card /> 组件组成的网格。每个 <Card /> 渲染多个 <Button /> 组件。 由于我无法控制的限制，Button是一个低效的组件。渲染成本很高，而且我们需要渲染数百个<Card />组件，因此它成为性能问题。 考虑到这一点，我只想在用户主动与 <Button /> 交互时安装/渲染 <Card />： 当用户将鼠标悬停在 <Card /> 上时，安装 <Button /> 当用户通过键盘导航到 <Card /> 时，安装并聚焦 <Button />。 允许键盘用户在 <Card /> 组件之间完全向前/向后循环 悬停部分相当简单，我的实现如下所示。 我的键盘部分遇到问题。由于 <Button /> 尚未安装，用户键盘如何导航到它？ 我尝试过的CodeSandbox链接 这大部分都有效，除了两个重要的方式： 当 <Button /> 被插入时，第一个 <Card/> 应该立即获得焦点（不需要按第二次 Tab 键） 反向键盘导航（即shift+tab）不允许任何<Button>获得焦点。它应该聚焦于“最后一个”按钮，并允许用户导航所有按钮，然后转到上一个 <Card> 问题：我必须对下面的代码进行哪些修改才能支持以上两点？ import { useState, Fragment, useEffect, useRef, MutableRefObject } from "react"; import Button from "./Button"; export default function Card() { const [isHovered, setIsHovered] = useState<boolean>(false); const [showButtons, setShowButtons] = useState<boolean>(false); const containerRef: MutableRefObject<HTMLDivElement | null> = useRef(null); useEffect(() => { setShowButtons(isHovered); }, [isHovered]); return ( <div onMouseOver={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onFocus={(event) => { event.persist(); setIsHovered(true); }} onBlur={(event) => { event.persist(); window.requestAnimationFrame(() => { if (containerRef.current) { setIsHovered( containerRef.current.contains(document.activeElement) === true ); } }); }} tabIndex={0} > <div ref={containerRef}> <h2>Card</h2> {showButtons && ( <Fragment> <Button>Expensive Button One</Button> <Button>Expensive Button Two</Button> </Fragment> )} </div> </div> ); } 您可以使用简单的 CSS（opacity 属性）和焦点状态更改来达到所需的结果。 请注意，使非交互式卡片容器组件与 tabIndex={0} 交互是一种反模式。 //styles.css .invisible-button { opacity:0; } //Button.tsx import React, { useState, FC } from "react"; export const Button: FC<{ children: React.ReactNode }> = ({ children, }) => { const [hasBeenFocused, setHasBeenFocused] = useState(false); const handleFocus = () => setHasBeenFocused(true); const handleBlur = () => setHasBeenFocused(false); return ( <button className={hasBeenFocused ? "" : "invisible-button"} onFocus={handleFocus} onBlur={handleBlur} onMouseEnter={handleFocus} onMouseLeave={handleBlur} > {children} </button> ); }; export default Button; 看看完整的沙箱： https://codesandbox.io/p/sandbox/intelligent-matsumoto-frc9kk?file=%2Fsrc%2FApp.js%3A14%2C1 如果您希望仅让按钮获得焦点，则无需使卡片组件与 tabIndex 属性交互。 我希望我的解决方案有帮助:-)
如何以编程方式设置 Compose Accessibility Talkback 的焦点
我想在第二个屏幕返回后按单击聚焦原始视图。例如，当我单击法律按钮时，应用程序将导航到第二主屏幕。当第二个主屏幕...
如何使用 VoiceOver 启动 SwiftUI 列表 onDelete 操作
我的 SwiftUI 列表处于编辑模式（editMode == .active），并且在某些列表行上带有 onDelete 修饰符。我想让 onDelete 操作具有可访问性（VoiceOver）。我该怎么办...
如何对屏幕阅读器隐藏元素及其所有子元素，并阻止使用键盘访问？ 我正在处理可访问性，并且在我维护的页面上有广告...
macOS 上的 VoiceOver + Safari 无法正确宣布 aria 扩展状态
在我们的 Angular 应用程序中，我们有一个按钮负责打开菜单。其上有一个指令，其中包含切换菜单的逻辑。在我们的例子中，菜单只是一个菜单...
我们假设一个iOS应用程序通过overlay修饰符或在ZStack中呈现一些内容。这样，父内容的两个元素都可以使用辅助功能焦点（例如，当用户启用旁白时）...
如何解决 PageSpeed Insights 诊断可访问性部分出现问号的性能问题
使用 PageSpeed Insights 测试网站性能时，辅助功能分数不会显示，并显示为问号，并显示“背景和前景色有足够的...
如果文本是明确的指令，并且鼠标悬停时光标变为手形，这是否符合可访问性标准？或者链接本身是否必须有实际的视觉变化？
WCAG 1.4.4。调整文本大小 - 省略大小并提供可访问的工具提示是否失败？
1.4.4 对于椭圆化我不清楚。我的页面上的文本在缩放时会变成椭圆形，这被认为是 1.4.4 的失败。 我确实发现这个确实有一个椭圆形的 e...
NVDA 无法使用 Vuetify 读取 Firefox 中的按钮
我遇到了一位客户在我的应用程序中使用 NVDA 作为屏幕阅读器的严重问题。 我用我使用 NVDA + 我的网站所做的测试作为序言： Chrome：我的网站运行完美，但是......
在 Webkit 浏览器中转到这个超简单的小提琴，然后单击输入： http://jsfiddle.net/eK4TT/ 在 Webkit 浏览器中转到这个超简单的小提琴，然后单击输入： http://jsfiddle.net/eK4TT/ <input type="text"> <input type="text"> <input type="text"> <a href="#">my first link</a> <a href="#">my second link</a> <a href="#">my third link</a> 然后，请注意，您可以使用 Tab 键（和 Shift+Tab 以相反顺序导航）通过键盘导航输入和链接。 现在，在 Mac OS 上的 Firefox 中查看相同的小提琴并执行相同的操作。输入获得焦点，但链接不会获得焦点。这不是CSS显示问题。焦点从最后一个输入跳转到 URL 栏。 我在标记中尝试了无数的 tabindex 声明组合，但没有成功，例如： http://jsfiddle.net/eK4TT/1/ 这到底是怎么回事？我会接受任何具有以下内容的答案： a) 在 Firefox 中工作的小提琴 b) 解释 Mozilla 头脑中究竟发生了什么。它似乎与 spec 相矛盾。 好的，有人向我解释了这一点。这是 Mac 的问题。 Mozilla 忠实于 Mac OS 中的操作系统设置。 在用户方面有两种不同的方法来解决这个问题。两者似乎都有效： 在系统偏好设置 → 键盘中，在快捷方式窗格中，选中底部的“所有控件”单选按钮。 在 Firefox 中，在地址栏中输入“about:config”。 Mac 上没有 accessibility.tabfocus 偏好设置，因此您必须创建一个。在窗口中右键单击，创建一个新的“整数”首选项，并将其设置为 7。 这些都不是很明显。此外，这些都不是开发人员的服务器端解决方案，这令人沮丧。 在 MacOS Big Sur 上，这样做是这样的： 勾选复选框Use keyboard navigation... 我也不必破解 about:config 任何查看已接受答案中解释的第二种方法的人： 在 Firefox 中，在 URL 栏中输入“about:config”。没有 mac 上的accessibility.tabfocus 首选项，所以你必须 一。在窗口中右键单击，创建一个新的“整数”首选项，然后设置 到7. 请注意，Firefox 开发者版中已经有一个名为accessibility.tabfocus 的首选项，它是一个布尔值。 您可以通过单击垃圾桶图标并删除首选项将其更改为整数。然后，您可以选择您想要的首选项类型，并允许您随后为其分配一个值。 在 macOS Ventura 上，此键盘快捷键似乎能够切换此行为： 我还没有找到一种方法可以直接在设置中切换此功能，如果有人有，请建议编辑 macOS Ventura： 设置 -> （辅助功能 > 键盘快捷键 > 键盘） Firefox 中的配置 ->（URL >“about:config”，添加“accessibility.tabfocus”并将整数值设置为 7） 有了这个，您将能够在 Firefox 中聚焦链接。 谢谢，我在 Catalina，并且可以进行以下操作： 在 Firefox 中，在 URL 栏中输入“about:config”。 Mac 上没有accessibility.tabfocus 首选项，因此您必须创建一个。在窗口中右键单击，创建一个新的“整数”首选项，并将其设置为 7。 对于 macOS Sonoma（版本 14.1.1），答案中的第二个选项仅适用于 Firefox。与第一个选项类似的东西也可以单独使用，但我必须为我的 Mac 版本启用“键盘导航”。 您可能在 Firefox 中找不到accessibility.tabfocus。以下是激活此选项的方法： Settings > General > Browsing > use the tab key to move focus between form controls and links
我遇到了一位客户在我的应用程序中使用 NVDA 作为屏幕阅读器的严重问题。 我用我使用 NVDA + 我的网站所做的测试作为序言： Chrome：我的网站运行完美，但是......
我想用“span”元素替换所有“i”元素。 我尝试了很多事情但没有成功。 我在浏览器中没有找到任何错误消息和调试 JavaScript 代码。 我想要...
如何停止 Apple VoiceOver 双重阅读包含多个元素的标题？
如果我有以下 HTML： 购买我们很棒的产品！ ...Apple VoiceOver 会说： “标题是...
我改编了教程中的代码 这里。它允许将文件拖动或粘贴到 Blazor InputFile 组件中。但是，它可以工作，除非我首先用鼠标单击页面，否则我无法使用
我正在转换应用程序以符合 W3 辅助功能指南。 我需要让屏幕阅读器一起读取标题和值，仅使用 标签。 这个网站... 我正在转换应用程序以符合 W3 辅助功能指南。 我需要让屏幕阅读器一起读取标题和值，仅使用 <p> 标签。 该网站有多个显示为只读的表单，如果用户希望编辑字段，则必须单击“编辑”按钮以打开模式。 我对只读字段的问题是，该网站的结构是标题显示在左侧，相应的值显示在右侧。像这样的东西： <div class="form-group" id="-serviceName"> <p id="-title" class="col-sm-4 form-control-title">Some text</p> <p id="-value" class="col-sm-8 form-control-static">Some value</p> </div> 最初我使用的是<label>，但是当我打开页面时，我的值不是输入，WAVE 评估工具向我发出警报： “孤立的表单标签：存在表单标签，但未与表单控件正确关联。” <div class="form-group" id="-serviceName"> <label class="col-sm-4 control-label" id="-label">Some text</label> <div class="col-sm-8 col-md-6 col-lg-4"> <p class="form-control-static" id="-value">Some value</p> </div> </div> 我尝试过使用aria-labeledby和aria-describedby，但是使用箭头键，屏幕阅读器始终独立地呈现信息。 首先它显示“一些文本”，然后我必须再次单击箭头键，它显示“一些值”。 我想让屏幕阅读器将两个值一起读取为：“某些文本某些值” 就屏幕阅读器的使用而言，您已有的代码不应该存在重大问题。 他们可以很好地访问键值对，并且它将按顺序读取它们，这将首先读取标题，然后读取值（向下读取时）。 当涉及到WCAG 标准信息和关系时，使用<p>可能不足以解释第二个文本是用户输入，而第一个文本是用户无法更改的静态标签。 可能有几种有效的方法可以解决这个问题。 推荐解决方案 如果这是表单数据，用户可能期望（取决于您的用例）以表单而不是阅读模式进行导航。因此，他们可能会使用 Tab 键从一个表单字段跳转到另一个表单字段。 目前“表单”中没有表单字段。我推荐的解决方案是真正的readonly形式： <form aria-labelledby="form-title"> <h2 id="form-title">Your form data</h2> <p> <label>Some text <input readonly type="text" value="Some value"> </label> </p> <p><button>Edit</button></p> </form> 这也将清楚地传达给任何辅助技术，我们正在处理表单数据，但在当前状态下无法更改。表单必须有一个可访问的名称，这就是为什么我用 aria-labelledby 来指代可见标题。 <label>元素必须与表单输入关联，可以通过for属性或通过包装输入来关联。 替代解决方案 将两篇文章放在一起<p>加强了它们的关系，并且在使用屏幕阅读器阅读时，标题和值之间的停顿更少 <p class="form-group" id="a2ba84-serviceName"> <div id="a2ba84-title" class="col-sm-4 form-control-title">Some text</div> <div id="a2ba84-value" class="col-sm-8 form-control-static">Some value</div> </p> <dl>描述列表旨在形成一组键和值，并且经常在这种情况下使用 <dl> <div class="form-group" id="a2ba84-serviceName"> <dt id="a2ba84-title" class="col-sm-4 form-control-title">Some text</dt> <dd id="a2ba84-value" class="col-sm-8 form-control-static">Some value</dd> </div> </dl> 补充说明 aria-labelledby 和 aria-describedby 不能仅用于任何元素。它们用于具有可访问名称的ARIA 角色，主要是交互式控件、地标和表格元素。
我的模态对话框有交互式和非交互式内容（屏幕截图1）。我希望屏幕阅读器能够阅读第一个可聚焦项目和此聚焦项目之前的所有内容......