[New Tip] Design tip no1 - Example

[dboudreau]

Reference: http://w3c.github.io/wai-quick-start/designing.html#provide-sufficient-contrast-between-foreground-and-background

I suggest we add additional information for screen reader users to understand the examples better. For example, the <figcaption> text for the insufficient example currently reads:

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

I suggest we provide additional context:

<figcaption>
<svg class="cross" aria-hidden="true">
<use xlink:href="images/icons.svg#cross">
</svg>
Insufficient
<div class="hidden-accessible">This example shows light grey text on a white background.</div>
</figcaption>

Likewise, the other example for sufficient contrast currently reads:

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

I suggest we provide additional context:

<figcaption>
<svg class="tick" aria-hidden="true">
<use xlink:href="images/icons.svg#tick">
</svg>
Sufficient
<div class="hidden-accessible">This example shows light grey text on a white background.</div>
</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;
}