对于可访问性，在 html 中，我应该使用什么来标记非表单控件数据？

Question

w3c 定义标签为：

The <label> element represents a caption in a user interface

接着说

The caption can be associated with a specific form control

严格来说表单控件是按钮、复选框、单选按钮、菜单、文本输入、文件select、隐藏控件或object标签。

我的问题是，为了可访问性，为纯只读信息表示标题的最佳做法是什么。我不想使用输入，我只想显示。我应该只使用标题吗？ ARIA 有什么帮助吗？

例如

<label>Primary question
  <div>What should I use to caption plain old informtion?</div>
</label>
<label>Potential answer
  <div>Just use headings</div>
</label>
<label>Date asked
  <div>10/01/2016</div>
</label>

Answer 1

不知道textarea适不适合？我知道我说过我不想使用输入，但我想知道以下是否是一个好的答案？

label {
  display: block;
  margin-top: 20px;
}

textarea, input {
  display: block;
}

textarea[readonly], input[readonly] {
  border: none;
}

<label>Primary question
  <textarea readonly>What should I use to caption plain old informtion?'</textarea>
</label>
<label>Potential answer
  <textarea readonly>use readonly textareas?</textarea>
</label>
<label>Date asked
  <input readonly value='10/01/2016' />
</label>
<label>Editable comment
  <input/>
</label>

Answer 2

可以使用标题，因为屏幕 reader 支持对它们有好处。但是，标题与其下方内容的关联是隐含的，而不是严格指定的。

从语义 html 的角度来看，定义列表可能更可取。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl 提供了定义列表的示例，其中 dt 和 dd 标记用于关联应该满足您的用例的 key/value 对。不幸的是，屏幕 reader 不一定会公开定义列表的正确语义。

http://snook.ca/archives/html_and_css/definition-lists-v-tables 提供了屏幕 reader 测试示例，发现屏幕 reader 中的定义列表支持不足。该文章建议在 header 单元格上使用具有范围属性的表，作为更好的支持解决方案。

Answer 3

如果我以你为例，你使用了一个完全可以理解的句子。您无需为屏幕设置任何格式reader。您也可以使用特定的标记；这既可以针对有视觉帮助的视力正常的人，也可以针对有特定语调的盲人

Primary question: “What should I use to caption plain old information?”

Potential answer: “Just use plaind old text.”

<strong>Primary question</strong>:
<quote>What should I use to caption plain old information?</quote>
<strong>Potential answer</strong>:
<quote>Just use plaind old text.</quote>

事实上，你的例子中最重要的部分是你应该如何写日期，以便清楚地表明它是 1 月 10 日还是 10 月 1 日。

Date asked: 10/01/2016

这无助于辅助功能，最好的选择是使用完整的正式日期：

Date asked: October <abbr aria-label="First" title="First">1st</abbr>, 2016

在上面的示例中，我明确了“第一个”缩写，同时为这个常用缩写提供了工具提示和 aria-label。

编辑：回答我最喜欢的一个reader，你可以通过参考了解我们为什么选择使用strong元素来标记问题the b element.

的 W3C 文档

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

这里我们要在不是标题的文本中表示重要性。如果问题文本确实传达了文档结构的信息（例如在 FAQ 页面中，这里可能就是这种情况），则可以使用标题来标记问题。但在一般情况下，对于单个元素，这是不适用的。

对于可访问性，在 html 中，我应该使用什么来标记非表单控件数据？

For accessibility, In html what should I use to label non form control data?

html

accessibility