アクセシビリティ改善の検討 · Issue #89 · kobalab/Majiang · GitHub で提案されて以来、電脳麻将 のスクリーンリーダー対応は長年の課題でした*1。スクリーンリーダー とは画面に表示された内容を視覚以外の方法で伝えるソフトウェアのことで、その手段としては音声が使われることが多いです。Mac や iPhone では VoiceOver、Windows では NVDA が有名です。電脳麻将をスクリーンリーダーに対応させることができれば、目の不自由な方でも麻雀を楽しむ可能性が広がるはずです*2。
対応方針
一口にスクリーンリーダーといっても様々な種類があり、それぞれにクセも異なるようです。ですので目標とする 対応環境 を定めておかないと迷走してしまうことが予想できます。まずは私の普段利用している macOS + Chrome の環境で、OS 付属の VoiceOver で動作するよう実装します。念のため Safari でも確認し、可能であれば問題を修正します。Windows ではオープンソースの NVDA が広く使われているようですので、Edge での動作も確認しますが、問題修正までは目標としないこととします*3。
次に、対応内容 です。提案を受けた当時の電脳麻将は ver. 1.5.3 でアクセシビリティに関する考慮が皆無の状態でした。牌は alt 属性すらないただの画像、ボタン類は div 要素で作成した疑似ボタンで、視覚情報なしには牌が何であるのか、ボタンはどこにあるのかすらわからない状態です。この状態からまずはAIと対局可能にしたいと考えました。
提案者の yncatさん からも アドバイス いただき、以下の3段階で対応を進めるのがよいのではないかと考えました。
- 牌などの画像には alt 属性で名称を入れ、スクリーンリーダーで 盤面をたどれば情報が得られる ようにする
- ボタン類には tab キーで移動でき、キーボードだけで操作できる ようにする
- 他者の打牌など非同期に発生する状態変化に関しては画面中に「実況エリア」を設け、そこに 文字を書き込むことでスクリーンリーダーにひろってもらう
上記の目標の下で ver. 2.0.0 の大規模リファクタリング作業の一環として作業を開始しました。
ver. 2.0.0 までの対応状況
「1. 盤面をたどれば情報が得られる」に関しては当時から電脳麻将は「雛形をコピー」する方式だったので、すぐに対応できました。「2. キーボードだけで操作できる」に関しては、selector という部品を作成し、Tab 移動で選択、Enter キーで確定という操作を可能にし、打牌のUIに適用しました。
ここまで進んだ段階で「電脳麻将本」執筆の話が舞い込んだので、まだ先の見えていないスクリーンリーダー対応を先送りにして、本の出版に合わせて ver. 2.0.0 をリリースするよう目標を変更しました。ですので、電脳麻将 ver.2.0.0 では、盤面をたどれば牌を把握することができ、打牌選択はキーボードだけで可能だが、他者の打牌などは不明という中途半端な状態でのリリースとなってしまいました。
UIリファクタリングでの実装
電脳麻将本の出版と ver. 2.0.0 のリリースは無事を終えたのですが、そこでモチベーションが燃え尽きて開発が停止してしまいました。燃え尽きた要因の一つは VoiceOver の挙動の変化 です。すでに実装した機能が動かなくなっていることで心を折られました。そのうちに 麻雀サーバー、牌譜エディタ の開発に興味が移ってしまい、スクリーンリーダー対応は先延ばし、先延ばしという状態でした。
ですが、今回 UIのリファクタリング を開始したことでモチベーションが回復しました。スクリーンリーダーの挙動も安定してきたようですし、相談相手もいなかった当時とは違い、現在はAIに相談することもできます*4。アクセシビリティに関する情報源も、私自身の関連知識の量も増え、間違った実装をしにくくなりました。
そしてついに4月に入ってからスクリーンリーダー対応の開発を再開し、Mac の VoiceOver + Safari(および Chrome)に関してはゲームができるようになりました。まずは体験してみてください。
次回以降、得た知見や実装方法を紹介していきたいと思います。
