E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Karl Brown
Date: Mon, Oct 11 2021 8:10AM
Subject: Highlighting allergens for assistive technology
No previous message | Next message →

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

From: Patrick H. Lauke
Date: Mon, Oct 11 2021 8:43AM
Subject: Re: Highlighting allergens for assistive technology
← Previous message | Next message →

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

From: wolfgang.berndorfer
Date: Mon, Oct 11 2021 10:07AM
Subject: Re: Highlighting allergens for assistive technology
← Previous message | Next message →

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

From: chagnon
Date: Mon, Oct 11 2021 10:07AM
Subject: Re: Highlighting allergens for assistive technology
← Previous message | No next message

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 ADDRESS 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