WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
我不应该在导航栏中当前页面的祖先链接上使用 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
如何让 primereact 菜单弹出窗口上的键盘制表符和 aria-labels 起作用？
我希望能够使用键盘在按钮上按下回车键，然后通过相应的弹出菜单选择正确的选项。不幸的是，当我按下按钮时，...
在标签和输入上带有 for 和 aria-describedby 的双向 ARIA
典型的输入/标签对： 你好 for 表示标签与
在为可访问性编程/设计时，是否有适当的方法来传达特定项目已“完成”？ 目前正在构建一些可访问的电子学习。在特定的活动中......
使用带有 aria-live="assertive" 的单独状态 div 来处理屏幕阅读器的 toast 消息内容
我正在尝试在 Angular 中使 toast 消息组件可访问（以符合 WCAG 2.1 AA 标准）。 toast 消息有 4 种类型（成功、警告、错误、信息），每种类型都有一个动态的
我知道在许多情况下，HTML 元素不仅仅在语义上影响页面，而且附加功能使其成为一个明智的选择。比如虽然有文字...
在跳转链接上放置焦点指示器是否重要，即使目标是非互动的？你是否认为焦点指示器应该始终存在，以便让用户知道他们在页面上的位置？