abbr-design-pattern: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(entry-title, auto-toc, rewrite to use value class pattern, time, etc.)
(fix typos, add more HTML5 time examples, fix example styling for bad/good/better)
Line 1: Line 1:
<entry-title> abbr design pattern </entry-title>
<entry-title> abbr design pattern </entry-title>
== Purpose ==
== Purpose ==
Use the [[abbr-design-pattern]] when you have localized, language, or design-specific human readable information that you want to markup and also provide a more globally human and machine readable alternative.
Use the [[abbr-design-pattern]] when you have localized, language, or design-specific human readable information that you want to markup and also provide a more globally human and machine readable alternative.


* Authors {{mustnot}} use the [[abbr-design-pattern]] to re-encode human text or to hide data
* Authors {{mustnot}} use the [[abbr-design-pattern]] to hide data.
* The contents of the <code>&lt;abbr></code> tag's <code>title</code> attribute {{must}} be both human-readable and human-listenable (e.g. for screenreaders), and {{should}} use a globally/internally human readable format.
* The contents of the <code>&lt;abbr></code> tag's <code>title</code> attribute {{must}} be both human-readable and human-listenable (e.g. for screenreaders), and {{should}} use a globally/internationally human readable format.
* For dates and times authors {{should}} use the HTML5 <code>&lt;time></time> element instead of <code>&lt;abbr></code>. (ed: Once common tools like [[chrome-extensions]], [[h2vx]], [[operator]] all support the HTML5 time element, let's upgrade this statement to a {{{must}}}).
* For dates and times, authors {{should}} use the HTML5 <code>&lt;time></code> element instead of <code>&lt;abbr></code>. (ed: Once common tools like [[chrome-extensions]], [[h2vx]], [[operator]] all support the HTML5 time element, let's upgrade this statement to a {{must}}).


== How to use it ==
== How to use it ==
Line 22: Line 21:


<div style="background:#EEE">
<div style="background:#EEE">
<source lang=html4strict>
<source lang=html4strict style="background:none">
The party is on the 10th.
The party is on the 10th.
</source>
</source>
Line 29: Line 28:
After:
After:


<div style="background:#FFE">
<div style="background:#FFE;border:solid .17em yellow">
<source lang=html4strict>
<source lang=html4strict>
The party</span> is on  
The party is on <abbr class="dtstart" title="2005-10-10">the 10th</abbr>.
<abbr class="dtstart" title="2005-10-10">the 10th</abbr>.
</source>
</source>
</div>
</div>
Line 38: Line 36:
Better (with HTML5 time instead of abbr)
Better (with HTML5 time instead of abbr)


<div style="background:#EFE">
<div style="background:#EFE;border:double .5em green">
<source lang=html4strict>
<source lang=html4strict>
The party is on  
The party is on <time class="dtstart" datetime="2005-10-10">the 10th</time>.
<time class="dtstart" datetime="2005-10-10">the 10th</time>.
</source>
</source>
</div>
</div>


You could also use the abbr-design-pattern to markup colloquial time references, but those should also use the HTML5 time element
You could also use the abbr-design-pattern to markup colloquial time references, but those should also use the HTML5 time element, e.g.


Before:
Before:
Line 57: Line 54:
After:
After:


<div style="background:#FFE">
<div style="background:#FFE;border:solid .17em yellow">
<source lang=html4strict>
<source lang=html4strict>
The party is at <abbr class="dtstart" title="10:00">10 o'clock</abbr>.
The party is at <abbr class="dtstart" title="10:00">10 o'clock</abbr>.
Line 65: Line 62:
Better (with HTML5 time instead of abbr)
Better (with HTML5 time instead of abbr)


<div style="background:#EFE">
<div style="background:#EFE;border:double .5em green">
<source lang=html4strict>
<source lang=html4strict>
The party is at <time class="dtstart" datetime="10:00">10 o'clock</abbr>.
The party is at <time class="dtstart" datetime="10:00">10 o'clock</abbr>.
Line 75: Line 72:
Note that the following are all equivalent, to a microformat parser:
Note that the following are all equivalent, to a microformat parser:


<div style="background:#FFE">
<div style="background:#FFE;border:solid .17em yellow">
<source lang="html4strict">
<source lang="html4strict">
<span class="dtstart">2007-05-01</span>
<span class="dtstart">2007-05-01</span>
Line 109: Line 106:
Better (with HTML5 time element)
Better (with HTML5 time element)


<div style="background:#EFE">
<div style="background:#EFE;border:double .5em green">
<source lang="html4strict">
<source lang="html4strict">
<time class="dtstart">2007-05-01</time>
<time class="dtstart">2007-05-01</time>
Line 133: Line 130:
<time class="dtstart" datetime="2007-05-01" lang="ES">1 de mayo, 2007</time>
<time class="dtstart" datetime="2007-05-01" lang="ES">1 de mayo, 2007</time>


<abbr class="dtstart" datetime="2007-05-01">1 May</abbr>
<time class="dtstart" datetime="2007-05-01">1 May</time>
</source>
</source>
</div>
</div>
Line 142: Line 139:
Authors {{mustnot}} use the <code>abbr</code> element as shown in these examples, as either the element text or the <code>title</code> attribute text are not easily human readable.
Authors {{mustnot}} use the <code>abbr</code> element as shown in these examples, as either the element text or the <code>title</code> attribute text are not easily human readable.


<div style="background:#FEE">
<div style="background:#FEE;border:dashed .17em red">
<source lang=html4strict>
<source lang=html4strict>
<span class="dtstart">20070501</span>  
<span class="dtstart">20070501</span>  
Line 156: Line 153:
<abbr class="dtstart" title="20070501" lang="ES">1 de mayo, 2007</abbr>
<abbr class="dtstart" title="20070501" lang="ES">1 de mayo, 2007</abbr>
<abbr class="dtstart" title="20070501">1 May</abbr>
<abbr class="dtstart" title="20070501">1 May</abbr>
<!-- lack of dashes in "20070501" reads like a large number, not a date -->
</source>
</source>
</div>
</div>
The lack of dashes in "20070501" makes it read like a large number, not a date, both when viewing it, and when listening to it being read by a screenreader.


== Discussion ==
== Discussion ==
Line 168: Line 164:
E.g. Authors {{must}} avoid doing this:
E.g. Authors {{must}} avoid doing this:


<div style="background:#FEE">
<div style="background:#FEE;border:dashed .17em red">
<source lang=html4strict>
<source lang=html4strict>
<abbr class="dtstart" title="20051012T11:10-0100">10 past 11 o'clock on the 12th</abbr>
<abbr class="dtstart" title="20051012T11:10-0100">10 past 11 o'clock on the 12th</abbr>
Line 176: Line 172:
Ideally use the HTML5 time element:
Ideally use the HTML5 time element:


<div style="background:#FEE">
<div style="background:#EFE;border:double .5em green">
<source lang=html4strict>
<source lang=html4strict>
<time class="dtstart" datetime="2005-10-12T11:10-0100">10 past 11 o'clock on the 12th</time>
<time class="dtstart" datetime="2005-10-12T11:10-0100">10 past 11 o'clock on the 12th</time>
Line 186: Line 182:
Alternatively, if the microformats tools you're using don't support HTML5 (yet), you may use the [[value-class-pattern]] with the [[abbr-design-pattern]]:
Alternatively, if the microformats tools you're using don't support HTML5 (yet), you may use the [[value-class-pattern]] with the [[abbr-design-pattern]]:


<div style="background:#FFE">
<div style="background:#FFE;border:solid .17em yellow">
<source lang=html4strict>
<source lang=html4strict>
<span class="dtstart">
<span class="dtstart">
Line 202: Line 198:
</source>
</source>


This use is discouraged under the [http://c2.com/cgi-bin/wiki?DontRepeatYourself Don't Repeat Yourself principle], as it is a case of *more* information being less visibly present, namely,  
This use is discouraged under the [http://c2.com/cgi-bin/wiki?DontRepeatYourself Don't Repeat Yourself principle], as it is a case of *more* information being less visibly present, namely, the family name in this case.  
the last name in this case.  
If someone is not willing to make some information visible, then we
If someone is not willing to make some information visible, then we
shouldn't be encouraging them to store that information invisibly or less visibly,  
shouldn't be encouraging them to store that information invisibly or less visibly,  
Line 220: Line 215:
If screen readers are unable to turn title content into something comprehensible, this will lead to accessibility failures. Here is a bad example:
If screen readers are unable to turn title content into something comprehensible, this will lead to accessibility failures. Here is a bad example:


<div style="background:#FEE">
<div style="background:#FEE;border:dashed .17em red">
<source lang=html4strict>
<source lang=html4strict>
we have a party in
we're having a party on
<abbr class="dtstart" title="20070312T1700-06">
<abbr class="dtstart" title="20070312T1700-06">
  March 12, 2007 at 5 PM
  March 12, 2007 at 5 PM
Line 232: Line 227:


<pre>
<pre>
we have a party at Twenty million seventy-thousand three-hundred twelve tee seventeen-hundred dash zero six.  
we're having a party on Twenty million seventy-thousand three-hundred twelve tee seventeen-hundred dash zero six.  
</pre>
</pre>


The [http://www.webstandards.org/2007/04/27/haccessibility/ accessibility task force] from webstandards.org recommended:
The [http://www.webstandards.org/2007/04/27/haccessibility/ accessibility task force] from webstandards.org recommended:


<div style="background:#EEE">
<div style="background:#EEE">
Line 243: Line 238:
</span>
</span>
</source>
</source>
<div>
</div>


or
or
Line 253: Line 248:
  <span class="value" title="20070312T1700-06"></span>
  <span class="value" title="20070312T1700-06"></span>
</span>
</span>
</pre>
</source>
</div>
 
But both these approaches are problematic due to the title attribute being not easily human readable/verifiable because of:
* unhyphenated date, e.g. bad: 20070312; good:2007-03-12
* uncoloned time, e.g. bad: 1700; good: 17:00
* timezone offset without minutes, e.g. bad: -06; better: -0600
* combining date, time, and timezone into a single string without human-friendly separators
 
However, based on this input and subsequent research into better alternatives, the microformats community developed the [[value-class-pattern]] with the following two alternatives:
 
<div style="background:#FFE;border:solid .17em yellow">
<source lang=html4strict>
<span class="dtstart">
<abbr class="value" title="2007-03-12">March 12, 2007</abbr>
at <abbr class="value" title="17:00">5 PM</abbr>,
<abbr class="value" title="-0600">Central Standard Time</abbr>
</span>
</source>
</div>
 
or


But this approach is problematic due to the unhyphenated date and combined datetime in the title attribute being not easily human readable/verifiable.
<div style="background:#FFE;border:solid .17em yellow">
<source lang=html4strict>
<span class="dtstart"><span class="value-title" title="2007-03-12T17:00-0600"></span>
March 12, 2007 at 5 PM, Central Standard Time
</span>
</source>
</div>


However, based on this input and subsequent research into better alternatives, the microformats community developed the [[value-class-pattern]] :
And again, the even better alternative is to use the HTML5 time element:


(to be filled in)
<div style="background:#EFE;border:double .5em green">
<source lang=html4strict>
<time class="dtstart" datetime="2007-03-12 17:00-0600">
March 12, 2007 at 5 PM, Central Standard Time
</time>
</source>
</div>


== See Also ==
== See Also ==
* [[abbr-design-pattern-issues]]
* [[abbr-design-pattern-issues]]
* [[Main_Page#Design_Patterns|All microformat design patterns]]
* [[Main_Page#Design_Patterns|All microformat design patterns]]
* [http://microformats.org/discuss/mail/microformats-discuss/2005-October/001277.html discussion in microformats-discuss]
* [[datetime-design-pattern]] uses [[abbr-design-pattern]]
* [[datetime-design-pattern]] uses [[abbr-design-pattern]]
* [http://www.w3.org/TR/REC-html40/struct/text.html#edef-ABBR HTML 4.01 definition]
* [http://www.w3.org/TR/REC-html40/struct/text.html#edef-ABBR HTML 4.01 definition]

Revision as of 02:15, 18 December 2011

<entry-title> abbr design pattern </entry-title>

Purpose

Use the abbr-design-pattern when you have localized, language, or design-specific human readable information that you want to markup and also provide a more globally human and machine readable alternative.

  • Authors MUST NOT use the abbr-design-pattern to hide data.
  • The contents of the <abbr> tag's title attribute MUST be both human-readable and human-listenable (e.g. for screenreaders), and SHOULD use a globally/internationally human readable format.
  • For dates and times, authors SHOULD use the HTML5 <time> element instead of <abbr>. (ed: Once common tools like chrome-extensions, h2vx, operator all support the HTML5 time element, let's upgrade this statement to a MUST).

How to use it

  • enclose the preferred local human readable text that you want to make globally human & machine readable with <abbr>
  • add the relevant microformats property names to the <abbr> tag's class attribute
  • add a title attribute to the abbr element with the globally human & machine readable data as the value
  • The end result MUST be human readable & listenable, when reading/speaking the abbr element's contents and its surroundings and when reading/speaking the abbr element's title attribute with its surrounding text.

Example

The date-design-pattern formally encodes globally human readable ISO dates into an abbr element. Per the documentation/research on the date-design-pattern page, ISO8601 dates, e.g. of the form YYYY-MM-DD, are the most globally/internationally date format.

Note: that dates and times SHOULD be marked up with the HTML5 time element. These examples illustrate both span/abbr markup for pre-HTML5 tools, and time element support for HTML5-capable tools.

Before: 

The party is on the 10th.

After: 

The party is on <abbr class="dtstart" title="2005-10-10">the 10th</abbr>.

Better (with HTML5 time instead of abbr) 

The party is on <time class="dtstart" datetime="2005-10-10">the 10th</time>.

You could also use the abbr-design-pattern to markup colloquial time references, but those should also use the HTML5 time element, e.g.

Before: 

The party is at 10 o'clock.

After: 

The party is at <abbr class="dtstart" title="10:00">10 o'clock</abbr>.

Better (with HTML5 time instead of abbr) 

The party is at <time class="dtstart" datetime="10:00">10 o'clock</abbr>.


Alternative presentations

Note that the following are all equivalent, to a microformat parser: 

<span class="dtstart">2007-05-01</span>

<abbr class="dtstart" title="2007-05-01">1 May 2007</abbr>

<abbr class="dtstart" title="2007-05-01">1st May 2007</abbr>.

<abbr class="dtstart" title="2007-05-01">May 1st 2007</abbr>.

<abbr class="dtstart" title="2007-05-01">The first of May, 2007</abbr>.

<abbr class="dtstart" title="2007-05-01">2007-05-01</abbr>.

<abbr class="dtstart" title="2007-05-01">Tuesday, 1 May 2007</abbr>

<abbr class="dtstart" title="2007-05-01">2007, day 121</abbr>

<abbr class="dtstart" title="2007-05-01">May Day, 2007</abbr>

<abbr class="dtstart" title="2007-05-01" lang="FR">1er mai, 2007</abbr>

<abbr class="dtstart" title="2007-05-01" lang="ES">1 de mayo, 2007</abbr>

and the following may be used in, say, a list, table, or page, headed "2007": 

<abbr class="dtstart" title="2007-05-01">1 May</abbr>

Better (with HTML5 time element) 

<time class="dtstart">2007-05-01</time>

<time class="dtstart" datetime="2007-05-01">1 May 2007</time>

<time class="dtstart" datetime="2007-05-01">1st May 2007</time>.

<time class="dtstart" datetime="2007-05-01">May 1st 2007</time>.

<time class="dtstart" datetime="2007-05-01">The first of May, 2007</time>.

<time class="dtstart" datetime="2007-05-01">2007-05-01</time>.

<time class="dtstart" datetime="2007-05-01">Tuesday, 1 May 2007</time>

<time class="dtstart" datetime="2007-05-01">2007, day 121</time>

<time class="dtstart" datetime="2007-05-01">May Day, 2007</time>

<time class="dtstart" datetime="2007-05-01" lang="FR">1er mai, 2007</time>

<time class="dtstart" datetime="2007-05-01" lang="ES">1 de mayo, 2007</time>

<time class="dtstart" datetime="2007-05-01">1 May</time>

anti-patterns

These are all past examples that are usages to avoid.

Authors MUST NOT use the abbr element as shown in these examples, as either the element text or the title attribute text are not easily human readable. 

<span class="dtstart">20070501</span> 
<abbr class="dtstart" title="20070501">1 May 2007</abbr>
<abbr class="dtstart" title="20070501">1st May 2007</abbr>.
<abbr class="dtstart" title="20070501">May 1st 2007</abbr>.
<abbr class="dtstart" title="20070501">The first of May, 2007</abbr>.
<abbr class="dtstart" title="20070501">2007-05-01</abbr>.
<abbr class="dtstart" title="20070501">Tuesday, 1 May 2007</abbr>
<abbr class="dtstart" title="20070501">2007, day 121</abbr>
<abbr class="dtstart" title="20070501">May Day, 2007</abbr>
<abbr class="dtstart" title="20070501" lang="FR">1er mai, 2007</abbr>
<abbr class="dtstart" title="20070501" lang="ES">1 de mayo, 2007</abbr>
<abbr class="dtstart" title="20070501">1 May</abbr>

The lack of dashes in "20070501" makes it read like a large number, not a date, both when viewing it, and when listening to it being read by a screenreader.

Discussion

about datetimes

Avoid using the abbr-design-pattern for datetimes.

E.g. Authors MUST avoid doing this: 

<abbr class="dtstart" title="20051012T11:10-0100">10 past 11 o'clock on the 12th</abbr>

Ideally use the HTML5 time element: 

<time class="dtstart" datetime="2005-10-12T11:10-0100">10 past 11 o'clock on the 12th</time>

Note the use of the hyphenated date to make it more human readable, as the more readable that even machine data is made, the greater the chance that a human will be able to accurately check it and verify that it matches the locale/language-specific contents of the time element.

Alternatively, if the microformats tools you're using don't support HTML5 (yet), you may use the value-class-pattern with the abbr-design-pattern: 

<span class="dtstart">
 <abbr class="value" title="11:10">10 past 11 o'clock</abbr> on 
 <abbr class="value" title="2005-10-10">the 10th</abbr>
</span>

informal names

Using ABBR to encode more formal human data around something less formal: 

<abbr class="author" title="Danny Ayers">Danny</abbr>

This use is discouraged under the Don't Repeat Yourself principle, as it is a case of *more* information being less visibly present, namely, the family name in this case. If someone is not willing to make some information visible, then we shouldn't be encouraging them to store that information invisibly or less visibly, for all the same reasons that invisible metadata is bad/futile in the first place."

screen readers

The title attribute of the <abbr> tag MUST always be human readable and speakable.

Screenreaders such as JAWS and others which use title attributes from abbr, and when used properly (as in this example below from the WCAG group), pronounce words which would otherwise be unreadable or confusing. 

<p>Sugar is commonly sold in 5 <abbr title="pound">lb.<abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>

If screen readers are unable to turn title content into something comprehensible, this will lead to accessibility failures. Here is a bad example: 

we're having a party on 
<abbr class="dtstart" title="20070312T1700-06">
 March 12, 2007 at 5 PM
</abbr>

would be read by Jaws as 

we're having a party on Twenty million seventy-thousand three-hundred twelve tee seventeen-hundred dash zero six.

The accessibility task force from webstandards.org recommended: 

<span class="dtstart" title="20070312T1700-06">
 March 12, 2007 at 5 PM, Central Standard Time
</span>

or 

<span class="dtstart">
 March 12, 2007 at 5 PM, Central Standard Time
 <span class="value" title="20070312T1700-06"></span>
</span>

But both these approaches are problematic due to the title attribute being not easily human readable/verifiable because of:

  • unhyphenated date, e.g. bad: 20070312; good:2007-03-12
  • uncoloned time, e.g. bad: 1700; good: 17:00
  • timezone offset without minutes, e.g. bad: -06; better: -0600
  • combining date, time, and timezone into a single string without human-friendly separators

However, based on this input and subsequent research into better alternatives, the microformats community developed the value-class-pattern with the following two alternatives: 

<span class="dtstart">
<abbr class="value" title="2007-03-12">March 12, 2007</abbr>
 at <abbr class="value" title="17:00">5 PM</abbr>, 
<abbr class="value" title="-0600">Central Standard Time</abbr>
</span>

or 

<span class="dtstart"><span class="value-title" title="2007-03-12T17:00-0600"></span>
 March 12, 2007 at 5 PM, Central Standard Time
</span>

And again, the even better alternative is to use the HTML5 time element: 

<time class="dtstart" datetime="2007-03-12 17:00-0600">
 March 12, 2007 at 5 PM, Central Standard Time
</time>

See Also

Retrieved from "http://microformats.org/wiki/index.php?title=abbr-design-pattern&oldid=45128"