[uf-discuss] hCard, i18n and screen readers

Jeff codedread at gmail.com
Tue Jan 11 10:19:39 PST 2011


I'm new to hCard.  Let's say I have the following markup:

<div>
 <h3>Téléphone Mobile</h3>
 <div>1-408-555-1234</div>
</div>

What is the proper way to mark this up such that it is identified as a
mobile phone number, but it is also i18n friendly (i.e. it does not
require me to put "CELL" in the text contents of the page).

This is what I think is one option:

<div class="tel">
 <h3><abbr class="type" title="cell">Téléphone Mobile</abbr></h3>
 <div class="value">1-408-555-1234</div>
</div>

However, it introduces the semantically incorrect 'abbr' element into
my markup.  It would also introduce an undesirable tooltip when
hovering over Mobile Phone.

Similar questions go for ADR types, gender (when hCard is presumably
updated for vCard4), etc.

Someone just now pointed me to
http://microformats.org/wiki/value-class-pattern#Using_value-title_to_publish_machine-data
which indicates that the following is another option:

<div class="tel">
 <h3 class="type"><span class="value-title"
title="cell"></span>Téléphone Mobile</h3>
 <div class="value">1-408-555-1234</div>
</div>

The extra span seems ... dirty, but I guess it can work.  My only
question is whether screen readers interpret the title of the empty
span in any way.

Thanks,
Jeff



More information about the microformats-discuss mailing list