書籍「インクルーシブHTML+CSS & JavaScript」を読了

公開

遅ればせながら書籍「インクルーシブHTML+CSS & JavaScript」を読了しました。264ページとある程度ボリュームがありますが、文章が読みやすいこともあり読み始めてみるとスムーズに読み進めることができました。
写真: 書籍「インクルーシブHTML+CSS & JavaScript」紙版

「日本語版の刊行によせて」にあるようにフロントエンド実装者向けの書籍で、ドキュメント全体に関する事柄やパラグラフに関する事柄のような基礎的な事から、メニューボタンのように最近よく利用されるウィジェットの解説など、実務ですぐに利用できる知識が分かりやすくまとめられている良書だと感じました。また、現在のページを表現するためにherfの値を変更しふるまいとセマンティクスを結びつける方法や(あらゆる環境で有効か否かはひとまず置いておいて)、:empty疑似クラスとWAI-ARIAを併用しインターフェースの基本機能と見た目を確実に同期させる・スクリーンリーダーにも対応できる方法などもとても興味深く読ませて頂きました。今よりもさらに深く考えて実装をしていきたいと思うきっかけとなりました。

ページ内リンクの動作をジャックしてスムースにスクロールさせる手法もよく使われますが、スクロール後にwindow.location.hashを使用してURLにハッシュフラグメントを付けることで、focus()をせずともシーケンシャルフォーカスナビゲーションの仕組みによりキーボードでナビゲートするユーザーもきちんと目的の場所にたどり着くことができることは初めて知りました。それと同時に標準の機能を乗っ取りアニメーションを実現していることに改めて疑問を感じた次第です。

その他、デザインに関する言及もたくさんありましたが、普段考えていたことが書いてあり思わず「そうそう!」と頷く場面もありました。印象に残った文を書き留めておきます。

  • 多くのデザイナーはインターフェイス自体の細部の美しさに夢中になりがちです。しかし実在するほとんどのユーザーはただ目的を達成したいだけです。(P.151)
  • ビジュアルデザインだけがデザインなのではありません。システムを設計することもデザインです。(P.164)
  • インターフェースコンポーネントの静的モックアップは理想的なコンテンツを表しがち(P.218)

本書の内容を活かし、より多様なユーザーニーズに応えることのできるWebサイトを制作していきたいと思いました。

フロントエンド実装者以外の方にも読んで欲しい

最初に紹介したようにこの書籍はフロントエンド実装者向けの書籍となっていますが、私はディレクターやデザイナーの方など、Webサイト制作に関わるあらゆる職種の方にぜひ読んで頂きたいなと感じました。

例えば登録フォームの章で紹介されている、フォームにおいてラベルを付けずplaceholderで代用するデザインが提示される例がよくあるように思います。これをフロントエンド実装者だけでどうにかしようとしても無理なのです。(所属している会社のサイトにおいて、label要素を使い入力前はプレースホルダーのように、入力中は入力フィールドの下に表示させる細工をしたこともありますが...。)どのようにすればインクルーシブなインターフェースになるのか、あらゆる人が予め知っている必要があると考えます。また本文においてもデザインプロセスの初期段階でインクルーシブ思考に時間を費やす必要があります(P.156)と書かれています。8章〜11章だけでもあらゆる職種の方に目を通して頂ければと願います。