CODEWITHSUNDEEP
htmlaccessibilitysemanticssymbols
Xavier_Ex
Xavier_Ex

Reputation: 8810

How to deal with semantic symbols for accessibility in HTML?

I find this an interesting question, since there hasn't been any resource discussing this matter yet: how do you deal with symbols that has semantic meaning when writing accessible markup?

Examples would be symbols like "&", "$", "*", "-", "~", etc... Maybe the screen reader is smart enough to read "&" as "and", "$" as "dollar" and so on but some symbols don't always have definitive meaning in every scenario. For example, when you see "Jan 2 - 3, 2013" or "Jan 2 ~ 3, 2013" you know the "-" and "~" means "from ... to ...". But how do I encode that meaning into the markup? Should I use the <abbr> tag like Jan 2 <abbr title="to">~</abbr> 3, 2013?

Upvotes: 7

Views: 1697

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

Screen readers have their own ways of reading characters, but they should not be expected to be particularly smart at that. For most special characters, they speak just some name for the character, independently of context and meaning.

There’s not much you can do about it. You could use span markup with title attribute containing an explanation, but it will mostly be ignored. There is somewhat better support for abbr, though it is questionable to use it for special characters. More importantly, as a W3C WAI document says, “JAWS 6.2 and higher and WindowEyes 5.0 and higher support the abbr and acronym elements. They can all be set to speak the title attribute when these elements are encountered, but this is not the default setting and is often not turned on by users.”

So what you can do is to write as naturally as possible, e.g. “January 2–3, 2013” (using an en dash rather than a hyphen, as per English style guides).

Upvotes: 5

zzzzBov
zzzzBov

Reputation: 179046

You don't need to do anything special with special characters. You're used to interpreting symbols for their various meanings, and people using assistive technology are also used to interpreting symbols for their various meanings as well.

The cases where you would need to add additional information would be when you use an image of a symbol, or a non-standard meaning.

Upvotes: 3

Related Questions