WAI-ARIA是一个可访问的富Internet应用程序套件，它定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。它特别有助于使用AJAX，HTML，JavaScript和相关技术开发的动态内容和高级用户界面控件。
我想使用 元素，因为我认为它是计算值的可访问性（也许还有 SEO）方面的最佳解决方案（我有两个 和一个 ）。不...
我有以下代码： 死池 我有以下代码： <h2> Deadpool <svg width="53" height="64" class="inline" aria-label="and"> <use href="#oleo-ampersand"></use> </svg> Wolverine:<br> A StackOverflow Example </h2> & 符号的样式如下： 现在，我希望屏幕阅读器将其作为常规短语进行叙述（即“死侍和金刚狼”）。将 aria-label="and" 添加到 <svg> 似乎被忽略。有办法实现这一点吗？也许，我应该制作整个块aria-hidden并添加一个视觉上隐藏的元素？ 另外，在 Ctrl+C 上以相同的方式复制块会很酷，但我想如果没有 JS 拦截，这是不可能的。 不用JS复制文本确实不简单。 此标记在屏幕阅读器上适合您吗？ document.addEventListener('copy', (event) => { const selection = window.getSelection().toString(); if (selection.includes("Deadpool") && selection.includes("Wolverine")) { event.clipboardData.setData('text/plain', "Deadpool and Wolverine"); event.preventDefault(); } }); .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } <h2> <span class="sr-only">Deadpool and Wolverine</span> Deadpool <svg width="53" height="64" class="inline" aria-hidden="true"> <use href="#oleo-ampersand"></use> </svg> Wolverine: <br> A StackOverflow Example </h2>
我有以下代码： 我有以下代码： <nav class="navbar navbar-expand-md"> <div class="container px-0"> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a href="#about" class="nav-link">About</a> </li> <li class="nav-item"> <a href="#project1" class="nav-link">Project 1</a> </li> <li class="nav-item"> <a href="#project2" class="nav-link">Project 2</a> </li> <li class="nav-item"> <a href="#contact" class="nav-link">Contact</a> </li> </ul> </div> </div> </nav> 自动可访问性测试工具显示了一个问题：“未找到可访问的文本”，其叙述者子系统将其叙述为：“已输入导航 - 包含 4 个项目的列表”。 我应该将 aria-label="Navigation links" 添加到 <ul> 吗？ 从技术上讲，不，WCAG 不要求列表具有可访问的名称。此外，屏幕阅读器用户会听到该列表位于导航地标中，因此向列表添加“导航链接”的可访问名称实际上只是多余的信息，我不会推荐它。 如果您要在此处添加可访问的名称，它将位于导航元素上。如果这是网站的主要导航，那么您可以向导航元素添加类似 aria-label="main" 的内容。但是，如果页面上只有一个导航元素，并且它位于标题中，那么即使这样也可能有点过分了。
我可以在嵌套上下文中多次使用 aria-current 吗？
假设我有一个包含不同 的页面。某些 中可能包含其他 等等。现在，假设我想创建一个非主导航...... 假设我有一个包含不同 <section> 的页面。某些 <sections> 中可能包含其他 <sections> 等等。现在，假设我想创建一个非主导航，以允许轻松导航所有这些部分并且还突出显示用户正在滚动的当前部分（当然是通过JavaScript完成的）。 由于，通过阅读嵌套部分，您仍在阅读父部分，因此我最终遇到了一种情况，即父部分和“最多”一个（如果其直接子项可能都有）。我想知道这是否格式不正确或有问题。 这是所处理的层次结构类型的简单演示。最多一个链接到一个部分可能会以aria-current="true"每层嵌套结束。aria-current （在实际代码中，我已在 <nav> <ol> <li> <a href="#sec1" aria-current="true">Section 1</a> <nav> <ol> <li><a href="#sec1_1">Section 1.1</a></li> <li><a href="#sec1_2" aria-current="true">Section 1.2</a </li> </ol> </nav> </li> <!-- Other Sections (can be arbitrarily nested) --> </ol> </nav> 中添加了 aria 标签。为清楚起见，此处省略） 根据 nav 上的 MDN 文档： 仅使用 aria-current 将一组元素中的一个元素标记为当前元素。 然而，“一组元素”的措辞有点过于模糊，无法回答我的疑问。嵌套导航中的项目是否会被分类为足够独立的上下文，或者它们最终仍属于其父级的“元素集”（就好像它们在逻辑上被扁平化一样）？ 这最终就是我的问题所在：每个列表是否可以有自己的aria-current来突出显示自己的上下文中的当前项目？或者嵌套列表会共享其父列表的逻辑上下文，因此整个嵌套结构只能允许一个 aria-current ？更具体地说，aria-current和Section 1都可以是当前的吗？ 是的，“元素集”可能不明确，但在我看来，这里有一个目录，因此所有链接都是目录的元素。因此，我认为将每个嵌套链接列表视为一个单独的集合可能是可行的。 至于是否可以这样做，如果你查看ARIA 1.3文档，它说“作者应该仅使用Section 1.1将一组元素中的一个元素标记为当前元素。”这个“应该”很重要。这意味着它受到强烈鼓励并被认为是最佳实践，但它并不“非法”。因此从技术上讲，集合中允许有多个 aria-current 属性，因此您“可以”这样做，但是否应该这样做是另一个问题。大多数辅助功能专业人士会告诉您，真正确定最有效的方法的唯一方法是与用户进行测试。我的建议是从尽可能简单的开始，如果您通过反馈/测试发现需要做更多事情，则只会使其变得更加复杂。因此，我建议您一次只使用一个 aria-current，并将其放在当前查看的实际部分的链接上。
我有一个带有提交按钮的表单。当用户单击按钮时，我需要执行异步操作（例如，向后端发出 HTTP 请求）。 为了提供有关该过程的反馈，我禁用了su...
ARIA 中的 menuitemradio 和 radio 角色有什么区别？
我在MDN上搜索radio角色时刚刚了解到menitemradio。 但是，似乎没有解释它们之间的区别。 我可以确认他们实际上是...
我的确切困惑如下 一方面，WAI-ARIA 提供了 5 条规则作为作者使用 WAI-ARIA 的实用指南（尽管该文档不是 W3C 推荐），而且
如果我有一个输入，其 aria-label 设置为 1，关联标签设置为 2，那么引用该输入的元素的 aria 标签将被计算为什么？ 如果我有一个输入，其 aria-label 设置为 1 并且关联的标签设置为 2，那么引用输入的元素的 aria 标签将被计算为什么？ <input type="radio" id="cpp-search-video-btn" aria-label="1" role="tab"> <label for="cpp-search-video-btn" aria-hidden="true">2</label> <div id="cpp-search-video-tab" aria-labelledby="cpp-search-video-btn" role="tabpanel">…</div> div#cpp-search-video-tab 的咏叹调标签是什么：1、2，或者可能是未设置？ （我希望它是“1”）。 据我所知，MDN 上没有关于替换的信息。 好吧，如果我猜对了，DevTools 中的“辅助功能”窗格在“计算属性”→“名称”部分中显示了 aria 标签，那么答案就是“1”。
如果我们看一下 Bootstrap 选项卡示例： 如果我们看一下 Bootstrap tab 示例： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA3dLNH46c0X0pANo8jQd+2uAGeZHuFr8iI1wCdh0Pej1krpDTRj9PI4y3eC9S" crossorigin="anonymous"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button> </li> … </ul> …我们看到，Bootstrap 作者没有为选项卡指定 aria-label (<ul>)。可以吗？也许，描述一下表格列表会更好？ 根据 WAI ARIA 创作实践指南 的提供可访问的名称和描述页面，标签是“推荐”，而不是“必需”。 从页面： 帮助屏幕阅读器用户了解选项卡列表的上下文和目的。 如果存在可见标签，请使用 aria-labelledby，否则使用 aria-label。 因此，Bootstrap 示例中的省略是允许的，尽管不可取。
aria-controls需要id，id必须是文档唯一的，模板怎么写？
我们看一下W3 ARIA工具栏示例： … 让我们看一下W3 ARIA工具栏示例： <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="textarea1">…</div> … <textarea id="textarea1" rows="20" cols="80" style="font-family: sans-serif">…</textarea> 工具栏的aria-controls指的是使用textarea的id。 虽然我现在才听说 id 在其父元素中必须是唯一的，根据 MDN 它仍然“在整个文档中必须是唯一的”。 好的，但是如何制作一个由区域和工具栏组成的小部件模板呢？ 一个明显的解决方案是每次实例化模板时都会生成毫无意义的 id 值，仅供参考： <template class="text-editor"> <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="{textarea-id}">…</div> … <textarea id="{textarea-id}" rows="20" cols="80" style="font-family: sans-serif"> </template> 也许有更好的方法？ 现在我最好的方法如下。我刚刚将 variables 添加到模板实例化代码中。其中之一是{autoid}： <template class="text-editor"> <div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="{autoid}">…</div> … <textarea id="{autoid}" rows="20" cols="80" style="font-family: sans-serif"> </template> 然后我将 {autoid} 替换为 crypto.randomUUID() 调用的结果。 这项技术让我拥有模板的多个实例和 id 唯一性。
我想在创建帖子时单击 Facebook 的照片/视频按钮。该元素是： 我想在创建帖子时单击 Facebook 的照片/视频按钮 。该元素是： <div aria-label="Photo/video" aria-pressed="false" class="..." role="button" tabindex="0"> <div><div><div class="..."><div class="..."><div class="..."> <img class="..." alt="" src="https://static.xx.fbcdn.net/rsrc.php/v3/y7/r/Ivw7nhRtXyo.png?_nc_eui2=AeHY6dd2udiKCsGGc3_l3Lj2PL4YoeGsw5I8vhih4azDks5jrq6FoGG-iYDYkCJ4e3z08U_itrGNYjc5wzxwesxH" style="height: 24px; width: 24px;"> </div><div class="..." role="none" data-visualcompletion="ignore" style="inset: 0px;"></div></div></div></div><div><div></div></div></div></div> 根据页面互动 | Puppeteer，我认为正确的代码是： await page.locator('::-p-aria([name="Photo/video"][role="button"])').click(); 但它没有点击。将 name 更改为 label 没有帮助。你知道如何让它发挥作用吗？ 在 Puppeteer 中，与基于 ARIA 属性的元素交互时，如 aria-label，正确的做法是结合使用 page.click() 和适当的选择器，而不是 ::-p-aria 伪元素方法 以下是如何使用 aria-label 单击“照片/视频”按钮： 正确做法： 您可以通过 aria-label 属性定位元素，确保您定位到具有 role="button": 的按钮 await page.click('[aria-label="Photo/video"][role="button"]'); 此选择器将以 aria-label="Photo/video" 和 role="button" 为目标 div，这是您要查找的元素。 如果您尝试单击的元素位于 iframe 内，或者涉及动态元素，您可能需要使用 waitForSelector 或 waitForFunction 等待该元素变得可用，以确保该元素已准备好可供单击： await page.waitForSelector('[aria-label="Photo/video"][role="button"]'); await page.click('[aria-label="Photo/video"][role="button"]'); 让我知道这是否有帮助。
我有一个像这样实现的表，并使用适当的类使其看起来像一个表： ... 我有一个像这样实现的表，并使用适当的类使其看起来像一个表： <div> <div> <div id="e3"> <div role="table"> <div role="rowgroup"> <div role="row"> <div colspan="1" role="cell"> <div> <div><span>First Name</span></div> </div> </div> <div colspan="1" role="cell"> <div> <div><span>Last Name</span></div> </div> </div> <div colspan="1" role="cell"> <div> <div><span>Full Name</span></div> </div> </div> </div> </div> <div role="rowgroup"> <div> <div> <div> <div aria-label="grid" aria-readonly="true" role="grid" tabindex="0"> <div role="rowgroup"> <div> <div role="row" data-row-id="e3-0"> <div role="cell"> <div> <div> <div>John</div> </div> </div> </div> <div role="cell"> <div> <div> <div>Higgins</div> </div> </div> </div> <div role="cell"> <div> <div> <div>John Higgins</div> </div> </div> </div> </div> </div> <div> <div role="row" data-row-id="e3-1"> <div role="cell"> <div> <div> <div>John</div> </div> </div> </div> <div role="cell"> <div> <div> <div>Lennon</div> </div> </div> </div> <div role="cell"> <div> <div> <div>Sean Lennon</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> 我想在手机上完全自定义语音阅读器。例如，我不希望它读取“第 3 列，共 3 列”，我希望它显示为“第三列，共三列”。 如果您有效地呈现表格数据，如果您可以使用<table>会更好，但无论如何它不会改变我的答案。 您无法更改“第 3 栏（共 3 栏）”等公告。这是一般信息，可准确告诉您在表格中导航时所处的位置。 这些信息由用户控制，如果他/她觉得它没有用，他/她可能会决定隐藏它，但你，作为开发人员或文档编写者，你无法决定什么是好或坏，有用或无用为用户提供的信息。 屏幕阅读器用户通常希望提供此信息，并且绝对有必要始终准确地知道您所在的位置，特别是当表格很大和/或具有 col/rowspan 等复杂内容时。 如果没有此类信息，作为屏幕阅读器用户，您可能会快速而轻松地迷失方向。 如果公布的列号和/或行号是错误的，这可能意味着您的标记不正确，或者您的结构太复杂。如果可能的话，你应该尝试简化它。 如果您认为谈论列和行根本没有意义，可能是您实际上没有数据表，在这种情况下，最好删除所有 ARIA 角色，告诉屏幕阅读器它是数据表。 无论如何，你不应该试图让一切都按照你喜欢的方式说出来，你也不应该害怕情况并非如此。每个用户都有他/她的偏好，即使不计算用户配置，每个屏幕阅读器提供的此类信息也略有不同。 像往常一样，了解最有效和/或最清晰的数据呈现方式的最佳方法是与真实的屏幕阅读器用户进行真正的用户体验测试。
“[aria-hidden="true"] 元素包含可聚焦的后代”；解决这个问题的最佳方法？
我有一个简单的手风琴： 打开手风琴 这是 我有一个简单的手风琴： <div> <button aria-expanded='false' aria-controls='content'> Open accordion </button> <div id='content' aria-hidden='true'> This the accordion's hidden content. </div> </div> 我使用 Javascript 打开/关闭手风琴并设置 aria-* 标签。 一切正常，但是当我在内容中添加链接时： <div> <button aria-expanded='false' aria-controls='content'> Open accordion </button> <div id='content' aria-hidden='true'> This is the accordion's hidden content. <a href='https://www.google.com'>Go to Google</a> </div> </div> 灯塔给了我这个： [aria-hidden="true"] elements contain focusable descendents 在我看来，将 tabindex='-1' 添加到 a 标签可以解决问题： <a tabindex='-1' href='https://www.google.com'>Go to Google</a> 但是，这使得元素“不可选项”，这不利于可访问性。 我可以使用 JavaScript 手动查询手风琴内容中的所有 a 标签，但我什至不确定这是否真的解决了“问题”还是一个肮脏的解决方法？还有更好的选择吗？ 为什么会收到此警告？ 此警告表明，尽管您使用了 aria-hidden="true"，但如果子项可以接收焦点，大多数屏幕阅读器都会忽略父项上的 aria-hidden="true"（考虑到开发人员错误、JavaScript 未正确加载等）。 如何解决？ 我假设您正在使用上滑动画或类似的东西，这就是为什么您不简单地在内容上使用display: none。 如果您没有使用动画，那么只需 display: none 应用 aria-hidden="true" 时的内容即可（@Adam 在他的回答中向您展示了执行此操作的完美方法）。 更好的是，您可以直接在 div 上使用 display: none，因为这会隐藏屏幕阅读器看不到的所有内容，因此您不需要在那里使用 WAI-ARIA！ 我正在使用动画/过渡，因此不能隐藏所有内容。 如果您使用动画、不透明度更改等，这会阻止您简单地隐藏整个内容，那么您可以做的就是隐藏内容中的可聚焦内容<div>。 当您应用 aria-hidden="true" 时，我们可以使用 CSS 来执行此操作，然后在更改或删除 aria-hidden="true" 时取消隐藏可聚焦元素。 为了避免再次取消隐藏元素时出现“布局卡顿”，我建议使用 visibility: hidden 而不是 display: none，因为这样会为隐藏项目分配空间，并且仍然对屏幕阅读器等隐藏它们。 #content[aria-hidden=true] a[href], #content[aria-hidden=true] area[href], #content[aria-hidden=true] input:not([disabled]), #content[aria-hidden=true] select:not([disabled]), #content[aria-hidden=true] textarea:not([disabled]), #content[aria-hidden=true] button:not([disabled]), #content[aria-hidden=true] [tabindex]:not([disabled]), #content[aria-hidden=true] [contenteditable=true]:not([disabled]){ visibility: hidden; } 快速演示 了解我的意思的最简单方法是通过快速演示，按“切换 aria-hidden on”按钮，它将隐藏 #content <div> 中的所有可聚焦元素。 var btn = document.querySelector('#toggle-aria'); var contentDiv = document.querySelector('#content'); btn.addEventListener('click', function(){ var self = this; if(contentDiv.getAttribute('aria-hidden') == "false"){ self.innerHTML = "Toggle aria-hidden off"; contentDiv.setAttribute('aria-hidden', "true"); }else{ self.innerHTML = "Toggle aria-hidden on"; contentDiv.setAttribute('aria-hidden', "false"); } }); #content{ padding: 20px; border: 1px solid #333; } #content[aria-hidden=true] a[href], #content[aria-hidden=true] area[href], #content[aria-hidden=true] input:not([disabled]), #content[aria-hidden=true] select:not([disabled]), #content[aria-hidden=true] textarea:not([disabled]), #content[aria-hidden=true] button:not([disabled]), #content[aria-hidden=true] [tabindex]:not([disabled]), #content[aria-hidden=true] [contenteditable=true]:not([disabled]){ visibility: hidden; } <br/><br/><button id="toggle-aria">Toggle aria-hidden on</button> <p>When aria-hidden is set to true on the below div all focusable elements should disappear.</p> <hr/> <div id="content" aria-hidden="false"> <a href="https://google.com">To Google</a><br/><br/> <label>An input <input /> </label><br/><br/> <label>A Select <select> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> </label><br/><br/> <label>A textarea <textarea></textarea> </label><br/><br/> <button>A button</button><br/><br/> <div tabindex="0">A fake button with tabindex</div><br/><br/> <div contenteditable="true">A div that is cotnent editable</div><br/><br/> <p>Only the labels and this paragraph should be the only things left showing when you toggle the aria-hidden to true</p> </div> <br/><br/> <button>I am a button purely so you can see there is nothing focusable within the #content div if you "Tab"</button> 重要提示： 当您按下“打开手风琴”按钮时，您应该删除 aria-hidden 之前任何动画等。这是因为屏幕阅读器用户随后会尝试按 Tab（或通过屏幕阅读器快捷方式导航）进入内容。如果您删除aria-hidden="true"太晚，他们可能会跳过所有内容！ 简单的解决方案，使用 CSS display:none 属性来删除元素的焦点： #content[aria-hidden=true] { display:none; } 这不仅有用，而且非常必要，因为我们不希望屏幕阅读器宣布不可见的事情。 我刚刚将 tabindex="-1" 更改为 tabindex="1" 然后就可以正常使用了 <div class="modal fade" id="userModal" tabindex="1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="false" aria-busy="true" > </div
当一个地标元素内部也有一个标题时，它应该有一个 aria 标签吗？
屏幕阅读器用户有多个选项来访问页面上的内容。 例如，所有标题的列表，还有地标的列表。 使用 aria-label，您可以标记一个地标。 考虑
如何在 Voiceover 中只读取一次链接内容？ （仅限火狐浏览器）
为什么 Firefox Voiceover 会读取该文本两次？又如何让它读一次呢？ （保留列表标记） 此文本重复于 为什么 Firefox Voiceover 会读取该文本两次？又如何让它读一次呢？ （保留列表标记） <ul> <li> <a href="/something">This text is duplicated in Voiceover</a> <span class="">Some description</span> </li> </ul> https://jsbin.com/duseqi/edit?html,输出 当链接嵌套在列表中时，VoiceOver 在 Chrome 和 Firefox 中重复链接文本两次。它在 Safari 中不会执行此操作。我不认为这是你的标记的问题，这是 VO 如何与浏览器配合使用的问题。 我在 Chrome 中发现了一些其他奇怪的行为，比如当内容位于带有“main”的 div 内部时，不宣布标题的结构（例如，阅读“我的惊人标题”而不是“二级标题，我的惊人标题”） “ ARIA 具有里程碑意义，在 Safari 中也能正常工作。 这种情况发生在什么类型的设备上（MacBook、iPad、iPhone 等）？ 我认为这可以处理您如何浏览文本，和/或它是否是块级链接。 在 Mac 上的 VoiceOver 中，如果您使用 Tab 键导航，则会重复块级链接文本。 根据现已删除的这篇文章，“该行为取决于屏幕阅读器、浏览器和导航模式的组合。” 虽然您的示例不包含此内容，但如果您也存在 aria-label 属性，VO 可以重复文本。 在您的实际标记中，锚标记内是否还有其他元素？ 如果是这样，也许切换这些块级元素的结构可以帮助避免重复。 希望这有帮助。
我们可以使用 aria 更改地标元素或任何 html5 元素的原生语义吗
我们可以使用 aria 更改地标元素或 html5 的任何元素的本机语义吗？这样做在语义上是否正确且符合要求？ 假设我想使用对话框元素作为
在这个问题中，我们将考虑 2 个示例，但请注意，这个问题是关于任意加载占位符的。 以下是加载占位符的 Bootstrap 5 示例： 在这个问题中，我们将考虑 2 个示例，但请注意，这个问题是关于 任意 加载占位符。 这是加载占位符的 Bootstrap 5 示例： <div class="card" aria-hidden="true"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title placeholder-glow"> <span class="placeholder col-6"></span> </h5> <p class="card-text placeholder-glow"> <span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span> <span class="placeholder col-8"></span> </p> <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a> </div> </div> 但是仅仅aria-hidden="true"就足够了吗？ 屏幕阅读器等如何理解加载过程？ 尝试添加aria-label： <div class="card" aria-hidden="true" aria-label="Loading in progress. Please wait."> <!-- --> </div> 2024 年 9 月，HTML 验证器对此提出投诉： 可能滥用“aria-label”。 （如果您不同意此警告，请提交问题报告或发送电子邮件至 [email protected]。） 如果删除aria-hidden="true"，则相同。 再举一个例子我想考虑一下。 <article> <div class="skeleton"> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <span>Loading</span> </div> <div aria-busy="true"> <h3><a href="[…]">Glossier Roof Party</a></h3> <img src="[…]" […] alt="[…]"> <p> Gastropub sartorial venmo hashtag […] </p> </div> </article> 未准备好显示的内容已被aria-busy="true"隐藏。但是，在加载过程中从 DOM 中unmount这部分并不难。为此，将留下下面的代码： <div class="skeleton"> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <span>Loading</span> </div> Loading跨度在视觉上是隐藏的，因此屏幕阅读器可以加载。但它如何理解整个 <div class="skeleton"> 是加载占位符？ 使用 aria-hidden=true 可以完全隐藏屏幕阅读器的内容。因此，同时放置 aria 标签是完全没有用的，而且是矛盾的。 一般来说，将 aria-hidden=true 放在大代码块上并不是一个好习惯： 一旦内容准备好，您很容易忘记将它们全部删除，特别是如果您像在其中一个片段中那样随机地将 aria-hidden=true 放在任何地方 如果内容在 aria 隐藏内容中包含任何可聚焦元素（链接、表单元素等），那么您会遇到更大的问题：可以使用选项卡访问该元素，但不能使用文档导航访问该元素，并且可能无法读取该元素当对焦时。这是另外一件需要注意的事情，您一定不要忘记在删除 aria-hidden=true 的同时删除 tabindex=-1 属性 aria-hidden 应谨慎使用，仅在非常精确的情况下使用，当然不适用于大块代码。 事实上，对于当前正在加载的内容，更安全的是： 仅在内容准备好时才将内容放入 DOM，而不是在此之前 使用 CSS display:none 或 Visibility:hidden 隐藏当前正在加载的内容，这保证了无论使用何种方式读取页面，它都完全不可见、不可读和不可操作 现在关于如何告诉用户正在加载某些内容的第二个问题，当然，如果您将加载横幅放在 aria-hidden=true 下，则完全没有用。 您可以使用 aria-live=polite 将此类加载消息放置在实时区域中，这样每次内容更改时都会宣布该消息。 许多资源提供了此类加载横幅的示例。 注意：aria-live 用于加载消息，例如“正在加载，请稍候”，而不是用于当前正在加载的内容本身。
ARIA 中 `menuitemradio` 和 `radio` 角色有什么区别？
在MDN上搜索radio角色时刚刚了解到menitemradio 然而，似乎没有解释它们的区别。 我可以确认它们实际上是相同的，但是：
检查了 W3C 的可访问富互联网应用程序 (WAI-ARIA) 规范的角色定义以及状态和属性的定义，但似乎没有定义任何角色或状态...
如果一组按钮（或标签）将输入值设置为每个不同的值，那么它们应该具有什么角色和咏叹调？ 在这种情况下，用户也可以插入/编辑输入