以可访问的方式将表单外部的按钮与表单相关联

问题描述

我有以下来自 Vue 组件的简单 html

<div v-if="!answer">
   <h5>Question?</h5>
   <button>Yes</button>
   <button>No</button>
</div>
<form v-if="answer == 'no'">
  <label for="id123">Question 2</label>
  <textarea id="id123"></textarea>
  <button type="submit"></button>
</form>
<div v-if="answer='submitted'">
  Errors or success message from server
</div>

如果答案是“是”，它将被发送到服务器。 如果问题的答案是“否”，则将呈现文本区域，然后将提交表单并将其与答案一起发送到服务器。 然后在这两种情况下，在服务器响应后，都会呈现带有错误或成功消息的 div。

我的问题是，如何将按钮“是”和“否”与表单相关联？所以屏幕阅读器和其他辅助技术知道这与带有 textarea 的表单相关吗？使用一些 aria-* 属性？

或者我应该以其他方式构建 html？

解决方法

aria-controls 应该在一个 GUI 元素和另一个 GUI 元素之间建立关联（例如，与隐藏/显示内容相关联的隐藏/显示链接）。

Support is quite poor and unpredictable，但严格按照规范，这是正确的。但是，我想知道为什么您不只是将按钮放在表单中，因为其中一个按钮会导致表单提交，而另一个只是显示更多表单。

顺便说一句，考虑使用 <output> 作为服务器响应，因为辅助技术会将其视为活动区域，并自动宣布。