Fatal编程技术网
  • javascript/
  • Javascript 可访问性-分组复选框，其中一个复选框具有相关文本区域

Javascript 可访问性-分组复选框，其中一个复选框具有相关文本区域

javascript html

Javascript 可访问性-分组复选框，其中一个复选框具有相关文本区域,javascript,html,accessibility,screen-readers,semantic-html,Javascript,Html,Accessibility,Screen Readers,Semantic Html,我有一份反馈表，要求用户提供取消的原因，如下所示： 标签{ 显示：块 } 钮扣{ 显示：块； } 取消的原因？ 理由1 理由2 理由3 理由4 其他 提交 您可以在默认情况下隐藏textarea，并让它通过一个小javascript显示，以切换类以将display设置为block <body> <form> <fieldset> <legend> Reason for cancellation? <

我有一份反馈表，要求用户提供取消的原因，如下所示：

标签{
显示：块
}
钮扣{
显示：块；
}

取消的原因？
理由1
理由2
理由3
理由4
其他
提交
您可以在默认情况下隐藏textarea，并让它通过一个小javascript显示，以切换类以将display设置为block

<body>
    <form>
        <fieldset>
        <legend> Reason for cancellation? </legend>
        <label>
            <input type="checkbox"> Reason 1 </input>
        </label>
        <label>
            <input type="checkbox"> Reason 2 </input>
        </label>
        <label>
            <input type="checkbox"> Reason 3 </input>
        </label>
        <label>
            <input type="checkbox"> Reason 4 </input>
        </label>
        <label>
            <input type="checkbox" class="otherCheckbox"> Other </input>
        </label>
        <textarea aria-label="other reason" class="otherTextarea"></textarea>
        <button> Submit </button>
        </fieldset>
    </form>
</body>
<script>
    let otherCheckbox = document.querySelector(".otherCheckbox")
    let otherTextarea = document.querySelector(".otherTextarea")

    otherCheckbox.addEventListener("change", e => {
        otherTextarea.classList.toggle("show")
    })
</script>
关于使用咏叹调的回答 您可以使用aria控件，它似乎非常适合您的情况。 它看起来比aria拥有的更合适，请参见

然而，屏幕阅读器的支持是相当不一致的，即使它被支持，它最终也很少为屏幕阅读器用户所知和使用。 因此，除此之外，最好像您建议的那样在明文中添加精度，例如“其他原因（请在下面解释）”。在复选框的标签中添加该指示是一个不错的选择。 这种增加的精度无论如何都不会对任何人有害，所以你没有理由不这样做

关于用户体验设计的回答 如果您添加了精度“请在下面解释”，则根据复选框启用文本区域实际上没有问题。 简单地说，确保文本区域以选项卡顺序出现在启用复选框之后，以确保用户不会错过它，也不需要来回填写它。 除非你有一个奇怪的设计，通常情况下应该已经是这样了

另一种选择是，在输入原因时自动选中复选框也同样没有问题，但在这样做时，您需要更加谨慎：

  • 不要选中聚焦文本区域的复选框，否则只有键盘用户才会在他们不想的时候触发它，即使是普通用户也可能单击文本区域然后改变主意
  • 在文本区域输入字符时不要选中复选框。这可能是个坏主意，因为我可能会开始输入一些东西，最终清除所有东西并改变主意
当文本区域在非空状态下失去焦点时，如何选中复选框

您可以选择使用aria live=politive显示一个snackbar或类似的内容，告知复选框已自动选中，因为您输入了一些内容。
这种自动修改的东西上的奖励指示在更复杂的形式中会非常有用，但对于这里介绍的您的情况来说，这完全是多余的，因为这种关系是显而易见的。

嘿！谢谢你的回答。我不是在寻找在javascript或html中实现这一功能的方法，我是在寻找可访问性模式，使屏幕阅读器的用户更容易识别文本区域是否与“其他”复选框相关。我只是注意到html是无效的：输入元素有一个空的内容模型。你不应该把他们的标签放在输入标签里面。浏览器是宽容的，不管怎样都会忽略您的结束输入标记，但我建议您纠正它<代码>原因1谢谢@Andy，是的，你说得对。我会修好的。知道为什么输入有一个空的内容模型吗？嗯。我可以想象，这是因为它在value属性中得到了它的内容，这对它施加了比DOM内容更多的约束，比如验证。输入中不会有其他内容，所以它只是空的。 
.otherTextarea {
  display: none;
}
.show {
  display: block;
}