Native Educational Apps Toolkit

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