Results of Chrome Accessibility Audit

benedfit commented 10 years ago

If it's of interest I ran the Chrome Accessibility Developer Tools Audit (https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en) against the patterns and got the following. Happy to help fix any if wanted

[Severe] Controls and media elements should have labels (1)

Pattern library specific issue

<select name="section" id="pattern-select" class="nav-section-select">…</select>

[Warning] Meaningful images should not be used in element backgrounds (1)

<label class="submit-search" for="submit-search">…</label>

[Warning] Text elements should have a reasonable contrast ratio (18)

<a href="https://etherpad.mozilla.org/ep/pad/view/ro.gtMA3Rr4lYIam9OU/latest">https://etherpad.mozilla.org</a>

These are from prism.js

html  { : ; } p  { : ; }

<a href="#" class="embed-link">Embed</a> <h1 class="deadly-subtitle">For people who make websites.</h1> <a href="/issue/386" class="issue-number">…</a> Issue № <time class="pubdate updated" datetime="2014-01-02T08:00:37-05:00">January 02, 2014</time> <a class="issue-number" href="/issue/388">…</a> Issue №

[Warning] These elements are focusable but either invisible or obscured by another element (6)

<a class="photo" href="/author/shorton">…</a> <a class="photo" href="/author/whitneyq">…</a> <a class="photo" href="/author/mikepick">…</a> <a href="http://www.webydo.com/?utm_source=deck&utm_medium=cpc&utm_content=faceviking&utm_campaign=a">…</a> <a href="http://www.thoughtworks.com/continuous-integration?utm_campaign=snap-beta&utm_medium=cpm&utm_source=the-deck&utm_content=ci-loops">…</a> <a href="https://www.atlassian.com/git?utm_source=the-deck&utm_medium=banner&utm_content=learn-the-basics-workflow&utm_campaign=git-microsite">…</a>

Wilto commented 10 years ago

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.
[x] 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 commented 10 years ago

Can do, bro.

murtaugh commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

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

Wilto commented 10 years ago

@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 commented 10 years ago

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 commented 10 years ago

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

murtaugh commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

@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 commented 10 years ago

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 commented 10 years ago

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

ryanflorence commented 10 years ago

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 commented 9 years ago

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

maban commented 9 years ago

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 commented 9 years ago

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

[x] Controls and media elements should have labels
[x] "view this pattern" link is outside of summary, and full text rather than just "#"
[x] 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.

alistapart / pattern-library