Native Educational Apps: BEST PRACTICES FOR IMPROVING ACCESSIBILITY FOR YOUNG VISUALLY IMPAIRED AND BLIND STUDENTS
iPad Toolkit FOR DESIGNERS AND DEVELOPERS TO BEGIN TO LEARN ABOUT ACCESSIBILITY
ACCESSIBILITYMATTERSTO.US Kathy Loughlin (C) 2017
Image credits: Robert Salazar and Marie Van den Broeck Nounproject.com
TABLE OF CONTENTS TABLE OF CONTENTS 2 EXECUTIVE SUMMARY 3 INTRODUCTION 4 DESIGNERS (ACCESSIBILITY 101) 23 DEVELOPERS (ACCESSIBILITY101) 31 CONCLUSION 39 END 45
TABLE OF CONTENTS
BEST PRACTICES TOOLKIT
EXECUTIVE SUMMARY Who has this toolkit been written for? This toolkit has been written to help provide UX and UI app designers with information to help them learn about accessibility and how they can apply to their next native educational app project. The toolkit was also created with app developers in mind who want to start learning about accessibility. The main focus of the toolkit is native educational apps for the iPad for visually impaired and blind students. Some of the key concepts can be applied outside of this restricted criteria too. There is a lot of information available online and it can be quite overwhelming and cause a heavy cognitive load. This is only the beginning of a long journey.
EXECUTIVE SUMMARY
BEST PRACTICES TOOKIT
INTRODUCTION
INTRODUCTION
BEST PRACTICES TOOKIT
GET TO KNOW THE BUZZ WORDS Here are words that you will see when you do your research
INTRODUCTION
BEST PRACTICES TOOKIT
WHY NOT INCLUDE ACCESSIBILTY Why not include accessibility in your work - a survey question to UX and Developers?
INTRODUCTION
BEST PRACTICES TOOKIT
WHY IS IT IMPORTANT 2011 National Health Survey of Children’s Health - Vision Focus 2014 Statistics on children with visual difficulty
INTRODUCTION
BEST PRACTICES TOOKIT
WHAT IS IMPORTANT Young visually impaired and blind users have different design needs than a sighted student. It is important to design for both accessibility and usability for those users.
INTRODUCTION
BEST PRACTICES TOOKIT
TIMELINE Key dates in history related to accessibility.
INTRODUCTION
BEST PRACTICES TOOKIT
IPAD INTERACTIONS There are several interactions with the iPad and the visually impaired or blind student. Their needs will drive the type of accessibility features they will use to interaction with the native educational app.
INTRODUCTION
BEST PRACTICES TOOKIT
ACCESSIBLE FEATURES - 1 There are many accessible features built into the iPad that the visually impaired and blind children can use with an native educational app that has been designed, developed and tested with accessibility in mind.
INTRODUCTION
BEST PRACTICES TOOKIT
The General Settings allow for the accessibility features to be easily seen. Once Accessibility is selected, more features are visible to choose from.
ACCESSIBLE FEATURES - 2 Take a look at the iPad accessibility features under General Settings.
Note: iPad screenshots reflect iOS 9.3.5. Both iOS 10 and 11 have more accessibility features. INTRODUCTION
BEST PRACTICES TOOKIT
Accessibilty is the entry point for most of the accessibility features on the iPad. With iOS 10 and now 11, there are more accessibility features available such as an upgrade to color accessibility under Display Accommodations.
ACCESSIBLE FEATURES - 3 Take a look at the iPad accessibility features. You will see the Vision settings that are available.
Note: iPad screenshots reflect iOS 9.3.5. Both iOS 10 and 11 have more accessibility features. INTRODUCTION
BEST PRACTICES TOOKIT
VoiceOver (built - in screen reader) is an extremely useful feature for the visually impaired and blind students. It is through VoiceOver the Braille and rotor features are exposed for selection.
ACCESSIBLE FEATURES - 4 Take a look at the iPad accessibility features “VoiceOver”.
Note: iPad screenshots reflect iOS 9.3.5. Both iOS 10 and 11 have more accessibility features. INTRODUCTION
BEST PRACTICES TOOKIT
The Rotor is like physically turning a knob or dial, but is done on the touchscreen of the iPad with two fingers. With VoiceOver enabled, there are over 30 settings to choose from which help to control the single flick up or down gesture. This is a helpful accessibility feature for the young blind student.
ACCESSIBLE FEATURES - 5 Take a look at the iPad accessibility features “The Rotor.”
Note: iPad screenshots reflect iOS 9.3.5. Both iOS 10 and 11 have more accessibility features. INTRODUCTION
BEST PRACTICES TOOKIT
Braille is an extremely useful feature for the visually impaired and blind students. It is through VoiceOver the Braille and rotor features are exposed for selection.
ACCESSIBLE FEATURES - 6 Take a look at the iPad accessibility features “Braille”.
Note: iPad screenshots reflect iOS 9.3.5. Both iOS 10 and 11 have more accessibility features. INTRODUCTION
BEST PRACTICES TOOKIT
Refreshable Braille Display A refreshable braille display, displays 80 characters at a time to the young user. (This sentence is 85 characters)
HumanWare Brailliant BI 32 Refreshable Braille Display Device that can be used with the iPad Cost: $2,594.95
Apple Smart Keyboard for 9.7inch and 10.5 inch iPad Pro connects to iPad Pro with the Smart Connector $150 - $159 (sold at apple.com)
https://www.apple.com/shop/ipad/ipad-accessories
ASSISTIVE TECHNOLOGY Basically something connected like a keyboard or refreshable braille display or built-in accessibility features that help people with disabilities interact with a device like an iPad. The builtin accessibility features in the iPad mean the student does not have to purchase the same stand-alone assistive technology.
There are small pins that can be raised or lowered to form Braille characters which can be felt and deciphered
Headphones (not to disturb other students while using VoiceOver) Beats EP On-Ear Headphones - White $129.95 .(sold at apple.com)
INTRODUCTION
BEST PRACTICES TOOKIT
OUR JOURNEY
The journey to design and build accessible educational apps has several handoffs along the way. There are experts who specialize in accessibility. Since you are creating an educational app, teachers and other professionals who help the young visually impaired user should be engaged in the process and lastly uploading your app and promoting to the users are all important factors.
There is a journey that UX designers, interaction designers and developers take towards delivering an accessible native educational app to visually impaired and blind children.
INTRODUCTION
BEST PRACTICES TOOKIT
THE APP LANDSCAPE
Lots of apps are available in the App Store ÂŽ, but of all the apps that are available, there are very few that provide the visually impaired and blind childen the requirements to make them accessible. Most of these apps are targeted to sighted children.
There are 1.5M apps in the App Store ÂŽ, but few are accessible for the visually impaired and blind children on their iPad.
INTRODUCTION
BEST PRACTICES TOOKIT
There are three users listed below and the type of accessibiity features they need to use has been identified. In the case of Lucas he is also using assistive technology that is connected to the iPad.
TARGET AUDIENCE Who is the target audience for the educational native app and what accessibility features are important to them.
INTRODUCTION
BEST PRACTICES TOOKIT
POUR The four principles of accessibility: Perceivable, Operable, Understandable and Robust.
INTRODUCTION
BEST PRACTICES TOOKIT
There is a lot of information surrounding the WCAG 2.0 Guidelines and it can be very confusing. There are really three tiers of compliance, A, AA, AAA and the levels have different number of guidelines and success measures.
WCAG 2.0 Web Content Accessibility Guidelines 2.0 was endorsed as a W3C Recommendation in Dec 2008. The iPhone was only released in 2007 and the iPad in 2010. They are a series of guidelines for improving web accessibility that are stronger than Section 508 of the ADA, but not focused specifically on Mobile, but are applicable to mobile in many areas. Both 508 and WCAG 2.0 are standards for accessibility. WCAG 2.1 is a working document that will focus more on mobile.
Section 508 and WCAG 2.0 United States Access Board: Comparison Table of WCAG 2.0 to Existing 508 Standards https://www.access-board.gov/guidelines-and-standards/ communications-and-it/about-the-ict-refresh/background/ comparison-table-of-wcag2-to-existing-508-standards
Here are some resources where the complete documents can be found:
Section 508 Mobile Standards Testing Summary
Mobile Accessibility - W3C Web Accessibility Initiative
https://mobile.va.gov/sites/default/files/files/Section508MobileBestPracticesSummary.pdf
https://www.w3.org/WAI/mobile/
Legal Information to know
Web Content Accessibility Guidelines (WCAG) 2.0
Section 508 refers to Section 508 of the 1973 Rehabilitation Act.
https://www.w3.org/TR/WCAG20/
Check out the tool that can keep this all organized in the Developer Tools section.
INTRODUCTION
BEST PRACTICES TOOKIT
DESIGNERS ACCESSIBILITY 101
DESIGNERS
BEST PRACTICES TOOKIT
COLOR IN YOUR DESIGN Think about the ways that you use color and other UI treatments in your design and then think about the accessibility features that the visually impaired and blind students need to use. How do your designs match up with the needs of the user. Explore the content in this section to help better understand accessibility as it pertains to the design of the native app for the iPad.
DESIGNERS
BEST PRACTICES TOOKIT
COLOR MODIFICATION There are different ways that the visually impaired user will use the accessibility features on the iPad to adjust the display, and in this case for color, so they can interact with the app in a method that best meets their needs.
DESIGNERS
BEST PRACTICES TOOKIT
placeholder
placeholder
COLOR TOOLS
Accessible Color Palette Builder
Contrast Ratio Tool
Color Palette Combination Contrast Tester
Accessible Color Palettes
Color Contrast Check
Tanaguru Contrast Finder
https://toolness.github.io/accessible-color-matrix/
http://jxnblk.com/colorable/demos/text/
http://leaverou.github.io/contrast-ratio/
http://colorsafe.co/
Here are some tools to help you make your app UI design more accessible.
Placeholder
https://snook.ca/technical/colour_contrast/colour. html#fg=33FF33,bg=333333
http://contrast-finder.tanaguru.com/
Color Contrast Checker
WebAIM - http://webaim.org/resources/
DESIGNERS
BEST PRACTICES TOOKIT
placeholder
placeholder
Color Blind Web Page Filter https://www.toptal.com/designers/colorfilter
COLOR BLINDNESS TOOLS Here are some tools to help you make your app UI design more accessible for people who are colorblind (or color deficient).
Placeholder
What does a color blind user see
What does a color blind user see Color blindness - deuteranomaly (red/ green distinction). On the left are two pictures as seen by a person with “normal� vision. On the right, the same pictures are simulated as seen by a person with deuteranomaly. When you choose colors for your design, make sure to avoid red/ green combinations. There are other forms of color blindness, but red-green is the most prevalent. https://www.interaction-design.org
DESIGNERS
BEST PRACTICES TOOKIT
placeholder
placeholder
Examples of what a user with low vision will see http://lighthouse-sf.org/?s=see+your+designs+through&x=11&y=11
LOW VISION What does a low vision user see?
Placeholder
DESIGNERS
BEST PRACTICES TOOKIT
Color Contrast Tool by UserLight Ltd (.$99) — Available in the App Store ® The color contrast app makes it very easy to take a screenshot of your app and then move to points on the image to measure the color contrast and provide the actual rating on the screen. https://itunes.apple.com/na/app/color-contrast/id1095478187?mt=8
COLOR TOOL APP The app is called the Color Contrast Tool and it helps you get a measurment of color contrast in your app design.
DESIGNERS
BEST PRACTICES TOOKIT
Reach out to your target audience, engage users early or at least accessibility experts to help ensure your design will be accessible
MAKING IT BETTER What are some things you can do as a UX designer or UI designer to make your educational apps more accessible for the visually impaired and blind young students.
For educational content, work with the content curators to ensure they engage the educational professionals to ensure the app truly has educational value.
Color factors is so important to the visually impaired users. Familiarize yourself with the tools that are available online and select the few that work well for you.
Leverage the 4 principles - POUR in your design as it applies to mobile. Learn the WCAG Guidelines 2.0 and the keep informed on the 2.1 guidelines since there will be more emphasis on mobile. Change the mindset to designing for all, small changes can make a big difference in accessibility.
DESIGNERS
BEST PRACTICES TOOKIT
DEVELOPERS ACCESSIBILITY 101
DEVELOPERS
BEST PRACTICES TOOKIT
LET’S EXPLORE SOME APPS Think about the ways that you develop and test your apps and then think about the accessibility features that the visually impaired and blind students need to use. How do you think your apps match up to the needs of the user. Explore the content in this section to help better understand accessibility as it pertains to the development and testing of the native app for the iPad.
DEVELOPERS
BEST PRACTICES TOOKIT
Math Melodies indicates in the description that it can be used both by blind and sight impaired children. “Designed to be accessible and entertaining both for blind and sight impaired children. It is also a useful educating tool for teachers and parents.” When searching it could not find it under a specific age, rather all ages, all categories. It was also searchable under the Education category and all ages.
APP #1 REVIEW Math Melodies in the App Store®.
DEVELOPERS
BEST PRACTICES TOOKIT
Ballyland Rotor is an app that is identified as made for kids ages 6-8 and the description indicates that is a “game” specifically designed for children who are blind or have low vision. “.. it is both highly entertaining and educational, teaching the concept and gestures for the rotor in VoiceOver.” The description further details the features and how it can be used with the accessibility features of the iPad and it lets parents and teachers know that it was designed with feedback from both parents and teachers. There is a developer website that can be accessed from the details about the app.
APP #2 REVIEW Ballyland Rotor App in App Store®.
DEVELOPERS
BEST PRACTICES TOOKIT
Visual Brailler is an app that allows the blind student to practice learning braille.
Hello World in braille
APP #3 REVIEW Visual Brailler in App StoreÂŽ.
iPad Accessibily Feature: Braille along with VoiceOver screen reader allow the blind student to interact with the educational app.
DEVELOPERS
BEST PRACTICES TOOKIT
Accessibility Inspector is a tool to help debug accessibility issues in iOS. This tool displays accessibility information about each accessible element in the app. Information about this tool is available in the Apple developer portal
DEVELOPER TOOLS Apple has a developer portal to help you with the development of an accessible app. There are a few other tools to help you as well.
Another way to test accessibility is running the app with the screen reader (VoiceOver) turned on to help expose confusing labels and interaction issues with the app and the iPad. https://developer.apple.com/ WCAG Accessibility Checklist App Download at the App at the App StoreÂŽ. It is a concise tool to help identify the level of compliance (A, AA or AAA), the guidelines for each of the four pillars - Perceivable, Operable, Understandable and Robust and at the compliance level. DEVELOPERS
BEST PRACTICES TOOKIT
Under Special Education, Seeing and Hearing there were 17 apps displayed.in the App Store ®. When searching for “visually impaired,” ages 6-8, for all cateogories only one app was in the results and for “blind”, three apps were returned.
APP STORE® SEARCH
The iTunes® experience was a little different. When searching for “Education, there are around 100 iPad apps displayed in the results, but some are in a category other than Education. You also cannot sort based upon age as you can in the App Store®. With accessibility as the search criteria about 20 apps were returned in the results.
Search in the App Store ® under Special Education, Seeing and Hearing.
DEVELOPERS
BEST PRACTICES TOOKIT
Reach out to your target audience, engage users early or at least accessibility experts to help ensure your app will be accessible
MAKING IT BETTER What are some things you can do as a developer to make your educational apps more accessible for the visually impaired and blind young students.
For educational content, work with the educational professionals to ensure the app truly has educational value and that it is accessible. Leverage the 4 principles - POUR in your app as it applies to mobile. Learn the WCAG Guidelines 2.0 and the keep informed on the 2.1 guidelines since there will be more emphasis on mobile. Change the mindset to development for all, small changes can make a big difference in accessibility.
There are a number of things that you as a developer can do with your app for the App StoreÂŽ. Ensure you have identified the correct category for your app and provided a rich synopsis of the app value and the professionals who were engaged to help validate that value and provide testing feedback. Include keywords in the description that will make it more searchable for parents and teachers of the VIB. Include the age appropriate information. Also create a developer website and include more information to help substantiate the app value and include in the app description.
DEVELOPERS
BEST PRACTICES TOOKIT
CONCLUSION
CONCLUSION
BEST PRACTICES TOOKIT
HCD Always follow the HCD process when app design and development life cycle.
CONCLUSION
BEST PRACTICES TOOKIT
Global Accessibility Awareness Day (GAAD)
GET INVOLVED Learn about Global Accessibility Awareness Day, follow accessibility professionals on Twitter, go to conferences, watch videos about accessibililty.
What is GAAD? The purpose of GAAD is to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities. Creating awareness is key. When is GAAD? It started in 2011 and is held each year on the third Thursday in May.
How Can I Participate in GAAD? • Use keyboard for 1 hour - no mouse • Enlarge your fonts • Check for sufficient color contrast • Check order of elements • Use a screen reader online for 1 hour • Learn about and use other iOS/mobile accessibility features - turn them on, on your mobile device and try to use a favorite app • Tweet #gaad about your experiences earn more L Globalaccessibilityawarenessday.org
Who is the GAAD target audience? The design, development, usability, and related communities who build, shape, fund and influence technology and its use.
CONCLUSION
BEST PRACTICES TOOKIT
CREATE AN ACCESSIBLE EXPERIENCE Tie it all together - usability, mobile standards, and assistive technology to make an accessible experience.
http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility
CONCLUSION
BEST PRACTICES TOOKIT
1. C ontinue to learn more about accessibility over time to better understand the topic. 2. F ollow best practices to design, develop and test for accessibility on new apps you develop.
KEY TAKEAWAYS Top 10 takeways for improving your knowledge about accessibility and applying in your work.
3. A s you create educational apps, remember to reach out to professionals for feedback on the app.
7. W atch some videos of accessibility experts at conferences 8. T ake a course online about accessibility. 9. F amiliarize yourself with WCAG 2.0 and 2.1. 10. E xplore the accessibility features on the iPad.
4. T est with users and test yourself with the tools outlined in the toolkit to help design and develop accessible apps. 5. E xplore the accessibility features on the iPad. 6. S tart to follow an accessibility expert on Twitter.
CONCLUSION
BEST PRACTICES TOOKIT
WHERE TO GET HELP Get help at Apple and other notable Accessibility Organizations. The Apple Website (under Accessibility for iPad) gives a good easy-tounderstand overview of the accessibility features on the iPad.
DESIGNERS
DEVELOPERS
Apple has UI Design Resources which include Photoshop, Adobe XD and Sketch templates, macOS plug-ins, and other UI materials for quickly designing apps. Check out the Human Interface Guidelines too for iOS.
Apple has a developer portal that provides a lot of information to the developer who wants to develop an iOS app and for it to be available in the App Store ÂŽ.
https://developer.apple.com/design/ resources The BBC has developed mobile accessibility guidelines. (https://www.bbc.co.uk/guidelines/ futuremedia/accessibility.html)
https://developer.apple.com/ The BBC has developed mobile accessibility guidelines. (https://www.bbc.co.uk/guidelines/ futuremedia/accessibility.html)
There are lots of people out there talking about Accessibility. To get started, follow them on Twitter, go to their website and read their blogs. Simply Accessible - Derek Featherstone - simplyaccessible.com SSB Group - ssbartgroup.com Deque - deque.com Knowability - knowability.org WebAIM - webaim.org The Paciello Group - paciellogroup.com CONCLUSION
BEST PRACTICES TOOKIT
GO EXPLORE ACCESSIBILITY AND IMPLEMENT ON YOUR NEXT APP PROJECT
END
BEST PRACTICES TOOKIT