インクルーシブコーディング-多用なニーズに応えるWEBサイトとは-
インクルーシブデザイン
インクルーシブデザインとは、高齢者、障がい者、外国人など、従来、デザインプロセスから除外されてきた多様な人々を、デザインプロセスの上流から巻き込むデザイン手法
引用元 : http://i-d-sol.com/inclusivedesign/
インクルーシブデザインという言葉を知ったのは、サイト制作のディレクションを担当させていただいた案件で「ユニバーサルデザインを意識して欲しい」とオーダーをいただいた事がキッカケでした。
ちょうどその頃、会社でNPO法人を招いて行なっているインクルーシブデザインのワークショップに参加したり、主催者の方からお借りした本を読んだり、いくつかのタイミングが重なり興味を持ちました。
まだまだ全然勉強が足りていませんが、今回はそれらの経験をまとめていきます。前半はインクルーシブデザインについて、後半では具体的なコーディング部分について書いていきます。
インクルーシブデザインとユニバーサルデザイン
この2つは「多用なニーズに応えるデザイン」という共通のゴールを目指しているが、プロセスが異なっている。ユニバーサルデザインは7原則に従い、検証していくといプロセスを通っていくが、インクルーシブデザインは企画・開発の時点で多用なニーズの人々に参加してもう。
正直とても難しい…
今の所、自信を持ってインクルーシブデザイン（開発段階から多用なニーズの方に参加いただいた）が体現出来た案件は1つもありません。
弱視の方だけではなく、全盲の方にもスクリーンリーダー(音声読み上げ)を使用して実際に検索してもらい、制作したサイトに訪問、確認いただきましたが。そもそもサイトに辿り着くまでのハードルも非常に高い。
そこから知りたいコンテンツに辿り着くのも非常に大変で。自分がまったくインクルーシブデザインを意識出来ていない事を痛感しました。
インクルーシブHTML
インクルーシブデザインのワークショップ主催者の方にお借りした本です。ワークショップでは弱視の方に、実際に制作途中のサイトを確認していただける機会があり、非常に勉強になりました。
本質的な施策やデザインてなんだろう
■弱視の方のニーズに応えた施策（のはずだったが…）
・フォントのリサイズ機能
・色反転機能
弱視の方達は日頃使用しているiPhone、PCなどでフォントの拡大や色の反転などは設定済みの為、これらは不要の可能性が高く、ポーズの要素が強い。
ここインクルーシブデザインしてますよ！みたいな感じで本質的ではない。
こういった事は実際に弱視の方とお話して、一緒にサイトを確認してもらえなければ気づけなかった事でした。想像して施策する事と、実際の意見を聞いて施策をする事ではまったく違うと感じたエピソード。
インクルーシブコーディング
ここからは本やワークショップを通して、感じた具体的なコーディング上の視点や施策についてです。
・キーボードユーザーの視点を考える
目が不自由な方、また手が不自由な方はマウスを使用せずに、キーボードを使用しサイトを閲覧しているケースがあるので、tabキーだけでも正しくサイトが閲覧出来るか確認をする
・多くのユーザーは目的を果たしたいだけ
初見の華やかさや、企業のブランドを伝えるデザインは勿論重要ですが、そのデザインが目的を果たす事の妨げになる可能性があることも理解する事。見た目の良さだけでなく、機能としての良さを考える。
・h（見出し）タグの移動を意識する
目が不自由な方が使用している、スクリーンリーダーは音声を読み上げてくれます。余談ですが、実際に使用している所を見せていただいた所、音声の読み上げがすごく早い！（文章全体を理解する為にはこのぐらい速さがいいとの事）
Hキー、数字のキー（見出し番号）を使用し、見出しへ移動しサイトを閲覧しているので、コンテンツの流れに沿って、正しくhタグでマークアップする必要がある。
・1m×2mなどの×は乗算記号を使う
形が似てるかといってx（エックス）を使用すると、スクリーンリーダーで正しく読み上げて貰えない。「いちめーとるエックスにめーとる」などのようになってしまう。
・block要素全体をリンクでaで囲む
HTML5になり、ブロック要素をaタグで囲む事が一般的になりましたが、2つの点で好ましくない。1点目が、リンクに触れる（hoverやfocus）までリンクだと気づかれない可能性がある。2点目が、スクリーンリーダーが周りのリンクに反応してしまい、中にある見出しタグを読み上げない。
・aria-labeを使用する
ユーザー補助のサポートや説明テキスト。HTML5ではどの要素にも使用出来ます。例えば下記のようにしてあげると親切かもしれません。
<a href="〇〇.html" aria-label="〇〇について書かれた記事の続きを読む">続きを読む</a>・placeholderは判別しやすくする
デフォルトはグレーですが、このまま使用するとコントラストの問題で判別出来なくなる可能性がある、よって文字色はなるべく見やすい色を使用し、斜体などで補助的な情報と分かるようにする。
まだまだ沢山ありますが、全てを実践するのは非常に大変なので、少しづつでも意識して実践していけるといいと思います。
基本に立ち返る
細かな施策も大事ですが、そもそものレイアウトや導線設計が大切。それこそ「知りたい情報がすぐ知れる」という事は大多数のユーザーのニーズになります。
モバイルファーストの時代になり、スマホ表示のデザインからPC表示のデザインを作るようになったように。これからインクルーシブデザインから始まる時代が来るのかもしれません。