{"id":931,"date":"2022-05-22T19:07:00","date_gmt":"2022-05-22T18:07:00","guid":{"rendered":"https:\/\/cerovac.com\/a11y\/?p=931"},"modified":"2022-05-22T19:48:22","modified_gmt":"2022-05-22T18:48:22","slug":"voice-back-online-escape-room-to-improve-mobile-screen-reader-skills","status":"publish","type":"post","link":"https:\/\/cerovac.com\/a11y\/2022\/05\/voice-back-online-escape-room-to-improve-mobile-screen-reader-skills\/","title":{"rendered":"Voice-back, online escape room to improve mobile screen-reader skills"},"content":{"rendered":"\n<p>As <a href=\"https:\/\/cerovac.com\/a11y\/2022\/05\/my-plans-for-global-accessibility-awareness-day-2022\/\" data-type=\"post\" data-id=\"925\">I mentioned in my last post &#8211; I wanted to add something to Global Accessibility Awareness Day 2022 <\/a>&#8211; and Voice-back is one of the things. This post will describe the motivation, intention, implementation and goals behind voice-back.<\/p>\n\n\n\n<p>If you are <a href=\"https:\/\/voice-back.net\">curious about the game, please visit Voice-back.net<\/a> with your mobile and try it. Hope your mobile is running Android or iOS though as Voice-back doesn&#8217;t support others.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Motivation &#8211; why do we need voice-back?<\/h2>\n\n\n\n<p>Well &#8211; we don&#8217;t &#8220;need&#8221; 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&#8217;s TalkBack or iOS&#8217;s VoiceOver and make it a bit of a competition. That&#8217;s why I thought of building a simple online &#8220;escape room&#8221; &#8211; where user has to use VoiceOver or TalkBack to complete some simple tasks and proceed through the steps (riddles) in the &#8220;escape room&#8221;.<\/p>\n\n\n\n<p>Competing against ourselves and time can be quite a motivation, I guess. At the same time I wasn&#8217;t able to find anything similar &#8220;out there&#8221;. 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&#8217;m wrong, I can for sure be, it&#8217;s impossible to find everything online if authors decided not to, for example.<\/p>\n\n\n\n<p>As you probably figured it out by now &#8211; the name is a wordplay made of two most prominent mobile screen-readers in the world &#8211; 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&#8217;s why I decided to call it an escape room, although it&#8217;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 &#8220;gamified&#8221; practice. I hope.<\/p>\n\n\n\n<p>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)).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Intention &#8211; mobile screen-reader skills should be fun to acquire and train for<\/h2>\n\n\n\n<p>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 &#8211; we need to invest some time and effort and we can make it.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Main intention is to practice mobile screen-reader skills, like for example;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>navigation by landmarks, headings, lines, paragraphs and characters &#8211; quite a basic skill to have,<\/li><li>finding out how to find information in two dimensions &#8211; like for example in tables &#8211; tables are very useful and we need to operate them,<\/li><li>typing in words can be a bit difficult for some users, typing them with screen-readers can be even harder &#8211; but it is a skill everybody needs.<\/li><li>some basic cognitive memory skills are needed even more when we don&#8217;t see the screen.<\/li><\/ul>\n\n\n\n<p>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&#8217;ll try to improve it as I get more feedback, so please reach out and let me know.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation &#8211; voice-back was supposed to be a native mobile app<\/h2>\n\n\n\n<p>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&#8217;t want to get through all the efforts to publish it on both markets and wait for approval and so on.<\/p>\n\n\n\n<p>That would make the release much more risky and I would for sure miss my planned date &#8211; the Global Accessibility Awareness Day &#8211; that was on 19th of May 2022.<\/p>\n\n\n\n<p>So I decided to just do the thing that is really not best practice &#8211; checking user agent string for operating system and then displaying appropriate user interface based on that.<\/p>\n\n\n\n<p>I know &#8211; user agent string can be easily spoofed &#8211; 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.<\/p>\n\n\n\n<p>Back-end is as simple as possible and will be improved with time &#8211; 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Goals &#8211; I hope it will add some joy to your accessibility practice<\/h2>\n\n\n\n<p>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&#8217;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<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>We live in these mobile-first days when everybody has their mobile with them almost all of the time and I don&#8217;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.<\/p>\n\n\n\n<p><a href=\"http:\/\/contact\" data-type=\"URL\" data-id=\"contact\">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.<\/a><\/p>\n\n\n\n<p>If you are <a href=\"https:\/\/voice-back.net\">curious about the game, please visit Voice-back.net<\/a> with your mobile and try it. Hope your mobile is running Android or iOS though as Voice-back doesn&#8217;t support others.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A short post about my Global Accessibility Awareness Day 2022 contribution &#8211; online escape room for mobile screen-readers called Voice-Back.<\/p>\n<p>What was the motivation, intention, implementation and goal behind voice-back.net.<\/p>\n<p>Please try it out if you want and let me know how it went.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[91,481,90,107,324,323,265,239,242,184,482,474,183,480],"class_list":["post-931","post","type-post","status-publish","format-standard","hentry","category-practical-a11y","tag-android","tag-gamification","tag-ios","tag-mobile-first","tag-mobile-screen-reader-2","tag-mobile-screen-reader","tag-mvp","tag-native-mobile-application","tag-react-native","tag-talkback","tag-training","tag-voice-back","tag-voiceover","tag-web-application"],"_links":{"self":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/comments?post=931"}],"version-history":[{"count":0,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/931\/revisions"}],"wp:attachment":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/media?parent=931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/categories?post=931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/tags?post=931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}