Failure of Success Criterion 1.3.1 due to marking up prices a where the decimal is not shown but the visual presentation indicates the need for a decimal

Status

• New failure

Applicability

HTML

WCAG references

• content-structure-separation-programmatic: SC 1.3.1 Information and Relationships (failure)

Description

The objective of this technique is to describe a failure that occurs when marking up prices in a way that conveys the decimal portion of the price through visual presentation and either omits the decimal or hides the decimal in a way that assistive technologies cannot read.

Users who are unable to view the visual presentation will not be able to determine what the actual price of an item is.

Examples

Omitting the decimal.

The CSS used emphasizes the dollar value of a price and creates the visual appearance of different types of values for different parts of the price. The code does not include a decimal, so an assistive technology would indicate that the price is $825 rather than the intended $8.25.

span {font-size: 100%;}
.price {color: #1D0781;}
.Dollars {position: relative;
display: inline;
font-size: 36px;
font-weight: bold;
line-height: 27px;
vertical-align: top;
margin-right: 1px;}

<div class="price"><span class="CurrencySymbol">US$</span><span class="Dollars">8</span><span class="cents">25</span></div>

Hiding the decimal from assistive technologies

This example includes a decimal but hides the character using display: none or visibility:hidden, resulting in assistive technology reading the price as $425 rather than $4.25.

<div class="price"><span class="CurrencySymbol">US$</span><span class="Dollars">4</span><span class="cents"><span style="display:none;>.</span>25</span></div>

This technique is shown in operation in the [1].

Resources

Related Techniques

• H43

Tests

Procedure

For each price on a page where a decimal is not shown but the visual presentation indicates the need for a decimal

1. Check that the code is missing the decimal mark
2. Check that the decimal mark is contained in the code but is hidden with the display:none; style
3. Check that the decimal mark is contained in the code but is hidden with the visibility:hidden; style

Expected Results

• If #1, #2, or #3 is true then the failure applies