海外で大人気のワードゲーム「Wordle」をスクリーンリーダー環境で遊んでみよう❤️‍🔥

💬 記事中でご紹介している内容は、以下環境で部分的もしくは完全に読み上げに対応していることを確認済みです。

Windows 10

ブラウザ: Google Chrome(99.0.4844.82)、Microsoft Edge

スクリーンリーダー: PCトーカー 10、NVDA(2021.3.5)、JAWS 2020

iOS 15.1

ブラウザ: Mobile Safari、Chrome、Edge

スクリーンリーダー: VoiceOver

「Wordle」って何?

アクセシビリティ機能について詳しくご説明する前に、まずは「何それ?」という方向けに、Wordleの基礎知識についてご紹介したいと思います。

まずはウィキペディアより引用: 「Wordle（ワードル）はRedditの元従業員でソフトウェアエンジニアであるジョシュ・ウォードル (Josh Wardle) が開発したWebベースのパズルゲームである。 プレイヤーは6回の試行の間に5文字の英単語を推測する。」

簡単に言うと、日替わりで出題される5文字の英単語を、6ターン以内に当てるという簡単なワードゲームです。尚難易度は日によってまちまちですが、一般的に「cheek」や「watch」のような、簡単な単語が多いように感じます。

5文字の英単語を入力・送信する度に、「正しいアルファベットが答えと同じ場所にある場合」には緑色に、「アルファベットは合っているが位置が違う場合」には黄色に、「アルファベットも位置も違っている場合」にはグレーに、それぞれの文字色が変わります。つまり、2回目、3回目の挑戦では、緑色になった文字は場所を変えず、黄色くなった文字は場所を変え、グレーになった文字は使わないようにしながら正当を探っていくことになります...と言っても遊んだことのない方には想像し辛いかと思いますので、以下に具体例を書いてみます。

• 1ターン目:
  「STARE」と入力したら、「S」が緑色に、「E」が黄色に変わった。
• 2ターン目:
  「SLEEP」と入力したら「S」に加えて3文字目の「E」が緑色に、「L」が黄色に変わった。
• 3ターン目:
  「SWELL」と入力したら、「W」以外の4文字が緑色になった。
• 4ターン目:
  「SMELL」と入力したら全ての文字が緑色になった。
• →5文字全てが緑色になるとゲームクリアとなり、結果の書かれたウィンドウが表示される。

このように、文字色を頼りにその日の単語を当てていくのがこのゲームの趣旨です。

ゲームを遊ぶ上でユーザ登録の必要などはなく、同じブラウザからアクセスしてさえいれば連勝数、連勝記録、勝率などのデータが自動的に保存されていく仕組みになっています。ただ連勝記録よりも各ゲームを何ターン以内でクリアできたかを重視している人の方が多く、ゲームの結果を共有したツイート・投稿が流行っているようです。

以下は以前に、LUCAがツイートしたWordleの結果シェア画面です。ルールを全く知らずに見ると意味の分からない四角形の集まりのようにしか見えないかもしれませんが、実は上記で説明した文字色を、そのまま四角形で表したのがこのツイートなんです。

珍しく3回でクリアできた。
Wordle 301 3/6

⬜⬜⬜⬜🟨
🟩⬜🟩⬜⬜
🟩🟩🟩🟩🟩

— 🐾ᒪᑌᑕᗩ ルーカ (@naokiluca) April 16, 2022

さて、Wordleの基本的なルールについてご説明したところで、次項からは本題のアクセシビリティ機能についてご紹介していきたいと思います。

拡張機能・ブックマークレットのダウンロード・適用

前項ではWordleの遊び方について一通り解説しましたが、途中経過の識別方法が文字色のみになっている点に気づかれた方もいるかと思います。そう、通常通りWordleサイトにアクセスして遊ぼうとしても、スクリーンリーダーユーザにはどの文字を使ったか、どの文字が正しかったか、また6回以内に正解できなかった場合、答えが何だったかなど、必要不可欠な情報を何も読み上げてくれないんです。そんなときに役立つのが、これからご紹介する「Make Wordle Accessible」/「Accessible Wordle」という、スクリーンリーダー対応の拡張機能とブックマークレットです。

GitHubページ: https://minorninth.github.io/accessible-wordle/

拡張機能のダウンロード

上記ページにアクセスすると、ChromiumベースのPCブラウザで使える拡張機能のダウンロードリンクと、その他のデバイス・ブラウザでも使うことのできる、ブックマークレットが提供されています。PCでGoogle ChromeやMicrosoft EdgeなどChromiumベースのブラウザをご利用の方には前者の拡張機能が使いやすいかと思いますので、「Make Wordle Accessible Chrome Extension」と書かれたリンクを探して選択してください。

リンクが正常に動作している場合にはChrome ウェブストアのダウンロードページに直接遷移しますので、「ダウンロード」ボタンを選択してダウンロード・インストールを完了してください。環境によってはインストール直後の拡張機能が無効になっていることがあり、その場合にはメニューやツールバーから「Make Wordle Accessible」の有効化をする必要があります。

※Microsoft Edgeをお使いの場合、あらかじめ「設定など」→「拡張機能」→「他のストアからの拡張機能を許可します」をオンにして、Chrome ウェブストアからのダウンロードを許可しておく必要があります。

「Make Wordle Accessible」が正しくインストール・有効化されていれば、今後Wordleにアクセスする度に次項でご説明するアクセシビリティ機能が自動的に起動されるようになります。尚、Wordleを開いた時に「Wordle screen reader accessibility extension running」というテキストが表示されていれば、無事拡張機能が適用されているという合図になります。

ブックマークレットの保存

スマートホン版のブラウザやChromiumベース以外のブラウザをご利用の場合残念ながらChrome ウェブストアの拡張機能には対応していないので、後者のブックマークレットを保存/コピーして使うことになります。

拡張機能のダウンロードリンクから下方に移動すると、ブックマークレットのリンク/コードが提供されています。ここからはAndroid/PC・iOSによって操作が異なりますので、お使いのデバイスに応じてブックマークレットを追加してください。

Android・PC版Chromeをご利用の方:

「If you're on Android or a desktop browser...」というテキストの直下にある、「Make Wordle Accessible」というリンクを右クリック/長押ししてアドレスをコピーします。

ブラウザで新規ブックマークを作成して、URLのフィールドにコピーしたアドレスを張り付けます。

「Accessible Wordle」など、後から探しやすい名前を付けてブックマークを保存します。

iOS・その他のブラウザをご利用の方:

「If you're on your phone...」というテキストの直下にあるテキストフィールドを選択して、その内容を全てコピーします。

「共有」タブなどから開いているページのブックマークを作成して、「Accessible Wordle」など後から探しやすい名前をつけて保存します。

ブックマーク一覧から「編集」を選択し、追加したばかりのブックマークを選択します。

「URL」や「アドレス」の欄を消去して、代わりに先ほどコピーしたテキストを張り付けて保存します。

拡張機能とは違い、ブックマークレットは1回1回適用し直す必要があります。Wordleを通常通り開いた後、ブックマーク一覧などから作ったブックマークレットを選択すれば、準備完了です。拡張機能と同様、ブックマークレットが正しく読み込まれていれば「Wordle screen reader accessibility extension running」と表示されるはずです。

アクセシビリティ機能適用中の遊び方

前項で解説した手順通りにアクセシビリティ機能をダウンロード・適用すると、初めにご説明した「正しいアルファベットが答えと同じ場所にある」、「アルファベットは合っているが位置が違う」、「アルファベットも位置も違っている」といった情報がスクリーンリーダーによって読み上げられるようになります。

読み上げの対象になるのは送信後のアルファベットとキーボード上の文字で、具体的には以下のようなラベルが設定されるようになっています。

Correct:

正しいアルファベットが答えと同じ場所にある場合(緑色)

Present:

アルファベットは合っているが位置が違う場合(黄色)

Absent:

アルファベットも位置も違っている場合(グレー)

これらの情報は英単語を送信すると同時に自動的に読み上げられる他、送信済みの単語やキーボードのキーにフォーカスを移動した際にも読み上げられるようになります。正解した際に表示される結果パネルや6回以内に正解できなかった場合の答え合わせなども全てスクリーンリーダーに対応してくれていて、アクセシビリティも非常に高くなっています。

※ブックマークレットがうまく読み込まれず、一部のアクセシビリティ機能が正しく動作しない場合があるようです。読み上げに何か不具合が生じている場合には、一度ページを更新してからブックマークレットを適用し直してください。

まとめ

今回の記事では、海外で大人気のワードゲーム、「Wordle」のアクセシビリティを向上してくれるツールについてご紹介しました。

ルールさえわかれば面白いゲームなので、ぜひ拡張機能・ブックマークレットをダウンロード・保存して遊んでみてください。