Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

Taking WordPress to AAA November 2011 Steph Gray, Helpful Technology

[object Object],I don’t really know what I’m talking about

Principles of accessibility Readable Adaptable Predictable Source: http://www.w3.org/WAI/WCAG20/quickref/Overview.php Navigable Compatible

What does AAA require? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

First audit: The Good ,[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],Hidden text for screenreaders Solution: use absolute, off-screen positioning

[object Object],[object Object],Solution: relative sizing of structural blocks

[object Object],[object Object],Solution: relative sizing on wrappers; use max-width

[object Object],[object Object],Solution: use :focus pseudoclass to highlight current link, and highlight current section/menu uitem

[object Object],[object Object],Solution: darker text on white backgrounds #888 (3.5:1) #575757 (7.23:1) http://juicystudio.com/services/luminositycontrastratio.php

[object Object],[object Object],<input type="hidden" id="_wp_unfiltered_html_comment" name="_wp_unfiltered_html_comment" value="c3a8343c71" /> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="f39ad65f0f" /> </p> function fixCommentNonceStyle() { var commentparas = $('#respond p'); for(var i = 0; i < commentparas.length; i++) { if ($(commentparas[i]).attr("style") == 'display: none;') { $(commentparas[i]).removeAttr("style"); } } return true; } (imperfect) solution: nuke Akismet’s inline style with jQuery

[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],Solution (for custom menus): add hidden text to links explaining context, using jQuery

(Aside: this applies to traditional WordPress listings too) Solution: hidden text with unique description of where the link takes you

[object Object],[object Object],(dubious) solution: [shortcode] to render wp_list_pages() – but a plugin might be safer for general purpose WP themes

Adding a stylesheet switcher Alternate stylesheets are for contrast, not text size (which is resizable using browser features)

WordPress ‘out of the box’ issues for AAA ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Strategies for fixing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

Semelhante a Taking WordPress to AAA accessibility (WordUp Whitehall 2011) (20)

Mais de Helpful Technology

Mais de Helpful Technology (20)

Último

Último (20)

Taking WordPress to AAA accessibility (WordUp Whitehall 2011)