Voice-back, online escape room to improve mobile screen-reader skills

Note: This post is older than two years. It may still be totally valid, but things change and technology moves fast. Code based posts may be especially prone to changes...

(Loaded 1289 times)

A short post about my Global Accessibility Awareness Day 2022 contribution – online escape room for mobile screen-readers called Voice-Back.

What was the motivation, intention, implementation and goal behind voice-back.net.

Please try it out if you want and let me know how it went.

As I mentioned in my last post – I wanted to add something to Global Accessibility Awareness Day 2022 – and Voice-back is one of the things. This post will describe the motivation, intention, implementation and goals behind voice-back.

If you are curious about the game, please visit Voice-back.net with your mobile and try it. Hope your mobile is running Android or iOS though as Voice-back doesn’t support others.

Motivation – why do we need voice-back?

Well – we don’t “need” voice-back to learn how to use screen-readers on mobile. I just wanted to make a simple game that could be used with Android’s TalkBack or iOS’s VoiceOver and make it a bit of a competition. That’s why I thought of building a simple online “escape room” – where user has to use VoiceOver or TalkBack to complete some simple tasks and proceed through the steps (riddles) in the “escape room”.

Competing against ourselves and time can be quite a motivation, I guess. At the same time I wasn’t able to find anything similar “out there”. A game that would work with screen-readers and improve screen-reader skills. Sure, there are a lot of sites that explain how to use a screen-reader and suggest where to use it (for examples on some familiar websites), but to my knowledge this is the first one to be meant as a game. Please correct me if I’m wrong, I can for sure be, it’s impossible to find everything online if authors decided not to, for example.

As you probably figured it out by now – the name is a wordplay made of two most prominent mobile screen-readers in the world – Voice(Over) and Talk(Back). I thought that that would do just fine to cover both of them under one name. I have been to some escape rooms and I like the concept of it, so that’s why I decided to call it an escape room, although it’s just a simple task completion exercise. Voice-back will hopefully make it a bit more interesting to try out the screen-reader with a “gamified” practice. I hope.

It is still a beta version and please reach out if you stumble upon a bug or have an idea about improvement (I have lots of ideas on how to improve it and will do it gradually, but it is functional as a minimum viable product (MVP)).

Intention – mobile screen-reader skills should be fun to acquire and train for

Motivation behind is quite well at describing the intention as well, but let me try to describe the intention itself a bit more. I wanted to make a game that folks can play to get some practice with their mobile screen-readers after they tried out the gestures and understand the basics of it. It is not so hard as it seems and I guess it is like with any new technology – we need to invest some time and effort and we can make it.

By adding a time component I wanted to make it into a competition, first and foremost against ourselves. And with time also against each other, will think about it.

Main intention is to practice mobile screen-reader skills, like for example;

  • navigation by landmarks, headings, lines, paragraphs and characters – quite a basic skill to have,
  • finding out how to find information in two dimensions – like for example in tables – tables are very useful and we need to operate them,
  • typing in words can be a bit difficult for some users, typing them with screen-readers can be even harder – but it is a skill everybody needs.
  • some basic cognitive memory skills are needed even more when we don’t see the screen.

So I really hope that we can use Voice-back to test our mobile screen-reader skills and improve them with time and training. I’ll try to improve it as I get more feedback, so please reach out and let me know.

Implementation – voice-back was supposed to be a native mobile app

Originally I thought of it as a native mobile app. Because it is way more difficult to cheat when the source code is so abstract. I even made a React Native app that made it possible but as I am not a native mobile developer I didn’t want to get through all the efforts to publish it on both markets and wait for approval and so on.

That would make the release much more risky and I would for sure miss my planned date – the Global Accessibility Awareness Day – that was on 19th of May 2022.

So I decided to just do the thing that is really not best practice – checking user agent string for operating system and then displaying appropriate user interface based on that.

I know – user agent string can be easily spoofed – but I hope people will not try to cheat and rather try to make it through. For all the cheaters out there I still made a simple anti-cheat mechanism, but I guess that it would not be a problem for anybody that is at least somehow known with modern browser developer tooling.

Back-end is as simple as possible and will be improved with time – as mentioned, I wanted to test out the concept first and gather some feedback. Back-end just enables saving the results and updating the record time, so that I have at least some data available.

I also use some Google Analytics anonymous tracking and event collection to make some data out of user interaction. I know that Google Analytics in Europe is currently at least under suspicion of not respecting user privacy enough, but as I am not sending any personal data to it I think it will be OK. If you think otherwise please let me know, I can give it some effort and collect the events on interactions with my own back-end as well, but it would need some development time that I would rather use for improvements of the app itself.

Goals – I hope it will add some joy to your accessibility practice

Testing with screen-readers can be very difficult, especially when we are not used of them. I know that we will never be really advanced users of screen-readers and we actually don’t have to be. Sometimes it is enough to find out about basic problems that may not be so obvious in the code we are testing

Basic screen-reader usage should be in my opinion a best practice used by almost anyone that creates online. Content providers, designers, developers, testers and so on will all benefit of basic screen-reader skills.

We live in these mobile-first days when everybody has their mobile with them almost all of the time and I don’t see a reason for not learning the basics of their build in screen-readers. So I hope people will invest a bit of their time and at least try it out a bit. If they want to get a bit better it is useful to train and voice-back online escape room can help them be better. I hope.

Please let me know if you find a bug, if you think something needs to be improved or even if you only want to say thanks for the fun.

If you are curious about the game, please visit Voice-back.net with your mobile and try it. Hope your mobile is running Android or iOS though as Voice-back doesn’t support others.

Author: Bogdan Cerovac

I am IAAP certified Web Accessibility Specialist (from 2020) and was Google certified Mobile Web Specialist.

Work as digital agency co-owner web developer and accessibility lead.

Sole entrepreneur behind IDEA-lab Cerovac (Inclusion, Diversity, Equity and Accessibility lab) after work. Check out my Accessibility Services if you want me to help your with digital accessibility.

Also head of the expert council at Institute for Digital Accessibility A11Y.si (in Slovenian).

Living and working in Norway (🇳🇴), originally from Slovenia (🇸🇮), loves exploring the globe (🌐).

Nurturing the web from 1999, this blog from 2019.

More about me and how to contact me: