Product variations invisible (not read / selectable) for screen readers

[Nadine]

Nadine

March 11, 2021 at 3:12 am

Hi,

a customer of us, who is blind, called us and told us that on product pages the variations of a product would not be read by his screen reader. We digged a bit through the markup and css and I think we found the culprit:

On a product page, each input[type=radio] has a css with:

.variations .kad_radio_variations label input[type="radio"] {
height: 0;
overflow: hidden;
z-index: -10000;
position: absolute;
visibility: hidden;
float: none;
}

The visibility: hidden; part means that the option is not read aloud for screen readers and users of screenreaders are not able to select a product variation.

There seem to be better technics for visually hidding things, but still have them available for screenreaders. Here is a good summary I think: *Login to see link