Improving the Usability of an Online Scrabble Game

A friend recently invited me to play a scrabble-like online game called Jamble on a service called ItsYourTurn.com (IYT). The service is far from a model of accessibility and I’m hopeful the company will respond to my contact about improving the basic accessibility of the site. Until that happens, I wanted to share some tips and a dictionary file I’ve created for the JAWS screen reader because it does make the game quite playable in my opinion.

The fundamental challenge for IYT and screen readers in particular is that the site makes extensive use of graphics that are all missing alternative text. JAWS, as do some other screen readers, copes with this situation by communicating some form of the address to the graphic file. In JAWS, if the graphic is part of a link, that address will be communicated by default. If it is just a graphic, a setting allows JAWS to still communicate that address. You will want to change the JAWS settings for graphics from show tagged to show all.

In my first game, the game board for Jamble read something like the following to me:

15 jb/jb-bl-2l jb/jb-bl jb/jb-bl jb/jb-bl-3w jb/jb-bl jb/jb-bl jb/jb-bl jb/jb-bl-2l

My seven letter tiles read as:

jb/jb-qu jb/jb-C jb/jb-D jb/jb-E jb/jb-L jb/jb-U jb/jb-V  

In fact, about the only positive was that the gameboard used an HTML table so screen reading table commands could be used to easily move around.

Turning the mishmash of letters here into something meaningful was quite easy though. A common feature of screen readers is to have a speech dictionary that allows a user to enter alternative spellings of words to improve on the pronunciation when speech synthesis doesn’t get things quite right.

Fixing all of the missing alt text and getting the various game squares and letter tiles to read something meaningful involved entering a series of speech dictionary definitions. For example, the text “jb/jb-bl-2l” was replaced with “Double Letter” since that square on the board was a double letter square. This means that JAWS now says “double letter” instead of the jb-gibberish.

One challenge I encountered initially when playing the game was finding the new word played each time by my opponent. The new letters played have a slightly different filename graphic for the first turn after they are played. A “-z” is appended to the filename. It was just a matter of updating speech dictionary rules to indicate not just the letter but also the fact that it was new. That helped with ensuring the letter was read correctly but I had no interest in hunting around a 15X15 grid to find new words each turn.

While the speech dictionary in JAWS does replace how words are communicated, it doesn’t alter the basic text. So, I was able to identify that the filename for the new letters always ends in -z. Thus, to find the new word just played by my opponent each time it is my turn, I can just do a search for -z and JAWS will position me on the first new letter on the board. I can then use table reading commands to explore around that letter to find the rest of the newly created word.

I’ve published a speech dictionary for this game in two forms. First is a JAWS settings package you can use to import the dictionary into JAWS. This is for the Chrome web browser. In JAWS, use the Import/Export menu option on the Utilities menu and choose import. In the dialog that appears, provide the file location where you save the settings file. For more information on importing settings files, please see the topic Importing and Exporting User Settings in the JAWS help.

For those comfortable with JAWS file locations and such, I’ve also published the chrome.jdf

file directly. You can download this file and copy it manually to the appropriate location on your computer. This would be %appdata%/Roaming/Freedom%20Scientific/JAWS/2019/Settings/enu with the most recent version of JAWS. You can also rename it for other web browsers or copy the existing text into your own existing dictionary file.

I am also experimenting with the ability in JAWS to use sounds in these dictionary files. That will allow game squares that are double and triple words or letters as an example to play unique sounds. Another dictionary update will be available when this sound option is completed.

Some Notes on Game Play and Other Randomness

To the extent my interest, time and ability to make updates is available, I intent this blog post to be a bit of a living document. What follows are brief notes about game play, screen reading techniques and other information that might be helpful if you opt to try this or other games from the IYT web site.

1. The basic table for games in Jamble is a 16×16 table. The left-most column contains numbers for each row in the table. The numbers start at 15 in the upper left corner of the table. The bottom cell in this column is blank.
2. The bottom row, or row 16, of the table contains the letters a through o to give letters to each column in the table.
3. This leaves a 15 x 15 grid with the upper left corner reported as row 1 column 2 by a screen reader. Again, the left most column in the full grid, or column 1, is used for numbering.
4. When you are playing a game of Jamble, the top part of the page contains links and information for navigating the IYT web site. It is likely fastest to hit t to get to the table for the game when you load a game. During game play, you and your opponent can post messages as a part of taking your turn. These will appear just before the table.
5. Your letters appear as links just after the game table. The text “your letters” appears just before the letters themselves. Unfortunately, this is not a heading so you will likely need to use search function in a screen reader to get to this area.
6. Immediately after your seven letter tiles are another seven links. These appear to be small graphic files that either serve no purpose or duplicate functionality of the letter tiles. The speech dictionary files define these links not to speak anything as a result. JAWS will still call these “graphic” because they are links.
7. After your letter tiles, information about the game score, tiles remaining, and previous moves is shown. For previous moves, I have had the best success activating the link to show all moves. This then shows a table listing the starting coordinates for each word played and the point value awarded. The table has three columns that show the turn number, and then a column for both you and your opponent’s move.
8. After the score and move information, there are several graphics showing the points awarded for different letters. Unfortunately, again these are missing alt text and so far I’ve not found a way to indicate the point values of letters. Just defining speech definitions in this case is not enough because you need to associate the color of the point graphic with the color of the tile played and the graphic files for the letters indicate nothing about color. As of now speech definitions for these graphics have not been entered so they will read something like “jb/jb-cir2”. Again, this is an image showing a color and telling players that letters of that color are worth two points in this example.
9. The IYT Game Status page has three tables of interest. The first shows how many games you have indifferent categories. The second shows games where it is your turn. Activate the links containing opponent names to take your turn in each game. The final table shows games where it is your opponent’s turn.
10. Taking a turn in Jamble involves a few steps:
    1. Locate the square where you want to place the first letter of a word you want to make and press enter on that square.
    2. In the edit box that results, enter the letters you will use to make your word. Do not include letters that are already on the board. If you are using a blank character, type the letter you want the blank to represent.
    3. Select across, the default, or down, to indicate the direction of your wort from a combo box just after the edit box where you entered your letters.
    4. Use the submit button to enter your letters.
    5. You will have a second submit button on the resulting page along with an edit box where you can enter a message for your opponent if you want to do so. Complete your turn by using the submit button from this page.
       1. If the resulting page reports it has 59 or so links, it means your word was not successful. There are brief instructions about what might be wrong. The page instructions tell you to use the back button in your browser to resubmit but I have found it faster to just return to the Game Status page and get back to the game from that page.
       2. If the resulting page has 86 or so links, your turn is done and your word was successfully played.
11. If a blank tile is played, both the fact that it was originally a blank and the letter it represents are indicated on the board. I have not found a way to label this entirely so in these cases JAWS will announce a w and then the letter represented by the blank.
12. The JAWS speech dictionary does not impact the braille representation of text and I have not found an equivalent method to adjust what’s communicated in this game for braille as of yet. As a result, in braille this game is still going to show all the untagged graphic file names.
13. As mentioned earlier, the JAWS speech dictionary does not alter text when reading by character so if you read by character, you will still experience all the text such as “jb/jb-“.
14. If you want to find a specific letter on the board, use the JAWS find text feature with ctrl+f and enter a dash followed immediately by the letter you are searching for. As a reminder, the game appends a -z to letters the first time they appear in new words so there is a chance when searching for a z on the board you will also hit this situation.
15. JAWS has another feature known as Custom Labels that could possibly also be used to rename the untagged graphics. However, in trying that, I have found that the coordinates in a table seem to be saved along with the label, making this feature an impractical solution here.
16. IYT has a number of games. Again, I hope the company will respond to my inquiry about improving accessibility but until they do, the techniques I’ve outlined here can be used for many of their other games.
17. IYT is free and also offers subscriptions. Free accounts are limited to 15 game turns a day.
18. As a reminder, these speech dictionaries are redefining the way the strings of text are pronounced by JAWS. If these same strings were to appear on another web site used in the same browser, these definitions would also be applied.

The Dictionary Entries

Following are the entries I’ve used in the dictionary files you can download.

;Double Letter

.-2l.Double Letter.*.*.*.0.0.

;Double Word

.-2w.Double Word.*.*.*.0.0.

;Triple Letter

.-3l.Triple Letter.*.*.*.0.0.

;Triple Word

.-3w.Triple Word.*.*.*.0.0.

;New letter played on board

.-z.New Letter.*.*.*.0.0.

;Squares on board with a tile played. This silences all but the letter indication.

.jb/jb-. .*.*.*.0.0.

;Empty squares on board, no letter has been played.

.jb/jb-bl.Blank.*.*.*.0.0.

;graphics in letter tile area that have no purpose

.jb/wtdot. .*.*.*.0.0.

;A blank letter in player letter tile area

.jb/jb-qu.Blank Tile.*.*.*.0.0.