WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
使用 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 构建标准的聊天应用程序 消息列表将在底部包含最新的消息，在顶部包含较旧的消息，并且在战斗时无限滚动......
工具提示的常见用途是将其添加到 ⓘ 图标以显示“更多信息”。我目前正在努力使我的组件更易于访问，所以我想添加“工具提示”
所以，我将标题标签（h1、h2、h3、h4、h5、h6）包装在 和 中。问题是他们默认失去了“标题”ARIA 角色。来自 MDN 文档： 警告： 因此，我将标题标签（h1、h2、h3、h4、h5、h6）包装在 <details> 和 <summary> 中。问题是他们默认失去了“标题”ARIA 角色。来自MDN 文档： 警告：由于该元素具有按钮的默认角色（这会剥夺子元素的所有角色），因此此示例不适用于屏幕阅读器等辅助技术的用户。遗嘱的角色已被删除，因此不会被视为这些用户的标题。 但是你不能通过如下重写来轻松解决这个问题吗？我问的原因是我在谷歌搜索中没有看到这个技巧，只是有很多关于细节摘要元素被破坏和无法修复的抱怨。所以也许我错过了一些东西。 <details> <summary role="heading" aria-level="2"><h2>Heading</h2></summary> Lorem ipsum... </details> /元素是一个很好的语义元素，它为您提供了一些“免费”的内置可访问性，但正如您所注意到的，它确实有局限性。 本质上是一个。这是一个具有 aria-expanded 属性的按钮。如果您覆盖 的角色，那么它将不再作为按钮宣布，这意味着屏幕阅读器用户可能不知道它是一个交互式元素。 在 上听到“标题”会有点令人困惑，特别是因为内在的 aria-expanded 仍然被宣布。屏幕阅读器用户不会期望标题是可展开/可折叠的，因为标题不应该是交互式元素。 不建议覆盖元素的默认本机语义。也就是说，如果某个元素具有默认的 role，请勿覆盖该角色。 ARIA使用的第二条规则说： 不要更改本机语义，除非确实必须这样做。 一个有趣的旁注是，元素的“内容模型”表示可以在其中使用标题。 内容模型：短语内容，可选择与标题内容混合。 因此从技术上讲，您应该能够在 内包含标题，但并没有得到一致支持。 NVDA（PC 屏幕阅读器）will 宣布嵌入 中的标题。它还会宣布在 中嵌入 ，尽管我强烈反对这样做。 JAWS（另一种 PC 屏幕阅读器）将不会宣布嵌入 中的标题（或表格）。我认为这是一个 JAWS 错误，因为如上所述， 可以有标题。 总之（没有双关语），我不建议将标题或任何其他语义 html 元素放在 元素内。我不知道您的页面是如何组织的，但可能的替代方案是标题为 outside/before /。 <h2>important stuff here</h2> <details> <summary>normal text</summary> lorem ipsum </details>
FullCalendar v6.1 使用 SiteImprove 浏览器扩展在 GridCalendar 视图上产生 50 个“ARIA 属性不受支持或禁止”错误
错误 我正在开发一个法律要求保持一定水平的可访问性的网站。我们使用 SiteImprove（免费的浏览器扩展）来检查问题。我收到了 50 个错误...
FullCalendar v6.1 在使用 SiteImprove 免费 chrome 扩展的 GridCalender 视图上存在“表标题单元格缺少标题角色”ADA 问题
问题 我不知道如何解决日历页面问题，表标题单元格缺少标题角色。如图所示， 问题 我不知道如何解决日历页面问题，Table header cell is missing a header role。 <th role="presentation> 标签似乎存在问题，如下图所示。 我尝试过的事情 到目前为止，我已经尝试添加 scope="col"、scope="row"、role="columnheader" 以及 role="rowheader"，但这些似乎都没有使该错误消失。这是向 FullCalendar 提交的错误报告吗？如果我需要将其报告为错误，我还应该做什么来修复它？ 您对日历生成的 HTML 有多少控制权？该代码中指定了太多咏叹调。其中很多都是多余的，有些甚至是完全错误的。我认为有几个问题导致 siteimprove 标记错误。 首先，如果您对表使用本机语义 HTML，则大多数 role 属性都是不必要的。例如，<tr>不需要role="row"，因为默认情况下会得到它。与 <th> 相同，如果您使用 role="columnheader"，您将获得默认的 scope="col"。删除这些角色。 其次，语义表元素具有内置角色，如上所述，因此您不应该使用role="presentation"覆盖这些角色。这会删除该元素的语义值。例如，您有 <tr role="presentation">、<th role="presentation"> 和 <thead role="presentation">。删除所有role="presentation"。 主桌上还有<table role="grid">。如果您计划实现箭头键导航以在行和列之间移动（类似于在电子表格中导航），那么网格角色就可以。我尝试了一个简单的 FullCalendar 演示 ，但箭头键 无法 工作，所以 role="grid" 应该 not 被使用。日历中的日期是 tab 可聚焦的，这很好，但这只是一个常规表格，而不是网格。 由于生成的表代码存在很多问题，因此很难说是什么导致了 siteimprove 错误，但如果您可以控制的话，请先清理所有角色。如果您没有这种程度的控制权，我将不会使用该日历，因为它无法访问。
我用javascript生成了一些可折叠的div。我希望屏幕阅读器指示 div 是否折叠。我正在尝试使用 https://techservicesillinois.git 中的模板...
通过 javascript 动态添加 aria 标签的最佳方法是什么？
我正在开发一个具有预定义html的表单，我无法更改它，并且我想添加一个aria标签，但我遇到了困难。我尝试过使用类名和 id 但似乎没有
我有一个 django 模板，它通过循环一些数据来创建内容块 相关片段是： {% for c,v inlords.items %} {% with cloop=forloop.counter %} 我有一个 django 模板，它通过循环一些数据来创建内容块 相关片段是： {% for c,v in landlords.items %} {% with cloop=forloop.counter %} <section class="landlord" aria-labelledby="landlord_c_h3_{{ cloop }}"> <h3 id="landlord_c_h3_{{ cloop }}">{{ c }}</h3> {% for l in v %} {% with lloop=forloop.counter %} <section class="media" aria-labelledby="landlord_l_h4_{{ cloop }}_{{ lloop }}"> <section class="media-body" aria-labelledby="landlord_l_h4_{{ cloop }}_{{ lloop }}"> <h4 class="mt-0" id="landlord_l_h4_{{ cloop }}_{{ lloop }}">{{ l.name }}</h4> <p>{{ l.address }}</p> </section> <section role="presentation"> <img src="/media/{{ l.logo }}" alt=""/> </section> </section> {% endwith %} <hr> {% endfor %} </section> {% endwith %} {% endfor %} .... 这会产生一些 html： <section class="landlord" aria-labelledby="landlord_c_h3_1"> <h3 id="landlord_c_h3_1">Council Locality Offices</h3> <section class="media" aria-labelledby="landlord_l_h4_1_1"> <section class="media-body" aria-labelledby="landlord_l_h4_1_1"> <h4 class="mt-0" id="landlord_l_h4_1_1">North East Locality Office 1</h4> <p>123 North East Estate</p> </section> <section role="presentation"> <img src="/media/logo_a.png" alt=""> <section> </section> <hr> </section> 这违反了“唯一标签”规则......贵宾犬 有没有一种clean的方式来不同地标记<section class="media" ...和<section class="media-body" ..？ 我可以看到一个隐藏了几个元素以提供一些前置内容的小屋 - 但这确实感觉很麻烦！ 对于那些想了解我的hack解决方案的人： <div role="presentation" style="display: none" id="label_a">Card for</div> <div role="presentation" style="display: none" id="label_b">Details for</div> {% for c,v in landlords.items %} {% with cloop=forloop.counter %} <section class="landlord" aria-labelledby="landlord_c_h3_{{ cloop }}"> <h3 id="landlord_c_h3_{{ cloop }}">{{ c }}</h3> {% for l in v %} {% with lloop=forloop.counter %} <section class="media" aria-labelledby="label_a landlord_l_h4_{{ cloop }}_{{ lloop }}"> <section class="media-body" aria-labelledby="label_b landlord_l_h4_{{ cloop }}_{{ lloop }}"> <h4 class="mt-0" id="landlord_l_h4_{{ cloop }}_{{ lloop }}">{{ l.name }}</h4> <p>{{ l.address }}</p> </section> <section role="presentation"> <img src="/media/{{ l.logo }}" alt=""/> </section> </section> {% endwith %} <hr> {% endfor %} </section> {% endwith %} {% endfor %} （不聪明，不整洁，但有效）
我们需要在每个浏览器上进行辅助功能测试还是只需要在一种浏览器上进行测试就足够了？
我们需要在每个浏览器上进行辅助功能测试还是只需要在一种浏览器上进行测试就足够了？ A11y 需要进行浏览器兼容性测试吗？请建议。 让我知道...
我需要担心 WAI-ARIA 支持吗？我的意思是，HTML 不像编程语言那么严格，因此属性不会抛出错误。此外，WAI-ARIA 属性增强了可访问性...
Google 审核在光滑的滑块代码中给出了可访问性错误 辅助技术（例如屏幕阅读器）无法解释具有无效值的 ARIA 属性 Google 审核在光滑的滑块代码中给出了可访问性错误 屏幕阅读器等辅助技术无法解释具有无效值的 ARIA 属性 <div class="slider-videos slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="listitem" aria-labelledby="slick-slide40" style="width: 412px;"> <li class="slick-active" aria-hidden="false" aria-controls="navigation20" id="slick-slide20" aria-selected="true"><button type="button"data-role="none" tabindex="0">1</button></li> 我该如何修复它？我没有这些咏叹调和角色的信息 显然，目前无法手动更改它 - 您可以在 GitHub 上看到此讨论。 我在 Slip Carousel 中添加了这行代码，从而改进了可访问性： accessibility: false 希望能帮到你。 我遇到了 <input type="number"> 的问题，它是一个组合框 - 可能值的列表出现在输入下方，当用户在输入中键入时 - 选项会被过滤。 我想问题是类型是number但值是字符串......或者简单的数字类型输入与此类组合框不兼容。 我通过将其更改为 type="text" 并添加模式 + 输入模式解决了这个问题 - 这样在移动设备上用户仍然可以看到数字键盘： <input type="text" pattern="[0-9]*" inputmode="numeric"> 错误不再出现。 Google PageSpeed Insights 中出现错误 [aria-*] 属性与角色不匹配 每个 ARIA 角色都支持 aria-* 属性的特定子集。不匹配这些会使 aria-* 属性无效。了解如何将 ARIA 属性与其角色相匹配。 失败的元素 广告
https://codepen.io/hasan-uzzaman-sheikh/pen/xxmVqWO 你好呀， 我复制了上面的codepen ...
508 标准，第 1194.22 (a) 节规定： 每个非文本的等效文本 应提供元素（例如，通过 “alt”、“longdesc”或在元素中 内容）。 对于搜索框，使用...