アクセシビリティの祭典2024 スポンサーセッション 発達障害当事者デザイナーと ウェブアクセシビリティ 株式会社トルク デザイナー ⼭﨑 悠 ©Torque

はじめに 私は発達障害、⾃閉症スペクトラム（ASD）と注意⽋陥・多動症（ADHD）を 持っています。会社からは働きやすい環境づくりなどの、協⼒を得てデザイナー として働いています。 ウェブアクセシビリティについて発達障害当事者⽬線からの情報があまり多くな いように感じたため「発達障害当事者デザイナーとウェブアクセシビリティ」の テーマで本⽇はお話しさせていただきます。 発達障害や脳の分野はまだ明らかになっていないことも多く、また発達障害の特 性は⼈それぞれ異なるということを前提に、今回は「私の特性の場合」はという 点もご理解いただけると幸いです。

⽬次 1. 株式会社トルクの紹介 2. ⾃⼰紹介 3. 発達障害とは？ 4. 発達障害当事者デザイナーとウェブアクセシビリティ 5. 株式会社トルクにおけるウェブアクセシビリティの取り組み 6. ニューロダイバーシティ（脳・神経の多様性） 7. 10年後のアクセシビリティ

1.株式会社トルクの紹介 デザインの⼒で情報格差をなくす トルクはJamstack・サーバレスアーキテクチャを中⼼としたモダンフロントエンドの Webサイト構築と、ウェブアクセシビリティとデザイン性の両⽴の実現にコミットした デザインテックカンパニーです。 私たちは、表層的なビジュアルだけをデザインと捉えず､意志、意図、⾔葉、体験、プロ グラム、システム、動きなど、⼈の営みを豊かにする創造の全てをデザインの対象と捉え ています。 美しく使いやすいだけでなく、障害者を含めた全ての⼈々が情報⾰命による恩恵を享受で きる社会を実現するために、ウェブアクセシビリティをデザインと技術の最重要要素の⼀ つと捉え「世界から情報格差をなくす」ことを⽬的に活動しています。

2.⾃⼰紹介 株式会社トルク ⼭﨑 悠（やまさき ゆう） • 2005年 ⻘⼭学院⼥⼦短期⼤学国⽂学科卒業後、キャラクターグッズ企画制 作会社にて企画職等を経験 • 2016年 桑沢デザイン研究所専攻デザイン科ビジュアルデザイン専攻に⼊学 • 2018年 同専⾨学校卒業後、グラフィックデザイン事務所、ウェブ制作会社 にて勤務 • 2021年 株式会社トルクにジョイン。ウェブデザイン、グラフィックデザイ ンの業務に従事 発達障害（ASD/ADHD）&双極性障害II型当事者 @yyyyamayyy https://note.com/yuu_yamasaki 4

3-1.発達障害とは？ 発達障害は代表的に以下があげられる。 • ⾃閉スペクトラム症（ASD/Autism Spectrum Disorder） • 注意⽋陥・多動性障害（ADHD/Attention deficit hyperactivity disorder） • 限局性学習症（LD/Learning Disability） そのほか、トゥレット症候群や吃⾳（症）、発達性強調運動障害（不器⽤さ）、知能発達障害も 含まれる。 発達障害の原因はまだよくわかっていないが、後天的なものではなく⽣まれつきのものであり脳 機能の障害（偏り）として考えられている。 参考：厚⽣労働省「発達障害ナビポータル」https://hattatsu.go.jp/uploads/2021/08/3472ab38dd1ab32712c71c61f84c8f5b.pdf 5

3-2.発達障害とは？発達障害の「濃淡」と「重なり」 • 対⼈関係・コミュニケー ションの困難さ • こだわりの強さ • 注意・集中⼒の⽋如 • 多動・衝動性 注意⽋陥・多動症 ADHD ⾃閉スペクトラム症 ASD 限局性学習症 LD 「読む」「書く」「計算す る」など、学習に関する特定 の能⼒に困難がある 参考：『発達障害⼤全』⽇経BP ⿊坂真由⼦著 6

3-3 発達障害とは？⼭﨑の場合 ASDとADHDの重なりが ある状態 注意⽋陥・多動症 ADHD ⾃閉スペクトラム症 ASD 限局性学習症 LD ※この図は発達障害のすべての⽅に該当するのではなく 「⼭﨑の特性の場合」を表してる 7

3-4.発達障害とは？発達特性はスペクトラム（連続体） ⾼ ASDの特性 低 定型発達 ADHDの特性 障害として診断がおりる ASD/ADHDを持つがASD優位 ⼭﨑のポジションはこの辺り いわゆる発達障害グレーゾーン ⾼ 参考：「⼤⼈の発達障害ナビ」https://www.otona-hattatsu-navi.jp/know/gray-zone/ 『発達障害⼤全』⽇経BP ⿊坂真由⼦著 ASDとADHDの重なりや バランスの例

3-5.発達障害とは？だれもが特性の凸凹を持ち合わせている 発達障害はグレーゾーンを含めると⽇本⼈⼈⼝の10%程度いると⾔われてる • ⾃閉スペクトラム症（ASD）…1%程度 • 注意⽋陥・多動性障害（ADHD）…少なく⾒積もって2〜3%、多く⾒積もって4〜5％ • 限局性学習症（LD）…7〜8%程度 近年注⽬されつつある「ニューロダイバーシティ（脳や神経の多様性）」という概念によると、 誰もが脳の多様性を持っていて、この多様性が表出したものが「特性」であるとされている。 脳の「特性」や「特性の凸凹・強弱」は、誰もが持ち合わせていると考えられる。 参考：『発達障害⼤全』⽇経BP ⿊坂真由⼦著 9

4.発達障害当事者デザイナーとウェブアクセシビリティ 発達障害デザイナーとしてデザインするうえで気をつけていること・ 留意していること 1. 輝度・彩度・コントラスト⽐ 2. アニメーションの制御 3. ⽐喩や曖昧な表現 4. ⾳声コンテンツ 10

4-1.輝度・彩度・コントラスト - 概要 ASDの特性により輝度・彩度・コントラストが⾼すぎるモニターは⽬が痛くなってしまっ たり、そもそも⽬を開けていることが困難な場合がある。結果、サイトから離脱してし まったり必要な情報を得られなくなってしまう可能性があるため留意する必要がある。 困りごとの具体例 • ⾼コントラスト：例えば⽩背景に（#ffffff）⿊（#000000）など • 輝度の⾼すぎる⾊の多⽤・隣り合わせた配⾊（蛍光⾊、パキッとしすぎた⾊の配⾊等） 苦⼿な配⾊の例 参考： 『 Webアプリケーションアクセシビリティ』伊原⼒也、⼩林⼤輔、桝⽥章⼀、⼭本怜著 英国政府accessibility-posters-set.pdf https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf 11

4-1.輝度・彩度・コントラスト ‒ 対応策の例 対応策の例 • ⿊を使う場合#000000ではなく#111111や#222222などの若⼲濃いグレーに寄せる • 背景⾊には真っ⽩#ffffffを⽤いず、少しだけグレーやベージュ等の淡⾊に寄せる • 輝度の⾼すぎる⾊の多⽤・⾼⾯積での使⽤を避ける 代替案 参考： 『 Webアプリケーションアクセシビリティ』伊原⼒也、⼩林⼤輔、桝⽥章⼀、⼭本怜著 英国政府accessibility-posters-set.pdf https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf 12

4-1.輝度・彩度・コントラスト - WCAG2.2関連項⽬ 達成基準 1.4.3 コントラスト (最低限)(レベル AA) テキスト及び⽂字画像の視覚的提⽰に、少なくとも 4.5:1 のコントラスト⽐がある。 ただし、サイズの⼤きなテキスト（少なくとも 18 ポイント、⼜は 14 ポイントの太字）及びサイズの⼤き な⽂字画像に、少なくとも 3:1 のコントラスト⽐がある。 https://waic.jp/translations/WCAG22/#contrast-minimum 補⾜：ASD者には光の刺激に過敏な⾼いコントラスト⽐がストレスになる⼈もいる。そのためコントラス ト⽐は⾼ければ⾼いほうが良いというわけではない。 Ҿ༻ɿʰ8FCΞϓϦέʔγϣϯΞΫηγϏϦςΟʱҏݪྗ໵ɺখྛେีɺຟాষҰɺࢁຊྯஶ

4-2.⾃動アニメーションの制御 ADHD・ASD者はアニメーション「動き・点滅・⾃動スクロール等」に気が散りやす い特性があり、ウェブページの他の部分に集中することが困難になってしまう場合が ある。 また必要な情報を得たいにも関わらず脳の特性上アニメーションのほうに⽬がいって しまいストレスにも感じる。 そのためにもカルーセルやアニメーションを制御できるよう「停⽌」「⼀時停⽌」 「再⽣」ボタンの設置が望ましい。 参考：WCAG2.1 2.2.2: ⼀時停⽌、停⽌、⾮表⽰を理解する https://waic.jp/translations/WCAG21/Understanding/pause-stop-hide.html 『 Webアプリケーションアクセシビリティ』伊原⼒也、⼩林⼤輔、桝⽥章⼀、⼭本怜著 14

4-2.⾃動アニメーションの制御 ‒ 対応策（カルーセル） 改善例：カルーセルには停⽌・再⽣ボタン、 また現在どの画⾯なのかナビゲーションの ボタンを設置する 参考：WCAG2.1 2.2.2: ⼀時停⽌、停⽌、⾮表⽰を理解する https://waic.jp/translations/WCAG21/Understanding/pause-stop-hide.html 『 Webアプリケーションアクセシビリティ』伊原⼒也、⼩林⼤輔、桝⽥章⼀、⼭本怜著 15

4-2.⾃動アニメーションの制御 ‒ 対応策（モーションアニメーション） 改善例：モーションアニメーションや背景 パララックス演出にはアニメーション停 ⽌・再⽣ボタンを設置する 参考：WCAG2.1 2.2.2: ⼀時停⽌、停⽌、⾮表⽰を理解する https://waic.jp/translations/WCAG21/Understanding/pause-stop-hide.html 『 Webアプリケーションアクセシビリティ』伊原⼒也、⼩林⼤輔、桝⽥章⼀、⼭本怜著 16

4-2.⾃動アニメーションの制御 - 補⾜ 私個⼈の意⾒としてウェブサイト表現におけるモーションアニメーションの否定 ではない。 ただし、そのアニメーションは効果的なのか、そもそもそのアニメーションは ユーザー体験として本当に必要なのか、ユーザーに適切な印象を与えられるかど うかウェブサイトの⽬的が達成できるか、⼀考しても良いのではないかと思う。 参考：WCAG2.1 2.2.2: ⼀時停⽌、停⽌、⾮表⽰を理解する https://waic.jp/translations/WCAG21/Understanding/pause-stop-hide.html 『 Webアプリケーションアクセシビリティ』伊原⼒也、⼩林⼤輔、桝⽥章⼀、⼭本怜著 17

4-3.⽐喩や曖昧な表現の扱い • ASD者は⽂字通り受け取ってしまう傾向にあるため⽐喩や遠回しな表現ではなく明確 な⾔葉を選ぶようにする必要がある。 • ASD者は曖昧な意図の汲み取りが苦⼿な場合がある。例えば「これ」や「あれ」など の「こそあど⾔葉」や「もっと」「ちょっと」などの曖昧な表現を使⽤を避けたい。 ウェブや⽣活における困りごとの具体例 • ⽐喩表現を⽂字通り受け取ってしまうことがある。 • 「詳しくはこちら」「もっと⾒る」ボタンは⽂脈によってはよくわからず、ストレスに感じる。 また、ページ遷移できずサイト離脱率が上がる可能性がある。 参考：WCAG2.1 2.2.2: ⼀時停⽌、停⽌、⾮表⽰を理解する https://waic.jp/translations/WCAG21/Understanding/pause-stop-hide.html 『 Webアプリケーションアクセシビリティ』伊原⼒也、⼩林⼤輔、桝⽥章⼀、⼭本怜著 18

4-3.⽐喩や曖昧な表現の扱い - WCAG2.2関連項⽬ WCAG2.2における関連項⽬ 達成基準 2.4.4 リンクの⽬的 (コンテキスト内)(レベル A) それぞれのリンクの⽬的が、リンクのテキスト単独で、⼜はリンクのテキストとプログラムによる解釈が 可能なリンクのコンテキストから判断できる。ただし、リンクの⽬的がほとんどの利⽤者にとって曖昧な 場合は除く。 https://waic.jp/translations/WCAG22/#link-purpose-in-context 達成基準 2.4.2 ページタイトル(レベル A) ウェブページには、主題⼜は⽬的を説明したタイトルがある。 https://waic.jp/translations/WCAG22/#page-titled 達成基準 3.1.3 ⼀般的ではない⽤語(レベル AAA) 慣⽤句及び業界⽤語を含めて、⼀般的ではない、⼜は限定された⽤法で使われている単語、⼜は語句の、 明確な定義を特定するメカニズムが利⽤できる。 https://waic.jp/translations/WCAG22/#unusual-words 19

4-4.⾳声コンテンツ 私の場合、ASDの特性として聴覚からの情報取得を苦⼿としている。 例）騒がしい場所や複数⼈での会話から情報を聞き取ること等 出典：NHKハートネット https://heart-net.nhk.or.jp/heart/contents/4_2/index.html 20

4-4.⾳声コンテンツに関して - WCAG2.2関連項⽬ WCAG2.2における関連項⽬ 達成基準 1.4.7 ⼩さな背景⾳、⼜は背景⾳なし(レベル AAA) 収録済の⾳声しか含まないコンテンツで、(1) 前景に主として発話を含み、(2) ⾳声 CAPTCHA ⼜は⾳声ロゴではな く、かつ、(3) 例えば、歌やラップなどのように、主として⾳楽表現を意図した発声ではないものについては、次 に挙げる事項のうち、少なくとも⼀つを満たしている: 背景⾳なし：⾳声は背景⾳を含まない。 消⾳：背景⾳を消すことができる。 https://waic.jp/translations/WCAG22/#low-or-no-background-audio 21

5-1.株式会社トルクにおけるウェブアクセシビリティの取り組み ウェブアクセシビリティに配慮したウェブサイトギャラリー「AAA11Y」の運営 https://www.aaa11y.com/ 22

5-2.株式会社トルクにおけるウェブアクセシビリティの取り組み ウェブアクセシビリティコンサルサービス「Accessibility First」 23 https://a11y.trq.co.jp/

5-3.株式会社トルクにおけるウェブアクセシビリティの取り組み ダイヤモンド・オンラインの⼈材メディアHR ONLINEに代表の本⽥とCTOの堀江の インタビュー記事が掲載 https://diamond.jp/articles/-/340820 24

6.ニューロダイバーシティ（脳・神経の多様性） ⽇本でもIT⼈材の⼈⼝不⾜に伴い発達障害を含むニューロダイバースな⼈材雇⽤ の推進が経産省からも呼び掛けられてる。 • すでに⼤⼿ITや⾦融ではニューロダイバースな⼈たちが活躍を⾒せている • 欧⽶企業の例：スペシャリステリネSAP、MS、HP、IBM、DELL 、 Google、JPモルガン、 ゴールドマンサックスなど • ⽇本企業の例：⽇本IBM、ソフトバンク、LINEヤフー、⽇揮パラレルテクノロジーズなど • 注意：ニューロダイバーシティ＝発達障害ではない。神経学的多数者（ニューロマジョリティ） もニューロダイバーシティに⼊る 参考：経済産業省ニューロダイバーシティの推進について https://www.meti.go.jp/policy/economy/jinzai/diversity/neurodiversity/neurodiversity.html 『ニューロダイバーシティの教科書』村中直⼈著 25

6.ニューロダイバーシティ（脳・神経の多様性）- 各特性と強み 種類 ⾃閉スペク トラム症 (ASD) 注意⽋如・ 多動症 (ADHD) 限局性学習症 （LD） 主な特性 • コミュニケーション・対⼈関係の障害 • こだわり、興味・関⼼のかたより • 不注意（集中できない） • 多動・多弁（じっとしていられない） • 衝動的に⾏動する（考えるよりも先に動く） • 「読む」「書く」「計算する」など、学習に 関する特定の能⼒に困難がある（知的な遅れ はない） 先⾏研究で⽰唆された強み • 細部への注意⼒が⾼い • 情報処理と視覚に⻑けている • 論理的思考に⻑けている • 集中⼒が⾼く、正確さを⻑時間持続できる • 知識や専⾨技能を習得・維持する能⼒ • 新たな領域へ挑戦することを好む • 変化に対応する能⼒が⾼い • プレッシャーのかかる状況でも冷静に⾏動で きる • 刺激的な仕事に極度に⾼い集中⼒を発揮する • 多⾓的に物事を考えられる • データのパターンや傾向を⾒抜くこと、洞察 ⼒や問題解決能⼒に⻑けている • 異なる分野の情報を組み合わせることに⻑け ており、発明や独創的思考ができる 参考：令和３年度産業経済研究委託費イノベーション創出加速のためのデジタル分野における「ニューロダイバーシティ」の取組可能性に関する調査調査結果レポート https://www.meti.go.jp/policy/economy/jinzai/diversity/neurodiversity/neurodiversityR4report_v1.1.pdf 26

7. 10年後のアクセシビリティ 発達障害の⽅々に向けたアクセシビリティの向上はウェブサイトを 改善するだけでなく社会全体を改善すると信じています。 世界中すべての⼈の脳は多様で⼀⼈⼀⼈違いがあります。発達障害 を含む脳に関する分野はまだわかっていないことが多いですが、10 年も経たないうちにもっと障害への理解が深まり、スティグマの解 消や、平等、多様性が促進されていくと思います。 そのためにもデザイナーとして⾃分ができること、例えばウェブア クセシビリティとデザイン性の両⽴、ニューロダイバーシティの推 進、発達障害に関する啓蒙活動を積極的に⾏なっていきたいです。 27

ご清聴ありがとうございました！ 28

参考⽂献 • 『Webアプリケーションアクセシビリティ』伊原⼒也、⼩林⼤輔、桝⽥章⼀、⼭本怜著 技術評論社 • ウェブアクセシビリティ基盤委員会 https://waic.jp/ • 『発達障害⼤全』⿊坂真由⼦著 株式会社⽇経BP • ⼤⼈の発達障害ナビ https://www.otona-hattatsu-navi.jp/ • 『DSM-5 精神疾患の分類と診断の⼿引き』 ⽇本語版⽤語監修⽇本精神神経学会 医学書院 • 厚⽣労働省「発達障害ナビポータル」https://hattatsu.go.jp/uploads/2021/08/3472ab38dd1ab32712c71c61f84c8f5b.pdf • 令和３年度産業経済研究委託費イノベーション創出加速のためのデジタル分野における「ニューロダイバーシティ」の取組可能性に関する調査調査結果レポート https://www.meti.go.jp/policy/economy/jinzai/diversity/neurodiversity/neurodiversityR4report_v1.1.pdf • 経済産業省ニューロダイバーシティの推進について https://www.meti.go.jp/policy/economy/jinzai/diversity/neurodiversity/neurodiversity.html • 『ニューロダイバーシティの教科書 多様性尊重社会へのキーワード』村中直⼈著 ⾦⼦書房 • 英国政府accessibility-posters-set https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf • NHKハートネット https://heart-net.nhk.or.jp/heart/contents/4_2/index.html • WCAG Blog：Digital Accessibility and Neurodiversity: Designing for Our Unique and Varied Brains https://wcag.com/blog/digital-accessibility-and-neurodiversity/ • W3C Working Group Note 29 April 2021 Making Content Usable for People with Cognitive and Learning Disabilities 6.2 Amy: An Autistic Computer Scientist https://www.w3.org/TR/coga-usable/#amy-an-autistic-computer-scientist • 徹底討論：世の中の５０％は発達障害者説？ https://www.youtube.com/watch?v=UfTSopDywOU 29

監修 五反⽥駅前メンタルクリニック 院⻑ 奥村克⾏先⽣ （スライド5~8ページ） 30