WordPress Accessibility Twenty Eleven & Admin

Paul J. AdamAccessibility Evangelist

@pauljadam

Accessibility Considerations• Reading Content (Themes)• Writing Content (Administration)• Commenting (CAPTCHA)• Plugins• Widgets• Lightboxes (Uploads)• Videos (Captioning)

Twenty Eleven #a11y Problems• Skip links broken in Webkit

(Chrome/Safari)• Color contrast• Outline:0 none• Secondary skip

broken on posts• Hover-only menus

Twenty Eleven #a11y Improvements

• Better use of title tags• Search is now labeled• ARIA landmarks

Plugins for Front End• Twenty Eleven Accessibility Tweaks– Fixes outline:0 none; – Webkit skip link– Color contrast (FireEyes Demo)

Mobile Themes not good

Video #a11y

Writing Content

Admin Interface FAILS• No Skip Link• Media Uploads #a11y confusion• Disable Visual Editor• Lightboxes Focus Management• Enter to activate hovers not VO+Space• Outline:0 none

Admin Minimalism• Screen Options checkboxes

Plugins for Admin• Faster Image Insert• PHP Markdown• Hide Admin Icons• Simple Admin Accessibility Tweaks• Media Upload Accessibility Tweaks

Before After

Media Upload #a11y Tweaks

Non-Browser Alternatives• Mobile Apps• Post via Email• Other Apps– Windows Live Writer– OS X MarsEdit

Menus• NOT possible to re-order menu with keyboard• Widgets can be (screenshot)

Commenting• CAPTCHA-less• Approvals =

#FAIL

Contact Form• Be careful which plugin you choose!• Contact Form 7 = FAIL• Contact Form Plugin = WIN

Make WordPress Accessibility• http://make.wordpress.org/accessibility/• http://wordpress.org/search/accessibility

WordPress #a11y Blogs• http://blogaccessibility.com• http://www.coolfields.co.uk• http://access.aol.com/wordpress-accessibility/

Development Links• http://wordpress.stackexchange.com• Accessible WordPress Theming.pdf• Creating a custom functions plugin for end use

rs

• How to include javascript and css in your wordpress themes and plugins

Go Forth and Be Accessible!!!

Connecting with Deque

Twitter LinkedIn Web Email @dequesystems Deque Systems deque.com info@deque.com