Search code examples
accessibilitywcagchemistry

Marking signs denoting chemical bonds for assistive technologies

I sometimes have different chemical formulae in text, while there is no problem with formulae like H2SO4 (because it is read in the same way, both by people without visual impairments and by people using screen readers), the problem starts when by convention chemical formulae uses some symbols that are not correctly read by screen readers (and no, I can't avoid using such symbols, I can't use an image with an alt-text etc.). Examples:

  • H2C=CH2 — equals sign that means 'double bond', but is read by screen reader as an equals sign,
  • H2N–CH3 — en dash that means 'single bond', but in not read by a screen reader at all.

I tried to use an abbr with a proper description, but this is faulty, as most screen readers don't read abbr by default. title also does not solve this problem.

How the default meaning of '=' and '–' can be supressed to screen reader users and true meaning be presented?

Solution

  • You can use "hidden" text that is not visually displayed but is read by screen readers and then "hide" the equals sign from the screen reader.

    H2C=CH2 would look like:

    H<sub>2</sub>C
  <span aria-hidden="true">=</span>
  <span class="sr-only">double bond</span>
CH<sub>2</sub>

    (Carriage returns in code above for readability purposes)

    The "=" is contained in a <span> that is aria-hidden so the screen reader will not see it.

    The "double bond" will be read by the screen reader but will not be visible to the sighted users. The "sr-only" class is not anything special. It's just a common name for a class to make visually hidden text. See What is sr-only in Bootstrap 3?

    I'm not a chemistry major so I don't know if it's correct to hear the above formula read as

    "H 2 C double bond C H 2"

    but you can always adjust the text in the "sr-only". Perhaps it should be "double bonded to"?

    Note that some screen readers might adjust the inflection of the speech voice when it encounters subscripts or superscripts but the change might be subtle. Otherwise, most screen readers just read the subscript as if it were a regular number. So H2O would be read the same as H2O.