为新添加的区域正确处理 WCAG
Correct WCAG handling for newly added regions
如果我在一个页面上有 3 个按钮，选择一个会使它们隐藏，然后显示另一个 div 包含一些表单元素，我想正确地通知显示的新添加内容。我的理解是动态内容更改（例如显示区域）需要根据 WCAG 进行正确处理。有没有标准的方法来处理 aria/html?
我已经尝试过 aria-live，因为通常建议在新区域的外部 div 上使用 aria-live，但即使使用 aria-live="polite" 我也会遇到不良副作用。假设显示的区域包含一个小表格。当焦点移动到文本字段并开始输入时，我得到了一种奇怪的行为，即当用户在输入中输入字符时，JAWS 会针对每次击键重复开始一次又一次地读取标签。如果我删除父级 div 上的 aria-live 属性，则在表单中使用 Tab 键时，标签只会在字段焦点上读取一次，并且不会在用户输入时再次读取。
即似乎具有 aria-live 的父元素导致标签等子元素被更积极地读取，即使显示的区域是一次性更改，并且在那之后没有动态变化。
这种奇怪的行为似乎暗示 aria-live 更适合将 errors/alerts 等小的孤立元素添加到页面，而不是大区域。
我应该改用角色吗？
<form role="form" action="/submit" method="post">
<div hidden id="section1" aria-live="polite">
<h2>Form Header</h2>
<div>
<label for="RequestNumber">Request Number*</label>
<input id="RequestNumber" name="RequestNumber" type="text" />
</div>
</div>
</form>
这听起来像是一个简单的渐进式披露案例。 JAWS 所做的不是错误，而是 aria-live 的工作原理。 Aria-live 创建了 DOM 的敏感区域，只要该区域发生变化，就会触发 Assistive Tech 的话语。这就是为什么在 aria-live 中包装一个表单是不明智的。
如果这确实是一种渐进式披露情况，即表单根据用户的选择先于用户构建自身，则不需要 aria-live 通知。只要用户的焦点在与当前任务相关的表单元素中逻辑移动，并且用户背后的内容没有改变，就不需要警报。
在您的示例中，您还包装了表单字段和标签。您可能只想将 H2 添加到 aria-live 区域，这会将公告限制为该元素。
（抱歉，如果我误解了情况，但如果选择其中一个按钮导致按钮组消失并添加 div，那么真正的问题是焦点落在哪里？）
黄金法则 - 不要使用 ARIA，除非所有其他选项都已用尽。
您在这里真正想做的只是管理焦点。
当您单击 3 个按钮中的一个时，我假设显示的是不同的表单。 99% 的屏幕阅读器都可以毫无问题地处理这个问题（对于不能处理的屏幕阅读器，它们在没有 JavaScript 的情况下使用，因此请确保您的网站在没有它的情况下也能正常工作。）
单击按钮时，隐藏它们（如果有动画，则使用 aria-hidden，否则只需 display:none 即可），然后在显示新表单时，只需使用JavaScript.
屏幕 reader 会处理剩下的事情。
可能建议在按钮上添加一些视觉上隐藏的文本，以通知用户按钮消失并出现一个表单 - 只要确保您提供一种方法让他们返回到按钮，以防他们做了错误的选择。
视觉隐藏Class供参考
如果您认为屏幕 reader 可能需要适当的信息，请使用下面的 CSS 隐藏按钮内的内联跨度。
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
如果我在一个页面上有 3 个按钮，选择一个会使它们隐藏，然后显示另一个 div 包含一些表单元素，我想正确地通知显示的新添加内容。我的理解是动态内容更改（例如显示区域）需要根据 WCAG 进行正确处理。有没有标准的方法来处理 aria/html?
我已经尝试过 aria-live，因为通常建议在新区域的外部 div 上使用 aria-live，但即使使用 aria-live="polite" 我也会遇到不良副作用。假设显示的区域包含一个小表格。当焦点移动到文本字段并开始输入时，我得到了一种奇怪的行为，即当用户在输入中输入字符时，JAWS 会针对每次击键重复开始一次又一次地读取标签。如果我删除父级 div 上的 aria-live 属性，则在表单中使用 Tab 键时，标签只会在字段焦点上读取一次，并且不会在用户输入时再次读取。
即似乎具有 aria-live 的父元素导致标签等子元素被更积极地读取，即使显示的区域是一次性更改，并且在那之后没有动态变化。
这种奇怪的行为似乎暗示 aria-live 更适合将 errors/alerts 等小的孤立元素添加到页面，而不是大区域。
我应该改用角色吗？
<form role="form" action="/submit" method="post">
<div hidden id="section1" aria-live="polite">
<h2>Form Header</h2>
<div>
<label for="RequestNumber">Request Number*</label>
<input id="RequestNumber" name="RequestNumber" type="text" />
</div>
</div>
</form>
这听起来像是一个简单的渐进式披露案例。 JAWS 所做的不是错误，而是 aria-live 的工作原理。 Aria-live 创建了 DOM 的敏感区域，只要该区域发生变化，就会触发 Assistive Tech 的话语。这就是为什么在 aria-live 中包装一个表单是不明智的。
如果这确实是一种渐进式披露情况，即表单根据用户的选择先于用户构建自身，则不需要 aria-live 通知。只要用户的焦点在与当前任务相关的表单元素中逻辑移动，并且用户背后的内容没有改变，就不需要警报。
在您的示例中，您还包装了表单字段和标签。您可能只想将 H2 添加到 aria-live 区域，这会将公告限制为该元素。
（抱歉，如果我误解了情况，但如果选择其中一个按钮导致按钮组消失并添加 div，那么真正的问题是焦点落在哪里？）
黄金法则 - 不要使用 ARIA，除非所有其他选项都已用尽。
您在这里真正想做的只是管理焦点。
当您单击 3 个按钮中的一个时，我假设显示的是不同的表单。 99% 的屏幕阅读器都可以毫无问题地处理这个问题（对于不能处理的屏幕阅读器，它们在没有 JavaScript 的情况下使用，因此请确保您的网站在没有它的情况下也能正常工作。）
单击按钮时，隐藏它们（如果有动画，则使用 aria-hidden，否则只需 display:none 即可），然后在显示新表单时，只需使用JavaScript.
屏幕 reader 会处理剩下的事情。
可能建议在按钮上添加一些视觉上隐藏的文本，以通知用户按钮消失并出现一个表单 - 只要确保您提供一种方法让他们返回到按钮，以防他们做了错误的选择。
视觉隐藏Class供参考
如果您认为屏幕 reader 可能需要适当的信息，请使用下面的 CSS 隐藏按钮内的内联跨度。
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}