「使える」Webアプリにするには、アクセシブルなUI設計を学びたいデザイナー・デベロッパーにお勧めの良書 -Webアプリケーションアクセシビリティ
Post on:2023年3月10日
アクセシビリティに興味があるけど、何から始めればよいのか分からない、勉強するならしっかり学びたい、そんな人にお勧めの解説書を紹介します。
アクセシビリティに取り組むときに大事なのは、できるところから始めること。本書を読んで、アクセシビリティの本質を正しく理解し、自分のWebアプリやサイトにおける課題をひとつずつ改善できます。

本書は、先月発売されたばかり!
著者の一人伊原氏は、元BAで私の同僚でした。退社後には東京都新型コロナウイルス感染症対策サイトのアクセシビリティ改善をサポートするなどで活躍しています。本書でもそういった経験を元にしたUIデザインの具体的な事例も非常に多く、制作現場の生きた言葉での解説は分かりやすいと思います。
Amazonでもさっそく、オール5の高評価レビューがたくさんついています。
Kindle版も同時発売されています!
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は8章構成で、Webアクセシビリティの基礎知識から、UIによく使用される文字・画像・色など各要素ごとのアクセシビリティの取り組み、モーダル・カルーセルなど複雑なUIパターンの改善、デザインシステムをアクセシビリティ視点で強化する方法など、アクセシビリティについてたっぷり学べる解説書です。

アクセシビリティというと、高齢者や障害者に対してのものと思う人もいるかもしれませんが、それだけではありません。健常者でも、マウスの調子が悪い、手を怪我したのように一時的な障害になるケースはいつ起きても不思議ではありません。
アクセシビリティとは特別な人のためではなく、より多くの人が、より多くの環境で、より多くの状態で利用できるようにすることです

アクセシビリティを取り組む際に、難しく考える必要はありません。できることから一つずつやるだけです。たとえば、画像化したボタン。ボタン画像をimg
要素で実装し、button
要素で内包します。画像のalt
代替テキストには、「ボタン」ではなく、「追加」と記述することで、スクリーンリーダーには「追加、ボタン」と読まれ、要素の名前と役割が伝わります。

アクセシブルであるというのは、スクリーンリーダーに対するだけではありません。href
属性を持つa
要素でリンクを実装するだけで、マウスオーバーで左下にURLが表示されたり、右クリックでURLをコピーしたり新しいタブで開いたりできます。
先日の記事でも少し触れているので、ご覧ください。

また、HTMLでマークアップする時にもすぐに実践できることがあります。たとえば、見出しを見出し要素で実装するときに、見出しレベルを階層情報を示すようにマークアップします。こういったことの積み重ねで、コンテンツの階層構造を正しく実装できます。

第1章と2章はアクセシビリティの基礎とよくある事例を学び、第3章からは実際のUIを例にアクセシビリティを改善する方法が詳しく解説されています。第3章はみんな大好き、フォームをアクセシブルにする方法です。

第4章は、UIデザインの改善。Webサイトやアプリでよく見かける色やタイポグラフィ、レイアウト、画像、アニメーションの動きなど視覚的なUIデザインにおいて、アクセシビリティを改善する方法です。

たとえば、画像。ボタンなどのアイコン画像の代替テキストをどうするか、装飾用画像の代替テキストをどうするか、機能を持つ画像の代替テキストをどうするか、バナー画像の代替テキストをどうするか、など具体例とともに何が問題でどう解決するのかが詳しく解説されています。

また、ページのレイアウトでも情報構造を正しく伝えるためにはどのように実装するのがよいか、適切なタグを使用してマークアップしているか、同じ機能を持つコンポーネントのDOM構造は一貫しているか、などアクセシビリティを改善する方法がよく分かります。

第5章は、モーダルダイアログやカルーセルやハンバーガーメニューなどの複雑なUIパターンの改善方法。

第6章はデザインシステムとアクセシビリティで、Webサイトやアプリで使用されるデザインシステムをアクセシビリティ視点で強化します。

第7章は組織レベルでのアクセシビリティの取り組み方、最後の第8章はアンチパターンとその対策方法など。最近のWebサイトやアプリではたとえば、1画面に多くの状態を持っていたり、説明テキストが省略されたカテゴリトップ、ボタンやリンクが小さく密集した画面、入力項目がやたら多いフォームなどの改善方法が詳しく解説されています。

付録は、多様な利用状況の存在を知るために各OSやブラウザに搭載されている支援機能とその使い方、マウスやキーボードをはじめとしたデバイスについて。通常は快適に動作するために機能を設定していると思いますが、キーボードだけで操作してみる、マウスの反応を遅くしてみる、文字を拡大して表示してみるなど、どのように使用され、また使用時にどのような課題が生じされるのかよく分かります。
Webアプリケーションアクセシビリティの目次

Webアプリケーションアクセシビリティの目次

Webアプリケーションアクセシビリティの目次

Webアプリケーションアクセシビリティの目次

Webアプリケーションアクセシビリティの目次

Webアプリケーションアクセシビリティの目次
目次をご覧の通り、ボリュームたっぷりの一冊でした。アクセシビリティに取り組みたいけど、何から始めればよいか分からないという人に、特にお勧めします。気になった箇所に付箋しておいて、できることから一つずつ始めるだけです。本が付箋だらけになってしまうかもしれません。
献本の御礼
最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors