[uf-discuss] hCard, i18n and screen readers
Jeff
<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
_______________________________________________
microformats-discuss mailing list
microforma...@microformats.org
http://microformats.org/mailman/listinfo/microformats-discuss
li...@ben-ward.co.uk
> 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.
This is the correct way; you don't need to abuse <abbr> for translation.
value-title was worked out partially for this very issue.
When we wrote up the pattern we ran thorough testing against screen
readers; yes, it's a somewhat ugly markup cludge, but it's all we've got
in HTML for the time being.
Regards,
Ben
Jeff
On Tue, Jan 11, 2011 at 4:32 PM, <li...@ben-ward.co.uk> wrote:
>
> This is the correct way; you don't need to abuse <abbr> for translation.
> value-title was worked out partially for this very issue.
>
> When we wrote up the pattern we ran thorough testing against screen
> readers; yes, it's a somewhat ugly markup cludge, but it's all we've got
> in HTML for the time being.
Doesn't HTML5 microdata use the <meta> element for this purpose?
>
> Regards,
>
> Ben
>
Thanks,
Jeff
Toby Inkster
Jeff <code...@gmail.com> wrote:
> Doesn't HTML5 microdata use the <meta> element for this purpose?
That doesn't really work outside XHTML.
The problem is that the HTML5 parsing algorithm hoists <meta> elements
into the document head. In other words:
<!doctype html>
<head><title>Example</title></head>
<body>
<meta name="foo" content="bar">
<script>
var heads = document.getElementsByTagName('head');
var metas = heads[0].getElementsByTagName('meta');
window.alert(metas[0].name + metas[0].content);
</script>
</body>
Will alert "foobar". The browser assumes that you really meant to put
the <meta> element in the head. This behaviour is inherited from legacy
browsers who made this assumption because <meta> has never been allowed
in the <body>.
RDFa's content attribute is a nice solution for hiding a machine
readable value, and somewhat less of a hack:
e.g.
<p about="#i" rel="foaf:based_near">
I live in <span property="geo:lat_long"
content="50.875627;0.017855">Lewes (50°52′N, 0°1′E)</span>
</p>
--
Toby A Inkster
<mailto:ma...@tobyinkster.co.uk>
<http://tobyinkster.co.uk>