Mobile accessibility challenges and best practices v2
1 like1,712 views
The document discusses the importance of making mobile applications accessible to all users. It addresses some of the challenges in mobile accessibility like small screens and lack of standardization. The key points made are: 1) Accessibility should be considered from the start when developing mobile apps. 2) Descriptive text using techniques like alt tags and labels help users who cannot see or perceive images and multimedia. 3) Color alone should not be used to convey meaning as some users may not see or perceive color correctly.
![Label:
Done,
Label:
[Program
name,
Label:
SubHtles
Label:
Enter/
back
to….
Episode
number]
On/Off
Exit
Full
screen
Trait:
Buoon
Trait:
StaHc
text
Trait:
Buoon
Trait:
Buoon
Label:
Play
/ Label:
[
00.07
of
59.37
]
swipe
up
or
Label:
Show/
Pause
down
to
adjust
Hide
more
Trait:
Buoon
Trait:
Adjustable
Trait:
Buoon](https://image.slidesharecdn.com/mobileaccessibility-challengesandbestpracticesv2-130224225917-phpapp01/85/Mobile-accessibility-challenges-and-best-practices-v2-48-320.jpg)
Mobile accessibility challenges and best practices v2
- 3. Do we really need to bother about MOBILE?
- 4. Yes, it has become integral part of our life!
- 5. So has it, for them
- 6. Are we not being biased when developing mobile apps?
- 7. BUT
- 8. mobile is by definiHon DISABLING
- 9. REMEMBER THIS? • An electronic telecommunicaHons device • make and receive calls • Send and receive messages
- 10. Hence…. Smaller screen size Poor light Glare Small fonts Poor image and colour support Small keyboards No mouse One hand
- 11. At the same TIME
- 12. mobile is by definiHon ENABLING
- 13. Now Then Purpose is the same… needs and requirements changed People want more
- 14. Hence…. Task based GeolocaHon Camera integraHon Calendar integraHon Bridges the digital divide I can’t afford a computer but I have a mobile
- 16. WHAT ARE DIFFERENT MOBILE APPLICATIONS TYPES?
- 17. Mobile Web NaHve Apps Apps
- 18. Hybrid Apps
- 19. Responsive
- 20. So many mobile devices, So any applicaHon types! How to make them accessible?
- 21. Accessibility… What is that?
- 22. when your mobile applicaHon is ready for…
- 23. Diverse user model Sight, hearing, mobility, learning and cogniHon
- 24. AssisHve technology users Screen readers, screen magnificaHon, voice input
- 25. Hidden disability Chronic faHgue, depression, ME, fibromyalgia, verHgo, nausea, photo sensiHvity
- 26. Aging DeterioraHon, first Hme users
- 27. Temporary RSI, broken wrists, back pain, short-‐term illness
- 28. Cultural Language, color, iconography
- 29. Technology and changes hardware, soYware, access
- 31. Small devices
- 32. Different shapes and sizes
- 33. Touch screens
- 34. Lack of standardized UIs
- 35. Lack of device expandability
- 36. Using devices out “in the wild”
- 37. Next big quesHon, How to make mobile apps accessible with so many challenges?
- 38. First build accessibility into your decision making process
- 39. ESSENTIAL INGREDIENTS OF ACCESSIBILITY
- 40. 1. Web standards – HTML, CSS, JavaScript and XML 2. Web browser 3. Plaborm Accessibility API – iOS, Android and Blackberry 4. AssisHve technology 5. Plaborm accessibility features 6. USERS
- 41. Mobile Accessibility Principles, Guidelines & Techniques
- 42. Add descripHve text to user interface controls in 1 your applicaHon -‐ (images, sound, video) Why? User cannot perceive important informaHon or loses informaHon due to lack of alternaHve/descripHve text.
- 43. 1 Who does it helps? Func%onal Disability Context: • User who is blind cannot perceive content that include non-‐text objects. • User whose browser, assisHve technology, other user agent doesn't support object.
- 44. 1 Who does it helps? Situa%onal Disability Context: • User can be billed for download volume so images might be turned off to save costs. • Some mobile user agents have limited support for non-‐text objects • Some user agents also shrunk images in size to fit the device's screen which can make images meaningless
- 45. How do we achieve that? 1 Using Alt and Title HTML EXAMPLE <img src=“meta.png” alt=“This is meta refresh image” /> Using android:contentDescripHon ANDROID EXAMPLE <ImageBuoon android:id=”@+id/add_note_buoon” android:src=”@drawable/add_note” android:contentDescripHon=”@string/add_note”/>
- 46. 1 Using label, hints and traits iOS EXAMPLE
- 47. Label Short word or phrase Describes the object or view i.e. ‘Play’ Does not describe the type i.e. ‘Play buoon’ Trait Describes the type i.e. link, buoon, checkbox, selected, adjustable More than one trait can be used i.e. checkbox, selected Hint Use sparingly ExplanaHon not a command i.e. ‘Plays video’ not ‘Play video’
- 48. Label: Done, Label: [Program name, Label: SubHtles Label: Enter/ back to…. Episode number] On/Off Exit Full screen Trait: Buoon Trait: StaHc text Trait: Buoon Trait: Buoon Label: Play / Label: [ 00.07 of 59.37 ] swipe up or Label: Show/ Pause down to adjust Hide more Trait: Buoon Trait: Adjustable Trait: Buoon
- 49. 1 DescripHve text guidelines • Add contextual informaHon to images, such as the image name, to communicate the meaning and context of the images • Don’t do keyword stuffing for alternate/descripHve text for SEO ranking • Localize text
- 50. 2 Do not rely on color alone to convey meaning Why? User perceives color incorrectly or not at all, and so misses or misunderstands informaHon or makes mistakes.
- 51. 2 Who does it helps? FuncHonal DisabiliHes Context User who are blind or colorblind perceives color incorrectly or not at all
- 52. 2 Who does it helps? Situa%onal Disability Context Many screens have limited color paleoe and color difference is not presented. Device is used in poor lighHng (for example, outdoors), so colors are not clearly perceived.
- 53. 2 How do we achieve that? Use blocks of color rather than vague outlines/shades
- 54. 2 • Contrast between foreground and background AA (minimum): 4.5:1 AAA (enhanced): 7:1
- 55. 2 HOW TO? Why 4.5:1? Compensates for the loss in contrast that results from • moderately low visual acuity, • congenital or acquired color deficiencies, • the loss of contrast sensiHvity that typically accompanies aging. Why 7:1? Compensates for the loss in contrast sensiHvity usually experienced by • users with vision loss equivalent to approximately 20/80 vision. • users with low vision who do not use assisHve technology. • provides contrast enhancement for color deficiency.
- 56. 2 Color guidelines • Ensure that foreground and background color combinaHons provide sufficient contrast. • Ensure that informaHon conveyed with color is also available without color
- 57. 3 Minimize text input in the interface Why? User has difficulty entering text so text is entered incorrectly or mistakes are made.
- 58. 3 Who does it helps? FuncHonal DisabiliHes Context User with motor disability (for example, parHal paralysis, hand tremor, lack of sensiHvity, coordinaHon) has difficulty entering informaHon.
- 59. 3 Who does it helps? SituaHonal Disability Context • Device has small keypad which has limited funcHonality • The context of mobile could be unpredictable
- 60. 3 How do we achieve that? • Provide alternaHve means to enter text if possible • Avoid free text entry where possible. • Provide pre-‐selected default values where possible. • Specify a default text entry mode, language and/or input format, if the device is known to support it. • Use keyboard shortcuts if supported by the device and browser
- 61. 4 Use SemanHc Markup Why? If the page markup is invalid this will result in unpredictable and possibly incomplete presentaHon of the content.
- 62. 4 Who does it helps? FuncHonal DisabiliHes Context: AssisHve technology or browser cannot handle invalid markup. Easier for disabled users using screen readers to understand the purpose of elements and quickly jump between different types of elements.
- 63. 4 Who does it helps? SituaHonal Disability Context: Some older mobile browsers do not display content with invalid markup.
- 64. 4 How do we achieve that? HTML EXAMPLE <form acHon="hop://example.com/donut" method="post"> <p> <input type="checkbox" name="flavor" id="choc" value="chocolate" /> <label for="choc">Chocolate</label><br/> <input type="checkbox" name="flavor" id="cream" value="cream"/> <label for="cream">Cream Filled</label><br/> <input type="checkbox" name="flavor" id="honey" value="honey"/> <label for="honey">Honey Glazed</label><br/> <input type="submit" value="Purchase Donuts"/> </p> </form>
- 65. 4 How do we achieve that? ANDROID EXAMPLE android.view.accessibility.AccessibilityNodeProvider This semanHc structure allows accessibility services to present a more useful interacHon model for users who are visually impaired.
- 66. 5 Have a concise page content and page size User only sees small Why? areas at a Hme, is unable to relate different areas of a page, and so becomes disoriented or has to scroll excessively.
- 67. 5 Who does it helps? FuncHonal DisabiliHes Context User with restricted field of vision or using screen magnifier gets only small part of page or image at a Hme.
- 68. 5 Who does it helps? SituaHonal Disability Context Mobile device has small screen, so not all inform can be displayed
- 69. 5 How do we achieve that? • Clear and concise language, as mobile users are looking for a quick access to informaHon. • Limit scrolling to one axis throughout the app (verHcal or horizontal axis) a • Avoid image larger than the screen size • Divide pages into usable but limited size porHons. • PosiHon important things higher up and less important things lower down in scrolling views • Create large clickable areas
- 70. Do not insert funcHons that can only be managed 6 via gestures. Always add a buoon/link Why? • Most gestures are not intuiHve • Not recognized by many users
- 71. 6 Who does it helps? FuncHonal DisabiliHes Context • Blind users cannot use gestures at all • Users with temporary disability cannot use gestures • Gestures are guess work for most users
- 72. 6 Who does it helps? SituaHonal DisabiliHes Context Gestures cannot be used in most of the outdoor or indoor context
- 73. 6 How do we achieve that? • Use gestures which can be used even with buoon or link • Don’t rely completely on gestures for the interacHon, have alternate interacHve mechanisms
- 74. 7 Ensure that it is possible to zoom the interface Why? Due to small screen, readability goes for a toss
- 75. 7 Who does it helps? Zooming helps users who cannot read or see Hny leoers or have sight disability
- 76. 7 How do we achieve that? HTML <meta name="viewport" value="iniHal-‐scale=1.0, minimum-‐scale=1.0, maximum-‐ scale=2.0">
- 77. CONCLUSION
- 78. Mobile is for every . Think about it in your next applicaHon!
- 79. Guidelines related to mobile accessibility Web Content Accessibility Guidelines (WCAG) Mobile Web Best PracHces (MWBP) RelaHonship between WCAG and MWBP Widget Accessibility Guidelines Widget Usability Best PracHces Mobile Website Guidelines (University of AusHn)
- 80. Device specific mobile accessibility guidelines Android Designing for Accessibility Android Accessibility Blackberry Best PracHce Designing Accessible ApplicaHons iOS: Accessibility Programming Guide Nokia/Symbian: User Experience checklist for Touch and Keypad (PDFs)