为可访问性标记文本（而不是表单元素）的正确方法？

Question

我正在创建一个内容繁重的页面，该页面被分成几个小块的内容。我希望此内容的结构易于访问。

我最初计划为每个内容使用 label 标签，但据我了解，它们仅适用于表单元素。我在内容的主要结构中使用了一系列 header（h2、h3、h4...）标签，但我有点困惑，因为对于需要标记的频繁短内容块，我应该使用什么，即：工作 phone、家庭 phone、会员类型。

我应该使用什么元素来标记 one-liner 条内容？

我主要关心的是屏幕阅读器如何消化内容。

我在自嘲我为 HTML 这样简单的事情付出了多少努力。

Answer 1

对您问题的最简短回答是：使用 微数据。

然而，"microdata" 在过去 10 年中发生了很大的变化 - 出现了各种标记标准 - 早期的微格式，如 hCard、hCalendar 和 hRecipe 以及后来的，更复杂的举措，如 RDFa、schema.org、JSON-LD - 所有这些都在继续发展和变化。

下面的答案解决了 2 个具体注意事项：

如何让浏览器和屏幕阅读器等用户代理立即看到电话号码。
如何（开始）在同一网页上的不同电话号码之间建立语义区分。

1.在标记中为电话号码添加交互性

为了帮助屏幕阅读器，您可以在 HTML5 中标记电话号码，使用类似于 mailto: 电子邮件地址语法的语法：

邮箱： <a href="mailto:me@example.com">me@example.com</a>

电话： <a href="tel:+14295663674">429-566-3674</a>

N.B。 tel: link 中的号码必须以 + 开头，紧接着是国际区号。

上面的 HTML 还将为您标记的电话号码增加交互性。

例如当您在移动浏览器中单击该号码时，它将使智能手机开始呼叫该号码。当您在台式机或笔记本电脑浏览器中单击该号码时，它还将启用（某些）允许的 VOIP 程序开始呼叫该号码。

=====

2。区分家庭 Phone 号码和工作 Phone 号码加价

上面的HTML不会明确区分工作Phone号码和家庭Phone号码。

您可以开始使用 微数据 词汇表来建立这样的区别，就像在 http://schema.org/:

中找到的那样

<div itemscope itemtype="http://schema.org/Person">
    <h2 itemprop="name">Alice</h2>

    <dl itemprop="contactPoint" itemscope itemtype="http://schema.org/ContactPoint/">
        <dt itemprop="contactType">Home:</dt>
        <dd itemprop="telephone"><a href="tel:+14296774785">429-677-4785</a></dd>

        <dt itemprop="contactType">Work:</dt>
        <dd itemprop="telephone"><a href="tel:+14295663674">429-566-3674</a></dd>
    </dl>
</div>

Answer 2

通常自然语言已经传达了你想说的话，不需要任何特殊元素：

My work phone: <a href="tel:+1-000">000</a>

对于其他情况（或者如果你想使上述情况明确），特别是如果你有一组名称-值组，并且你不想造句自然句，你可以使用dl element:

<dl>
  <dt>Work</dt> <dd><a href="tel:+1-000">000</a></dd>
  <dt>Home</dt> <dd><a href="tel:+1-111">111</a></dd>
</dl>

为可访问性标记文本（而不是表单元素）的正确方法？

Correct way of labeling text (not form element) for accessibility?

html

accessibility

=====