Search code examples
htmlaccessibilitysemanticssymbols

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?


Solution

  • 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.