javascript - 哪一个是更好的可访问性解决方案？ aria hidden，从 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>

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

当用户在单例和家庭之间切换时，家庭组将有额外的字段，例如“账单支付”部分(合并或不合并)和“您希望如何共享您的数据计划”(是否限制使用)单一表单域

作为一种形式，像“账单支付”这样的元素应该是 aria-hidden true 还是从 DOM 中移除？

Answer 1

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

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

严格从可访问性的 Angular 来看，我只会隐藏字段，以便用户可以在单例和家庭之间切换，而不会丢失他/她可能难以输入的任何信息。

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