この記事は 株式会社Y's アドベントカレンダー ６日目の記事です。
はじめに
11月に行われた『html5j Webプラットフォーム部 第18回勉強会』に参加させて頂いた際に色々と、改めて考えなくてはと感じた部分が多いので共有の意味も込めて、この題材にさせて頂きました。
参考書籍を読み深めることがまだ出来ていないため拙い表現とはなりますがご容赦下さい。
そもそもインクルーシブとはなにか
結構昔から何かと話題に上がっていたインクルーシブという単語。
でも、具体的にどんな意味？ 教えてgoo辞書先輩。
インクルーシブ【inclusive】
［形動］包含しているさま。含んでいるさま。包括的。
つまり...?
包括とは「ひっくるめて一つにまとめること。」(Weblio辞書)
ふむふむ？
まだちょっとわかりづらいので『インクルーシブ』で検索した時に引っかかったワードを調べてみました。
・インクルーシブ教育...障害の有無に関わらず、全ての子ども達がその地域の学校に包み込まれ、必要な援助を提供されながら教育を受けること。
・インクルーシブ社会...健常者と障害者の垣根のない社会。
・インクルーシブデザイン...高齢者、障がい者、外国人など、従来、デザインプロセスから除外されてきた多様な人々を、デザインプロセスの上流から巻き込むデザイン手法。
つまりWebサービスにおける『インクルーシブ』には、どんな条件、状態下であっても全ての方を対象とし、同じサービスを受けてもらえることを前提に考える。と意味に捉えることもできる。
対象者ってどんな人？
上記のワードの説明で挙げられた
・高齢の方
・障害をお持ちの方
・こちらの文字が読めない外国の方々。
など。
グローバル化が進み、日本にもたくさんの方が海外からいらっしゃいます。
また、日本では高齢化社会の話題が絶えません。
そして、障害はなにも生まれ持った障害だけじゃありませんよね。
例えば、普段は眼鏡やコンタクトをつけたら問題なく生活できる方々。
でも眼鏡を壊してしまったら？ コンタクトが無くなってしまったら？ そんな事象が起きてしまうと普段と同じことはできません。
また、捻挫や、ちょっとした怪我をしてしまったり、当たり前が当たり前では無くなる事柄が現実にはたくさん存在します。
そういった事例も含めて『全ての方』が対象として考えられます。
フロントエンドが意識すること
ではフロントエンドエンジニアが、インクルーシブを意識できること。
それはやっぱりコーディング部分ですよね。
インクルーシブではない実装とは
まずはどういったコンテンツがインクルーシブではないのか。
反対から考えてみましょう。
・目の見えない方が入力できないフォームや読めないコンテンツ
・マウス操作を前提としたコンテンツ
・画像が読み込めていないと意味が伝わらなコンテンツ
・一見で操作方法が伝わないUI
などなど。
どう実装すればいいのか
上記の内容をピックアップし、一例を挙げたいと思います。
正解はなく、あくまでも一つの考え方、参考例となります。
目の見えない方が入力できないフォームや読めないコンテンツ
アクセシビリティの観点からみて外せないのが『WAI-ARIA』という仕様です。
HTML要素の属性として情報を付加し、ブラウザがそのコンテンツの内容を正確に認識してくれるもので、スクリーンリーダー利用者に対してもわかりやすく情報を提供することが出来ます。
※スクリーンリーダーとはパソコンやスマートフォン上に表示されている情報を音声で読み上げてくれるソフトです。
来週記述予定の記事でWAI-ARIAについてお話しようと思っているので、詳細はそちらで記述したいと思っております。
マウス操作を前提としたコンテンツ
キーボードから手を離したくないユーザーや、あまり腕を動かせないユーザーから見て、いちいちフォーカスが外れてしまうようなフォームって不便ですよね。
ノートPCであればトラックパッドがありますので、利用してくれますが、デスクトップでは全ての操作をキーボードだけで済ませたいと思うこともあるでしょう。
ビジュアル重視なサイトが多い中、せめてフォームなどのユーザーアクションの多いものにはタブ移動のしやすさを意識したものだと好ましいかと思います。
画像が読み込めていないと意味が伝わらないコンテンツ
画像のaltって悩みますよね？
テキスト画像だった場合、altに記述するべきはそのテキスト内容ですし、絶対必須です。
ですが、写真やイラストの場合その言葉に悩むことは多いと思います。
上記の画像に適するalt属性の内容って何でしょう？
画像を使用する場所にも限られますが、私は"株式会社Y'sの会社ロゴ"が１番適しているかと思います。
アイコンとして使用するならaltの中身は空でも問題ありませんが、それ以外ならなるべくその画像が表現しているものを具体的に記述しましょう。（かと言って、何行ものやりすぎ文になってはいけません）
一見で操作方法が伝わないUI
これはコーディングというよりもデザインありきのお話ですが、
どこに導線がありのか、どう操作すればいいのかわからないサイトってたまにありませんか？
hoverやpointerだけに頼らず、視感的にもわかりやすいUIを意識したいですね。
また、リンク導線を色だけで頼ってしまった場合は色彩が判断出来ない方にはどこを押下すれば遷移するのか判断がつきません。
自分がデザイン担当ではなくても、気づいた部分はデザイナーと相談してみてもいいと思います。
最後に
情報がまだまだ少ない中、ピンとこない言葉ではありますが、早いうちに意識をした方がいいと思ったため、共有とさせて頂きました。
私もまだまだ勉強中ですので、共に考えてくれると嬉しいです。
参考書籍
・『インクルーシブ HTML + CSS & JavaScript』(11月４日出版)
↑ 具体的なコーディング例がたくさん記載されています。
ソースだけでなく、なぜそのようなコードになるのか、どういった理由・根拠に基づいたものなのかという説明がしっかりと記載されています。
購入をお願いし、会社にも書籍がありますので興味のある方は是非とも読んで見て下さい。
(現在は私が借りてしまっていますが、自分用に買おうと思っているので近いうちに返却します。)
次は 7日目 @The3rd_Ysinc さんの記事です。お楽しみに！