=====

Question

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

我最初计划对每段内容使用label标记，但据我所知，它们仅用于表单元素。我使用了一系列标题（h2，h3，h4 ...）标记作为内容的主要结构，但我对此感到困惑我应该使用什么来经常需要标记的短内容块，即：工作电话，家庭电话，会员类型。

我应该使用哪个元素来标记单行内容？

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

我嘲笑自己在努力投入到像HTML一样简单的事情上。

Answer 1

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

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

对于其他情况（或者如果你想明确表达上述情况），特别是如果你有一组名称 - 值组，并且你不想用短语自然句子，你可以使用{{ 3}}：

<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>

Answer 2

您问题的最短答案是：使用微数据。

然而，“微观数据”在过去10年中已经发生了很大变化 - 出现了各种标记标准 - 早期的微格式，如hCard，hCalendar＆amp; hRecipe以及之后的更复杂的举措，例如RDFa，schema.org，JSON-LD - 并且都在不断发展和变化。

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

如何使用户代理（如浏览器和屏幕阅读器）立即显示电话号码。
如何（开始）在同一网页上建立不同电话号码之间的语义差异。

<强> 1。在标记中为电话号码添加交互性

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

电子邮件： <a href="mailto:me@example.com">me@example.com</a＆gt;

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

N.B。 tel:链接中所述的号码必须以+开头，紧接着是国际拨号代码。

上面的HTML还会为您标记的电话号码添加互动性。

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

=====

<强> 2。在标记中区分家庭电话号码和工作电话号码

上述HTML无法明确区分工作电话号码和家庭电话号码。

你可以通过使用像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>

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

2 个答案:

=====