Accessibility (part 1)

Accessibility (part 1)

by Nadine Popping

September 24th, 2019

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. We will describe how and why we did this testing, our findings on each disability and our next step. I will post this article in two parts, this is the first, in which I will focus on the first three disabilities: Blindness, Dyslexia and Autism spectrum disorder.

How we did it?

We used the accessibility posters made by the UK Home Office as a starting point to research. These posters contain a list of do's and dont's to keep in mind when designing for accessibility as well as some more general guidelines. For each poster, we added some basic information about the disability and made a persona to help us better understand what it is like to live with that disability.

After some research into the daily lives of our personas and how they use various digital platforms, we moved on to our own app Elevate to see how they might experience the app through their disability. We were amazed by how iOS makes an app a bit accessible by default, and how differently you experience an app when looking at it through a disability. It was surprising to find out how poorly the app was with respect to accessibility.

Why we did it?

At Touchwonders we have innovation days to do a deep dive into a subject we currently don't know enough about, or that we simply find very interesting. The goal is to improve one of our products or processes during the same day. The subject for this innovation day was accessibility.

Why accessibility?

When you create a new project you put your target group at the center and mostly don't consider disabilities (in my experience). Especially working on a client project where there is a budget and a small window of time. It's something that gets cuts as first and never gets addressed again. This means that you risk excluding 25% (estimate) of the Dutch population.

microsoft | accessibility image

We as Touchwonders are aware of this lacking and see a necessity to know more about it, so we can make it easier to address it in the future, and work on it from the start of a project. That's why we chose to do our innovation day about accessibility.

Disabilities

Blindness

Blindness is strictly defined as the state of being totally sightless in both eyes. A blind individual is unable to see at all.

A screen reader is a form of assistive technology which is essential to people who are blind. Screen readers are software applications that attempt to convey what people with normal eyesight see on a display to their users via non-visual means, like text-to-speech, sound icons, or a Braille device.

Findings and improvements

  • Test your app by turning on VoiceOver
  • It will read out to you everything that is on the screen from the top to the bottom, you can use gestures to control it. VoiceOver has a steep learning curve when using it for the first time.

    People who use it everyday commonly set the speaking rate to it's the fastest setting. We couldn't make any sense of what was being said, but our ears aren't as trained.

    This is something you have to try for yourself! Go to your Settings > General > Accessibility > VoiceOver.

    VoiceOver is only available for iOS, for android you have Talkback, which is similar to VoiceOver. Elevate is for now only available for iOS, so I will mostly describe iOS accessibilities features but will mention Android as well.

blindness | voiceover setting image

  • Prioritise your content vertically
  • A screen reader or VoiceOver reads out everything from top to bottom. When designing for non-disabled people you emphasize data by using color or making the element bigger to make that content stand out. Because of this, you don't always put the most important content at the top of a vertical list. This way the screen reader won't read the most important information first; think about this when you design. An interesting method for a designer to prioritize the content on your page is priority guiding

    For a developer, it is possible to provide an explicit order in which elements should be read by VoiceOver.
  • Describe images and use transcripts for videos in your code
  • We noticed that our buttons weren't labeled correctly. When you hear "button" you don't know what will happen when you press it. VoiceOver even completely skipped our graphs and images due to the lack of accessibility labeling. There were a lot of changes that we needed to make so that our app would be accessible for blind people.

    Down below you can see an example of how our About page button is spoken out loud before and after we made some changes.

    To make this work we had to add descriptions to the buttons in code. In the image, you can see what we changed. We as well as Apple and so many others, really recommend you to walk through your own app with VoiceOver and check your buttons and error messages.

blindness | correct labels image

Dyslexia

Problems may include difficulties in spelling words, reading quickly, writing words, "sounding out" words in the head, pronouncing words when reading aloud and understanding what one reads.

Finding and improvements

  • Think about which fonts you will use and your typography (e.g. line spacing)
  • We found out that our app would be difficult to read for someone who has dyslexia because we use all caps titles and, as you can see in the images, our line spacing doesn't have that much space. We added some line spacing and that already makes it much easier to read.

    When choosing a font for your design think about the readability. We found out that there is a special font to help people with dyslexia, called OpenDyslexia font. It would be awesome if iOS and Android could switch to a similar font in the accessibility settings. We personally found the font harder to read so we decided not to change it. But we did assess its impact on our designs.

dyslexia | line spacing and typography image

  • An image says more than a 1000 words
  • In Elevate, we could use more images and videos to support the text. You should add visuals to your app to support your text but do not replace text with images or videos, otherwise your app won't be accessible for people with other disabilities.

    Sometimes a big block of text is unavoidable, like in a Privacy Policy or Terms of Service page.



Autism spectrum disorder (ASD)

ASD is a neurological and developmental disorder that begins in early childhood and lasts throughout a person's life. It is a very broad and varied problem, primarily they are bothered by unfiltered signals coming in and have difficulties structuring them. Social communication and emotions is also difficult to interpret and thus find concepts like irony and "figure of speech" hard to understand.

To really understand, watch this video. It really helps to fathom what it's like to see the world when you have ASD and what kind of stimulants there are in our environment.

Findings and improvements

  • Don't use figures of speech
  • A figure of speech is hard to understand when you have ASD. We used them more often than we thought in our app, for instance: "Elevate your fitness by taking your office stairs more often" or "track the number of stairs you conquered". Figures of speech can give your text a bit more flavor, but after removing them, it was more clear and still fun to read.

asd | figure of speech image

  • Color "50 shades of gray"
  • Bright contrasting colors are stimuli, so it is best to use mat colors. This lead to some discussions because contrasting colors are really important for people with low vision or color blindness. We tried to tone down our color scheme but in the end we chose to keep it as is because of the grayscale functionality iOS offers. Android also has a grayscale function but enabling it differs from different phones models. We checked if our app was still useful in grayscale and it was.

    Go to your Settings > General > Accessibility > Accessibility Shortcut > Colour filters.

asd | grayscale image

What are your thoughts about accessibility?

I am really interested in what your thoughts are on this subject or what you are doing in your projects. Do you make your products accessible for everyone?

Next up: part 2

These were our findings on Blindness, Dyslexia and Autism spectrum disorder during our innovation day. In the next part I will go into details on Physical or motor disability, Deaf or hard of hearing, Low vision and Color blindness and I will tell you what our next step is. Subscribe to our channel so you won't miss out on our next post on this subject!