WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
我有以下 HTML 代码： 搜索邮政编码/城市 ... 我有以下 HTML 代码： <div class="form-row"> <label for="zip-city">Search for ZIP/City</label> <div class="input-wrapper"> <input aria-autocomplete="list" id="zip-city" type="text" name="zip_city" aria-expanded="true" aria-owns="select-city-list"> <ul id="select-city-list" role="listbox" aria-hidden="true" class="city-selector" style="display: block; opacity: 1;"> <li role="option" id="zip_112" data-uid="112" tabindex="-1">9999 myCity</li> </ul> </div> </div> 当用户在输入字段中输入内容时，我正在执行 ajax 请求并用结果填充 <ul id="select-city-list" […] >。然后我在输入字段上设置属性 aria-expanded 以指示连接列表已展开。 但是，当我使用 ax DevTools 检查器时，它告诉我ARIA attribute is not allowed: aria-expanded="true"。 我不知道我做错了什么。输入字段用作列表的触发器，因此我无法将其设置为另一个元素。 我尝试使用 aria-controls 而不是 aria-owns，但没有成功。 有什么提示吗？ 如果它有一个下拉列表，听起来就像一个组合框。将 role="combobox" 添加到 将消除 Axe 警告。 aria-expanded的规范在“角色中使用”下有一个属性有效的元素类型列表。 “组合框”就是其中之一。默认 元素具有“文本框”角色，该角色不位于有效角色列表中。 如果您使用 role="combobox" 那么您应该查看创作实践指南 (apg) 中的 组合框设计模式中的其他建议属性。
如何在浏览器中的 javascript 中获取元素的可访问名称？
可访问的名称计算很复杂，HTML 有 17 个子情况。如何在浏览器中的 javascript 中获取元素的可访问名称？
我正在寻找一种方法，使用语音辅助功能从导航链接跳转到我连接的链接页面的内部部分。 例如： 我的网站上有一个链接列表...
如何在 iPhone 上使用 VoiceOver 制作<div>一组项目？
我正在尝试使用 React 创建一个可访问的阅读应用程序。我的目标是让用户在阅读时能够轻松地在章节之间导航。为了实现这一目标，我使用了 我正在尝试使用 React 创建一个可访问的阅读应用程序。我的目标是让用户在阅读时能够轻松地在章节之间导航。为了实现这一点，我使用 元素来包装文本内容。 像这样： <div> <button>previous</button> <div aria-label='content'> <p>paragraph 1</p> <p>paragraph 2</p> ... (many <p> tags) </div> <button>next</button> <div> 在 Mac 上使用 VoiceOver 功能时，我可以在选择“上一个”按钮时选择 元素，然后按“→”导航到 div，然后使用“Caps Lock + Shift + ↓”进入组。但是，在 iPhone 浏览器上执行相同操作时，选择仅选择 标签。 我尝试调整 aria 属性和角色属性，但无法复制我在 Mac 上经历的行为。 有没有办法修改 iPhone 上 元素的行为以匹配我在 Mac 上观察到的行为？ 在 Mac chrome 上 在 iPhone Safari 上 听起来您正在努力使您的阅读应用程序可以使用 React 进行访问，并且您在不同平台上面临着 VoiceOver 行为的一些问题。 VoiceOver 交互有时会在不同设备和浏览器之间表现不同。以下是一些注意事项和潜在的解决方案，可帮助您实现一致的可访问性行为： Using Semantic HTML Elements: Instead of using a <div> element to wrap the content, consider using semantic HTML elements that are specifically designed for grouping content. For example, you could use an <article> element for chapters and a <section> element for grouping paragraphs within each chapter. This can help screen readers interpret the content more accurately. <article> <button>previous</button> <section aria-label='content'> <p>paragraph 1</p> <p>paragraph 2</p> {/* ... */} </section> <button>next</button> </article> 使用角色=“区域”： 您可以尝试将 role="region" 添加到包装元素中。这一角色为辅助技术提供了一个额外的里程碑，以了解内容是一个独特的区域。 <div role="region" aria-label="Chapter"> {/* ... */} </div> Testing and Debugging: VoiceOver behavior can vary between devices and browsers. It's important to test your application on various platforms and browsers to identify inconsistencies. Use the Accessibility Inspector in browser developer tools to inspect the accessibility roles and properties being applied. Mobile-specific Behavior: VoiceOver behavior can be different on mobile devices due to the nature of touch interaction. Users might navigate content using swipe gestures instead of arrow keys. Consider providing clear instructions to users on how to navigate the content using VoiceOver on mobile devices. User Feedback and Testing: The best way to ensure that your application is accessible across various devices and browsers is to involve users with disabilities in the testing process. They can provide valuable feedback and insights into how your application works with different assistive technologies. 请记住，虽然追求一致性很重要，但您还应该优先考虑为残障用户创造清晰且用户友好的体验。如果您遇到持续存在的问题，请联系网络可访问性论坛或专家可能会提供有关如何处理特定情况的进一步指导。
我的公司正在做一些 ADA 一致性修订。我需要在用户与其交互时读取按钮文本。 aria-label 会发生这种情况吗？或者..你该怎么做？
我正在尝试让这段代码与 JAWS 屏幕阅读器一起正常工作。它在一个 CSHTML 文件中，我没有编写代码，我只是想修复它（我是该项目的 UI 设计师） 我正在尝试让这段代码与 JAWS 屏幕阅读器一起正常工作。它在一个 CSHTML 文件中，我没有编写代码，我只是想修复它（我是该项目的 UI 设计师） <div id="[email protected]"> <button class="btn btn-primary btnApprove btntooltipA" id="[email protected]" enttyddata="@i.EntryId" data-toggle="tooltip" data-original-title="Approve" value="@i.EntryId" onclick="CheckInHomeValidation(@i.EntryId);" aria-label="Approve">A</button> @if (i.Flags != Convert.ToString((int)clsEnum.enumEntryFlags.Compensated_Debited)) { <button class="btn btn-danger btnReject btntooltipR" id="[email protected]" data-toggle="tooltip" data-original-title="Reject" onclick="rejectPunchfuntion(@i.EntryId)" value="@i.EntryId" aria-label="Reject">R</button> } </div> 如果我使用 tab 键导航，按钮将在 JAWS 中读出为“批准按钮批准拒绝按钮拒绝” 如果我使用“b”键，这些按钮将在 JAWS 中读出为“批准按钮”和“拒绝按钮”，这是所需的结果。 我试着放一个 但它除了把我的按钮堆叠在屏幕上之外什么也没做。 以上代码的输出将在 Chrome 开发工具中生成此代码（感谢@slugolicious 的建议）： <div id="dvbtn_1888281"> <button class="btn btn-primary btnApprove btntooltipA" id="btnap_1888281" enttyddata="1888281" data-toggle="tooltip" title="" value="1888281" onclick="CheckInHomeValidation(1888281);" aria-label="Approve" data-original-title="Approve">A</button> <button class="btn btn-danger btnReject btntooltipR" id="btnrej_1888281" data-toggle="tooltip" title="" onclick="rejectPunchfuntion(1888281)" value="1888281" aria-label="Reject" data-original-title="Reject">R</button> </div> 我该怎么做才能解决这个问题？ 谢谢
我不应该在导航栏中当前页面的祖先链接上使用 aria-current="page" 吗？
在查看所述链接的页面或子页面时，在网站的主导航栏中突出显示链接是一种常见的做法，使用 aria-current="page" 来突出显示是不是很糟糕...
是否有 ARIA 属性的特征检测等效项，如 aria-owns？
Web 开发的最佳实践将使用浏览器功能检测来确定某个功能是否存在以及浏览器是否正确支持，而不是说版本检测。例如通过使用 CSS。
我正在修复灯塔。我制作了具有以下结构的选项卡： 我正在研究灯塔修复。我用以下结构制作了标签： <ul class="nav ms-5" role="tablist"> <li role="tab"> <a role="tab" class="tjs-tab__link text-dark active" href="#couponcode" data-bs-toggle="tab">Coupon Code</a> </li> <li role="tab"> <a role="tab" class="tjs-tab__link text-dark" href="#giftcards" data-bs-toggle="tab">Gift Cards</a> </li> </ul> 首先，我检测到与选项卡相关的 Lighthouses 问题 (ARIA)，我通过向 <ul> 和 <li> 添加角色来修复它们，这些问题已修复，但现在 Lighthouse 报告锚标记问题作为屏幕截图：https://www .screencast.com/t/pj0eAQPu3 我还在其中添加了role="tab并不能解决我的问题。请让我知道锚标签到底需要什么角色？ 提前致谢！ 我尝试了很多通过添加 role="tab 来解决这个问题，但可以做到，我也在网络 MDN 文档上进行了搜索，但他们没有带有锚标记的选项卡示例。 我建议遵循“Tabs 设计模式”。如果您查看该模式中的example，它们有按钮而不是链接。这允许用户在选项卡上按 SPACE 或 ENTER 来激活它。 简化后，看起来像： <div role="tablist"> <button role="tab">tab one text</button> <button role="tab">tab two text</button> <button role="tab">tab three text</button> </div> （代码中还有您需要的其他重要内容，例如 aria-selected 以及 role=tabpanel 部分，但为简单起见，我删除了它们。您可以查看 example 以获取所有信息。） 在您的代码示例中，<li> 不是键盘可聚焦的，因为列表项本身不是可聚焦的。你需要一个tabindex="0"。但是拥有 tabindex 只允许您对它进行 tab 并且不提供任何行为。您需要键盘事件处理程序以允许 ENTER/SPACE 选择它。我想这就是您的链接的用途，但现在每个选项卡都有两个可聚焦的元素 - <li> 和 <a>。现在越来越复杂了。我建议遵循前面提到的既定设计模式。 作为旁注，Lighthouse，内置于 Chrome 中的辅助功能检查器，使用axe 引擎。 Lighthouse 将您的<a role="tab"> 标记为无效实际上并不准确。它给你的错误是说带有role="tab"的元素必须是带有role="tablist"的元素的direct child。在您的代码示例中，与 tab 角色的链接是 tablist 的“孙子”而不是孩子。但是，role="tab"的官方规范说： 作者必须确保具有角色 tab 的元素包含在具有角色 tablist 的元素中，或由其拥有。 “包含在”并不意味着它必须是直接子代。可能是孙子或曾孙等 所以从技术上讲，你的代码遵循规范，尽管你实际上有双标签角色。一个在 <li> 上，一个在 <a> 上。你可以这样做，但可能不是你想要的。您的代码现在有 4 个选项卡，而不是 2 个。 在使用无序列表<ul>和列表项<li>实现的选项卡结构中，锚标记<a>通常用于提供可点击的选项卡标签。 <a> 标记的 href 属性设置为单击时选项卡打开的内容部分的相应唯一标识符。此标识符通常是分配给内容部分的 HTML id 属性。 例如，考虑以下 HTML 代码，它实现了一个带有两个选项卡的简单选项卡结构： <ul class="tabs"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> </ul> <div id="tab1" class="tab-content">Content for Tab 1 goes here</div> <div id="tab2" class="tab-content">Content for Tab 2 goes here</div> 在此代码中，<a> 标签用作选项卡的可点击标签，而 href 属性设置为内容部分的相应 id。当用户单击选项卡时，浏览器将滚动到由 id 标识的内容部分，并且该部分变为可见。 总的来说，<a> 标签是实现具有无序列表和列表项结构的可点击选项卡的关键部分，它使用户能够与选项卡交互并查看相应的内容部分。
我读了几个关于这个主题的问题，所以我会问你是否有更好的想法。 基本上，我试图在以下 url 中抓取“价格/报价”表中的数据： https://www...
这个问题专门针对可访问性。我有一个表单，提交后，用户可以查看和打印。因为它必须在打印时看起来不错，所以我不只是...
通过 Python 中的 Selenium 单击包裹在 div 中的隐藏按钮
我正在使用 selenium 中的 Chrome webDriver 在 Workday 门户上自动登录，如何单击隐藏的登录按钮，该按钮定义为： 我正在使用 selenium 中的 Chrome webDriver 在 Workday 门户上自动登录，如何单击隐藏的登录按钮，该按钮定义为： <div class="css-1s1r74k"> <div font-size="14" height="40" aria-label="Sign In" role="button" tabindex="0" data-automation-id="click_filter" class="css-1n9xe37"> </div> <button type="submit" data-automation-id="signInSubmitButton" font-size="14" height="40" class="css-a9u6na" tabindex="-2" aria-hidden="true">Sign In</button> </div> 这是我正在使用的代码，但它无法对特定按钮执行点击操作： signInButton = driver.find_element(By.XPATH,'//*[@id="wd-Authentication-NO_METADATA_ID-uid6"]/div/div[1]/div/form/div[3]/div/div/div/div/button') driver.execute_script("arguments[0].click();", signInButton) 这是登录页面示例 - https://wd1.myworkdaysite.com/zh-CN/recruiting/snapchat/snap/login 也许你的定位器不正确 像这样尝试 xpath 定位器 //button[text()='Sign In'] 剧本 signInButton = driver.find_element(By.XPATH,"//button[text()='Sign In']")) driver.execute_script("arguments[0].click();", signInButton)
我想构建一个需要 aria-label 作为道具提供的组件。 // 我的组件.vue 定义道具<{ aria...
对于可访问性，您可以在表单中使用部分和字段集来避免嵌套字段集吗？
我研究了字段集的可访问性使用，并且共识似乎是不要嵌套字段集。但是在某些情况下，我需要单一形式的组内组。可以用吗
我有一个包含大量输入的表格。 其中有一组罕见的输入，按 Tab 键时不应关注这些输入。 但是，当焦点已经在组内时，按 TAB 键应该移动...
WAI-ARIA 属性需要一个唯一的 id，但是这个反应组件可能会被创建多次
我正在尝试创建具有 WAI-ARIA 属性的 Accordion 组件，但是，某些元素需要引用唯一的 id。在这种情况下，手风琴的内容 (accordion__content) 必须...
屏幕阅读器（讲述人）不阅读 chrome 浏览器上的按钮文本
我对 Chrome 浏览器中的屏幕阅读器（Windows 旁白）有疑问。 我有一个按钮标签，它将聚焦于 Tab 键按下。我期待屏幕阅读器阅读它是什么按钮但是......
没有 Aria-Controls 的 Aria-Expanded 的用例是什么
我很好奇是否有使用 aria-expanded 属性而不使用 aria-controls 的用例。 有没有办法“自我声明”每个节点的状态（比方说，一个按钮）有
我正在开发一个单页应用程序，其中组件在 DOM 上不断生成和销毁。我正在使用带有 ARIA 标签的以下按钮，因此屏幕阅读器可以选择和读取它...
aria-expanded 即使在元素展开时也显示 false
我想知道为什么点击时aria没有展开。 我想知道为什么点击时aria没有展开 <div class="tooltip filter-tooltip" tabindex="0" role="button" aria-label="Vaccine Brand More Information" aria-expanded="false" aria-controls="filter_dialog" \> 该属性不会自行更改其值。您需要在脚本中添加一些步骤，当您单击要展开的元素时将属性更改为“true”，并在您再次单击以关闭它时返回“false”。 ARIA 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序的方法。 咏叹调展开 aria-expanded 属性设置在元素上以指示控件是展开还是折叠，以及它的子元素是显示还是隐藏。 所以你是那个应该根据内容是否扩展来更改该值。 Aria拥有 有两个声明可以应用于控制另一个对象可见性的对象：aria-controls，或aria-owns与aria-expanded组合。 如果一个元素在视觉上、功能上或上下文上看起来“拥有”（成为）一个元素的祖先，但实际上在 DOM 中并不是该元素的祖先，则包含 aria-owns 以创建该关系。 所以你还需要添加aria-owns，如果你要使用aria-expanded，它包括孩子的id。 <div class="tooltip filter-tooltip" tabindex="0" role="button" aria-label="Vaccine Brand More Information" aria-expanded="false" aria-controls="filter_dialog" aria-owns="children" \> <div id="children"> ... </div> @Monstar 的回答是正确的：aria-expanded 属性只是一种让您的页面更易于残障人士访问的方法。当可折叠项目的默认展开（即显示）时，它应该是true。当可折叠项目的默认折叠（即隐藏）时，它应该是false。 要更改 Bootstrap 5 中可折叠项目的默认行为，您必须添加或删除类 show 到可折叠项目。例如 <div class="collapse show multi-collapse" id="multiCollapseExample1"> // collapsable item will be shown by default </div> <div class="collapse multi-collapse" id="multiCollapseExample1"> // collapsable item will be hidden by default </div