駒瑠市──あるいは「キーボードトラップを初めて自作した件について」 (Webアクセシビリティ Advent Calendar 2020)

2020年12月01日更新 | タグ:

Webアクセシビリティ Advent Calendar 2020の12月1日を担当させていただきます、有限会社時代工房の柴田です。

弊社は代表である柴田と、数人の仲間たちで「アクセシビリティで食っていこう」ということで起業した会社でした。まさか、キーボードトラップを書く日が来るとは思っていませんでした。

もちろん、未熟ゆえに「うっかり」バリアを作ってしまったことや、予算や工期の関係から断腸の思いでアクセシビリティ確保の甘いサイトを作ってしまったことはありました。

そんなぼくがキーボードトラップを実装することになったのは駒瑠市（こまるし）というサービスを作ることにしたからです。

駒瑠市はウェブアクセシビリティを学ぶためのサイトとして、故意にアクセシビリティ上の障壁を仕込んだサイトです。今年はWAICの四方田さんに誘われて、アメリカの連邦政府で調達されるウェブサイトのアクセシビリティのテスターの資格、Trusted Testerを取得したのですが、この資格取得のためのLMSがよくできていまして、そのなかにバリアを学ぶためのサイトが作られていたのです。で、これはなかなか学ぶのに良いな、ということで駒瑠市を作る運びになりました。

なお、実装したキーボードトラップはこんな感じでした。

<form action="./do-not-test.php" method="GET">
<input type="text" name="s" id="search-text" size="20" value="" onblur="$('#search').focus()">
<input type="submit" id="search" value="検索" onblur="$('#search-text').focus()">
</form>

アクセシビリティ上の問題って、「使える人がいる」から起こるわけですよね？誰も、制作者自身も使えないものであれば、世に出る前に、すくなくとも制作者は使える状態にされるわけですから。でも、このキーボードトラップはそんな甘っちょろいものではありませんでした。すべてのonblurを拾っちゃうため、なんとマウスカーソルもトラップしちゃうのです。

あんまりにもひどかったので、弊社の本業のマークアップエンジニアにもうちょっとマシなキーボードトラップを描いてもらい、いまの駒瑠市はそちらを使っています。

だいたい少々意味不明です。なんで「検索」ボタンのblurで入力欄にフォーカスを戻す必要があるのでしょうか。バリアを実装するにせよ、なにかしらの説得力は欲しいと思っています。というわけで、A11YJのSlackでアイデアももらいましたし、ちかく、こんどは「説得力のあるキーボードトラップ」を実装したいと思っております。

さて、明日12月2日はYoshiki Katoさんですね。ではでは〜。