Proposal Accessible Arthur Games

Proposal Accessible Arthur Games Prepared for: PBSKids 2009 DoodleDoo 3306 Knoll West Dr Houston, TX 77082

Disclaimers This document is the proprietary and exclusive property of DoodleDoo except as otherwise indicated. No part of this document, in whole or in part, may be reproduced, stored, transmitted, or used for design purposes without the prior written permission of DoodleDoo. The information contained in this document is subject to change. The information in this document is for information purposes only. DoodleDoo disclaims all warranties, express or limited, including, but not limited, to the implied warranties of merchantability and fitness for a particular purpose, except as provided for in a separate software license agreement. Flash, Macromedia, Macromedia Flash, Adobe, the Adobe logo, and Player are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Document History Version Issued By Issue Date Comments v1 Thea Eaton 06/01/09 2009 DoodleDoo Page 2 of 11

Table of Contents DOCUMENT HISTORY... 2 1. ACCESSIBLE ARTHUR GAMES... 4 About Face... 4 Global Gizmo... 6 Art Studio... 8 Music Box... 9 Supermarket Adventure... 10 2009 DoodleDoo Page 3 of 11

1. Accessible Arthur Games For this proposal, we chose several interactive games on the Arthur website that accompanies the Arthur TV Series that airs on PBS Kids in the Unites States. The Arthur series revolve around the life of Arthur, an anthropomorphic aardvark, his friends and family, and their daily adventures. The series often deal with health-related issues that affect young children. Arthur himself wears glasses, and the series introduce a blind character called Marina. The Arthur website features several accessible activities such as Marina s Guide to Braille, You ve Got Braille, an online Braille translator and Don t Wake Kate, an audio described Flash game. Several TV episodes have been dedicated to the topic of visual impairment such as Prunella s Special Edition and Prunella Sees the Light. The TV series all have an expanded reach by offering closed captions and audio descriptions. The Arthur interactive team has also worked closely with the Media Access Group at WGBH on providing special edited captions for the show. This proposal highlights 5 different interactive games on the Arthur website, and a proposed solution to making them accessible to children with a visual, mobility and cognitive impairment using Adobe Flash technology. About Face Flash template: Quiz About the Game In this game that can be viewed using the Adobe Flash Player, children are asked to understand emotional reactions from stories, and identify them with the visual cues of facial expressions. Once the right face has been selected, a verbal cue is given to connect the face to the emotion. Accessibility Blind children are often encouraged to use and learn about different facial expressions. They learn how to make different faces early, by feeling faces tactilely. This activity can help them learn what different facial expressions look like, and act out different emotions. In sign language facial expressions are very important as well, and are often used to illustrate and support different signs. This activity could also be of great value to children with language 2009 DoodleDoo Page 4 of 11

impairments, for whom it is harder to connect facial expressions to verbal labels and children with autism who are able to recognize broader facial expressions, like happiness or sadness, but might have a harder time recognizing finer expressions that represent mental states, expressed by the eyes. Proposed Additions This game was authored for the Adobe Flash Player 5. It can be updated for the Adobe Flash Player 9 to support a few accessibility features. This game has a lot of audio already. To make this game accessible for visually impaired children, we would attach carefully written alt text to the faces, describing the different facial expressions. When we checked the current Flash games with the screen reader JAWS, this was the readout: Flash Movie Start Muffy s Dolls Muffy s father gives her a doll she already has. She sighs and puts it with the others in her room. Unlabeled 4 button button Unlabeled 10 button Pal Flash Movie End This is a typical readout of a.swf file that does not have accessibility features built in yet. The static text on the screen gets picked up by the screen reader. The buttons have not been given an alt text, and therefore read out as unlabeled. With a few minor modifications the JAWS readout can sound like this: Flash Movie Start Welcome to the About Face game with Arthur! Use the up and down arrow keys to navigate this Flash game with a screen reader. Press Enter or the Space Bar to select the buttons. Arthur stands on one side with a bag of dog bones, and Pal the dog, sits on the other side by his dog bowl. Hear the story then click the face that best describes how Muffy feels. Muffy s Dolls Muffy s father gives her a doll she already has. She sighs and puts it with the others in her room. Read the story out-loud, button Muffy eyes are dull and half-closed and she doesn t smile, button Muffy crosses her eyes and sticks out her tongue, button Muffy narrows her eyes and smiles with half a smile, button Help, button Start over, button The audio feedback that is given, can also be placed on-screen for children with hearing impairments or who have their audio turned off. (The animations could be considered visual equivalents of the positive or negative feedback). For children with cognitive impairments such as ADD or autism, the repeating background soundeffect could be distracting, and can be limited to three repeats. 2009 DoodleDoo Page 5 of 11

With all of these changes in place, the About Face Arthur game, can provide a rich playing experience for all users, including children with a visual, hearing or mobility impairment. Global Gizmo Flash template: Matching About the Game This game that can be viewed using the Adobe Flash Player, is made up out of three matching games. In the first game, the user matches two of the same pictures of 12 different instruments in a grid of 4 x 4 windows. When a picture is revealed, the sound of the instrument also plays, connecting the sound with the instrument. When a match has been found, a voice affirms the match and names the instrument. In the second game, the user matches sound to sound, the windows display a musical note and are all the same. When a match has been found, the windows reveal the picture of the instrument and a voice affirms the match and names the instrument. In the third game, the user matches picture to sound. When a match has been found, a voice affirms the math and names the instrument. The musical note on the window with the sound, changes into the picture of the instrument. Proposed Additions Since this game revolves around sound recognition, it could be a fun game for visually impaired children to play. To make this game accessible to children who use a screen reader, the windows would need to have alt text attached so they can be distinguished from each other. No alt text would need to be added to the opened windows, because of the voice over that is already in place. When testing the current game with a screen reader, this is the readout: Flash Movie Start Find the instrument pairs Unlabeled 1 button Unlabeled 2 button Unlabeled 3 button Unlabeled 4 button 2009 DoodleDoo Page 6 of 11

Unlabeled 5 button Unlabeled 7 button Unlabeled 9 button Unlabeled 10 button Unlabeled 11 button Unlabeled 12 button Unlabeled 13 button Unlabeled 14 button Unlabeled 15 button Unlabeled 16 button Unlabeled 17 button Unlabeled 18 button Unlabeled 19 button Button Flash Movie End After adding a few accessibility features, the game can read out like this: Flash Movie Start Welcome to the Global Gizmo game with Sue Ellen! Use the up and down arrow keys to navigate this Flash game with a screen reader. Press Enter or the Space Bar to select the buttons. Click the windows to search for matching pairs of musical instruments. Game 1. Match picture to picture. Row 1, Window 1, button Row 1, Window 2, button Row 1, Window 3, button Row 1, Window 4, button Row 2, Window 1, button Row 2, Window 2, button Row 2, Window 3, button Row 2, Window 4, button Row 3, Window 1, button Row 3, Window 2, button Row 3, Window 3, button Row 3, Window 4, button Row 4, Window 1, button Row 4, Window 2, button Row 4, Window 3, button Row 4, Window 4, button Game 2, button Game 3, button Flash Movie End This game is challenging to make accessible to children with a hearing impairment. There are a few instances where voice overs are not displayed, or captioned, as on-screen text. The opening instructions are voiced, but not on-screen. When a match has been found, the name of the instrument is voiced, but is not readable on screen. Then there are also the instrument sounds. The second and third game are currently not accessible to children with a hearing impairment, because the musical notes all look the same. The sounds could be captioned, and described in a designated caption area. Words like shake, ring, muffled, thump, pluck, loud, 2009 DoodleDoo Page 7 of 11

soft can all be used to describe the sounds. Another solution would be to replace the musical notes, with animations that represent the sound. We realize that replacing the musical notes with different visuals, might take away from the emphasis on listening for hearing children, but perhaps this is an option that could be turned on/off with a CC button. Fig 1. Sounds captioned by representative animations. Art Studio Adding these accessibility features to the Global Gizmo game, will give visually impaired users a great, rich media experience. With a few enhancements it can also be played by users with a hearing impairment. Flash template: Coloring About the Game This coloring application was made in Director and is viewed using the Shockwave player. The user can select several different coloring images, and different brush colors to color. The application draws lines instead of coloring fills. There is also a stamp feature. There are 9 different colors to choose from. The colored image can not be printed out. Proposed Additions Shockwave plays back files created with Director, while the Adobe Flash Player plays back files created with Adobe Flash. The Flash Player comes pre-installed with many computers, and is present on more than 90% of computers. Shockwave, however, has to be downloaded from the Adobe support website as a separate installation. It is currently present on less than half of consumer computers. We recommend updating this game to the Flash platform, since 2009 DoodleDoo Page 8 of 11

the download of the Shockwave player could present a usability problem for children who do not have the player installed. We propose to retro-fit the Arthur coloring application into an accessible coloring template for Flash, that can hold several coloring pages. This application is accessible to visually impaired children, and mobility impaired children as well. Visually impaired children can select colors, and coloring fills, with colors that are verbally described. Mobility impaired children can tab to a color, click to select it on the brush, tab to a fill and click to fill it. When tabbing through the fills of a coloring image, the brush is programmed to move along. During the retro-fitting process, we can also enlarge this application to match the size of the other Flash games of 620 x 440. With larger images, the fills would be easier to select by all users. Retro-fitting this coloring application into an accessible coloring template will allow users with a mobility impairment to tab trough the interface and color in the images. Even though coloring applications are usually viewed as highly visual, it is very important that they be made accessible to visually impaired users. Partially sighted children might view the activity with a screen magnifier while using a screen reader at the same time. Blind children might enjoy coloring an image, especially if they have had sight before and it can also help children who were blind from birth get familiar with different colors and their applications through color descriptions. Blind parents might need access to the application to help sighted children complete it as well. Music Box Flash template: Jigsaw Puzzle About the Game The Music Box application also requires the Shockwave player to be viewed. It is a timed jigsaw puzzle activity, with a music player that plays 4 familiar Arthur songs. The user has to complete the puzzle before the song plays out. The jigsaw puzzle has two levels, one with 4 pieces and one with 9 pieces. When the user changes a level while in the process of solving a puzzle, the puzzle pieces and music timer get re-set. When a puzzle has been solved, the image shows an animation. Proposed Additions We propose to retro-fit the Arthur Music Box application into an accessible jigsaw puzzle template. This application is accessible to visually impaired children, who can place the puzzle 2009 DoodleDoo Page 9 of 11

pieces by matching location cues on the pieces and the droptargets. Minor changes might have to be made to the music volume, in order to hear the audio cues on the puzzle pieces. Mobility impaired children can solve the puzzle, by first tabbing to a puzzle piece, pressing Enter to pick up a piece, tabbing to a drop target and pressing Enter to place the piece. The lyrics of the song would be displayed for hearing impaired users. We do propose to take off the movements on the puzzle pieces, until the puzzle has been fully completed. The animation will come more as a surprise and a reward, and will not distract users with a cognitive impairment while solving the puzzle. We propose two changes to the interface, in order to accommodate for the template changes. First, enlarging the music box interface, so that the size of the puzzle pieces and drop targets can be increased. This will improve usability for all children. Second, creating a space for one or two lines of captioned lyrics at the top of the music box. We think that showing the lyrics will benefit all children as well by reinforcing general reading skills. Alternatively, the lyrics could be shown in the title box as well. Visually impaired children will enjoy completing this puzzle activity while listening to the music. Mobility impaired children will be able to complete it by using only the Tab and Enter keys on the keyboard. Supermarket Adventure Flash template: Drag N Drop About the Game The Supermarket Adventure game is a drag and drop game. The user gets instructions on which items to drag to D.W. s basket from the loudspeakers. The user can click on an item first, to hear its name, then drag it over to the cart. Once three items are chosen correctly, a reward animation shows D.W. checking out with the items. Proposed Additions To make the game accessible to children with a hearing impairment (or children who might not have speakers installed on their computer) we would have to caption the instructions that are spoken by the loudspeakers. Without the instructions the game would be inaccessible. For visually and mobility impaired children we can implement an accessible click and drop method, where the user clicks to pick up an item, and clicks on the cart to place it. For children with a 2009 DoodleDoo Page 10 of 11

cognitive impairment, such as ADD, we can add a background music on/off button to eliminate distractions. We propose to extend the illustration upward, to show all of the loudspeakers, with a designated space for the loudspeaker instructions. We also think that by showing all of the loudspeakers, it will increase its clickability affordance for all users. By extending the illustration downward, and showing more of the cart and less of the blue ribbon, we can create space for the instructions up top, and also show more of the cart as a drop target. This will increase usability for all users as well. Note: Currently, when the user clicks an item when the speakers are playing, the item will stick to the mouse when the user releases the item. Because this prohibits users from clicking another item to hear its name, we assume this is an error in the programming. This will be fixed when the new template is applied. With a few minor modifications, this scrolling activity will be accessible to mobility impaired children who tab through the interface. With the right alternative text and a few programming adjustments, visually impaired children will also be able to complete the game and get access to the educational material it offers. 2009 DoodleDoo Page 11 of 11