実現したいこと

視覚に障害があっても、スクリーンリーダーを利用して麻雀を練習したい。
このアプリケーションは、ウェブベースで構築されているので、画面読み上げソフトウェアに比較的低コストで対応できる可能性がある。
画面表示に影響することなく改善できることが理想的だが、もしかすると特別な変更が必要かもしれない。

このissueで議論する内容

電脳麻将をスクリーンリーダーで操作できるように改善できるかどうか、実装面での相談をしたい。
実現可能なめどが立ったとして、その変更を公式にも組み込むか、forkしたアクセシビリティ対応版を作成するか決定したい。

前提

アクセシビリティ対応のために他のプレイヤーのUXを下げたり、既存の挙動を大きく変更するようなことは望んでいない。あくまでも、この対応によるダウングレードは出さない、だれも困らないことが前提。

現状気になっていること

これらの問題がなんとかなれば、かなり遊べるようになるのではないかと思う。

自分の持ち牌が正しく読まれない

rawdata の画像データに alt を入れることで解決できる。検証済み。

捨てられた牌や、ドラの情報が確認できない

詳しい原因はまだ調査していない。
スクリーンリーダーで見ると、牌数、得点、自牌画像、音声コントロール、速度コントロール、バージョンを認識できるが、それ以外が見えていない。

自分以外の対戦相手の行動が分からない

もっとも改善の難易度が高いと思われる。おそらく、今は卓の盤面上の牌が変化するのを見て状況を判断する、ということになっていると思うが、これはテキストで情報伝達しないと正確には伝わりにくい。
やり方としては、 live region を使って、 aria-live="polite" 属性を付けた領域に補助情報を書き込んで読ませる方法がある。
ただ、これだけだと補助情報が画面に出てしまうので、さらにこうする。

<div
  aria-live='polite'
  style='position: absolute; width: 1px; height: 1px; margin-top: -1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden;'>
  <div>ここを更新したら自動で読み上げられる</div>
  <div>あとからここに要素を追加したら、追加した物だけが読まれる</div>
  <div>{player_name} は {pai} を捨てた、みたいな情報を書いていく</div>
</div>

cssでやっているのはこの実装例

見ての通り、非常にハッキッシュなコードができる。forkしたほうがいいんではないかと言った理由はここにある。

泣けるかという問題

泣けるとき、おそらく何かクリックできる要素が出てきて、それをクリックすれば泣く、しなければ泣かない、というようなやりかたをしていると思う。この時、

• 出てきたことが分かるか
• 出てきたものを押せるか
  という問題があり、検証が必要。