[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;
}

[nitedog]

If this is really important than I suggest we make this part of the caption - so, instead of just "Insufficient" we could write "Insufficient - light grey text on white background" or so. I personally don't think it is important what the specific colors are, I never actually noticed them - just the fact the contrast is not sufficient was sufficient information for me to get the point of the tip.

[dboudreau]

As I am looking into the next few tips, something else jumped at me.

I'm not comfortable using <figcaption> the way it is used for the examples either. Instead of using:

<figure>
<figcaption>
<svg class="cross" aria-hidden="true">
<use xlink:href="images/icons.svg#cross">
</svg>
Insufficient
</figcaption>
<div>
<p class="fail">Some people cannot read text if there is not sufficient contrast between the text and background. For others, bright colors (high luminance) are not readable; they need low luminance.</p>
</div>
</figure>

I suggest we build our examples using the following structure:

<figure>
<svg class="cross" aria-hidden="true">
<use xlink:href="images/icons.svg#cross">
</svg>
<figcaption>
Insufficient
</figcaption>
</figure>
<div>
<p class="fail">Some people cannot read text if there is not sufficient contrast between the text and background. For others, bright colors (high luminance) are not readable; they need low luminance.</p>
</div>

Where the content of the <figcaption> element is limited to the text and it sits at the root of the <figure> element, with the SVG file. And the <div> is taken outside of the <figure> element.

Previous comments about making the examples more screen reader friendly still apply.

@yatil - Would you mind weighing on on this please, as I'm not 100% familiar with best practices using figure/figcaption. The current structure doesn't fail the validator, but it looks sloppy to me.

[yatil]

The figcaption describes the other content. In the case of the example above it means that the svg belongs go the insufficient label, that’s why it has an aria-hidden. I think it belongs to the description as it is an icon for the insufficient text. This way it can also be styled as a head for the content. So my vote would be to keep as is, tbh.

[dboudreau]

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

[dboudreau]

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

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

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

[yatil]

Ah, research ;-)

Will you send in a pull request? (If you don’t know what that is or how to do it, I’m happy to help 😀)

[dboudreau]

@yatil I could definitely use your help to do that. Actually, I would LOVE to do it myself (with your support, of course), as opposed to just delegate it to you. :)