Results of Chrome Accessibility Audit about pattern-library

[Wilto]

Ah man, this is great. Downloading that extension as we speak—I didn’t know it covered contrast.

• Controls and media elements should have labels - @maban, can you grab this one? That’s just the pattern library nav select, I think.
• Text elements should have a reasonable contrast ratio - Think we’re just using the Prism.js defaults theme here, yeah? @hellogeri, does the syntax highlighting on http://patterns.alistapart.com/#code-block throw any red flags for you? Or, y’know, green flags. (It could be either, is the joke. (Because deuteranopia.))
• Meaningful images should not be used in element backgrounds - these labels should be backed-up by real text, which is a change for the main site as well. cc @murtaugh.
• These elements are focusable but either invisible or obscured by another element - I think this is okay, given the context in which we’re doing it.

[maban]

Can do, bro.

[murtaugh]

There are a couple places where we're doing image replacement poorly (that search input being one of them).

What's the most accessible and friendly was to replace an SVG for non-supporting browsers?

[maban]

This is what I use:

// Adds class of svg to the html tag if svg is enabled
    (function flagSVG() {
        var ns = {'svg': 'http://www.w3.org/2000/svg'};
        if(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")) {document.getElementsByTagName('html')[0].className += ' svg';}
    })();

And then in the CSS:

.icon { 
    url(image.png); // fallback
} 

.svg .icon { 
    url(image.svg); 
}

[murtaugh]

I think your snippet has an extra .svg, but I get what you mean, and we use that in a few places (enabled via modernizr).

But what about inline images?

[hellogeri]

@Wilto (Yes okay good joke) The text actually is a bit too low-contrast for the green and of course, lighter grey elements:

http://cl.ly/image/3F1u0E0C2F1O Contrast ratio 3.43 : 1 (that's pretty close, though! I mean… easy to fix, at least.)
http://cl.ly/image/0h0t2R0A2E12 Contrast ratio is 2.85 : 1

The red is fine with a ratio of 8.45 : 1 (http://cl.ly/image/0h3k06382F3F)

I'd try making the green darker. I don't think it matters much that the green and red look the same to someone with colour-blindness in this instance — Notepad's lack of syntax highlighting didn't stop me none back in the day ;)

[maban]

@murtaugh Yeah, it did (now edited). Hmmm, not had to do anything with inline SVGs before.

[Wilto]

@murtaugh: Actually, I’ve had really good luck with this:

<img src="thing.svg" data-fallbk="thing.png" onerror="this.src=this.getAttribute('data-fallbk'); onerror=null;" alt="[This is the alt text of the thing]">

So, it tries to load the SVG—if it throws an error, it swaps the src for the png in data-src (then removes the onerror event just in case that throws an unexpected error, so we don’t loop forever. Then, if all else fails, meaningful alt text.

Credit to @scottjehl on the above.

[murtaugh]

So cool, thanks @hellogeri!

We should adjust our colors and make a recommendation back to Lea.

(Dang, just noticed that ALA is called out on the Prism site :D)

[murtaugh]

@Wilto: I will play @beep's role: what about non-JS/non-SVG users?

[murtaugh]

Ah, I spoke to soon and missed the bit about the Alt tag.

Are we happy with alt tags for non-SVG/non-JS users?

[Wilto]

Ain’t no shame in following it up with a <noscript>, I says.

<img src="thing.svg" data-fallbk="thing.png" onerror="this.src=this.getAttribute('data-fallbk'); onerror=null;" alt="[This is the alt text of the thing]">
<noscript><img src="thing.png" alt="[This is the alt text of the thing]"></noscript>

Note that the scripty bits don’t have to live on the img, so you could have:

<img src="thing.svg" data-fallbk="thing.png" alt="[This is the alt text of the thing]">
<noscript><img src="thing.png" alt="[This is the alt text of the thing]"></noscript>

And just have the script hinge on the presence of the data attribute on an img.

[murtaugh]

@Wilto: I don't think I mind centralizing the error handling on the image tag itself — it's such a restricted use case that there's no need to have references to the same thing in two places.

[murtaugh]

@Wilto: man, I type poorly and too fast: I'm taking it back. If the img tag has references to both images in it, I do think it's a good idea to offload the JS functionality.

[benedfit]

How about replacing the fallback using multiple background images syntax (none,image.svg)??

Not sure how the SVG to multiple background support matches up across browser though

[benedfit]

RE the focusable elements issue; I think that could be fixed with some z-index values

[ryanflorence]

Quick pass in os x safari with voice over

slider headings

• reads "ala-slug number number view just this pattern: link group"
• its confusing because there is no clear way to expand the details
  because "view just this pattern" is read for the whole summary
  (curious what jaws+ie does here)

fixes:

• hide the # from screen readers (I like the clip rect method)
• maybe pull the "view just this pattern" link out of the summary so its
  direclty tabbable (needs alt+tab right now) and not conflated with the <summary>

alphabits

• alphabits are not tabbable because they lack interactive attributes

fixes

• add href=#{{anchor}} or tabindex=0 to make then interactive

[benedfit]

You lot still need a hand with this? Or any of the other issues I raised at the same time?

[maban]

I'm going to run through all these shortly – some I've already fixed, just not pulled into this pattern library. I have some time this coming weekend though so might be able to tackle some of these then, and if not, I'll give you a shout.

[maban]

Sorry this took so long. The struggle with supporting multiple projects and repos. :(

• Controls and media elements should have labels
• "view this pattern" link is outside of summary, and full text rather than just "#"
• I've tweaked the colours in plugin.js as per @hellogeri's suggestion. There is still room for improvement.

The other issues are with the patterns themselves, and fixing them here alone isn't as good as fixing them on the live site, so I'll check if these are still relevant and create issues where appropriate for the actual site.