Recommended
More Related Content
What's hot
What's hot (20)
Similar to Accounting For Every Camper
Similar to Accounting For Every Camper (20)
Recently uploaded
Recently uploaded (20)
Accounting For Every Camper
- 3. DESIGNING FOR OUTSIDE, OBSTACLES, AND MORE Accounting for every camper
- 4. Who am I? UX Designer for SafeNet Consulting Co-Organizer for Brew City UX (find us on meetup!) Lover of dogs, rocks and beer My face or dog or something When I had more hair
- 5. Common misconceptions Accessibility and Inclusive Design only affect a subset of my users It’s expensive and costly to implement Accessibility is a huge undertaking and will take a long time
- 6. all Your User base (are belong to us)
- 7. they’re your users 91% of people with disabilities use a “wireless device such as a cell phone or tablet.”
- 8. 1 in 5 people have an official disability
- 9. Recognized disabilities Holding Phone and Tapping: Missing Limb Remembering: Alzheimers, Dementia Reading and Seeing: Blindness, Vision Loss Hearing: Deaf
- 10. Anyone can have a temporary impairment
- 11. Temporary impairments Holding Phone and Tapping: Broken or injured limb Remembering: Concussions and temporary memory loss Reading and Seeing: Eye surgeries, Cataracts, temporary vision loss Hearing: Ear infections, tinnitus (ear ringing)
- 12. User awareness Holding Phone and Tapping: Large or Small Hands Remembering: Absent minded Reading and Seeing: Non-native speaker, permanent vision loss
- 13. Situational awareness Holding Phone and Tapping: Holding an object, such as a canteen Remembering: Distracted by other people Reading and Seeing: Sunny day, glare Hearing: Wearing headphones
- 14. THEY’RE YOUR USERS … and you might get sued.
- 15. Legal ramifications 240 Accessibility lawsuits in 2016 Lawsuits span a number of industries and include: Target, Southwest Airlines, Bank of America, eBay, Netflix, the NBA and Disney Section 508 of the Internet Communications Act, Americans with Disabilities Act Expanded legislation goes into affect January 2018 Exception: Legacy code that is not updated again
- 16. Who?
- 17. WCAG 2.0 Web Accessibility Initiative (WAI) of World Wide Web Consortium (W3C) Create guidelines for inclusive design and influence accessibility and disability law Both website and mobile apps (though we’re just talking mobile) Perceivable, Operable, Understandable, Robust (POUR one out)
- 18. perceivable
- 19. Perceivable “Information and user interface components must be presentable to users in ways they can perceive” Users need to be able to find and understand all the information being presented to them Text and images should be readable and findable Any media should have captions or an alternate way of deciphering information Sounds and colors should have alternative ways of conveying information
- 20. Color basics Affects: People with vision impairments, low contrast environments, color blindness Aim for a minimum contrast of 3:1 Text and icons are included but branding and logos are not Don’t rely on color cues to convey information - text, textures, symbols Calculate it with Color Contrast Analyzer and view it with Sim Daltonism
- 21. 10:1 5:1 3:1#000000 #424242 #5E5E5E Button Button Button
- 22. Color blindness Normal Sight (No Confusion) Deuteranopia (Red-Green Confusion) Tritanopia (Yellow-Blue Confusion)
- 23. Color tools Sim Daltonism (OSX) or Color Oracle (Windows) Color Contrast Analyzer (OSX and Windows) Tanaguru Contrast Finder (Web App)
- 24. Android color correction Settings > System > Accessibility > Color Correction
- 25. iPhone color filters Settings > General > Accessibility > Display Accommodations
- 26. Fonts Affects: Anyone with vision or cognitive impairments, screen readers, outside glare Small fonts are harder to read for vision-impaired users, in sunlight, on older phones Recommended minimum font size for body text is 14px Enable scalable fonts that allow users to override font sizes Android uses Scalable Pixels and iOS uses Dynamic Type
- 27. Android font resizing Settings > System > Accessibility > Color Correction
- 28. iPhone font sizing Settings > General > Accessibility > Larger Type
- 29. Environmental factors Increased need for color contrasts because of potential for glare Older phone screens aren’t as bright Users are less likely to remember information because of distractions Can’t account for every situation User Testing Outside
- 30. Design for outside Aim for higher contrast ratio of 4.5:1 Increase touch target sizes Reduce the amount of visual clutter Allow the user to start and stop in the process (don’t time out if it isn’t necessary) Take your app outside and test it out
- 31. operable
- 32. Operable “User interface components and navigation must be operable.” Users need to be able to get to (and from) all non-decorative elements on the screen Information should be organized in a way that’s easy to understand Additional plugins can interfere with assistive devices
- 33. Touch targets (taps) Affects: Anyone with hands or uses an instrument to tap phone Android recommends touch targets of at least 48dp X 48dp with 8dp of space iOS recommends 44px X 44px General rule of thumb is 7-10mm Certain user groups (such as children, construction workers or those with Parkinson’s) will need larger touch targets
- 34. Placement Affects: People with small hands or limited range of movement, users with only one hand, left-handed users, users with temporary or situational disabilities (holding an object) Optimize for one handed usage but be flexible if possible (left handed) If possible, allow for landscape or portrait orientation Support system accessibility that shifts display downward
- 35. Android display resizing Settings > System > Accessibility > Color Correction
- 36. Keyboards Affects: Anyone with keyboard phone, who wants to use a keyboard, users with motor impairments Not just for desktops (or even tablets) Make sure all elements can be traversed Watch out for keyboard traps
- 37. Hierarchy Affects: Screen readers, cognitive disorders, small screens Place important items closer to the top Group like-minded items together Set a manual focus order
- 38. understandable
- 39. Understandable “Information and the operation of user interface must be understandable.” Users should be able to understand how your app works, as well as what the information means Messaging is consistent without using overwhelming jargon
- 40. Label everything Buttons, Icons, Tabs, anything with no visible description (for screen readers) Android: contentDescription iOS: Label
- 41. How to label Describe the purpose (Add, Delete, Next) Do not describe the type of control (Button, Icon) Do not mention how the user will interact with your app (click, tap, press) iOS only: Begin with capitalized word Both Android and iOS support localized screen reading
- 42. Forgiveness Affects: Everyone Guide the user to enter the correct inputs Have 404s, 501s and other error messaging direct the user to helpful locations Search results and browsing should direct the user appropriately if they encounter a dead end
- 43. Forgiveness Help in entering inputs Guided tips to the user 404s and 501s should provide direction
- 44. Layout Rely on layout conventions (top nav, menu placements, etc) Android and iOS default SDKs Consistency between screen sizes and mediums is not a requirement Important elements positioned prior to the screen break
- 45. robust
- 46. Robust “Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.” Users should be able to access your app through a variety of means without your app breaking Taps and touches, voice assistants (Siri, Alexa, Cortana), screen readers
- 47. Screen readers Android: TalkBack, iOS: VoiceOver Avoid unnecessary sounds Multiple ways to navigate screens with a screen reader May use screen reader by itself or with other assistive technology
- 48. Gesture basics Touch or move around the screen – speak and select the item under your finger Swipe right or down – move to next item on screen Swipe left or up – move to the previous item on screen Double-tap – select focused item Swipe up then down – move to the first item on screen Swipe down then up – move to the last item on screen Swipe right then left – scroll forward on page or move slider
- 49. Android Talkback Settings > System > Accessibility > TalkBack
- 50. iOS VoiceOver Settings > General > Accessibility > VoiceOver
- 51. Other considerations Less is more Be succinct and use active voice Rely on Material Design and iOS SDKs and documentation Don’t use flash Give videos and images alternate text
- 52. Resources
- 53. Getting started iOS: https://developer.apple.com/documentation/uikit/accessibility/ uiaccessibility Android: https://developer.android.com/guide/topics/ui/accessibility/ index.html Xamarin Forms: https://developer.xamarin.com/guides/xamarin-forms/ advanced/accessibility/ (requires a pretty customized implementation) React: https://facebook.github.io/react-native/docs/accessibility.html The definitive guide: https://www.w3.org/WAI/intro/wcag
- 54. Additional Resources *New Slide WAVE (Web Accessibility Testing): http://wave.webaim.org/ Android Accessibility Testing: https://developer.android.com/training/ accessibility/testing.html — scroll down to Analysis Tools iOS Accessibility Simulator: https://developer.apple.com/library/content/ technotes/TestingAccessibilityOfiOSApps/ TestingtheAccessibilityofiOSApps/TestingtheAccessibilityofiOSApps.html Accessibility Recruitment Panel: https://access-works.com/about.php