WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
我正在转换应用程序以符合 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 角色，主要是交互式控件、地标和表格元素。
我正在尝试使这个可访问的手风琴具有打开关闭淡入/淡出动画，而不是默认的硬打开关闭功能。到目前为止还没有任何运气。 https://www.w3.org/WAI/ARIA/...
为什么剧作家认为 <th> 标签的 ARIA 角色是“cell”？
Playwright 强调使用“面向用户的属性和显式契约，例如 page.getByRole()”来定位页面上的项目。我想在我的页面上找到 th 标签。 Chrome 的 DevTools 有...
我有一些非常基本的数据，如下所示： { “姓名”：“约翰·多伊”， “城市”：“明尼阿波利斯”， “州”：“明尼苏达州”， “国家”：&...
如果我正在渲染一系列右侧带有编辑/删除图标的记录，这些图标是否应该具有独特的 aria 标签，例如“编辑记录 A”，或者它们是否可以具有通用的 aria-l。 ..
我有这样的 HTML 结构： 传奇 标签文本 我有这样的 HTML 结构： <fieldset> <legend>Legend</legend> <span>Labeltext</span> <button aria-pressed="false">Filter 1</button> <button aria-pressed="true">Filter 2</button> </fieldset> span-Element 的作用就像两个按钮的标签。每个按钮独立作用。由于设计已给出，因此无法更改文本结构。 据我所知，不可能为两个按钮添加一个标签。 扩展按钮的标签并向其中添加“标签”（跨度）是否足够？像这样：<button aria-pressed="false" aria-label="Labeltext Filter 1">Filter 1</button> 另一种方法是使用 ARIA 创作实践指南 (APG) 中的复选框模式，它将“标签”（跨度）更改为标题。但没有其他标题，所以这可能会让屏幕阅读器用户更加困惑。 从技术上讲，您只需通过aria-labelledby引用同一元素即可将其用作多个元素的标签。 这将导致两个按钮具有“相同”的可访问名称，这并不是很有帮助。因此您还需要添加自己的内容。直接在 aria-label 中提供它是最简单的： <fieldset> <legend>Legend</legend> <span>Labeltext</span> <button aria-pressed="false" aria-label="Labeltext Filter 1">Filter 1</button> <button aria-pressed="true" aria-label="Labeltext Filter 2">Filter 2</button> </fieldset> 我对实际用例很好奇，因为已经有 Legend 足以为两个按钮提供包装标签。额外的 Labeltext 似乎没有必要。 如果 Labeltext “描述或注释当前元素”，则可以使用 aria-describedby： <fieldset> <legend>Legend</legend> <span id="button-desc">Labeltext</span> <button aria-pressed="false" aria-describedby="button-desc">Filter 1</button> <button aria-pressed="true" aria-describedby="button-desc">Filter 2</button> </fieldset>
Voice Over 在 iOS Safari 上无法读取 Aria 标签，但屏幕阅读器可以在 Chrome 上读取
我有一个播放图标，我想在它聚焦时宣布该图标。但有趣的是，屏幕阅读器会读取 aria 标签。然而，对于 iOS safari，使用滑动手势播放图标并不会...
我正在与辅助功能合作。当用户通过画外音访问电话时，他们使用向右滑动和向左滑动来到达该元素。我正在尝试检测页面级别的滑动，所以
有没有办法使用React测试库从aria-controls属性中获取元素
假设 React 组件返回以下 JSX，它代表一个简单的 Collapsible： <> 假设 React 组件返回以下 JSX，它代表一个简单的 Collapsible: <> <button onClick={onClickHandler} aria-controls="collapsible" aria-expanded={expanded} aria-label="collapsible" /> <div id="collapsible" aria-hidden={!expanded} /> </div> </> 根据哈佛：技术：可扩展部分和包含组件：可折叠部分 所提供的示例应该可供屏幕阅读器访问；真正的用户可以轻松地与组件交互。 我无法使用 React 测试库 的可访问角色来查询折叠内容。然而，内容是可访问的，因为按钮是可访问的并且它控制 div，从 aria-controls 属性感知。 是否有一种方法可以使用React测试库从aria-controls属性中获取元素，我还没有遇到过？类似于screen.getByRole('button').aria-controls？ 这里有一些使用 React 测试库来根据 aria-controls 属性获取元素的示例代码： import { render } from '@testing-library/react'; test('should get the element based on aria-controls attribute', () => { // Render your component const { getByRole, getByTestId } = render(<YourComponent />); // Get the button element const button = getByRole('button'); // Get the value of the aria-controls attribute const ariaControls = button.getAttribute('aria-controls'); // Use the value of aria-controls to get the collapsible element const collapsible = getByTestId(ariaControls); // Assert that the element is found expect(collapsible).toBeInTheDocument(); }); 在此示例中，getByTestId用于根据aria-controls属性的值获取可折叠元素。 JSX 代码中的可折叠元素添加了 data-testid 属性： <div id="collapsible" aria-hidden={!expanded} data-testid="collapsible" /> 通过使用 getByTestId 并传递 ariaControls 的值作为参数，您可以根据 aria-controls 属性检索可折叠元素。 如果这个答案能解决您的问题，我很高兴。
官方 ARIA APG 列表框示例实现广泛使用了 aria 属性。 这是有道理的，因为他们想展示如何使用它们。 他们的单个选项的 A11y 树看起来像
使用 aria-description 时如何避免公布内部内容
我想知道如何让旁白只播报咏叹调描述而不播报内部内容。 例如： “定义” 我...
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>
使用 javascript 在 true 和 false 之间切换 aria-expanded
我试图在单击按钮时在 true 和 false 之间切换 aria 标签。我已经尝试了几种实现，但似乎完全没有任何作用。以下是我目前正在使用的
我想知道 aria-* 属性的用途。他们可以拥有哪些价值观？它们是定义的价值观还是我可以创建自己的价值观？
可访问的值，0:00 作为持续时间而不是时间，1/12/2023 作为日期，等等
我有一些 html 文本，NVDA 屏幕阅读器（通过语音查看器）显示为以下文本 第 9 行 星期二 28/11/23 第一个小时 6:00 第二个小时 0:00 第三个小时 0:00 第 7 栏 并大声朗读...
屏幕阅读器会忽略空字符串吗？或者如果字符串为空，我应该避免将它们添加到元素中吗？ 作为参考，这是 React 中的一个用例，您希望默认为空
我正在编写一个 nwjs 游戏，我想为其添加辅助功能。 我目前正在使用 aria-live 属性与屏幕阅读器进行通信。 document.getElementById("游戏").
找不到带有`@testing-library/cypress`的数据列表选项
我正在尝试编写一个测试，使用来自 @testing-library/cypress 的基于角色的查询来确认 具有 元素列表。奇怪的是，当我尝试通过
屏幕阅读器可以读取角色为“combobox”的输入元素的展开/折叠状态吗？
我知道使用 aria 扩展屏幕阅读器应该读取扩展状态。但有谁知道这是否可能？ 我尝试了几种变体，但唯一读取扩展内容的变体...
为什么大多数聊天应用程序不使用 flex `*-reverse` 来显示消息？
我们即将使用 React 构建标准的聊天应用程序 消息列表将在底部包含最新的消息，在顶部包含较旧的消息，并且在战斗时无限滚动......