search

kitchencollection-com / core

A custom module for kitchencollection.com (Magento 2)
https://upwork.com/fl/mage2pro
0 stars 0 forks source link

An ADA issue: «6. Content not read correctly by screen reader» #2

Closed dmitrii-fediuk closed 6 years ago

dmitrii-fediuk commented 6 years ago

upwork.com/ab/f/contracts/20805329

Screen reader reads strike-through price similarly as it reads the discounted price and does not reads the older price differently. Hence, the user is unable to differentiate between the two prices.

kitchencollection.com/sale 02

Code snippet

<div
    class="price-box price-final_price"
    data-role="priceBox"
    data-product-id="8123"
>
    <span class="special-price sale-clearance-price">
        <span class="price-container price-final_price tax weee">
            <span class="price-label">Special Price</span>
            <span
                id="old-price-8123-final_price"
                data-price-amount="8.97"
                data-price-type="finalPrice"
                class="price-wrapper sale-clearanceprice"
            >
                <span class="price">$8.97</span>
            </span>
        </span>
    </span>
    <span class="old-price">
        <span class="price-container price-final_price tax weee">
            <span class="pricelabel">was</span> 
            <span
                id="old-price-8123-final_price"
                data-price-amount="11.99"
                dataprice-type="oldPrice" 
                class="price-wrapper"
            >
                <span class="price">$11.99</span>
            </span>
        </span>
    </span>
</div>

Rationale

Exact information should be conveyed to the screen reader users or else they will be confused or misguided.

Recommendations

Ensure that the older price text is provided along with strike-through price in visually hidden class.

dmitrii-fediuk commented 6 years ago

Fixed in 0.0.3.