[New Tip] Design tip no1 - Example about wai-website HOT 7 OPEN

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>

from wai-website.

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

from wai-website.

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.

from wai-website.

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.

from wai-website.

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.

from wai-website.

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

from wai-website.

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 😀)

from wai-website.