WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Highlighting allergens for assistive technology

for

From: wolfgang.berndorfer@zweiterblick.at
Date: Oct 11, 2021 10:07AM

a) Highlighting only with CSS is a failure of SC 1.3.1.
b) Highlighting with HTML elements <strong> and <em> is probably not enough precision of level. Overall, these tags aren't really supported by SR.
c) If you highlight with a color indicator alone, you fail SC 1.4.1, even if you add an aria-label-value. These textual alternatives are only displayed to special AT.
d) If relevance is indicated by the length of a bar, aria-label with the value to indicate the significance would pass, as long as contrast passes SC 1.4.3.

Wolfgang

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Karl Brown
Sent: Monday, October 11, 2021 4:10 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Highlighting allergens for assistive technology

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