WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: how to write Roman numerals please

for

From: Leif Halvard Silli
Date: Jan 5, 2012 6:48AM

Angela French, Tue, 3 Jan 2012 14:12:22 -0800:
> Could someone please tell me the best practice way for coding roman
> numerals so that screen readers read the as numbers?
> Is using <dfn title="Roman numberal three"> reasonable?

I think that you give too little context for the problem. Do you have
in mind a context where a Roman numeral - e.g. Roman numeral 3 - is
used to distinguish something from 'normal' number 3? If yes, then I
agree that 'Roman numeral 3' seems like a good way to spell it out for
reading. But as others have said, I would then use <abbr> rather than
<dfn>. <dfn> should, according to HTML5, be used only if the paragraph
where <dfn> occurs, is defining what its content - i.e. III - means.
<abbr title="Roman numeral three">III</abbr>

One alternative that hasn't been mentioned is to use an ordered list,
like below. VoiceOver just read the above as it would normally would,
without mentioning that the numbers are Roman, however, which may or
may not be what you want. Code:
<ol type='I'>
<li>This will have Roman numeral one
<li>This will have Roman numeral two
</ol>

As alternative [or expansion of] <abbr>, one could also use an ARIA
attribute. However, VoiceOver's support is lacking, at least on OS X
10.6. Code example:
<span aria-label='Roman numeral 3' >III</span>

Then there is the option of using ruby mark-up:
<ruby><rb>III</rb> <rp>[</rp><rt>Roman numeral
3</rt><rp>]</rp></ruby>

You could add ARIA to the RUBY, like so:
<ruby><rb aria-hidden='true'>III</rb><rp>[</rp>
<rt>Roman numeral 3</rt><rp>]</rp></ruby>

In combination with the above methods, you could use the special
Unicode characters dedicated for Roman numerals - to which degree
screen readers are helped or confused by it, I don't know. But
VoiceOver did not get helped:
<abbr title="Roman numeral 3">&#x2162;</abbr>

Finally, I offer a combination of CSS, ruby mark-up and ARIA attribute,
which actually works as I would like in VoiceOver, with the additional
benefit that it can also help sighted users. I chose to only display
the explaining text only when the user hovers above the numeral.
However, it is a bit complicated and 'involved', so I guess I will hear
lots of critic for that reason ... Explanation: the <rb> element is
made invisible to AT that support ARIA; role=presentation is used to
get rid of VoiceOver's tendency to say 'unknown [element]'. W.r.t. CSS,
then I did not rely on Ruby CSS, but chose to display it as an inline
table.

I present it as a complete HTML document:

<!DOCTYPE html><title>Ruby to rescue</title>
<!--To help IE:--><script>document.createElement("rb")</script>
<style>
rb{text-decoration:underline}
ruby{display:inline-table;vertical-align:bottom;max-width:1em;width:1em;}
ruby:hover rt {background:yellow;font-size:0.5em;}
ruby rt:first-line,
ruby>*:first-child+*:first-line,
ruby>*:first-child+*+*:first-line {letter-spacing:1px;background:orange}
ruby *{border:0;max-width:1em;width:1em;padding:0;}
rb{display:table-cell;}
rp{display:none}
rt{display:table-caption;line-height:0;font-size:0.0em;min-width:12em;font-weight:bold;}
</style></head><body>
<p>With regard to the point at <ruby><rb aria-hidden='true'>IV</rb> <rt
role=presentation>Roman numeral 4</rt></ruby>, then ...
</p></body></html>

With regards,
Leif H Silli