Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Categories
In this Discussion
Wordle Accessibility (2022 Code Critique)
Title Wa11y
Author/s Cariad Eccleston
Language/s Javascript
Year/s of development 2022
Many of us will be familiar with Wordle, a popular game by created by Josh Wardle in which the player gets 6 chances to guess a five-letter word. The players gets to know which letters of their guess were in the solution-word (marked by a yellow or blue square) and whether those letters were in the correct position in the word (marked by a green or orange square).
Arguably the most interesting part of the game's popularity is its social element. When the game became popular in New-Zealand, people started share how many guesses they had needed. One player then created a grid of emoji squares to signify her process without spoiling the solution for others. After a share-button was added to the game, which copied your personal grid to your clipboard, it became easy to share and the game went viral. (source for this background is this interview with Wardle on Slate)
In addition to making the game go viral, each grid gives a little narrative that other players can understand. C Thi Nguyen wrote a Twitter thread about this which you can read here. He says that people got to know the game through "incomprehensible little box-chart graphics" but after playing the game you realize "Every game of Wordle is a particular little arc of decisions, attempts, and failures. But each little posted box is a neat synopsis of somebody's else's arc of action, failure, choice, and success."
Now in addition to the onslaught of Wordle grids on social media, my Twitter feed now seems to have one tweet complaining of the accessibility of those grids for every three Wordle tweets. Here's the problem: to screen reader users (such as blind/low vision people), the visual of the grid is read out linearly, which is little more than noise. On Twitter, people beg users to change up their way of sharing their wordle results without the use of emojis. Several programs have been made to convert the squares to a meaningful description. Wa11y, for example, lets readers paste their wordle result into their website and converts it into a "sharable" written version.
Wa11y's code is available on github. I am pasting a snippet of it below this post. The program labels yellow/blue squares as "hasMisplaced" and green/orange squares as "hasPerfect". Thus if there are only black squares (indicating that every letter of the guess was incorrect) it does not say '5 black squares' (or "black square black square black square black square black square" depending on which screen reader you were using) but simply returns "Nothing.", which is a more meaningful description of not getting any letter right. If there are 5 green/orange squares, the person has all letters correct, so the program returns "Won!"). If there is a mixture, it will return which position in the line is misplaced and which are perfect.
Wa11y is not the only program available, so if someone wants to reply with a comparison, go for it!
An example is Wordle Result Image Generator, which generates a shareable image and alt text for the image. Github link.
Another example is WordleBot, which adds explanations to the grid, but is still not useful to screen readers because it still includes all the square emoji's in the post: announcement link (I'm not sure the source code is available for this one)
Now the existence of Wa11y is very good, but sharing the grid of square emoji's has already become a habit for Wordle players and it is the simplest action. Telling every individual to change their behavior, then, will take a long time and meets resistance from players. So it makes much more sense for the Wordle website to provide both a grid and a text-based version for readers to avoid the extra step which is seen as a nuisance. I say both options, because people also share their results privately and if they know they are chatting to can and wants to see the grid, the written explanation is not necessary.
Going back to the narrative arc of the grid that C Thi Nguyen described, I am curious how different textual translations give a different narrative of the game. I was surprised, for example, when blind digital accessibility expert suggested ""Screenshot of Wordle score. Three rows of 5 squares. Bottom all green, middle alternate green & grey, top 2 yellow, 2 grey 1 green" which is a literal description, but arguably does not provide the same narrative. How do you think different programs create different narrative arcs for Wordle? How could this be improved?
There's much more to say, but I am interested to read what others have to comment, so I'll end here for now.
This is a snippet, the rest is available on https://github.com/cariad/wa11y.co):
let explanation = '';
if (!hasPerfect && !hasMisplaced)
explanation = 'Nothing.';
else if (decoded.perfectIndexes.length === 5)
explanation = 'Won!';
else if (decoded.misplacedIndexes.length === 5)
explanation = chopAggression >= 1 ? 'all in the wrong order.' : 'all the correct letters but in the wrong order.';
else if (hasPerfect && hasMisplaced)
explanation =${perfect}${misplaced}.
else if (hasMisplaced)
explanation =${misplaced}.
else
explanation =${perfect}.const prefix = chopAggression >= 5 ?
${num}.:Line ${num}:;const result =
${prefix} ${explanation}\nif (chopAggression >= 4)
return result.replaceAll(' and ', ' & ');return result;
}
Comments
the wordle emoji boxes seem to me like a linguistic innovation, or at the very least a new communicative context. the boxes are tokens that carry meaning in relation to one another and their audience---an "arc of action, failure, choice, and success"---because of the shared context through which human(ized) readers interpret them. that is: i saw all of those boxes on my timeline but having never played the game did not have the narrative framework to understand their meaning.
accessibility always feels thorny to me. not because developers / creators / writers dont have a responsibility to consider and respond to a breadth of audience perspectives and abilities (we do), but because an unequal (and sometimes contradictory) distribution of affordances seems to imply that truly universal accessibility is impossible in principle. this is one of the reasons i think the global scale of many internet services (like twitter) is a major structural flaw: it severely constrains or entirely removes the opportunity to craft our own shared interpersonal contexts. i imagine the difficulty of meeting everyones needs scaling way up with group size.
to that effect, i wonder if the accessibility problems here are surface-level manifestations of more foundational failures. what does it mean that emoji are already so widely accepted as surrogate communication for thoughts not designed into them? or that screen-reading software responds to input like context-free word tokens by default, eliding the surrounding narratives that lend such tokens so much of their meaning? from my perspective, something like wa11y is a knowledge-based ai approach: a human(ized) agent understands the required behavior and describes it to a digital agent (in a coding language), allowing the latter to react more appropriately for other human(ized) agents. open systems that allow customization are good and can supercharge this kind of lead user innovation. but as the op points out, forcing proliferation of a new approach is difficult, particularly in the wake of a trend that has already shaped behavior.
preventing future exhibitions of this kind of accessibility failure, i think, will require both further empowering end users to modify / customize their digital spaces and rolling back some of the driving assumptions of modern digital industry. we could and probably should build systems that allow screen-readers / other accessibility systems to evaluate and respond to context, to quickly/safely rely on user-provided explanations. but we also have to oppose systems of a scale that demand dogmatic blanket solutions.
As one of many who recently got hooked on wordle, and as a person who tries to be cognizant of accessibility (I have disabilities but none that currently affect the way I interact with the digital world), this didn't even occur to me, but has got me thinking.
I'm writing this sort of stream-of-conscious, hope that's okay.
It's got me thinking about affectively descriptions for things like this. I personally try to add image descriptions to things when I have the energy to do so, but I've never found myself particularly good at it, especially with more complex things. But for something like this, while simple, requires some interpretation, almost like translating an idiom. I know in general new forms of digital vernacular can be a pain on screen readers (emoji, writing text with spaces between each character for certain emphasis, glitched text, et cetera). There's this book I've been meaning to read called "Because Internet" that talks about new rules of language when communicating online, and now I wish I had because I feel like it would come in handy in this discussion.
It's really interesting to think about different ways of effectively translating the squares. I know for me it's interesting to see things like the "path" yellow squares take guess-to-guess or to see if somebody intentionally misplaces/removes a green square, presumably to get more information about missing characters if they can't think of a word that fits (I know there's a game setting the requires you to keep those in place, but it's optional). But also that's just me and maybe somebody else has a completely different experience when looking at somebody's guess grid, and I'd bet each approach has a different way of effectively translating.
It also has me wondering about different approaches to make the game itself accessible, because I'm sure like the guess-grid, everybody strategizes in their own way, and I wonder how various screen-reading options affects that.
Fascinating thread! I'd recently started noticing that Wordle's display of results posed an interesting accessibility question when I tried sharing them in a chat and noted they were characters. I saw them come out not in table form but one long series of 6-character strings. I like that the results are string based, but as you point out, for those reading without vision, those strings are meaningless or at least difficult to survey at a glance.
I'll say I like Wa11y's approach to making wordle results more accessible a lot better than the written out description supplied as a sentence. I mean I suppose I could write out, "I got this one in five tries, and in my second try I correctly guessed a character in position 2, and another character out of position." But that's so verbose, and I've only described my first try. We shouldn't be going on and on like that in narrative description! And wa11y's verbal description isn't much better. (Here's a sample result of the wa11y code for my guesses on today's wordle:):
Line 1: Nothing.
Line 2: 2nd perfect, but 4th in the wrong place.
Line 3: 2nd and 5th perfect, but 1st and 3rd in the wrong place.
Line 4: 2nd, 3rd, 4th and 5th perfect.
Line 5: Won!
There's a larger question here for accessibility exemplified by this Wordle thread: What are the best alternatives to tabulation for braille browsers and screen readers? My first impression of the wordle graphics reminded me of the heatmap on a GitHub profile, but that's quite a different code-base under the hood: not emojis but SVG elements conveying shapes and correlating information (number of contributions per date in a week. Here's the first week of February for me last year:
Should Wordle graphics be relayed in human-readable SVG or XML like this? Six lines of SVG conveying (wa11y-like) information about perfect or misplaced guesses.
I'd argue yes, but I wonder how easy is to navigate with one's fingers in a braille browser?
Also, I note that the Wa11y rendering doesn't tell us the specific position of what's out of place. Can all of this information be efficiently relayed in a text-based format that works like a visual tabular display?
Sorry for the radio silence, turns out my booster dose last week did not give me less side effects than a full vaccine dose and I'm slowly trying to get back into things (very happy to be vaccinated though!). Thank you for your comments.
@grip: You make an interesting point on the size of platforms and the illusion of true universal design. Could you apply that directly to the wordle case? Would one text-based version of the grid provided by wordle in your opinion be inferior to the current practice in which (some) people try different approaches to write their own alt text or use a program such as Wa11y or Wordle Result Image Generator? My worry is that it is more confusing to read the different ones and thet it will only be implemented by people who have the capacity and willingnss to do so.
@Christina:
I love your explanation of how you read the Wordle grids. How would you put that into (automated) text? For example, a system that can refer back to the previous line? (i.e. "2 correct but in the wrong place again, now in 2nd and 4th place") Then you would not know if it was the same letters, just like in the grid, but it would tell more of a story.
Also, Chancey Fleet (blind accessibility expert and advocate) pointed out on Twitter that the game Lingo used different sounds for incorrect/correct/perfect . This might be a cool solution, but it would probably the screen reader's implementation than wordle or twitter, I think. (although wordle could implement it for the game itself)
I also love this concise version of the grid as well:
there are some challenges but you can play wordle without vision, as Fleet explains:
Also in reply to @Christina's general comments:
I would argue that if your disabilities are (partly) energy-based, it does affect your online experience because it takes you energy to write the alt texts which you cannot always do. So you would benefit from better implementation of platform accessibility to it would require less work from you. I understand this is not the same as requiring alt text to navigate the internet, but just a change in perspective to think about.
Yes, writing alt text is definitely a skill, one that gets simplified too often when people only say "just write alt texts". I am learning more and more, but definitely still developing this skill, esp in specific contexts. I actually submitted a workshop for ELO on how to write alt text for electronic literature, so if it gets accepted, you're welcome to join.
Both of you point to the "linguistic innovation" (gripp) and "digital vernacular" (chistina) of emojis and I think that in addition to necessary inclusivity, the aim for accessibility helps us interrogate the functions of online visual elements more precisely.
Some people on Twitter are comparing the Worldle colour scheme to earlier Wittgenstein's descritptions of an earlier word game. He also suggests substituting the colours by a letter description, eg. "RRBGGGRWW":
Wittgenstein, above, was previously without a capital W! Sorry Witt
The news is that 'Wordle has been bought by The New York Times, will ‘initially’ remain free for everyone to play'; just initially right?
Yes! You all are working for The New York Times now (for free). &smiley;
FWIW: an article on posting accessible Wordle scores went live today on Slate.
thank you for sharing your various associations with the wordle squares, @epyllia and @diogo_ph22!
I like that State wrote about the accessibiltiy issue, @cschnitz, although I hoped they would have placed it in a larger context.
I never got a reply from Wordle when I emailed them about the issue and several possible solutions. I've also emailed the puzzle team of The New York Times, so if I'll get a reply, I'll let you know
I'll put it on my cv
By the way @hannahackermans, someone has just posted the old source code for Wordle on Github. Apparently, the new version does not permit curse words as guesses. It's minimized, but we could maximize it and see what we see!
https://github.com/JosiahRooney/wordle
I think it's interesting that the pattern of Wordle posts is also inaccessible because screen readers ignore the structure created by hard line breaks, itself a non-visible character in most settings.
Super interesting discussion, here! Have you also noticed on Twitter, people posting their GitHub 'Activity overview'? It's also visualized with colored squares