An ADA issue: products names are truncated on text-only zooming to 200%

[dmitrii-fediuk]

The name of the products gets truncated on text-only zooming to 200%

kitchencollection.com

Code snippet:

<div class="product details product-item-details">…</div>

Rationale

It is required to ensure that visually rendered text, including text-based controls can be scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier.
Users may benefit from scaling all content on the Web page, but text is most critical.

Recommendations

Provide height to the

having class="product details product-item-details" and having class="product name product-item-name" in em unit using css.

[dmitrii-fediuk]

See also: «An ADA issue: star ratings are truncated on text-only zooming to 200%».

[dmitrii-fediuk]

It is a regression of An ADA issue: products names are trunctated in product lists on text-only zooming to 200%