In Droidcon Berlin, I gave a talk titled "Is This App Accessible? A Live Testing Demo," in which I tested one app from an accessibility perspective. The audience voted for the app from three options and selected Clue, a period tracking app. The other two were the Droidcon app and Provinssi's (a Finnish music festival I attended in June) app.
In this blog post, I'll summarize the talk and probably add some things I was supposed to say on stage but forgot. So note that this post might slightly differ from the actual talk I gave. If you want to watch the talk, it's available on the Droidcon website: Is this app accessible? A live testing demo
Note that as the talk was 40 minutes long, I did not do that extensive accessibility testing, and the app may have more issues than I found.
Why I Chose Clue?
When I was thinking about the possible apps for testing, I wanted to include an app that's not the most typical example in developer conferences and learning materials. I can't count how many examples of different vehicles I've seen (hello, inheritance!). Or examples having something related to movies.
As the gender balance in tech is skewed towards those who don't have cycles, I wanted to bring this topic in. I also think that periods should be talked about way more in different settings - that would help to dismantle the taboo around them, as well as all those stupid stereotypes and jokes around menstruating people.
And why Clue, why not some other app? It's because their app is the best one. Their app is the least heteronormative I've encountered out there. It doesn't assume my gender, nor does it assume the gender of the partner if I wanted to share my cycle data with someone.
And speaking of the partner mode... I haven't used it, but I haven't also seen any creepy "we will let your (man) partner know that based on your cycle, you want to have sex"-messages. I'm not naming names, but some other period-tracking apps do this.
Note! Clue didn't pay me to advertise them! These opinions are purely based on my own experiences and thoughts. I just really like the application.
I was (positively) surprised that the audience selected Clue for testing. I was pretty sure everyone would have wanted to see me break the conference app. Maybe next time?
About the Tests
The tools and settings I used during the talk were the following:
- Accessibility Scanner
- Switch Access
- Larger font size and display
- Remove animations setting
For those of you who are not familiar with these tools and settings, here's a short description of each of them:
Accessibility Scanner is an app for semi-automated accessibility testing, and it can detect accessibility issues in the following categories: Content labels, Touch target size, Clickable items, and Text and image contrast. It's available in Google Play, so you can test any Android app with it - even without access to source code. I have written a blog post on how to test with Accessibility Scanner: Testing with Accessibility Scanner.
Switch Access is a service that lets a user use their phone with one or more switches. Usually, when two switches are in use, one is used for navigating forward, and the other is used for completing actions. Google has released a video on how to set up Switch Access, so if you want to check it out, it's available in YouTube: Switch Access for developers - Accessibility on Android
Larger font size and display are both set from the phone's accessibility settings. You can control both font and display sizes, which is useful, especially when testing for accessibility issues with larger phones, while many users have smaller ones. For the testing purposes, I usually crank them both to the largest to find the most of the problems.
Remove animations-setting is an accessibility setting, which removes animations as the name states. On some operating systems, the setting is called "Reduce motion", and I often keep referring to it as such. I've written about the setting for Android developers: Android, Animations and Reduced motion.
From these four, I actively tested the first three; for the remove animations-setting testing came sort of for free, as I always have it on.
Accessibility Scanner
When testing with the Accessibility Scanner, I tested three screens: The main screen with the main view showing the current cycle data, then the menu, and finally, the Analysis-page. The app took the screenshot from the Analysis-page before the page had loaded, so there was not much useful findings, but the other two revealed some issues.
Here's a screenshot of the main screen with annotated issues. Note, that my font size was already a bit bigger than the default, so that's why the "Try now for free"-button looks a bit odd. We'll get back to that in the font size section.
The picture displays an orange rectangle around the text, like the button mentioned above, and the text "Subscribe to Clue Plus and support our mission" is next to it, as well as the "Day"-text above the current cycle day and the text "About the follicular phase". The drop of blood-icon also has an orange rectangle around it.
On the Accessibility Scanner app, I can click each of these items to get more information. For example, the drop of blood-icon reveals the following screen, describing that that item may not have a label readable by screen readers:
Why is it a problem? This element is interactive (a button, even though it doesn't really look like one), and if a person who navigates with a screen reader focuses on it, they hear that it's an unlabeled button. They probably have no idea of what they can do with that element.
The Accessibility Scanner app also lets us see all the issues from different screens, categorized by screen or category. For this test run, we can see that there were five categories:
Most issues were with text contrast; for example, all of the annotated texts on the main screen had some level of text contrast issue.
Switch Access
I also tested the app with Switch Access. I found two main issues during the short testing: I couldn't switch days from the visualization with the current cycle day visible, and the "Track"-button in the bottom bar didn't work.
The first issue has probably something to do with the fact that it's most likely built with canvas. Adding navigation to the canvas is not straightforward because you can't make individual items inside the canvas, e.g., focusable. You can add pointer tracking easily, but you can't add focusability, etc.
I suggest adding controls, like buttons, that would control the currently visible item so that anyone who can't use a pointer input could control the visible item with those. I've explained this topic in my blog post More Accessible Graphs with Jetpack Compose Part 4: On-Screen Control Buttons, so if you want to read more, head there.
The other problem is the "Track"-button not being reachable with switch access. While the drop of blood icon leads to tracking, the same place where the unreachable "Track"-button does, it's not clearly marked as a button, and it doesn't have a label, so it can be hard to know where it leads.
Solving that would require finding out why it's not reachable and making it accessible with a switch device.
Largest Font Size and Display Size
My last test was turning font and display sizes up to the maximum. As you can see from the picture, not everything worked:
The screen above has multiple problems. The biggest, I'd say, is that in many places, texts are cut out, and it's not clear what they say. For example, the bottom bar texts are far from clear - and if you don't do well with iconography (meaning, you don't always understand what each icon means), it might be hard to navigate in this app without knowing where the bottom bar item leads.
How do we fix these problems? Usually, components are not scaling because some elements are fixed in size or position. It leads to either the fixed size/position component not scaling well or affecting other components around. So, the actual fix depends on the underlying problem. The ultimate goal is to have all the information available for users who turn the font and/or display sizes up.
Remove Animations -Setting
I did not actively try to find anything related to the Remove animations setting. My strategy was that if I encounter animations, then I know this setting is not working. I did not notice anything when testing different app screens, so I'd say Clue passed this test very well.
Wrapping Up
In this blog post, I've discussed accessibility testing of the Clue app. While there were problems, I must say that I've seen way worse apps out there from the accessibility point of view.
The tests I did were something we, as developers, can (and should!) do while developing. Once you start testing and do it a couple of times, they become straightforward - the most challenging part is actually remembering to test for accessibility.
Do you test for accessibility? Or have you learned something from this blog post?
Top comments (0)