Inclusive design principles for WordPress
•Als PPTX, PDF herunterladen•
1 gefällt mir•3,506 views
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: http://wordpress.tv/2013/03/07/inclusive-design-principles-for-wordpress/ .
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (13)
Ähnlich wie Inclusive design principles for WordPress
Ähnlich wie Inclusive design principles for WordPress (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Inclusive design principles for WordPress
- 1. Joe Ortenzi @wheelyweb typingthevoid.com WordCamp Sydney July 20, 2012
- 2. First website was in 1996 which was c#%p Learned PHP /MySQL & built bespoke CMSs which was hard! So I started hackingWordPress Developer, Interactive Developer,Tech Director,Technologist, PM, Producer Auditor, Interaction Designer... and now ...
- 4. 4
- 7. 7
- 8. 8
- 9. 9
- 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
- 12. 12
- 17. ...as these guys found out!
- 18. “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.” 18
- 19. 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
- 20. OK,
- 21. Web Content Accessibility Guidelines version 2.0! Perceivable Operable Understandable Robust
- 22. 22
- 23. 23
- 24. OK,
- 25. 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. 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
- 27. <img src=”/path/to/image.jpg” alt=”” /> international cyclist, Cadel Evans, dressed in cycle gear, riding his bike against a leafy background
- 28. 28
- 29. 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>
- 30. 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. 31 alt=“” never absent, sometimes empty
- 32. text is best conveyed as text, not image ..unless it is your logo otherwise, use font substitution cufon @font-face AdobeTtpeKit SiFR
- 33. 33
- 34. 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. 35
- 36. Don’t rely on colour alone to convey meaning
- 37. Full text version of all dialogue Captions timed with the video Audio descriptions of events not spoken 37
- 38. 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. 39
- 40. 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 !!
- 41. Completely Automated Public Turing test to tell Computers and Humans Apart a.k.a. bol1$@ks! 41
- 42. 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
- 43. 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. 44
- 45. 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...
- 47. Web AccessibilityChecker for IE Web DeveloperTool (FF, GC) Firebug (FF, GC) Fangs (FF) ZoomText (FF, S) WAVE Juicy Colour Checker (FF) Headings map (FF) Inspect Element (FF, GC, S)
- 48. WCAG 2.0: http://www.w3.org/TR/WCAG20/ NVDA (NonVisual 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/
- 49. 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
Hinweis der Redaktion
- 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 users The 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
- WELL, LET’S START WITH WHAT’S NOT INCLUSIVE
- ARE YOU WELCOME IN THEIR SHOP?
- 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 it Light 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 damages Target – launched in 2006, settled in August 2008 for $6 million dollars Walt Disney – September 2010 - booking accommodation through the website, lots of use of flash, video & audio trailers – needs a mouse to turn off United 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 1991 You cannot reduce a person’s access to employment for fear of being compromised for health and safety grounds. Freedom of Information Act 1982 Of 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 blindness 3% have a visual impairment, 8-11% of males are colour blind Strangely, women rarely exhibit this problem, less than 1% Hearing: Clarity, frequency, volume 1-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/hold Chronic back pain alone affects 6.5% of Australians Literacy: Reading or unfamiliar language 46% have a literacy issue of some type Cognitive; Distractibility, memorability, dyslexia
- the web content accessibility guideline... all web 20 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. 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 it Don’t use, “This is a picture of” Don’t repeat the caption Don’t include what isn’t there.
- Don’t use text as an image (see the alternatives: cufon, @font-face, Adobe TYpekit etc)
- guardian without images guardian with images There 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