「使える」Webアプリにするには、アクセシブルなUI設計を学びたいデザイナー・デベロッパーにお勧めの良書 -Webアプリケーションアクセシビリティ

Post on:2023年3月10日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

アクセシビリティに興味があるけど、何から始めればよいのか分からない、勉強するならしっかり学びたい、そんな人にお勧めの解説書を紹介します。

アクセシビリティに取り組むときに大事なのは、できるところから始めること。本書を読んで、アクセシビリティの本質を正しく理解し、自分のWebアプリやサイトにおける課題をひとつずつ改善できます。

本書は、先月発売されたばかり！
著者の一人伊原氏は、元BAで私の同僚でした。退社後には東京都新型コロナウイルス感染症対策サイトのアクセシビリティ改善をサポートするなどで活躍しています。本書でもそういった経験を元にしたUIデザインの具体的な事例も非常に多く、制作現場の生きた言葉での解説は分かりやすいと思います。

Amazonでもさっそく、オール5の高評価レビューがたくさんついています。

Webアプリケーションアクセシビリティ
ISBN 978-4-297-13366-5
[Amazonでみる]
[楽天でみる]

著者: 伊原力也、小林大輔、桝田草一、山本伶
出版社: 技術評論社
発売日: 2023/2/27

Kindle版も同時発売されています！

Webアプリケーションアクセシビリティ Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

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

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

アクセシビリティとは特別な人のためではなく、より多くの人が、より多くの環境で、より多くの状態で利用できるようにすることです

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

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

先日の記事でも少し触れているので、ご覧ください。

divはボタンではない、ボタンの実装について知っておくべきすべてのこと

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

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

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

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

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

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

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

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

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