html - 辅助功能 - 显示上一个表单输入的只读版本

Question

我们目前正在努力改进以前编写的网站的可访问性。我们有多种形式可以像这样显示问题/答案:

<label for="answer1">Can you answer this question?</label>
<input type="text" id="answer1" />

(这些可以是相当长的表格，有很多问题)。然后我们有一组页面显示您之前为这些表单输入和保存的数据(使用相同的布局，实际上只是用文本替换输入，如下所示:

<label>Can you answer this question?</label>
<span class="answer">No</span>

现在，当我从可访问性的角度评估此页面时，由于标签未与控件相关联，我发现了一些违规行为。我理解这一点，我想知道布局这些页面的最佳方式是什么？从逻辑上讲(至少在我看来)，这仍然是答案的标签，但我知道从可访问性的角度来看，这不是标签的目的。

理想情况下，我想继续使用标签，因为它不再需要对我们使用的任何内容进行重复样式设置，但是我认为我们可能需要仔细检查并将其更改为如下所示:

<span class="question">Can you answer this question?</span>
<span class="answer">No</span>

我找不到任何关于此的具体建议(或者至少无法缩小搜索范围以返回相关结果)。我正在寻找一种以最易于理解的方式来展示它的方法吗？

Answer 1

我会用 definition list 来标记它:

The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

<h1>Your Answers</h1>
<dl>
  <dt>Can you answer this question?</dt>
  <dd class="answer">No</dd>
</dl>