哪一个是更好的可访问性解决方案？ aria 隐藏，从 DOM 或其他内容中删除元素

Question

我个人认为删除元素可能更利于网站维护，但是否为了可访问性而这样做？

样本是

      <input type="radio" value="single" name="userGroup" id="single" required />
      <label for="single">Single</label>

      <input type="radio" value="families" class="form-checkbox" name="userGroup" id="families" required />
      <label for="families" >Families</label>

其余表单字段将根据用户组而有所不同

当用户在单身和家庭之间切换时，家庭组将在单个表单字段之上有额外的字段，例如 'bill payment' 部分（是否合并）和 'how you would like to share your data plan'（是否限制使用）

作为一种形式，像 'bill payment' 这样的元素应该是 aria-hidden true 还是从 DOM 中删除？

Answer 1

如果没有更多的上下文 and/or 和 URL 看到它的实际效果，很难回答这个问题。

如果您允许用户返回并更改选择，然后更改后续字段，请考虑用户何时犯错。通过从 DOM 中完全删除字段，用户已经输入的任何内容都将丢失。如果这是一个错误，那么用户会切换回来并看到丢失的信息并且可能会生气。

严格来说，从可访问性的角度来看，我只会隐藏字段，这样用户就可以在单身和家庭之间切换，而不会丢失任何信息he/she可能很难输入。

如果您使用 CSS 将容器设置为 display:none，您也可以跳过使用 aria-hidden，因为这也会对屏幕阅读器隐藏它。这意味着您不必在切换时同时管理 CSS 和 HTML 属性，您可以只管理其中一个。

哪一个是更好的可访问性解决方案？ aria 隐藏，从 DOM 或其他内容中删除元素

which one is the better solution for accessibillity? aria hidden, remove the element from DOM or something else

javascript

accessibility

wai-aria