WebAIM - Web Accessibility In Mind

E-mail List Archives

Highlighting allergens for assistive technology

for

From: Karl Brown
Date: Oct 11, 2021 8:10AM

A friend of mine had a massive allergic reaction to some skincare products.
She checked the website and the allergens aren't highlighted at all in the
lengthy ingredients list.

It got me thinking. As well as adding CSS to emphasize the allergens (maybe
wrapping a span with the class of "allergen"), what would be the best way
to let assistive technology know something is an allergen and what kind of
allergen it is?

I was thinking aria-label, but I'm wondering if a span to visibly hide text
would be better. Or is there an even better solution?

--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015