[New Tip] Design tip no2 - Example about wai-website HOT 4 OPEN

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>

from wai-website.

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.

from wai-website.

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.

from wai-website.

@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. :)

from wai-website.