Inclusive design principles for WordPress


Published on

Incorporating inclusive design principles into a WordPress site is not as difficult as it sounds not does it require much technical wizardry.

A good first step would be to understand what Inclusive Design means, ad a few easy actions into your everyday activities, and expand on that solid grounding by continuing your education with some of the resources and links supplied.

if you're interested, there is also a video of the presentation on WordPress.TV: .

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • I would like to acknowledge the traditional owners of the land on which we stand and pay my respects to their elders both past and present.A WordPress user since Charles Mingus (v1.2) or was it Strayhorn? (1.5), a fan since Ella Fitzgerald (v2.1), and a zealot since John Coltrane (v2.7)
  • Conduct workshops and other collaborative designing exercises - get people to reveal useful information-build wireframes, to plan out what pages could look like and how they work- these get tested on selected users, to see if it answers their needs and are usable- which we’d then go to building working prototypes, which we’d again, test with usersThe reason: is we want the business to utilise technology, so that the user has a good experience
  • That’s right! and one of the aspects of UX is to understand that many different types of people access your content, ALL of which want to be included in your audience
  • are you included in their plans?
  • Have they really thought about who YOU are?this toilet has been disabled!!
  • let’s look at some examples of inclusive design
  • Oxo Sure-grip measuring cups
  • Accessible Pedestrian signal. Built for people with low vision and low hearing, but others also benefit from itLight rail platform, built for wheelchairs, good for parents with prams, people who struggle with stairs
  • Gotta give some feel good for anyone who comes to these bottles. Wouldn’t it be great if all music sold in physical form required this by law?Here’s someone who won’t be benefitting...
  • this is what a popular [sic] electronics website looks like when you turn images off.
  • ahh, that’s better, some tiles, but no prices, or details
  • Ah, there you go.
  • a list of companies who have ben sued, or are currently in court or settled out of court.Sydney 2000 Olympics – August 2000 – ticket booking inaccessible to the blind, required to pay $20,000 AUD in damagesTarget – launched in 2006, settled in August 2008 for $6 million dollarsWalt Disney – September 2010 - booking accommodation through the website, lots of use of flash, video & audio trailers – needs a mouse to turn offUnited Airlines – October 2010 - National Federation of the Blind together with three blind Californians, filed a class-action lawsuit against United Airlines. The case is based around the touchscreen facilities that are unavailable to blind passengers.jetBlue airways – October 2010 - The lawsuit alleges that JetBlue has violated California law by maintaining a website and operating airport check-in kiosks that are inaccessible to individuals with visual impairments. Canadian Government – November 2010 – Donna Jodhan sued the Canadian government after she was unable to apply for a government job online or complete an online census form without assistance from sighted government employees, arguing that this breached her rights.Disability Discrimination Act 1992 UN Convention on the Rights of Persons with a Disability“The UN Convention on Rights of Persons with Disabilities (2008) declares that Disability is a human rights issue and not a matter of discretion. The UN Convention affirms that all persons with all types of disabilities must enjoy all human rights and fundamental freedoms. The outcomes of the project are designed to uphold and promote the human rights of disabled people as enshrined in national and international law.” Occupational Health and Safety Act 1991You cannot reduce a person’s access to employment for fear of being compromised for health and safety grounds. Freedom of Information Act 1982Of more importance to government agencies but information that fall under the remit of this act must be accessible Web Accessibility National Transition Strategy (NTS)
  • not a matter of discrection!!!
  • Vision:Colour blindness, low vision, acute blindness3% have a visual impairment, 8-11% of males are colour blindStrangely, women rarely exhibit this problem, less than 1%Hearing: Clarity, frequency, volume1-2% have a hearing impairment, up to 14% have some haring loss that affects their daily lives.Physical: Limited fine control, slow reaction time, grip/holdChronic back pain alone affects 6.5% of AustraliansLiteracy: Reading or unfamiliar language 46% have a literacy issue of some typeCognitive; Distractibility, memorability, dyslexia
  • the web content accessibility guideline... all web 20Perceivable: Information and user interface components must be presentable to users in ways they can perceive.Operable: User interface components and navigation must be operable.Understandable: Information and the operation of user interface must be understandable.Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
  • great long list of criteria a site must meet in order to be considered compliant with WCAG 2.0.Principles: 4 of em! Within those:Guidelines: 12!Criteria: 61!!!Three levels, A, AA, AAA
  • Principles: 4 of em! Within those:Guidelines: 12!Criteria: 61!!!Three levels, A, AA, AAA
  • logo area, nav
  • Its important, so describe itDon’t use, “This is a picture of”Don’t repeat the captionDon’t include what isn’t there.
  • Don’t use text as an image (see the alternatives: cufon, @font-face, Adobe TYpekitetc)
  • guardian without imagesguardian with imagesThere is still meaning, ther is still content, there is still full content to be derived, although I believe newspapers are the biggest losers in usable alt text, they either use captions, repeat the headline or use names with no qualifiers.
  • marrickville council:7 navigation items, become 4
  • tube map: very descriptive. remove colour: what happens?A B&W print becomes near unusable
  • if it is sensory, include alternatives for those who cannot perceive that sensory information.
  • some people navigate by links
  • Inclusive design principles for WordPress

    1. 1. Joe WordCamp Sydney July 21, 2012
    2. 2.  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 ...
    3. 3. NOW, I’m a...
    4. 4. 4
    5. 5. DUDE!THAT’S UX! 5
    7. 7. 7
    8. 8. 8
    9. 9. 9
    10. 10.  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!
    11. 11. 11
    12. 12. 12
    13. 13. these guys found out!
    14. 14. 18
    15. 15.  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
    16. 16. OK,
    17. 17.  Web Content Accessibility Guidelines  version 2.0! Perceivable Operable Understandable Robust
    18. 18. 22
    19. 19. 23
    20. 20. OK,
    21. 21.  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
    22. 22. 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
    23. 23.  <img src=”/path/to/image.jpg” alt=”” /> international cyclist, Cadel Evans, dressed in cycle gear, riding his bike against a leafy background
    24. 24. 28
    25. 25.  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>
    26. 26.  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....
    27. 27. alt=“”never absent, sometimes empty 31
    28. 28.  text is best conveyed as text, not image  ..unless it is your logo otherwise, use font substitution  cufon  @font-face  Adobe TtpeKit  SiFR
    29. 29. 33
    30. 30.  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
    31. 31. 35
    32. 32.  Don’t rely on colour alone to convey meaning
    33. 33.  Full text version of all dialogue Captions timed with the video Audio descriptions of events not spoken 37
    34. 34.  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
    35. 35. 39
    36. 36.  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 !!
    37. 37.  Completely Automated Public Turing test to tell Computers and Humans Apart  a.k.a. bol1$@ks! 41
    38. 38.  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: 42
    39. 39.  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.
    40. 40. 44
    41. 41.  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
    42. 42. test!...then test again... 46
    43. 43.  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)
    44. 44. WCAG 2.0: (Non Visual Desk Access): to the Disability Discrimination Act: Convention on the Rights of Persons with a Disability: Accessibility National Transition Strategy: Ask: Integrating Accessibility Throughout Design into accessibility: contrast check: Contrast Analyser from Paciello Group: browser – simulates several vision impairments: full set of links are at:
    45. 45. All images are mine, except for the following:3 -T-shirt design courtesy of Stamford Interactive:, 6 -copyright Polygram Entertainment:, 9 http://failblog.org8 -Adactio on Flickr: –wcag2.0 map from Stamford Interactive:, 33 -The Guardian: -BSI/British Standards : -example of Gravity Forms: -Google reCAPTCHA: -accessIQ: 49
    46. 46. 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 WordCamp Sydney July 21, 201250