発達障害当事者デザイナーとウェブアクセシビリティ　

こんにちは。株式会社トルクのデザイナー山﨑です。唐突ですが私は発達障害当事者です。ASD（自閉症スペクトラム障害/アスペルガー症候群）とADHD（注意欠如・多動症）を持っています。トルクでは私の障害を受け入れてもらいウェブデザイナーとして勤務しています。
近年、発達障害は話題にあがりやすいトピックスですので、聞いたことある方やなんとなくご存じの方もいらしゃるかと思います。発達障害について説明しますとそれだけで長くなってしまいますので詳しくは「大人の発達障害ナビ」や政府広報オンラインの「発達障害って、なんだろう？」などをご覧いただくか、ご興味のある方は各自でググっていただければと思います。
今回は発達障害当事者デザイナーがウェブデザインをする上で工夫していることやアクセシビリティの観点からも書いていこうと思います。

ASD編：発達障害デザイナーがデザインする上で工夫していること①モニターの輝度

私はASDの特性から視覚過敏を持っています。輝度の高いものや点滅、ちらつきが苦手です。作業の際も支障のないレベルまでモニターの輝度を下げていますが、健常者の方が見えている色と異なってしまうため、一通りデザインが完成したらMacBookの正しい輝度で自分のデザインを再確認するようにしています。

ASD編：発達障害デザイナーがデザインする上で工夫していること②デザインの輝度やコントラスト比

※WCAG 2.1の適合レベルのコントラスト比を抑えた上での前提です※
ASD者の中で視覚過敏を持っている人は輝度やコントラスト比の高すぎる配色に目がチクチク感じてしまうことがあります。例えば白背景に（#ffffff）黒（#000000）など高コントラストの配色が挙げられます。その場合、白背景のほうを少しだけグレーやベージュ等やや淡色によせるか、黒を（#111111や#222222）にするなど若干濃いグレーに寄せ、目がチクチクせずストレスを与えないよう配色しデザインします。
また輝度の高すぎる色を使用したサイトは奇抜でオシャレですが（CMYKでは表現できないパキッとした色味はウェブの良さでもあると思いますが…）一部のASD者は目の痛みを感じたりストレスを感じてしまい、結果サイトから離脱してしまったり必要な情報を得られなくなってしまう可能性があるため気をつけます。具体的には輝度や彩度の高い色を多用しすぎない・広い範囲で使用しない（使用するとしても面積を小さくする）・激しい点滅をさせないなど留意します。

発達障害がある、また光の刺激に過敏なユーザーの中には、高いコントラスト比がストレスになる方もいます。したがって、コントラスト比は高ければ高いほうが良いというわけではありません。（略） 文字色に真っ黒ではなく、やや明度を落とした黒を使う、または白の背景に黒の文字が続いてしまう場合、薄いグレーの背景色を利用するなど、画面全体のコントラスト比が高くなりすぎないいように調整してみましょう。

技術評論社『Webアプリケーションアクセシビリティ 今日から始める現場の改善』 189ページ

なお、激しい点滅による演出はてんかんを持っている方にも（そうでない方にも）発作のきっかけになってしまうことがあるので注意が必要です。
　参考：Xbox アクセシビリティ ガイドライン 118: 光過敏性 　　　
　　　　W3C発作の防止:ガイドライン 2.3 を理解する 　　　
　　　　達成基準 2.3.1: 3 回の閃光、又は閾値以下を理解する

ASD編：発達障害デザイナーがデザインする上で工夫していること③比喩をなるべく使わない

デザインというよりライティングの範囲かもしれませんが、ASD者は文字通り受け取ってしまう傾向にあるため比喩ではなく明確な言葉を選ぶようにします。そしてなるべく「こそあど言葉」は使わないようにします。「これ」と指されたものが何かわからないことがあるからです。少し話が逸れますが仕事上で指示を受ける際に「こそあど言葉」が出てきたときは、具体的に何を指しているのか都度確認し認識の齟齬がないようにしています。
ウェブサイトで言えば例えば「詳しくはこちら」や「さらに見る」などのボタンも、スクリーンリーダー上で読み上げした際にリンク遷移先が事前にわからなくなってしまうという懸念点がありますが、ASD者からしても何のボタンなのか文脈によっては読み取れずストレスを抱えてしまう可能性があります。求められるウェブサイトにもよりますが自治体やインフラなど全ての人にとって必要なサイトにおいては曖昧な言葉を使わず明確なライティングが必要になると思います。

社会的学習やコミュニケーション障害のある人は、比喩や、文字以外のテキスト、新しいアイコンを理解できず、文字通りの明確な言葉を必要とする場合がある

技術評論社『Webアプリケーションアクセシビリティ 今日から始める現場の改善』 19ページ

参考：Ameba Accessibility Guidelines2.4.4 リンクの目的を理解できるようにする

ASD・ADHD編：発達障害デザイナーがデザインする上で工夫していること動画の自動再生には「停止」「一時停止」「再生」ボタンを

ADHD者は健常者より気が散りやすく集中を欠きやすいです。（追記：ASD者の特性としてチラつくものやアニメーションに気が散ってしまうこともあります）動いているものがあるとそちらに気を取られてしまい肝心な情報の取得に時間がかかってしまいます。また必要な情報を得たいにも関わらず脳の特性上アニメーションのほうに目が入ってしまいストレスにも感じます。そのためにもカルーセルやアニメーションには「停止」「一時停止」「再生」ボタンを設置する必要があります。
そもそも現在作成しているウェブサイトにアニメーションが必須なのか。ウェブサイトの内容や趣旨によってはアニメーションを使用しないという選択肢を取ったほうが良い場合もあるかもしれません。

　アニメーションを長い時間再生する必要があれば、「ユーザーがアニメーションを見ない」という選択肢をとれるようにしましょう。WCAG2.1では達成基準2.2.2「一時停止、停止、非表示」において、アニメーションをはじめとした変化するコンテンツが自動的に開始し、5秒よりも長く継続し、かつ、そのほかのコンテンツと並行して提示される場合、ユーザーが一時停止・停止・非表示するしくみを提供することを求めています。
　一時停止・停止・非表示する昨日は、できるだけユーザーが気づきやすい場所に配置しましょう。

技術評論者『Webアプリケーションアクセシビリティ 今日から始める現場の改善』 246ページ

参考：Ameba Accessibility Guidelines2.2.2 動く、自動更新するコンテンツに配慮する

弊社ではアクセシビリティに配慮したWebデザイン ギャラリー・サイト AAA11Yを運営しており私も日々アクセシビリティに配慮したサイトを探していますが、アニメーションの停止ボタンが小さかったりわかりづらい位置にあるサイトをちらほら見かけます。せっかく停止ボタンを設置するのですからデザインに配慮しつつもユーザーにとってわかりやすい位置にレイアウトしていきたいと改めて感じました。

また発達障害当事者デザイナー目線でのアクセシビリティ観点・デザインするうえで気をつけていることや気付きなど追加でありましたら第2弾を書いきたいと思います。とりとめもなく綴ってしまいましたが、ここまでお読みいただきありがとうございました！

参考：W3C「Making Content Usable for People with Cognitive and Learning Disabilities」Use Cases
参考：WCAG BLOG「Digital Accessibility and Neurodiversity: Designing for Our Unique and Varied Brains」