コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

著者 : ヘイドン・ピカリング Heydon Pickering 株式会社Bスプラウト

• ボーンデジタル (2015年3月27日発売)

作品紹介・あらすじ

HTML5+JavaScriptのモダンWebアプリをアクセシブルに!日本初!WAI‐ARIAの本格解説書。

感想・レビュー・書評

[sumiさんの感想 · 2020年4月24日]

HTML, CSS, JavaScriptを使ってアクセシブルなコンポーネントをつくるための具体的な方法が書いてあって、アクセシビリティ初心者にとって参考になりました。

[sotasuzukiさんの感想 · 2017年11月11日]

スクリーンリーダーやキーボードで操作する人に向けた対応をせねばと意識付けされた。WAI-ARIA やランドマークの活用方法も知らなかったし、読んでもまだ完全にわかったわけではないので都度読み返すことになりそう。WEB そのものがアクセシブルっていう言葉はなるほどと思った。

[zerobaseさんの感想 · 2015年9月15日]

目次は分かりにくくて損しているけれど、WAI-ARIAの解説書としては読みやすいほう

HTML5アプリケーション開発に携わるエンジニアやデザイナーにとってWAI-ARIAは重要だと思いますが、W3Cによる Accessible Rich Internet Applications (WAI-ARIA) 1.0 自体を読んでも、ちょっと理解しづらいのですよね。

『コーディングWebアクセシビリティ--WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション』はとっつきやすい本です。

細かいところですが、章見出しが（あまり日本人にないタイプの）若干面倒くさい感じで、どうにかならないのかとは思いました。「第4章 飛んでいこう」「第5章 いないいないばあ」「第6章 生きてる！生きてる！」とか…　ただし、章扉（各章の冒頭ページ）を読めば各章の概要が書いてありますので、そこをご覧になるとよいと思います。例えば第4章の扉には

> ページ内の移動やナビゲーションについて。ページ内に目印をつけて自由に移動することを可能にする「ランドマークロール」を中心に「ロール」を解説します。

などと書かれています。

「WAI-ARIAを勉強しようと思って、この本を手にとった人」に対しては、「ちょっと目次だけじゃ意味わからないかもしれないけど、そこで閉じずに1分ほど我慢してページをめくってみたらどうですか」とお伝えしたいと思います。

[fraserlibさんの感想 · 2015年6月19日]

請求記号　547.48/P 59

[amano225さんの感想 · 2015年4月24日]

この本を読んで、自分はいかにWebアクセシビリティを考えてない手法を使ってきたかよく分かった。今度から、ウェブ制作するときには、WAI-ARIAなどのWebアクセシビリティを意識した作りをしていきたい。
CSSをテスト的に使うという手法が面白かった。こういう使い方もあるのか。
『Adobe Blank』という見えないフォントというのがあるのを初めて知った。CSSでの画像置換にも使えそう？
ところで、ダイアログを閉じる時に、ダイアログを開いた時にフォーカスしていた要素にフォーカスを戻すという話で、ダイアログを開いた時に『var trigger = $(this).attr('id') ? $(this).attr('id') : 'origin'』、閉じる時に『$('#' + trigger).focus()』としてたけど、『var $trigger=$(this)』と『$trigger.focus()』でいいような。なぜこんな回りくどいことしてるんだろう。
後、ビッグレッドボタンがよく分からなかった。

[おかもとさん · 2015/04/28]

レビューありがとうございます。本件、監訳者の2人に確認しましたので、報告いたします。

＝＝＝＝

確かに var $trigger=$(this) と $trigger.focus() で問題ないように思います。

著者のコードは

・ID の文字列だけ覚えておいて (そして要素にIDがなければ origin という ID をつけて)、
・そのIDの要素を探して、
・見つかった要素にフォーカスを戻す

という処理をしているのですが、

・要素を覚えておいて、
・覚えておいた要素にフォーカスを戻す

という処理のほうが簡潔だし早いし良いのではないか、というご指摘で、
これはそのとおりだと思います。ご指摘ありがとうございました。

[amano225さん · 2015/04/28]

コメントありがとうございます。
まさか、監訳者さんに見てもらえるとは思っていませんでした。
自分が何か読み間違えてるか、そうする理由があるものかと思っていました。
ちなみに、余談ですが、自分も似たような動きのダイアログを作ったことがあり、その時は、document.activeElementでダイアログを開く前にフォーカスがあたっていた要素を取得ししていることを思い出しました。