WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Highlighting allergens for assistive technology

for

From: Patrick H. Lauke
Date: Oct 11, 2021 8:43AM

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