Accessibility first: because innovations for disabilities can easily become innovations for everyoneEyeglasses > fashionPostal carts > women postal carriersCurb cuts: wheelchairs > bikes, carriages, luggage, wheeled cardsOxo grips: arthritis > everyone
Hidden users – still works
There are many reasons why someone might not see an image. Maybe it didn’t download correctly. They are using a tiny screen and the image is hard to see. They may not be a visual learner, or the image relies on a cultural interpretation that they just don’t get. Or they are listening to the page instead of looking at it, as we head into a better and better voice recognition and text-to-speech. But I’m particularly thinking of people who simpy cannot see the image: they are blind and using a screen reader. They have one of many other visual disabilities and have to adjust their screen – for example to extreme magnification. Or they are color blind and the image doesn’t “read” informatively.
Subtitles – language translationCaptions – transcript of the same languageAudio description – adds captions for non-speech audioVideo description – describes action not spoken in the dialotTools getting better and more available
Too often we are dragged, kicking and screaming, into a new way of thinking.Aimee Mullin carved leg by Alexander McQueen
6 Awesomely Practical Tips: Making content better for everyone
Tip 6Think accessibility firsthttp://en.wikipedia.org/wiki/Oscar_Pistorius2Like mobile first, design for constraintsand clarity. It takes both technologyand a change in attitude to think aboutthe widest audience.
Asssistive Technology shown: Refreshable Braille, mouth stick, using a screen reader, screen magnifier (high contrast),Glenda Watson Hyatt and her iPad (http://doitmyselfblog.com)Responsive to devices. Responsive to assistivetechnology.3Both rely on flexibility and standards to adapt to the hardware context.
Have a conversationwith the audiencehttp://petanque-c.com/are-you-a-conversation-hog-8-tips-to-better-conversations/6Anticipate what they will need to knowor want to do, so the experience feelslike a live conversation.HT to Ginny Redishhttp://www.slideshare.net/GinnyRedish
A good conversation includes listeningor7Not ‗broadcasting‘ but really listening. This is especially important now that aninteraction can range across different devices and contexts.For more about listening, see my book with Kevin Brooks, Storytelling forUser Experience
The text in the image says:Living with MS.Michael, diagnosed in 2004 (shown with his wife)Speak directly to the audiencenationalmssociety.org 9Whether you just received a diagnosis ofMS or have been living with it for a longtime—this section is filled with informationand tips on how to maintain your qualityof life in the years ahead. Read aboutstrategies to enhance your health andwellness, maximize your productivity andindependence, and deal with emotional,social, and vocational challenges.
People can be hidden in the conversation§ 408.315. Who may sign your application?(a) When you must sign. If you are mentally competent, and physically able to doso, you must sign your own application.(b) When someone else may sign for you. (1) If you are mentally incompetent, orphysically unable to sign, your application may be signed by a court-appointedrepresentative or a person who is responsible for your care, including a relative.If you are in the care of an institution, the manager or principal officer of theinstitution may sign your application.(2) If it is necessary to protect you from losing benefits and there is good causewhy you could not sign the application, we may accept an application signed bysomeone other than you or a person described in paragraph (b)(1) of thissection.10
Conversations take place over timeAn activity or task can crossdevices, or require a series ofactions at different times. Keep the conversationgoing seamlessly Keep track of theprocess and keep theaudience orientedSimple.com 11
Break downwalls of wordshttp://www.washingtonpost.com/12No one wants to read a large,unbroken block of text. Breaking downwalls of words helps people navigatewithin the information or page.
Design and write for reading patterns13F-Pattern reading – scanningthe pageMore focused reading,looking at a whole paragraph
Design and write for reading patternsReading patterns on a singlepage can include bothnavigation (scanning) andconcentrated reading.This page shows skippingthrough the page, until findingthe section of interest.On This Page (anchor) linkscan help readers jump quicklyto the information they want ona long page.14
People read with different levels of literacyBelow basic – only the mostsimple and concrete reading skillsBasic – able to manage everydaytasksIntermediate – moderatelychallenging activities likeconsulting reference materialProficient – interpreting text,comparing viewpointsU.S. National Assessment of Adult Literacy http://nces.ed.gov/naal/kf_demographics.asp 15
Help readers navigate within the pageProvide good landmarks Page title Summary Headings Bullets Related links Captions16
Good headings break up walls of wordsMake headings active, so theyconnect to the reader Verb phrasesshow action Questionssignal what the section willanswer Sentences or phrasesmake a statement orprovide informationUse the same style for allheadings17Examples from: http://www.plainlanguage.gov/howto/guidelines/headings.cfmVerb phrasesGetting a permitFilling out the permitQuestionsDo I need a permit?How do I get a permitSentencesYou must get a permit to operate a vehicleGet a permit at any Motor Vehicles Office
Headings show structure18 Skipping a level in thehierarchy is difficult forsome screen readers. One H1 per page. This should notbe a heading!
Recognition,not recall19It‘s not a game! Don‘t make usersguess, or remember. Put informationon the screen in the right place, at theright time, and in the right format.
Don’t force users to hunt within pageEven complex pages workwith good orientation cuesScreen readers can use WAI-ARIA roles forregions of the page Headings forsections within aregion Skip (anchor) linksOpenIDEO.com 20
Don’t make users guess about what will happenCommunicate context andrequirements: What they will do The steps in the activityor task What they need tohave at hand21
Leap and land on the same wordsGive links a good ―scent ofinformation‖Confirm that the page is theone users expectedHT to Caroline Jarrett for the phrase ―leap and land‖ 22
Describe imagesmeaningfully23A picture is only worth 1000 words ifyou know what it says.There are many reasons whysomeone might not see an image.
ALT means ALTERNATIVEText alternative to an image thatsubstitutes for the visual. Brief description of the content ofthe image Communicates any text in theimage Identifies its meaning in context Works with other content orcaptions<imgsrc=“altkey.jpg”alt=“Alt key on acomputer keyboard”height=“201width=“162”>24
Alt text is contextualImage credit: J. and K. Hollingsworth/USFWSShould this be described as: Fox Red fox Red fox at SachuestPoint National WildlifeRefuge A red fox, standing aloneon a pile of rocks, looksback at the camera.25
Alt text tells the storyPhoto of the WeekRed fox at Sachuest PointNational Wildlife Refuge inRhode Island.Image credit: J. and K. Hollingsworth/USFWSOn a photo site, with additionaltext around the image the alttext might be: Red fox standing on aboulder A red fox, standing aloneon a pile of rocks, looksback at the camera.26
When the image is a link...If the image is alone: Add text to describe thefunction.If there is text with the image Don‘t duplicate the text. Use null alt text Enclose the text andimage in one linkEmailPrintSave<a href...><img src="icons/email.gi<a href...><img src="icons/print.gi<a href...><img src="icons/save.gifEmailPrintSave<a href...><img src="icons/email.gif<a href...><img src="icons/print.gif<a href...><img src="icons/save.gif<a href=...><imgsrc=“mail.jpg”alt=“Email”></a><a href=...><imgsrc=“mail.jpg”alt=“ ”>Email</a>27
Alt text repeats the textThe most basic function of alttext is to communicate any textin the image.Should this alt text read: 31 UX tips, 6 experts, 1day, 31 AwesomelyPractical UX Tips, May29, 2013, A One-DayVirtual Conference 31 Awesomely PracticalUX Tips, May 29, 2013,A One-Day VirtualConferenceWeve asked six of the smartest people in the UXindustry to share the most essential tips thatdesigners and researchers need to know. Theycame up with 31 incredibly valuable pieces ofadvice that will dramatically improve andstrengthen your UX practice.28
Alt text is part of contentstrategyThis page has A title that is meaningful: ―MoreEducation Means More Money‖ A summary paragraph The data in an image with alttext that identifies theit as a graph A table with the data presentedin the chartExample from Career One Stop http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21 29
Tips for writing alt text If there is text in the image, repeat it in the alt text. Make the descrition meaningful in context. Don‘t duplicate information in the page content or a caption. If the image is purely decorative or duplicates information on thepage, use a null alt text (alt=― ―). If the image is a link, it must have a brief description of the linkfunction or target page. If the image needs a longer description, include it on the page, orby providing a link to another page. Keep it short. (Aim for 5-15 words.) Don‘t repeat the word ‗image‘ or list technical details like the filename or image size.Remember: every image must include an alt attribute.30
Use visual design for meaning32Target ClearRx drug labels, designed by Deborah Adler
Don’t rely on color aloneProvide multiple cues Stop signs:ShapeColorText Choice tableShapeColorPosition33
Make it keyboard accessibleMake the keyboadexperience good, too Don‘t jumparound in thecontent Make sureeverythinginteractive is inthe [Tab] order34
Provide alternatives for visual and audio informationGraham Pullen, author of Design Meets Disabilityhttp://research.microsoft.com/apps/video/default.aspx?id=103405 35
Design for all senses, because people...Read with different degrees of literacyRead in a hurry or without full attentionOr in poor reading conditionsMay not know (or read) the language wellMay have a cognitive or learning disabilityOr a visual disability that can affect readingOr a physical disability that affects interactionOr may just prefer their own way to work36
Think in a new wayPhotos: mtstcil.org and http://blog.metmuseum.org/alexandermcqueen/tag/no-13/ 37Why do we have to struggle to get new ideas accepted, even when they becomevaluable to everyone. Why not look at the problem in a new way, as Aimee McMullinand Alexander McQueen did?
Storytelling for User Experiencewith Kevin BrooksGlobal UXwith Daniel SzucA Web for Everyonewith Sarah HortonA Web forEveryone
Whitney QuesenberyWQusability.email@example.comTwitter @whitneyqSlideshare: whitney and StorytellingUX