我正在开发一个动态表单构建器，用户可以在其中向页面添加不同的内容块（按钮、文本输入、文本段落、图像等），然后他们可以发布这些内容，这将是一个简单的 HTML 表单。可以使用。
对于这个应用程序的“预览”部分（他们在其中添加不同的内容块并修改内容和外观），我想到最简单的方法是只显示最终产品 HTML 本身和这样我或多或少地保证预览中显示的内容与实际表单中显示的内容相匹配。
这很重要的地方在于模糊的样式怪癖，例如带有 display:block 的按钮的行为。
但是，我不希望预览像真实表单那样具有交互性。也就是说，我不想要以下行为：
此外，在可访问性方面，如果屏幕上出现一堆没有做任何事情的输入，则可能会非常混乱。
是否有浏览器本机/标准方式来做到这一点？
我的回退可能是禁用所有元素。但这不适用于例如链接。
另一种方法可能是在表单顶部放置一个不可见的 div，它会捕获所有点击事件。但我不喜欢可访问性 POV。
是否使用了这个role="presentation"目的？
作为示例，请参阅此处的一些示例代码：https : //codepen.io/dwjohnston/pen/qBrGPmr?editors=1111
现在为此，我有 div role="button"- 这些按钮是可点击的， - 当您点击它们时，侧面板将显示内容配置，例如，输入、标签等的默认值。
已经存在一个问题 - 按钮内不允许有交互内容。
而且，我不应该能够选择这些控件（现在我可以手动添加tabindex = "-1"，但这不是完整的图片）。我不想混淆屏幕阅读器等。
我想将WAI-ARIAaria-hidden支持与 jQuery 的 .toggle() 方法结合起来。
所以给出 <p id="myElement">Hi there</p>
$('#myElement').toggle()将隐藏元素，并设置aria-hidden="true"：
<p id="myElement" style="display: none;" aria-hidden="true">Hi there</p>
$('#myElement').toggle()再次执行相同的脚本将显示（切换）元素，并设置（切换）aria-hidden="false"：
<p id="myElement" style="display: block" aria-hidden="false">Hi there</p>
我可能想使用该方法的完整功能，也许类似于
$('#myElement').toggle(
if ($this.css('display')==='none'){
$this.prop('aria-hidden', 'true')
}
else
{
$this.prop('aria-hidden', 'false')
}
)
扩展.toggle()以切换aria-hidden状态的最佳解决方案是什么？
我正在查看一些代码，其中一个标签具有属性aria-owns, 和aria-expanded. 我用谷歌搜索他们，但没有找到足够的细节来完全理解他们的工作。
有人可以解释这些特定属性的用途吗？我对 aria 属性的作用有一个大致的了解（我已经使用过aria-labelledby）？
我想在 Jaws 读取时忽略按钮内的文本，我的代码是：
<span style="display:none;" id="text1">Hai</span>
<button aria-labelledby="text1"><span>firstbutton</span></button>
但《大白鲨》读作“海”第一个按钮
提前致谢
我在 W3C 验证中收到此错误。我正在使用 HTML5 文档类型<!DOCTYPE html>
元素导航上属性角色的错误值分页。
为了
<nav class="pagination" role="pagination">
有谁知道如何解决这个问题或这背后的原因是什么？W3V 验证器不支持 ARIA 吗？
在下面的标记中，我在<main>元素周围有一个包装器，用于展示目的。
<div id="main-wrapper" role="presentation">
<main id="main" role="main">
<h1>Title</h1>
<p>Lorem ipsum, dolor sit amet.</p>
</main>
</div>
但是我不确定ARIA 角色是否由后代继承。如果<main>元素被视为展示性的，因为它周围的包装器具有role="presentation".
此处是否正确使用了 ARIA 角色？ARIA 角色是如何继承的？
我们需要布局大量的数据。一个简单的表可以很好地工作，但我们正在使其完全响应，因此对于简单的字段/值对，我们试图避免对表标记过于疯狂，以使回流更容易一些。
过去，我会首先使用定义列表：
<dl>
<dt>Label</dt>
<dd>Value</dd>
</dl>
但是……它们也有缺点……也就是说，屏幕阅读器等并不总是能识别此标记的语义值，因此经常不受欢迎。
在语义和可访问性（以及 HTML5）方面，是否有一组特定的 ARIA 属性可以使它变得更好？
如果是这样，我应该使用哪些？我在网上找到的示例通常用于 a) 标签/字段对或 b) 将 ARIA 标签用于不可见标签。两者都不适合这种情况。
这是我认为我们需要的：
<div class="datawrapper">
<div class="label" **some-ARIA-attribute-to-attach-this-to**="value1">Label</div>
<div class="value" id="value1">Value</div>
</div>
是否有专门为此设计的 ARIA 属性？ARIA 是否有更好的解决方案来使其易于访问？
我们正在努力使我们的响应式站点之一更易于访问，但我们正在努力了解 ARIA，因为它似乎违背了将设计元素与 HTML 分离的核心原则。
例如，如果一个元素隐藏在 aria 中，则将其表示为 aria-hidden="true"。然而，大多数可见性是由媒体查询决定的，具体取决于屏幕大小等。
在其他情况下，元素的工作方式与媒体查询完全不同。因此，在某些尺寸下 aria-haspopup="true" 将是合适的，而在其他分辨率下，导航始终可见。
我是否遗漏了什么，或者我们是否再次使用此标准进行字体标签？我们是否应该适当地使用 javascript 添加/删除 aria 标签？
我有一组具有适当角色和属性的选项卡，用于辅助功能支持。选项卡控件的内容通过 ajax 加载。但是加载的内容的每个包装器也具有适当的选项卡窗格角色和属性。
问题是，当我使用 Chrome 辅助功能工具运行自动审核时，测试失败，指出ID除当前活动的选项卡之外的所有选项卡都缺少相应的选项卡窗格（因为已加载具有 ID 的包装器）。确切的错误指出：“通过 ID 引用其他元素的 ARIA 属性应该引用 DOM 中存在的元素。”
由于ID一旦具有相应属性的选项卡aria-controls处于活动状态， 就会存在，这真的是一个错误吗？或者这只是误报的情况，因为这是一个自动化测试，他们只能做这么多。
总而言之，它的aria-controls作用是什么？它真的需要引用IDDOM 中当前存在的 an 吗？
背景：教育电子书 (HTML + CSS) 出版
我有一个作文标题，其中有这样的句子：
<p>This is <del>correct</del> <ins>incorrect</ins></p>
重要的是，用户知道某些文本正在被删除以及某些文本正在被插入。我还有一个相关的场景，其中文本应用了具有语义意义的突出显示。例如：
<p>This is an <span class="highlight-blue">adjective</span> and this is a <span class="highlight-red">noun</span>. </p>
无障碍顾问建议我在这些情况下使用 role="region" + aria-label 。
例如：
<p>This is an <span role="region" aria-label="adjective" class="highlight-blue">adjective</span> and this is a <span role="region" aria-label="noun" class="highlight-red">noun</span>. </p>
这里的灵活性是必要的，因为我们为所有标题使用标准 CSS，有时突出显示的红色可能表示被动语态，或者可能表示名词等。
我在本网站的其他问题中看到不允许在 span （或 div ）元素上使用 aria-label 。同样使用 Chromevox，我发现读者会读取 aria 标签，但不会读取 aria 标签内的文本。（我无法访问其他屏幕阅读器进行测试。）
所以我的问题是：让屏幕阅读器用户读取这些内联元素的语义的最佳方法是什么？
不可行的选择
CSS 隐藏的伪元素。我见过一些解决方案，您可以创建一个伪元素，然后使用 CSS 将其隐藏在屏幕外。当您隐藏屏幕外的内容时，Kindle 会遇到问题，在屏幕外的内容后面丢弃大块文本，因此这不是一个可行的选择。