[New Tip] Design tip no3 - Example

[dboudreau]

Reference: http://w3c.github.io/wai-quick-start/designing.html#ensure-that-interactive-elements-are-easy-to-identify

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

<figcaption>
<svg class="tick" aria-hidden="true">
<use xlink:href="images/icons.svg#tick">
</svg>
Style links to stand out from text
</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>
Style links to stand out from text
</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;
}

The same could be applied to the following examples:

<figcaption>
<svg class="tick" aria-hidden="true">
<use xlink:href="images/icons.svg#tick">
</svg>
Mouse hover style
</figcaption>

<figcaption>
<svg class="tick" aria-hidden="true">
<use xlink:href="images/icons.svg#tick">
</svg>
Keyboard focus style
</figcaption>

<figcaption>
<svg class="tick" aria-hidden="true">
<use xlink:href="images/icons.svg#tick">
</svg>
Touch or click style
</figcaption>