inclusive design principles for wordpress - joe ortenzi - wordcamp sydney
Post on 27-Jan-2015
106 Views
Preview:
DESCRIPTION
TRANSCRIPT
Joe Ortenzi @wheelyweb typingthevoid.com
WordCamp Sydney July 20, 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...
4
5
DUDE!
THAT’S UX!
6
TELL ME ABOUT
INCLUSIVE
7
8
9
¡ 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
12
...as these guys found out!
“!e UN Convention on Rights of Persons with Disabilities (2008) declares that Disability is a human rights issue and not a matter of discretion. !e UN Convention affirms that all persons with all types of disabilities must enjoy all human rights and fundamental freedoms. !e outcomes of the project are designed to uphold and promote the human rights of disabled people as enshrined in national and international law.”
18
¡ 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
OK,
¡ Web Content Accessibility Guidelines § version 2.0!
¡ Perceivable
¡ Operable
¡ Understandable
¡ Robust
22
23
Visual map of Web Content Accessibility Guidelines 2.0Designed by Stamford Interactive www.stamfordinteractive.com.au
Based on World Wide Web Consortium documentation available at www.w3.org/TR/WCAG20 Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported LicenseWCAG 2.0 Map V1.4 © 2012 Stamford Interactive
WCAG 2.0 Map
WCAG 2.0
4.1 Compatible
3.3Input Assistance
3.2Predictable
3.1Readable
Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
Operable: User interface components and navigation must be operable.
Robust: Content must be robustenough that it can be interpretedreliably by a wide variety or useragents, including assistivetechnologies.
Understandable: Information andthe operation of user interfacemust be understandable.
1.4.1 Use of Colour1.4.2 Audio Control
2.1.3 Keyboard (No exception)
2.1.1 Keyboard2.1.2 No Keyboard Trap
2.2.1 Timing Adjustable2.2.2 Pause, Stop, Hide
2.2.3 No Timing2.2.4 Interruptions2.2.5 Re-authenticating
2.3.1 Three Flashes or Below Threshold
2.3.2 Three Flashes
2.4.8 Location2.4.9 Link Purpose (Link Only)2.4.10 Section Headings
2.4.5 Multiple Ways2.4.6 Headings and Labels2.4.7 Focus Visible
2.4.1 Bypass Blocks2.4.2 Page Titled2.4.3 Focus Order2.4.4 Link Purpose (In Context)
1.1.1 Non-text Content
1.2.1 Audio-only and Video Only(Pre-recorded)1.2.2 Captions (Pre-recorded)1.2.3 Audio Description
1.2.4 Captions (live)1.2.5 Audio Description
1.2.6 Sign Language1.2.7 Audio Description (Extended)1.2.8 Full text alternative1.2.9 Live Audio-only
1.3.1 Info and relationships1.3.2 Meaningful Sequence1.3.3 Sensory characteristics
1.4.3 Contrast (Minimum)1.4.4 Resize Text1.4.5 Images of Text
1.4.6 Contrast (Enhanced)1.4.7 Low or No Background Audio1.4.8 Visual Presentation1.4.9 Images of text (No exception)
4.1.1 Parsing4.1.2 Name, Role, Value
A A
A
A
A
A
A
AA
AA
AAA
AAA
AAA
AAA
AAA
A
Principle
WCAG 2.0 Map Key
Guideline
Success CriteriaA3.3.5 Help3.3.6 Error Prevention (All)
3.3.3 Error Suggestion3.3.4 Error Prevention(Legal, Financial Data)
3.1.3 Unusual Words3.1.4 Abbreviations3.1.5 Reading Level3.1.6 Pronunciation
3.3.2 Labels or Instruction
3.2.3 Consistent Navigation
3.2.1 On Focus3.2.2 On Input
3.2.5 Change on request
3.1.1 Language of Page
3.1.2 Language of Parts
AAA
AA
A
A
A
AAA
AAA
AA
AA
AAA
AAA
1.2 Time Based
Media
1.3 Adaptable
1.4 Distinguishable
1.1 Text Alternatives
Understandable
Robust
2.4Navigable
2.3Seizures
2.2Enough time
2.1KeyboardAccessible
Perceivable
Operable
OK,
¡ 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
26
logo search
Title
Heading 2
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.
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.
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.
skip to content
content starts here
¡ <img src=”/path/to/image.jpg” alt=”” /> international cyclist,
Cadel Evans, dressed in cycle gear, riding his bike against a leafy background
28
¡ Go, search, comment, next, previous, buy, etc. -‐ 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 guaranteed or your money back”
§ double shame on you! § may the ghost of clippy have mercy on you....
31
alt=“” never absent, sometimes empty
¡ text is best conveyed as text, not image § ..unless it is your logo
¡ otherwise, use font substitution § cufon
§ @font-‐face
§ Adobe TtpeKit
§ SiFR
33
¡ 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
35
¡ 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 word
People with low vision or hearing deserve easy access to you content
39
¡ 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?
42
c/o: textcaptcha.com/demo
¡ 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.
44
45
¡ 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...
46
test! ...then test again...
¡ 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.htm UN Convention on the Rights of Persons with a Disability: http://www.un.org/disabilities/default.asp?id=259 Web Accessibility National Transition Strategy: http://www.finance.gov.au/publications/wcag-‐2-‐implementation/index.html Webaim.com: http://webaim.org/resources/designers/ Just Ask: Integrating Accessibility Throughout Design http://uiaccess.com/accessucd/ Dive into accessibility: http://diveintoaccessibility.info/ AChecker: http://achecker.ca/ Color contrast check: http://www.snook.ca/technical/colour_contrast/colour.html Colour Contrast Analyser from Paciello Group: http://www.paciellogroup.com/resources/contrast-‐analyser.html Chrometric browser – simulates several vision impairments: http://enably.com/chrometric/
I’m building a list of accessible, inclusive themes and plugins for WordPress, as well as tools, almost all free, to help assess accessibility. See me afterwards if you’d like to be updated once that list is ready.
49
Joe Ortenzi @wheelyweb typingthevoid.com/inclusive-‐design
WordCamp Sydney July 20, 2012
top related