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)

Recommended

Recommended

More Related Content

Similar to Taking WordPress to AAA accessibility (WordUp Whitehall 2011)

Similar to Taking WordPress to AAA accessibility (WordUp Whitehall 2011) (20)

More from Helpful Technology

More from Helpful Technology (20)

Recently uploaded

Recently uploaded (20)

Taking WordPress to AAA accessibility (WordUp Whitehall 2011)