abbr design pattern

我曾经发布了一篇关于 无障碍的文章 。就我国的Web前端开发现况来看，这篇文章或许过于前卫。

就我所知，我国的残疾人口超过了全国总人口的5%，发达国家一般在10%左右。而对于我国的残疾人使用网络的情况，还没有什么组织能够提供详细的信息，我想这主要因为在这些人群当中使用网络的频繁程度并不如发达国家的残疾人来的频繁。如果你关心过国外的网站前端设计，那么你显然知道很多人都在讨论accessibility，早在HTML从HTML 3.2向HTML 4.01发展的时候，人们就加入了许多accessibility的相关属性。如table元素的属性：

• scope
• abbr
• axis
• headers

这些属性都是为了突出HTML 4.01的无障碍性而添加的。在国外，盲人使用网站是很普遍的。而从我知道的情况来看，即使在上海这样的大都市，我也没有碰到过一个使用Screen Reader来上网的盲人，更别提我国其他地区了。没有用户群导致了我国Web前端无障碍技术的空白，不过我想任何一个前端设计和开发人员都应当有这个概念，即使我们现在搞不到什么Screen Reader来测试网站，也没有专门的残疾人群体为我们提供测试信息。

一大堆题外话后，进入正题。你可能已经知道Microformats中有项abbr design pattern。它主要用于区分machine-readable data和human-readable data。所谓human-readable data就是给人们所使用的User Agent展示信息用的，注意：展示信息不仅仅指在屏幕上画出，User Agent也不仅仅指浏览器。还可能是Screen Reader将信息读出。而machine-readable data是给程序读取而提供功能的。有时这两种信息是同一内容，有时是不同内容。比如hCalendar event中有一项 dtstart 信息。

<div class="vevent">
	<p class="dtstart">2008-05-25T14:00:00+08:00</p>
	<p class="summary">UXday 聚会</p>
</div>

hCalendar规定 dtstart 的内容必须是标准的 ISO 8601 日期，因为该日期需要给机器读取，所以必须遵循一定格式。但是我们也不想在网页上显示 2008-05-25T14:00:00+08:00 这样的日期，因此我们就需要使用abbr design pattern，即将machine-readable data和human-readable data分开。

<abbr class="dtstart" title="2008-05-25T14:00:00+08:00">下午2:00 2008年5月25日</abbr>

Microformats规定，当属性用于 abbr 元素时，属性的内容则由 title 属性的值提供，而元素内容作为human-readable data，parser应当读取 title 属性的值，而不是元素内容。

但是这一design pattern产生了一个无障碍问题，Screen Reader会读取 abbr 元素的 title 属性，因为一般该属性用于提供一个简写的全称。然而在使用该design pattern，盲人们将会听到一连串的晦涩的日期数据 2008-05-25T14:00:00+08:00 ，这就是abbr design pattern的无障碍问题。官方维基给出的 解决方案 是这样的：

<p class="dtstart">下午2:00 2008年5月25日 <span class="value">2008-05-25T14:00:00+08:00</span></p>

然后我们需要禁止 2008-05-25T14:00:00+08:00 的显示

.dtstart .value{
	display: none;
}

display:none 的内容Screen Reader不会读出，所以该解决方案能够解决一定问题，但看起来不太完美。

事实上，HTML4.01没有提供任何能够标识用于parser读取的信息的属性，所以这个问题想要非常完美的在HTML4.01中解决是很困难的。不过HTML5提供了可用的解决方案。所以希望HTML5能够在2010年正式推出。

类别标签 : accessibility, microformats