Touchwonders Blog Accessibility (part 2)

Is your app / website usable by everyone?At Touchwonders, the apps that we create are never "finished" - we constantly strive to improve them. For one of our latest apps, Elevate, we were wondering if it was accessible for everyone. We tested it with the focus on 7 disabilities: Blindness, Dyslexia, Autism spectrum disorder, Physical or motor disability, Deaf or hard of hearing, Low vision and Color blindness. I wrote this article in two pieces, this is the second. For the first part I would like to direct you to my first article. In this part I will focus on the last four disabilities: Physical or motor disability, Deaf or hard of hearing, Low vision and Color blindness.DisabilitiesPhysical or motor disabilityA physical disability is when a person has an injury or physical deviation that hinders normal physical functioning. This can be very varying, someone could have an arm with a stump instead of a hand or have no legs. Motor impairment means that you have a loss or limited function in muscle control, movement or mobility. This can affect a person's ability to walk, control hand movements, maintain a steady posture and more. These disabilities can limit a person's independence, especially in a society that routinely designs physical structures without regard to the concerns of people with disabilities. The digital applications can be a way for them to easily connect with the world. We as designers and developers could make our products more accessible for all these users. Physical or motor disability tend to present similar challenges for users who use digital applications.Findings and improvementsProvide large clickable buttonsSmall hit areas are hard to press, depending on which physical or motor disability you have. When you have one hand it is harder to reach certain parts of the screen. I have a friend who has an impairment, but that doesn't mean that I am faster at typing when we're both using a phone. She uses her nose and stub (arm) to type and my fingers can't keep up. A touch screen is usable not just for fingers, so to make it easier hit areas should be big enough to be easy to tap.Xcode already has an option to look at the accessibility of your app, for example the space of a hit area. On the image to the right you can see how to access it, for more information on the Accessibility Inspector click here.For Elevate, the tool showed a view with a lot of warnings about small hit areas. In the image you can see that, amongst others, the hit area around the About button is too small.Think about spacing between text fieldsIn a form there should be enough space between text fields as that gives a clearer overview and leaves more space between interactions. As a designer make sure you leave enough space between objects. As a developer make the hit area of textfield's big enough for easy interaction.Have a look at iOS 13We tried a feature of iOS 13 that could be useful for people with physical and mobility Impairments. It's called Voice Control and it allows you to control your phone with just your voice. We were surprised by how well it works and had quite some fun with it. I did not find a similar functionality for Android yet.If you have a device that runs on iOS 13 you have to give it a shot: go to Settings > General > Accessibility > Voice Control.embed-container { position: relative; padding-bottom: 56.2%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }Deaf or hard of hearingDeafness refers to an individual who can't hear anything. Hard of hearing refers to an individual who has a mild-to-moderate hearing loss. They may communicate through sign language, spoken language, or both. There are a variety of assistive visual technologies including visual alerting devices, technologies to convert spoken language to text, and technologies to support making phone calls.Findings and improvementsAdd Closed Caption to your audio contentWe currently don't use videos in our app, but it was still interesting to look into.To provide subtitles in videos is quite some extra work. It takes considerable time to write clear and concise subtitles for the spoken words and captions for the background sounds. Even though it takes more effort I think we should make video content accessible for everyone. What we noticed by looking at multiple disabilities is that it is important to have options. So don't show just text or videos but provide the user with options.We want to add a closed captioning button, just like Youtube and iTunes do, to give the option for subtitles. They hide their CC button under an inline menu but we don't have as many options so we would like to put it in a more prominent place and hide it after the movie is playing for a while.Think about your communication channelsDon't make calling your only means of contact. Adding a chat function or offering an e-mail function to your website / app would make it possible for everyone to contact your service.Because Elevate is a visual app which isn't using videos to communicate information it is already accessible for deaf or hard of hearing. There are some smaller issues to consider but we didn't focus on it during our innovation day.Low visionLow vision is a condition caused by eye disease, in which visual acuity is at best 70% (but commonly as low as 20% or even poorer) or poorer in the better-seeing eye and cannot be corrected or improved with regular eyeglasses. Many people with low vision give up reading altogether, because what used to be an enjoyable and easy experience now requires effort. There are assistive tools for low vision like: magnifiers, reading glasses, reading telescopes, video magnifiers and portable electronics.Findings and improvementsAllow for dynamic font sizingIn iOS & Android there are settings that lets you change the text size. This will make all texts in every app bigger, or so we thought. In Elevate our font size didn't change, why? Because we hardcoded the font size, instead we had to use size categories and then it scaled.But it turns out that was not the only change we needed to make. When you increase the text size a lot of the text is now either offscreen or truncated. So we wrapped our text blocks in a scrollable view to make sure all of our text was visible.You can easily try it yourself: Go to Settings > General > Accessibility > Larger Text.Combine color, shapes and textDon't just use color to communicate when something went wrong but combine it with shapes and text. The error messages in Elevate already make use of color and text.Zoom or MagnificationA really nice feature of iOS is zoom, on Android it is called Magnification. It will magnify a part of the screen. You can alter the amount by which it zooms in. I introduced this feature to my grandma and now she is using it.You can easily try it yourself: Go to Settings > General > Accessibility > Zoom (or Magnification on Android).Color blindnessColor blindness is the common term for a condition where individuals often mistake shades or lose their ability to distinguish colors at all. Women are less likely to have this disease, while for men approximately one in twelve is prone to it. There are different forms of color blindness. People with deuteranopia can't see green tones, protanopia takes away the ability to see red tones and tritanopia the blue tones. Whereas people with monochromacy can't see red, green and blue tones which means they only see gray tones.Findings and improvementsCheck your design for color blindnessI was scared to test our color pallet but it turns out that our app is still really usable.Try the Sim Daltonism or Stark toolA really helpful tool to use while designing is Sim Daltonism, which you can use on your Mac and iOS device. Sim Daltonism lets you visualize colors as they are perceived with various types of color blindness. The window can easily be moved around your screen. We are now using it to check quickly if our design is accessible for people with various types of color blindness.An old classmate recommended me to Stark (iOS & Android), which is a plugin for Sketch, Photoshop and also Figma, it checks your designs contrast, color simulations and recommends a more accessible color. Both these tools will help you when making a digital product.Think about text linksWe sometimes use primary colors to highlight our tappable links. But for people with certain types of color blindness they look exactly the same as the rest of the text, so we should distinguish them more like buttons.Our links have a primary color so you can see that there is an action linked to it. In grayscale mode it is hard to see that there is an action associated with it. So make your links descriptive.Our next step: validate our findings with real users.Now we want to see if all of our changes actually made a difference. We are currently in conversation with a user group that covers these disabilities to test our adjusted application.Get your cheat sheet nowWe made a cheat sheet for ourselves and we'd like to share it with you. Our free cheat sheet is a great way to quickly analyze the accessibility of your mobile solution or website, or you can use it as a set of guidelines when designing your product. Fill in your email address below and we will mail the cheat-sheet to you, as soon as possible. We can also perform an in-depth accessibility review of your mobile app and/or website, contact us if you are interested. #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;} /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */If you enter your e-mail address here, you will also receive our newsletter every 3 months that will keep you updated about new developments a