Slide 1

Slide 1 text

がんばらないアクセシビリティより幅広く価値を届けるために @ymrl Qiita Conference 2025 2025年4⽉23⽇

Slide 2

Slide 2 text

⾃⼰紹介 ● ymrl （やまある‧⼭本伶） ○ フリー株式会社 UIデザイナー/フロントエンドエンジニア ● 2017年ごろからfreee社内のアクセシビリティの活動を始める ○ 2019年、社内デザインシステムの構築のためにデザイナーに転⾝ ● 2023年、共著書「Webアプリケーションアクセシビリティ」出版 ● 他社のアクセシビリティ改善の⽀援や、アクセシビリティチェックのためのツール開発などもしています

Slide 3

Slide 3 text

あなたの作っているものは…… ● ⾼齢者でも使えますか？ ● 外国ルーツの⼈でも使えますか？ ● 障害者でも使えますか？

Slide 4

Slide 4 text

⾼齢者が困りそうなこと ● ⼩さい⽂字や密集した⽂字が⾒えづらく、読むのが難しい ● 淡い⾊合いを識別することが難しい ● ⼀度にたくさんのことを憶えることが難しい ● マウスポインタや画⾯のタッチを、精緻に⾏うことが難しい ⚠これらはあくまで例で、すべての⾼齢者にあてはまるものではない

Slide 5

Slide 5 text

外国ルーツの⼈が困りそうなこと ● 意味や読み⽅を知らない漢字や、難しい⽇本語の表現がよくわからない ● ⽇本の⽂化や⾵習をよく知らなくて、書かれている⾔葉の意味がわからない ● ミドルネームや⽂字数制限により、⾃分や家族の名前を⼊⼒できない ⚠これらはあくまで例で、すべての外国ルーツの⼈にあてはまるものではない

Slide 6

Slide 6 text

障害者が困りそうなこと ● ⼿や腕を動かすのに障害があり、マウスポインタのジェスチャーが難しい ● 聴覚に障害があり、動画の⾳声が何を⾔っているのかわからない ● 視覚に障害があり、読み上げ機能で上⼿く読めない画⾯は操作できない ● 障害のため操作に時間がかかり、時間制限をオーバーしてしまう ⚠これらはあくまで例で、すべての障害者にあてはまるものではない

Slide 7

Slide 7 text

「いまはそういうユーザー、いないから……」 ● 本当にいない？ ● そのユーザーにとって使えない状態なせいで、使ってもらえてないのでは？ ● これからもそういうユーザーはいないまま？ ○ 会社が、⾼齢者や障害者や外国ルーツの⼈を雇うかもしれない ○ たまたま、⾼齢者や障害者や外国ルーツの⼈が使い始めるかもしれない ○ いまのユーザーが、病気や怪我で障害者になるかもしれない ○ 10年後、30年後、50年後には、いまのユーザーは⾼齢者になっている

Slide 8

Slide 8 text

「アクセシビリティ」とは

Slide 9

Slide 9 text

製品やサービスを使うことができる利⽤状況の幅広さ

Slide 10

Slide 10 text

アクセシビリティについてのよくある誤解 ● ❌ 視覚障害者のためのもの ● ❌ ⾳声読み上げのこと ● ❌ 障害者や⾼齢者のためのもの ● ❌ 障害者や⾼齢者にしかメリットがないもの ● ❌ Webの話だから私の仕事（アプリ、業務システム、ゲーム、etc）には関係のないもの

Slide 11

Slide 11 text

アクセシビリティとは ● ⭕ ⼼⾝の障害、ユーザーの置かれている環境、状態、使⽤するデバイスなど、使⽤できる状況の広さ‧多様さ ● ⭕ 障害者や⾼齢者だけでなく、あらゆるユーザーが対象となるもの ● ⭕ 製品‧サービスの種類‧ソフトウェア‧ハードウェアを問わない

Slide 12

Slide 12 text

ユーザビリティとアクセシビリティユーザビリティ（usability）特定のユーザが特定の利⽤状況において，システム，製品⼜はサービスを利⽤する際に，効果，効率及び満⾜を伴って特定の⽬標を達成する度合い。（JIS Z 8521:2020）アクセシビリティ（accessibility）様々な能⼒をもつ最も幅広い層の⼈々に対する製品，サービス，環境⼜は施設（のインタラクティブシステム）のユーザビリティ。（JIS X 8341-1:2010）ユーザビリティは誰かにとっての使いやすさ、アクセシビリティは使える⼈の幅広さ

Slide 13

Slide 13 text

間嶋沙知『⾒えにくい、読みにくい「困った！」を解決するデザイン』（マイナビ出版）より引⽤

Slide 14

Slide 14 text

いろいろなアクセシビリティ ● PCでもスマートフォンでも、最適なレイアウトで快適に利⽤できる ● ⽂字がくっきりとした⾊使いで書かれていて、⽼眼でも読みやすい ● マウスでもキーボードでもタッチパネルでも操作できる ● 動画に字幕がついていて、聴覚障害者でも内容が理解できる ● ナビゲーションに使われる⾔葉に⼀貫性があり、迷⼦になりにくい ● スクリーンリーダー（⾳声読み上げ機能）でも難なく利⽤できる

Slide 15

Slide 15 text

なぜアクセシビリティに取り組むのか

Slide 16

Slide 16 text

障害の社会モデル ● 障害の医学モデル: 医学的な観点から「障害者」を定義 ○ あなたの⾝体や⼼がこういう状態なので、あなたは障害者です ○ 「障害」は個⼈の側に存在する ● 障害の社会モデル: 社会が不便なせいで、その⼈は「障害者」になっている ○ 社会の側が、あなたの⾝体や⼼の状態に対応できていません ○ 「障害」は社会の側に存在する

Slide 17

Slide 17 text

私たちは、社会に影響を与えられる ● 私たちは社会の⼀員で、しかも「作る」ことで社会に影響を与えられる ● 便利なものを作ることで、社会モデル的な障害者を減らすことができる ○ ⼿間を減らせた、できることが増えた、紙の読み書きがなくなった、家でできるようになった、⾃分⼀⼈でできるようになった ● 誰かが「使えない」ものを作ると、社会モデル的な障害者を増やしてしまう ○ 障害者が、⾼齢者が、外国ルーツの⼈が不便なく使えるのなら、それを使う⽂脈においては彼らを特別扱いする必要はない

Slide 18

Slide 18 text

󰳕 （なるほど、⼤切なことなんだ）

Slide 19

Slide 19 text

󰳕 「アクセシビリティ、やってみたいです！」

Slide 20

Slide 20 text

󰠀 「それって儲かるんですか？」「そんなことより新機能作ってよ」 󰞴

Slide 21

Slide 21 text

アクセシビリティ、がんばるべきか

Slide 22

Slide 22 text

⽇本の障害者の数 ● 厚⽣労働省の調査によると、障害者の総数は1164.6万⼈、⼈⼝の約9.3％⾝体障害者⼿帳所持者4,159千⼈、療育⼿帳所持者1,140千⼈、精神障害者保健福祉⼿帳1,203千⼈視覚障害273千⼈、聴覚‧⾔語障害379千⼈、肢体不⾃由1,581千⼈、内部障害1,365千⼈、障害種別不詳562千⼈（令和４年⽣活のしづらさなどに関する調査） ● 総務省の調査で「インターネット利⽤に際して困ること」として「障がいに配慮したホームページが少ない」を挙げたのは、視覚障がい 44.7%、聴覚障がい 20.1%、肢体不⾃由10.8%、知的障がい3.6% （障がいのある⽅々のインターネット等の利⽤に関する調査研究 2012年） ● 単純計算で40万⼈くらい困っていそう（多い？少ない？）

Slide 23

Slide 23 text

ジョブメドレーの事例（このプロジェクトにメンターとして参加しました） ● 医療介護従事者向け求⼈メディア「ジョブメドレー」で、視覚障害者を意識したリニューアルを実施 ● あん摩マッサージ指圧師や鍼灸師という視覚障害者の多い職種を扱っている ● 介護職には外国⼈の⼊職も増えている「誰でも使える」ように、アクセシビリティ向上に向けて取り組んだこと https://note.com/medley/n/ncf100214f838

Slide 24

Slide 24 text

⽇本の社会の⾼齢化‧労働⼒⼈⼝の⾼齢化 ● ⽇本の65歳以上の⼈⼝ 3,623万⼈（29.1%）⼈⼝は減少し⾼齢化が進⾏ ● 労働⼒⼈⼝は30年ほどほぼ横ばい。65歳以上は13.4%で増加傾向（令和６年版⾼齢社会⽩書）労働⼒⼈⼝の推移（令和6年版⾼齢社会⽩書）⾼齢化の推移と将来推計（令和6年版⾼齢社会⽩書）

Slide 25

Slide 25 text

⽇本にいる外国⼈の増加 ● ⽇本の在留外国⼈の数は過去最⾼を更新しつづけている（在留外国⼈: 3ヶ⽉以上⽇本に滞在する外国⼈） ● さらに観光などの短期滞在も⾮常に多い在留外国⼈の⼈数の推移（出⼊国在留管理庁「令和６年末現在における在留外国⼈数について」）

Slide 26

Slide 26 text

「やらなかったらどうなるの」 󰞴

Slide 27

Slide 27 text

アクセシビリティの法的位置付け ● ⽇本では、障害者差別解消法の改正で、合理的配慮の提供が義務化（2024） ○ 過重な負担にならない範囲で、障害者の求めに応じて対応を⾏う ○ アクセシビリティは「環境の整備」として努⼒義務に位置付け ● 海外では⺠間に対しても法的な義務付けをしている場合がある ○ ⽶国: リハビリテーション法508条、障害を持つアメリカ⼈法など ○ 欧州: 欧州アクセシビリティ指令 ● ⽇本は法的な義務付けがなく、公共機関のWebサイトでも実践できていない ○ 総務省の求める基準を達成できていないWebサイトが約半数

Slide 28

Slide 28 text

󰠀 「ユーザーも少ないし、法的な義務もないなら、今はやらなくていいですよね」

Slide 29

Slide 29 text

󰳕 （もやもや……）

Slide 30

Slide 30 text

がんばらないでアクセシビリティに取り組む

Slide 31

Slide 31 text

アクセシビリティは、特別なことではない ● ⾊やフォントやレイアウトを⼯夫して、⾒やすい画⾯にする ○ 弱視や⽼眼の⼈が使えるようになる ○ そうでない⼈にとっても、⾒やすいほうがいい ● キーボードだけで操作できるようにする ○ ⼿や腕の障害でマウスが使えない⼈、⾳声読み上げで操作する⼈も使える ○ ⼿をホームポジションから動かしたくない⼈にとっても助かる ● 動画に字幕をつける ○ 聴覚に障害のある⼈も、⽇本語が得意でない⼈も、動画の内容がわかる ○ ⾳量を上げなくても内容がわかる、早送りで内容を把握できる

Slide 32

Slide 32 text

丁寧に作る ● Webやモバイルアプリのアクセシビリティで、まず求められるのは、 “丁寧な” 設計（デザイン）や実装（コーディング）を徹底すること ○ ⾒やすい画⾯、理解しやすいUI、わかりやすい⾔葉 ○ 標準にのっとった実装、⼀貫した挙動 ● それぞれはさほど難しくなく、意識している⼈も多いものだが、「やらなければいけないこと」として⾔語化されず、徹底されていない ● 後回しにして「アクセシビリティ対応」として切り出すと、「丁寧な作り直し」になってしまい、莫⼤な⼯数がかかる

Slide 33

Slide 33 text

がんばらないでアクセシビリティを⾼くするポイント ● 知識を⾝につける ● 丁寧に設計する ● 標準にのっとった実装にする ● 機械の⼒に頼る

Slide 34

Slide 34 text

知識を⾝につける

Slide 35

Slide 35 text

どんな⼈がどんなことで困るのかを知る「⾒えにくい、読みにくい、『困った！』を解決するデザイン」⾒えにくい、読みにくい「困った！」を解決するデザイン（間嶋沙知著‧マイナビ出版） https://komatta-design.studio.site/

Slide 36

Slide 36 text

障害者がどうやってPCやスマホを使っているのか知る「Webアプリケーションアクセシビリティ」付録「⽀援技術と利⽤状況」 Webアプリケーションアクセシビリティ――今⽇から始める現場からの改善（伊原⼒也，⼩林⼤輔，桝⽥草⼀，⼭本伶著‧技術評論社） https://webapp-a11y.com/

Slide 37

Slide 37 text

Webアクセシビリティの基本を知るデジタル庁「ウェブアクセシビリティ導⼊ガイドブック」ウェブアクセシビリティ導⼊ガイドブック（デジタル庁） https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook

Slide 38

Slide 38 text

様々な実践的テクニックを知る「Webアプリケーションアクセシビリティ」「モバイルアプリアクセシビリティ⼊⾨」 Webアプリケーションアクセシビリティ――今⽇から始める現場からの改善（伊原⼒也，⼩林⼤輔，桝⽥草⼀，⼭本伶著‧技術評論社）モバイルアプリアクセシビリティ⼊⾨ ──iOS＋Androidのデザインと実装（阿部諒，伊原⼒也，本⽥雅⼈，めろん著‧技術評論社）

Slide 39

Slide 39 text

がんばらないポイント: いきなり全部やろうとしない ● 「Webアプリケーションアクセシビリティ」は分厚いことで有名 ○ それでも載せきれなかったことが沢⼭ある ○ 読むだけでも⼤変、実践するのはさらに⼤変 ● ⼊⾨おすすめルート ○ 「困った！」と「導⼊ガイドブック」をみんなで読む ○ 「Webアプリケーション」7章から読む（無料で読めます！） ○ 気になる章から読む（読む順番のガイドがあります！） ○ 机の上に積んでおいて、必要そうなときに開いてみる

Slide 40

Slide 40 text

丁寧に設計する

Slide 41

Slide 41 text

わかりやすい⾔葉を使う ● ⽤語や表記のルールを決めて、あらゆる場所で徹底する ○ ⽤語の混乱（例: 「新規作成」と「作成」と「新規」と「追加」） ○ 漢字のひらく‧閉じる（例: 「ください」と「下さい」） ○ 送りがな（例: 「⾏なう」と「⾏う」） ● ⽂章を簡潔に、わかりやすく ○ 専⾨⽤語を避け、ユーザーの知っていそうな⾔葉を使う ○ ⼀⽂⼀⽂を短くする、⼆重否定を避ける、など

Slide 42

Slide 42 text

快適なユーザーフローを実現する ● 初めて使う⼈が、彼らのゴールを迷わず達成できるようにできているか？ ○ ⽬的のものを発⾒できるようになっているか？ ○ 使っているうちに迷⼦にならないか？ ○ エラーの修正⽅法が理解できるようになっているか？ ● ある程度使い慣れた⼈が、効率よく操作できるようになっているか？ ○ 毎回同じことを繰り返させられていないか？ ○ ユーザーの好みが分かれそうな設定を変更できるようにしているか？

Slide 43

Slide 43 text

がんばらないポイント: ⾃分たちが使いやすいようにする ● ⾃分たち⾃⾝がユーザーとなるときに、使いづらいと感じるところから直す ○ ⼩さい⽂字、淡い⾊合い、押しづらいボタン、わかりにくい⾔葉…… ○ 同僚、家族、友⼈、実際のユーザーの声なども参考にする ● いつもと違う状況で、画⾯を⾒たり使ってみたりしてみる ○ 画⾯から離れてみたり、⽩黒にしてみたり、別の端末を使ってみたり ● ガイドラインや本を参考にする ○ 「なんか使いづらいな」が、アクセシビリティの知識で説明できるかも

Slide 44

Slide 44 text

標準にのっとって実装する

Slide 45

Slide 45 text

HTMLを適切に使えば、アクセシビリティは⾼くなる ● HTMLの要素は、デフォルトでキーボード操作ができる ○ Tabキーでフォーカスを移動し、Enterキーでボタンやリンクを押下、上下⽮印キーでラジオボタンやセレクトボックスの変更など ● ⾒出し（h1〜h6要素）、ランドマーク（main, header, nav要素など）で、スクリーンリーダーの使⽤者が素早く⽬的のものを⾒つけられる ● ページ内の情報の意味（セマンティクス）が機械によって認識できるので、 Webページの閲覧‧操作をサポートする道具が作りやすい ○ マシンリーダブル（機械可読性）

Slide 46

Slide 46 text

アクセシビリティを上げられるHTMLの書き⽅の例 ● ページ内の区切りごとに

〜

要素で⾒出しを配置 ○ ⾒出しだけを読んでページの概要を把握できるようにしておく ● ⼊⼒欄の要素（）には、 <label> 要素を使う ○ 何を⼊⼒する欄なのかを、スクリーンリーダーが認識できるように ○ ラジオボタンやチェックボックスがクリックしやすくなる効果も ● 画像（<img>要素）には、必ずalt属性をつける ○ altデシジョンツリーを参考にちゃんとしたHTMLの書き⽅を学ぶには「武器になるHTML」（柴⽥宏仙著‧技術評論社）がオススメ

Slide 47

Slide 47 text

標準に従うのは、UIライブラリやネイティブアプリも同じ ● UIライブラリには、アクセシビリティについての考慮のあるものが多い ○ 公式ドキュメントにAccessibilityという項⽬があればよく読む ○ 可能であればライブラリ⾃⾝のコードを確認しながら選ぶ‧使う ● iOSやAndroidも、アクセシビリティ機能が豊富 ○ Webよりも洗練された形で機能が提供されている ○ 標準のコンポーネントに寄せるだけでも改善するモバイルアプリアクセシビリティ⼊⾨ ──iOS＋Androidのデザインと実装（阿部諒，伊原⼒也，本⽥雅⼈，めろん著‧技術評論社）

Slide 48

Slide 48 text

がんばらないポイント: ⾃⼒でがんばらない ● HTMLもモバイルアプリも、アクセシビリティの⾼い部品が揃っている ○ 標準のやり⽅から外れていくほどアクセシビリティが下がる ● 無駄に凝ったことをしない、普通のやり⽅に寄せる ○ 実装だけでなく、デザインの段階から、標準の実装のされ⽅を意識する ○ （もし凝りたいときは、がんばるしかない） ● 公式のドキュメントに、アクセシビリティへの⾔及があれば読んでおく ○ アクセシビリティを損いやすい注意点などが書かれていることも多い

Slide 49

Slide 49 text

機械の⼒に頼る

Slide 50

Slide 50 text

アクセシビリティチェックは⾃動化する ● ガイドラインに沿ったチェックをするのにも、それなりの知識が必要 ● ⾃動チェックツールで発⾒できる問題は2〜3割程度といわれているが、そういった問題を改善するだけでもかなり「マシ」な状態になる ○ 経験則では、あまりアクセシビリティを意識せずに作られたものにある問題の7割くらいは、⾃動チェックツールで発⾒できる

Slide 51

Slide 51 text

axe-coreを利⽤する ● axe-coreはアクセシビリティチェックによく使われているライブラリ ● Lighthouseのスコアリングもaxe-core ● ブラウザでは、axe DevTools拡張機能が便利 ● Playwright等と組み合わせて、CI/CDで他のテストと同時にチェックすることもできる Qiitaの記事ページは32個の問題があった⾒出しの先頭の空のリンクは、視覚障害者がかなり不便と⾔ってました

Slide 52

Slide 52 text

Accessibility Visualizer ● axe-coreだけでは、テキストの内容などまで踏み込んだチェックができない ● Accessibility Visualizer というブラウザ拡張機能を開発して、その問題を改善しようとしている ● ⽀援技術にどんな情報が伝わるかを視覚化することができる ● 問題のあるマークアップには警告する画像は「駒瑠市〜アクセシビリティ上の問題の体験サイト〜」上で Accessibility Visualizerを使⽤したもの https://a11yc.com/city-komaru/

Slide 53

Slide 53 text

がんばらないポイント: 仕組みに取り込む ● 開発に関わる全員が関係するような仕組みに、アクセシビリティを取り込まなければ、直すよりも速いスピードで問題が増えていく ● 開発に関わるメンバーでアクセシビリティについて共通認識をつくり、そのための仕組みとして、ツールによるチェックを取り込む ○ CI に組み込み、問題を解消しないと Pull Request をマージできなくする ○ コードレビュー時に確認するべき項⽬としておく

Slide 54

Slide 54 text

がんばるべきポイント

Slide 55

Slide 55 text

当事者に向き合う ● 当事者がいないところでの改善は、なかなか当事者のためのものにならない ○ ここまでの「がんばらない」は、当事者がいない状況でできるもの ○ Nothing about us without us（私たち抜きで私たちのことを決めないで） ● 本当に困っている⼈の問題に向き合うことこそ、がんばるポイント ○ 困っている状態を解消できれば、ユーザーの幅を広げられるチャンス ○ ユーザーの声を集めたり、困りそうな属性の⼈に会いにいく ○ ここからが本当のアクセシビリティへの取り組みのはじまり

Slide 56

Slide 56 text

当事者のための窓⼝をつくる ● freeeでは、社内に合理的配慮委員会をつくり、当事者からの問い合わせに応える窓⼝にした ● 使いづらさを感じる⼈に対して、その問題に向き合う姿勢を伝えたい freee、「合理的配慮の対応⽅針」公開のお知らせ障害のあるお客様等が「合理的配慮」について相談できる専⽤のお問い合わせ窓⼝を設置 https://corp.freee.co.jp/news/20240625_gouritekihairyo.html

Slide 57

Slide 57 text

おわりに ● 「誰でも使える」を本当に達成しようとするのは、本来は難しいこと ○ まずは⾃分⾃⾝、そして周囲の⼈が「使える」「使いやすい」と思えるようにしていくところから取り組んでいきましょう ● WebやモバイルOSには、アクセシビリティを⾼めるための⼟台がある ○ それらを上⼿く使えば、がんばらなくてもある程度の⽔準になる ● 本当にがんばるべきなのは、困っている当事者に向き合うこと ● 「使いづらい」「使えない」を「使える」「使いやすい」にしていくための考え⽅や道のりについて、理解していただけたなら幸いです

Slide 58

Slide 58 text

楽天ブックスのキャンペーンのお知らせ「Webアプリケーションアクセシビリティ」「モバイルアプリアクセシビリティ⼊⾨」のアクリルキーホルダーまたはアクリルスタンドと、サイン本のセットが楽天ブックスで販売中です「Webを⽀える技術」「オブジェクト指向UIデザイン」「縁の下のUIデザイン」でも、キャンペーン実施中です

Slide 59

Slide 59 text

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