電脳麻将UI 〜 VoiceOver対応(1) で画像に alt属性を追加し、盤面をたどれば情報が得られるようになりました。 次の変更は「キーボードだけで操作できる」ようにすることです。
電脳麻将 を含めアクセシビリティの考慮がない多くのWebサイトでは、div要素をボタンとし、clickイベントの発生を契機に処理を行っていると思います。 ですが、この状態ではスクリーンリーダー使用者がボタンを「発見」できません。 アクセシビリティ対応でよく取られる方法は、このような div要素を使った「疑似ボタン」の使用を避け「button要素を使う」というものです。 button要素を使うことで次の効果が得られます。
1 によりボタンを発見しやすくなります。 VoiceOver であれば B キーあるいは Shift + Bでもボタンを巡回することが可能です。 2 によりマウス操作なしでボタンを押下することが可能となります。 ならば「すべてのクリック可能な部分を button要素に置き換えればいい」かというとそうも行きません。 電脳麻将では打牌選択の際に牌をクリックしますが、button要素で牌を表現するのは面倒ですし、すべての牌がボタンである訳でもありません。 さらには、牌をクリック可能になるのは自分の手番のときだけです。 つまり同一の牌であってもあるときはボタンであり、あるときはボタンではないということが起こります。
そこで電脳麻将ではクリック可能な要素を以下で実現しています。
role="button" とするだけでは button要素と同じにはならないのが面倒ですが、それが現在のブラウザおよびスクリーンリーダーの「仕様」のようです。 電脳麻将ではボタンとして扱いたい要素を role="button" とマークしたうえで、以前 電脳麻将UI 〜 selector で紹介した部品 selector を使って、2、3 を実現しています。