WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Highlighting allergens for assistive technology

for

From: chagnon@pubcom.com
Date: Oct 11, 2021 10:07AM

Patrick beat me to it: why do it with CSS and other hidden labels?

In this case, it's about how the content is presented to all users, not just those using screen readers. I have severe allergic reactions to some ingredients, like your friend, so doing something with CSS wouldn't help a sighted user like me.

What the manufacturer could do is place a statement after the ingredient list, Known Allergens: ABC, XYZ, etc. We find similar labeling on food products: Contains wheat, soy, dairy, etc.

However, I doubt any skincare manufacturer would ever do this because most commercial personal care products today contain common allergens and carcinogens, too. Who's going to advertise that they cause rashes and reactions, exacerbate psoriasis and eczema, or cause skin cancer?

Best advice for your friend: shop for skincare products at a reputable health food store. They usually have trained product buyers who don't allow products with known allergens and carcinogens on the store's shelves. Personally, this has kept me safe for 30+ years, and I have severe reactions to some ingredients.

— — —
Bevi Chagnon | Designer, Accessibility Technician | <EMAIL REMOVED>
— — —
PubCom: Technologists for Accessible Design + Publishing
consulting ' training ' development ' design ' sec. 508 services
Upcoming classes at www.PubCom.com/classes
— — —
Latest blog-newsletter – Simple Guide to Writing Alt-Text

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Patrick H. Lauke
Sent: Monday, October 11, 2021 10:43 AM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Highlighting allergens for assistive technology

On 11/10/2021 15:10, Karl Brown wrote:
> 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?

Initial reaction here: why look for a solution that will only benefit assistive technology/screen reader users? Surely denoting allergens is something that will benefit all users. As such, instead of looking at some visually hidden text or label, I'd be much more in favour of either having actual text explicitly state when an ingredient is a known allergen, or at the very least a clear (though that'll be tough to nail
down) image/icon with appropriate text alternative.

Note that just adding aria-label on elements like <span> will have mixed results, at best. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke