Inclusive design principles for WordPress

Joe Ortenzi@wheelywebtypingthevoid.com WordCamp Sydney July 21, 2012

 First website was in 1996  which was c#%p Learned PHP /MySQL & built bespoke CMSs  which was hard! So I started hacking WordPress Developer, Interactive Developer, Tech Director, Technologist, PM, Producer Auditor, Interaction Designer... and now ...

NOW, I’m a...

DUDE!THAT’S UX! 5

TELL ME ABOUTINCLUSIVE 6

 For them  Includes people with a disability in your plans  Includes seniors in your audience  Accepts temporary conditions among your visitors– sprains, lighting, crowds, noise For you  Improves SEO and usability  Happier users, easier to comment and share  More visitors!

...as these guys found out!

 1 in 5 Australians have a disability (ABS) Vision  Colour blindness, low vision, acute blindness Hearing  Clarity, frequency, volume Physical  Limited fine control, slow reaction time, grip/hold Literacy, Cognition  Reading or unfamiliar language  Distractibility, memorability, dyslexia

 Web Content Accessibility Guidelines  version 2.0! Perceivable Operable Understandable Robust

 What does it look like with CSS styles off? Is the reading order logical? <body>  <h1>  <p><strong></strong><em></em></p> ▪ <h2> ▪ <h3> Include a “Skip to Content” link above all content

logo skip to content searchcontent starts here Title Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada a non . Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heading 2 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Heading 3 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 26

 <img src=”/path/to/image.jpg” alt=”” /> international cyclist, Cadel Evans, dressed in cycle gear, riding his bike against a leafy background

 Go, search, comment, next, previous, buy, et c. - avoid using images for these. <input type="submit" name="publish" id="publish" value="publish" /> <button type="button">Buy Me!</button>

 Logo spacer images  shame on you! does not convey additional meaning ie:“satisfaction guaranteedor your money back”  double shame on you!  may the ghost of clippy have mercy on you....

alt=“”never absent, sometimes empty 31

 text is best conveyed as text, not image  ..unless it is your logo otherwise, use font substitution  cufon  @font-face  Adobe TtpeKit  SiFR

 Avoid ALL CAPS watch font size choose font sizes that can scale  use em, en, %, not pt or px Scale your containers with their content

 Don’t rely on colour alone to convey meaning

 Full text version of all dialogue Captions timed with the video Audio descriptions of events not spoken 37

 Accurate text equivalents of the audio or video, linked to next to the vid/audio Captions (text of the audio superimposed on the video) Audio descriptions of actions not conveyed in dialogue or wordPeople with low vision or hearing deserve easyaccess to you content

 Use the <button> or <input type=”button”> Ensure all form fields have meaningful labels before the field. Return focus to the first message on error Ensure error messages are available to keyboard-navigating users don’t be captured by CAPTCHA !!

 Completely Automated Public Turing test to tell Computers and Humans Apart  a.k.a. bol1$@ks! 41

 TextCAPTCHA The last letter in “unrolled” is? 4 plus two is what? Which of 3, twenty-nine, 70, 46 or 65 is the lowest? I have two, you have 2. How many is that? c/o: textcaptcha.com/demo 42

 Confusing:  To read more about awesome polar bear disguises, click here.  To find out the 47 ways I can save you verbosity, click here. Better:  I wrote a post about awesome polar bear disguises.  I spent a very long time researching the 47 ways you can reduce your verbosity.

 check your HTML is well formed make sure your page is well structured always correctly use an alt tag for each image avoid text displayed as images watch your font: size, case, format, weight. check your colours don’t impede readability Ensure your forms are usable by keyboard Make sure your link text is meaningful ...and... 45

test!...then test again... 46

 Web Accessibility Checker for IE Web Developer Tool (FF, GC) Firebug (FF, GC) Fangs (FF) Zoom Text (FF, S) WAVE Juicy Colour Checker (FF) Headings map (FF) Inspect Element (FF, GC, S)

WCAG 2.0: http://www.w3.org/TR/WCAG20/NVDA (Non Visual Desk Access): http://www.nvda-project.org/Guide to the Disability Discrimination Act: http://www.hreoc.gov.au/disability_rights/dda_guide/dda_guide.htmUN Convention on the Rights of Persons with a Disability: http://www.un.org/disabilities/default.asp?id=259Web Accessibility National Transition Strategy: http://www.finance.gov.au/publications/wcag-2-implementation/index.htmlWebaim.com: http://webaim.org/resources/designers/Just Ask: Integrating Accessibility Throughout Designhttp://uiaccess.com/accessucd/Dive into accessibility: http://diveintoaccessibility.info/AChecker: http://achecker.ca/Color contrast check:http://www.snook.ca/technical/colour_contrast/colour.htmlColour Contrast Analyser from Paciello Group: http://www.paciellogroup.com/resources/contrast-analyser.htmlChrometric browser – simulates several vision impairments: http://enably.com/chrometric/The full set of links are at: typingthevoid.com/inclusive-design

All images are mine, except for the following:3 -T-shirt design courtesy of Stamford Interactive: http://stamfordinteractive.com.au5, 6 -copyright Polygram Entertainment: http://www.imdb.com/company/co0030612/7, 9 -Failblog.org: http://failblog.org8 -RollRamp.co.uk: http://rollramp.co.uk13 -Adactio on Flickr: http://www.flickr.com/photos/adactio/8977857623 –wcag2.0 map from Stamford Interactive:http://www.stamfordinteractive.com.au/resources/wcag-2-0-map/27, 33 -The Guardian: http://guardian.co.uk37 -BSI/British Standards : http://www.youtube.com/watch?v=-1xgTs28vXw39 -example of Gravity Forms: http://www.gravityforms.com/41 -Google reCAPTCHA: http://www.google.com/recaptcha/captcha44 -accessIQ: http://www.accessiq.org/ 49

I’m building a list of accessible, inclusive themes and plugins forWordPress, as well as tools, almost all free, to help assess accessibility. Seeme afterwards if you’d like to be updated once that list is ready.Joe Ortenzi@wheelywebtypingthevoid.com/inclusive-design WordCamp Sydney July 21, 201250

Inclusive design principles for WordPress

by Joe Ortenzi on Jul 21, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 267

Statistics