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标记了

dl元素表示由0或0组成的关联列表   更多名称 - 值组（描述列表）。名称 - 值组   由一个或多个名称（dt元素）后跟一个或多个组成   值（dd元素），忽略除dt和dd之外的任何节点   元素。在单个dl元素中，不应超过   每个名字都有一个dt元素。

名称 - 值组可以是术语和定义，元数据主题和   值，问题和答案，或任何其他名称 - 值数据组。

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

Answer 2

最佳布局（至少对于盲人而言）只是向readonly添加input属性。即：

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

我认为这是理想的，因为盲人仍然可以使用快速导航键浏览页面并快速跳转到编辑字段。

Answer 3

您可以查看一些

<div class="thread">
  <p>Can you answer this question?</p>
  <p>No</p>
</div>

CSS

.thread p:first-child
{ 
  font-size:18px;
}
.thread p:last-child
{ 
  font-size:12px;
}

您也可以使用.thread label{ };

不确定这是否有帮助。

辅助功能 - 显示以前表单输入的只读版本

3 个答案: