[New Tip] Design tip no2 - Example

[dboudreau]

Reference: http://w3c.github.io/wai-quick-start/designing.html#dont-use-color-alone-to-convey-information

I suggest we add additional information for screen reader users to understand the examples better. Currently, the <figcaption> text for the failed examples read:

<figcaption>
<svg class="cross" aria-hidden="true">
<use xlink:href="images/icons.svg#cross">
</svg>
Color only
</figcaption>

I suggest we provide additional context:

<figcaption>
<svg class="cross" aria-hidden="true">
<use xlink:href="images/icons.svg#cross">
</svg>
<div class="hidden-accessible">Bad example using</div>
Color only
</figcaption>

Likewise, the examples for valid implementation read:

<figcaption>
<svg class="tick" aria-hidden="true">
<use xlink:href="images/icons.svg#tick">
</svg>
Color and symbol
</figcaption>

I suggest we provide additional context:

<figcaption>
<svg class="tick" aria-hidden="true">
<use xlink:href="images/icons.svg#tick">
</svg>
<div class="hidden-accessible">Good example using</div>
Color and symbol
</figcaption>

Where "hidden-accessible" would refer to the following CSS rules:

.hidden-accessible {
     border: 0; 
     clip: rect(0 0 0 0); 
     height: 1px; 
     width: 1px; 
     margin: -1px; 
     padding: 0; 
     overflow: hidden; 
     position: absolute;
}

[nitedog]

I agree that these icons (check and cross) are informative and need text alternatives. Not sure what the best way to provide such alternatives is, though. In any case I think the alternatives should be much briefer, maybe just "Correct:" and "Incorrect:" or so.

[dboudreau]

Following the same logic as ticket #744...

<figure class="reference fail">
<figcaption>
<svg class="cross" aria-hidden="true">
<use xlink:href="images/icons.svg#cross">
</svg>
Color only
</figcaption>
<div>
<form action="#" method="post">...</form>
</div>
</figure>

Should be changed to:

<figure class="reference fail">
<svg class="cross" aria-hidden="true">
<use xlink:href="images/icons.svg#cross">
</svg>
<figcaption>
Color only
</figcaption>
</figure>
<div>
<form action="#" method="post">...</form>
</div>

Applies to both examples and other comments about providing more meaningful instructions to screen reader users still apply.

[dboudreau]

@yatil - As for #744, after having discussed with @iamjolly and doing a little bit of research, it turns out that using the figcaption element in this way is acceptable, so I withdraw the last comment. :)

[dboudreau]

Based on @nitedog's comment in #744, then I suggest we make the following changes.

<figcaption>
<svg class="cross" aria-hidden="true">
<use xlink:href="images/icons.svg#cross">
</svg>
Insufficient example using color only
</figcaption>

<figcaption>
<svg class="tick" aria-hidden="true">
<use xlink:href="images/icons.svg#tick">
</svg>
Sufficient example using color and symbol
</figcaption>