がんばらないアクセシビリティ / Accessibility Without the Struggle

Qiita Conference 2025での登壇資料です。

Google Slides版はこちら

以下は資料内に登場するリンクです

おすすめの書籍・資料
見えにくい、読みにくい「困った！」を解決するデザイン
ウェブアクセシビリティ導入ガイドブック
Webアプリケーションアクセシビリティ――今日から始める現場からの改善（7章の連載:
アクセシビリティを組織で向上させる-──たった一人から始めて-社内に認知されるまで）
モバイルアプリアクセシビリティ入門⁠─iOS＋Androidのデザインと実装
altディシジョンツリー
武器になるHTML

ツール
axe-core
Accessibility Visualizer

Web記事
「誰でも使える」ように、アクセシビリティ向上に向けて取り組んだこと
「Webアプリケーションアクセシビリティ」どこから読む？
freee、「合理的配慮の対応方針」公開のお知らせ　障害のあるお客様等が「合理的配慮」について相談できる専用のお問い合わせ窓口を設置

楽天ブックス キャンペーン
Webアプリケーションアクセシビリティ（アクリルスタンド・サイン本）
Webアプリケーションアクセシビリティ（アクリルキーホルダー・サイン本）
モバイルアプリアクセシビリティ入門（アクリルスタンド・サイン本）
モバイルアプリアクセシビリティ入門（アクリルキーホルダー・サイン本）
Webを支える技術（アクリルスタンド・サイン本）
Webを支える技術（アクリルキーホルダー・サイン本）
オブジェクト指向UIデザイン（アクリルスタンド・サイン本）
オブジェクト指向UIデザイン（アクリルキーホルダー・サイン本）
縁の下のUIデザイン（アクリルスタンド・サイン本）
縁の下のUIデザイン（アクリルキーホルダー・サイン本）

調査資料等
令和４年 生活のしづらさなどに関する調査
障がいのある方々のインターネット等の利用に関する調査研究
令和６年版高齢社会白書
令和６年末現在における在留外国人数について

Transcript

1. がんばらないアクセシビリティ より幅広く価値を届けるために @ymrl Qiita Conference 2025 2025年4⽉23⽇
2. ⾃⼰紹介 • ymrl （やまある‧⼭本伶） ◦ フリー株式会社 UIデザイナー/フロントエンドエンジニア • 2017年ごろからfreee社内のアクセシビリティの活動を始める ◦ 2019年、社内デザインシステムの構築のためにデザイナーに転⾝ • 2023年、共著書「Webアプリケーションアクセシビリティ」出版 • 他社のアクセシビリティ改善の⽀援や、 アクセシビリティチェックのためのツール開発などもしています
3. あなたの作っているものは…… • ⾼齢者でも使えますか？ • 外国ルーツの⼈でも使えますか？ • 障害者でも使えますか？
4. ⾼齢者が困りそうなこと • ⼩さい⽂字や密集した⽂字が⾒えづらく、読むのが難しい • 淡い⾊合いを識別することが難しい • ⼀度にたくさんのことを憶えることが難しい • マウスポインタや画⾯のタッチを、精緻に⾏うことが難しい ⚠これらはあくまで例で、すべての⾼齢者にあてはまるものではない
5. 外国ルーツの⼈が困りそうなこと • 意味や読み⽅を知らない漢字や、難しい⽇本語の表現がよくわからない • ⽇本の⽂化や⾵習をよく知らなくて、書かれている⾔葉の意味がわからない • ミドルネームや⽂字数制限により、⾃分や家族の名前を⼊⼒できない ⚠これらはあくまで例で、すべての外国ルーツの⼈にあてはまるものではない
6. 障害者が困りそうなこと • ⼿や腕を動かすのに障害があり、マウスポインタのジェスチャーが難しい • 聴覚に障害があり、動画の⾳声が何を⾔っているのかわからない • 視覚に障害があり、読み上げ機能で上⼿く読めない画⾯は操作できない • 障害のため操作に時間がかかり、時間制限をオーバーしてしまう ⚠これらはあくまで例で、すべての障害者にあてはまるものではない
7. 「いまはそういうユーザー、いないから……」 • 本当にいない？ • そのユーザーにとって使えない状態なせいで、使ってもらえてないのでは？ • これからもそういうユーザーはいないまま？ ◦ 会社が、⾼齢者や障害者や外国ルーツの⼈を雇うかもしれない ◦ たまたま、⾼齢者や障害者や外国ルーツの⼈が使い始めるかもしれない ◦ いまのユーザーが、病気や怪我で障害者になるかもしれない ◦ 10年後、30年後、50年後には、いまのユーザーは⾼齢者になっている
8. 「アクセシビリティ」とは
9. 製品やサービスを 使うことができる 利⽤状況の幅広さ
10. アクセシビリティについてのよくある誤解 • ❌ 視覚障害者のためのもの • ❌ ⾳声読み上げのこと • ❌ 障害者や⾼齢者のためのもの • ❌ 障害者や⾼齢者にしかメリットがないもの • ❌ Webの話だから私の仕事（アプリ、業務システム、ゲーム、etc）には関 係のないもの
11. アクセシビリティとは • ⭕ ⼼⾝の障害、ユーザーの置かれている環境、状態、   使⽤するデバイスなど、使⽤できる状況の広さ‧多様さ • ⭕ 障害者や⾼齢者だけでなく、あらゆるユーザーが対象となるもの • ⭕ 製品‧サービスの種類‧ソフトウェア‧ハードウェアを問わない
12. ユーザビリティとアクセシビリティ ユーザビリティ（usability） 特定のユーザが特定の利⽤状況において，システム，製品⼜はサービスを利⽤する際に， 効果，効率及び満⾜を伴って特定の⽬標を達成する度合い。（JIS Z 8521:2020） アクセシビリティ（accessibility） 様々な能⼒をもつ最も幅広い層の⼈々に対する製品，サービス，環境⼜は施設 （のインタラクティブシステム）のユーザビリティ。（JIS X 8341-1:2010） ユーザビリティは誰かにとっての使いやすさ、アクセシビリティは使える⼈の幅広さ
13. 間嶋 沙知『⾒えにくい、読みにくい「困った！」を解決するデザイン』（マイナビ出版）より引⽤
14. いろいろなアクセシビリティ • PCでもスマートフォンでも、最適なレイアウトで快適に利⽤できる • ⽂字がくっきりとした⾊使いで書かれていて、⽼眼でも読みやすい • マウスでもキーボードでもタッチパネルでも操作できる • 動画に字幕がついていて、聴覚障害者でも内容が理解できる • ナビゲーションに使われる⾔葉に⼀貫性があり、迷⼦になりにくい • スクリーンリーダー（⾳声読み上げ機能）でも難なく利⽤できる
15. なぜアクセシビリティに取り組むのか
16. 障害の社会モデル • 障害の医学モデル: 医学的な観点から「障害者」を定義 ◦ あなたの⾝体や⼼がこういう状態なので、あなたは障害者です ◦ 「障害」は個⼈の側に存在する • 障害の社会モデル: 社会が不便なせいで、その⼈は「障害者」になっている ◦ 社会の側が、あなたの⾝体や⼼の状態に対応できていません ◦ 「障害」は社会の側に存在する
17. 私たちは、社会に影響を与えられる • 私たちは社会の⼀員で、しかも「作る」ことで社会に影響を与えられる • 便利なものを作ることで、社会モデル的な障害者を減らすことができる ◦ ⼿間を減らせた、できることが増えた、紙の読み書きがなくなった、 家でできるようになった、⾃分⼀⼈でできるようになった • 誰かが「使えない」ものを作ると、社会モデル的な障害者を増やしてしまう ◦ 障害者が、⾼齢者が、外国ルーツの⼈が不便なく使えるのなら、 それを使う⽂脈においては彼らを特別扱いする必要はない
18. 󰳕 （なるほど、⼤切なことなんだ）
19. 󰳕 「アクセシビリティ、やってみたいです！」
20. 󰠀 「それって儲かるんですか？」 「そんなことより新機能作ってよ」 󰞴
21. アクセシビリティ、がんばるべきか
22. ⽇本の障害者の数 • 厚⽣労働省の調査によると、障害者の総数は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万⼈くらい困っていそう（多い？少ない？）
23. ジョブメドレーの事例 （このプロジェクトにメンターとして参加しました） • 医療介護従事者向け求⼈メディア 「ジョブメドレー」で、視覚障害者を意識し たリニューアルを実施 • あん摩マッサージ指圧師や鍼灸師という 視覚障害者の多い職種を扱っている • 介護職には外国⼈の⼊職も増えている 「誰でも使える」ように、アクセシビリティ向上に向けて取り組んだこと https://note.com/medley/n/ncf100214f838
24. ⽇本の社会の⾼齢化‧労働⼒⼈⼝の⾼齢化 • ⽇本の65歳以上の⼈⼝ 3,623万⼈（29.1%）⼈⼝は減少し⾼齢化が進⾏ • 労働⼒⼈⼝は30年ほどほぼ横ばい。65歳以上は13.4%で増加傾向 （令和６年版⾼齢社会⽩書） 労働⼒⼈⼝の推移（令和6年版⾼齢社会⽩書） ⾼齢化の推移と将来推計（令和6年版⾼齢社会⽩書）
25. ⽇本にいる外国⼈の増加 • ⽇本の在留外国⼈の数は過去最⾼を更新しつづけている （在留外国⼈: 3ヶ⽉以上⽇本に滞在する外国⼈） • さらに観光などの短期滞在も⾮常に多い 在留外国⼈の⼈数の推移（出⼊国在留管理庁「令和６年末現在における在留外国⼈数について」）
26. 「やらなかったらどうなるの」 󰞴
27. アクセシビリティの法的位置付け • ⽇本では、障害者差別解消法の改正で、合理的配慮の提供が義務化（2024） ◦ 過重な負担にならない範囲で、障害者の求めに応じて対応を⾏う ◦ アクセシビリティは「環境の整備」として努⼒義務に位置付け • 海外では⺠間に対しても法的な義務付けをしている場合がある ◦ ⽶国: リハビリテーション法508条、障害を持つアメリカ⼈法など ◦ 欧州: 欧州アクセシビリティ指令 • ⽇本は法的な義務付けがなく、公共機関のWebサイトでも実践できていない ◦ 総務省の求める基準を達成できていないWebサイトが約半数
28. 󰠀 「ユーザーも少ないし、法的な義務もないな ら、 今はやらなくていいですよね」
29. 󰳕 （もやもや……）
30. がんばらないで アクセシビリティに取り組む
31. アクセシビリティは、特別なことではない • ⾊やフォントやレイアウトを⼯夫して、⾒やすい画⾯にする ◦ 弱視や⽼眼の⼈が使えるようになる ◦ そうでない⼈にとっても、⾒やすいほうがいい • キーボードだけで操作できるようにする ◦ ⼿や腕の障害でマウスが使えない⼈、⾳声読み上げで操作する⼈も使える ◦ ⼿をホームポジションから動かしたくない⼈にとっても助かる • 動画に字幕をつける ◦ 聴覚に障害のある⼈も、⽇本語が得意でない⼈も、動画の内容がわかる ◦ ⾳量を上げなくても内容がわかる、早送りで内容を把握できる
32. 丁寧に作る • Webやモバイルアプリのアクセシビリティで、まず求められるのは、 “丁寧な” 設計（デザイン）や実装（コーディング）を徹底すること ◦ ⾒やすい画⾯、理解しやすいUI、わかりやすい⾔葉 ◦ 標準にのっとった実装、⼀貫した挙動 • それぞれはさほど難しくなく、意識している⼈も多いものだが、 「やらなければいけないこと」として⾔語化されず、徹底されていない • 後回しにして「アクセシビリティ対応」として切り出すと、 「丁寧な作り直し」になってしまい、莫⼤な⼯数がかかる
33. がんばらないでアクセシビリティを⾼くするポイント • 知識を⾝につける • 丁寧に設計する • 標準にのっとった実装にする • 機械の⼒に頼る
34. 知識を⾝につける
35. どんな⼈がどんなことで困るのかを知る 「⾒えにくい、読みにくい、『困った！』を解決するデザイン」 ⾒えにくい、読みにくい「困った！」を解決するデザイン（間嶋沙知 著‧マイナビ出版） https://komatta-design.studio.site/
36. 障害者がどうやってPCやスマホを使っているのか知る 「Webアプリケーションアクセシビリティ」付録 「⽀援技術と利⽤状況」 Webアプリケーションアクセシビリティ――今⽇から始める現場からの改善 （伊原⼒也，⼩林⼤輔，桝⽥草⼀，⼭本伶 著‧技術評論社） https://webapp-a11y.com/
37. Webアクセシビリティの基本を知る デジタル庁「ウェブアクセシビリティ導⼊ガイドブック」 ウェブアクセシビリティ導⼊ガイドブック（デジタル庁） https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
38. 様々な実践的テクニックを知る 「Webアプリケーションアクセシビリティ」 「モバイルアプリアクセシビリティ⼊⾨」 Webアプリケーションアクセシビリティ――今⽇から始める現場からの改善（伊原⼒也，⼩林⼤輔，桝⽥草⼀，⼭本伶 著‧技術評論社） モバイルアプリアクセシビリティ⼊⾨ ──iOS＋Androidのデザインと実装（阿部諒，伊原⼒也，本⽥雅⼈，めろん 著‧技術評論社）
39. がんばらないポイント: いきなり全部やろうとしない • 「Webアプリケーションアクセシビリティ」は分厚いことで有名 ◦ それでも載せきれなかったことが沢⼭ある ◦ 読むだけでも⼤変、実践するのはさらに⼤変 • ⼊⾨おすすめルート ◦ 「困った！」と「導⼊ガイドブック」をみんなで読む ◦ 「Webアプリケーション」7章から読む（無料で読めます！） ◦ 気になる章から読む（読む順番のガイドがあります！） ◦ 机の上に積んでおいて、必要そうなときに開いてみる
40. 丁寧に設計する
41. わかりやすい⾔葉を使う • ⽤語や表記のルールを決めて、あらゆる場所で徹底する ◦ ⽤語の混乱（例: 「新規作成」と「作成」と「新規」と「追加」） ◦ 漢字のひらく‧閉じる（例: 「ください」と「下さい」） ◦ 送りがな（例: 「⾏なう」と「⾏う」） • ⽂章を簡潔に、わかりやすく ◦ 専⾨⽤語を避け、ユーザーの知っていそうな⾔葉を使う ◦ ⼀⽂⼀⽂を短くする、⼆重否定を避ける、など
42. 快適なユーザーフローを実現する • 初めて使う⼈が、彼らのゴールを迷わず達成できるようにできているか？ ◦ ⽬的のものを発⾒できるようになっているか？ ◦ 使っているうちに迷⼦にならないか？ ◦ エラーの修正⽅法が理解できるようになっているか？ • ある程度使い慣れた⼈が、効率よく操作できるようになっているか？ ◦ 毎回同じことを繰り返させられていないか？ ◦ ユーザーの好みが分かれそうな設定を変更できるようにしているか？
43. がんばらないポイント: ⾃分たちが使いやすいようにする • ⾃分たち⾃⾝がユーザーとなるときに、使いづらいと感じるところから直す ◦ ⼩さい⽂字、淡い⾊合い、押しづらいボタン、わかりにくい⾔葉…… ◦ 同僚、家族、友⼈、実際のユーザーの声なども参考にする • いつもと違う状況で、画⾯を⾒たり使ってみたりしてみる ◦ 画⾯から離れてみたり、⽩黒にしてみたり、別の端末を使ってみたり • ガイドラインや本を参考にする ◦ 「なんか使いづらいな」が、アクセシビリティの知識で説明できるかも
44. 標準にのっとって実装する
45. HTMLを適切に使えば、アクセシビリティは⾼くなる • HTMLの要素は、デフォルトでキーボード操作ができる ◦ Tabキーでフォーカスを移動し、Enterキーでボタンやリンクを押下、上 下⽮印キーでラジオボタンやセレクトボックスの変更など • ⾒出し（h1〜h6要素）、ランドマーク（main, header, nav要素など）で、 スクリーンリーダーの使⽤者が素早く⽬的のものを⾒つけられる • ページ内の情報の意味（セマンティクス）が機械によって認識できるので、 Webページの閲覧‧操作をサポートする道具が作りやすい ◦ マシンリーダブル（機械可読性）
46. アクセシビリティを上げられるHTMLの書き⽅の例 • ページ内の区切りごとに<h1>〜<h6> 要素で⾒出しを配置 ◦ ⾒出しだけを読んでページの概要を把握できるようにしておく • ⼊⼒欄の要素（<input> <select> <textarea>）には、 <label> 要素を使う ◦ 何を⼊⼒する欄なのかを、スクリーンリーダーが認識できるように ◦ ラジオボタンやチェックボックスがクリックしやすくなる効果も • 画像（<img>要素）には、必ずalt属性をつける ◦ altデシジョンツリーを参考に ちゃんとしたHTMLの書き⽅を学ぶには 「武器になるHTML」（柴⽥宏仙 著‧技術評論社）がオススメ
47. 標準に従うのは、UIライブラリやネイティブアプリも同じ • UIライブラリには、アクセシビリティについての考慮のあるものが多い ◦ 公式ドキュメントにAccessibilityという項⽬があればよく読む ◦ 可能であればライブラリ⾃⾝のコードを確認しながら選ぶ‧使う • iOSやAndroidも、アクセシビリティ機能が豊富 ◦ Webよりも洗練された形で機能が提供されている ◦ 標準のコンポーネントに寄せるだけでも改善する モバイルアプリアクセシビリティ⼊⾨ ──iOS＋Androidのデザインと実装（阿部諒，伊原⼒也，本⽥雅⼈，めろん 著‧技術評論社）
48. がんばらないポイント: ⾃⼒でがんばらない • HTMLもモバイルアプリも、アクセシビリティの⾼い部品が揃っている ◦ 標準のやり⽅から外れていくほどアクセシビリティが下がる • 無駄に凝ったことをしない、普通のやり⽅に寄せる ◦ 実装だけでなく、デザインの段階から、標準の実装のされ⽅を意識する ◦ （もし凝りたいときは、がんばるしかない） • 公式のドキュメントに、アクセシビリティへの⾔及があれば読んでおく ◦ アクセシビリティを損いやすい注意点などが書かれていることも多い
49. 機械の⼒に頼る
50. アクセシビリティチェックは⾃動化する • ガイドラインに沿ったチェックをするのにも、それなりの知識が必要 • ⾃動チェックツールで発⾒できる問題は2〜3割程度といわれているが、 そういった問題を改善するだけでもかなり「マシ」な状態になる ◦ 経験則では、あまりアクセシビリティを意識せずに作られたものにある 問題の7割くらいは、⾃動チェックツールで発⾒できる
51. axe-coreを利⽤する • axe-coreはアクセシビリティチェックに よく使われているライブラリ • Lighthouseのスコアリングもaxe-core • ブラウザでは、axe DevTools拡張機能が便利 • Playwright等と組み合わせて、CI/CDで 他のテストと同時にチェックすることもできる Qiitaの記事ページは32個の問題があった ⾒出しの先頭の空のリンクは、視覚障害者がかなり不便と⾔ってました
52. Accessibility Visualizer • axe-coreだけでは、テキストの内容などまで 踏み込んだチェックができない • Accessibility Visualizer というブラウザ拡張機能 を開発して、その問題を改善しようとしている • ⽀援技術にどんな情報が伝わるかを視覚化する ことができる • 問題のあるマークアップには警告する 画像は「 駒瑠市〜アクセシビリティ上の問題の体験サイト〜」上で Accessibility Visualizerを使⽤したもの https://a11yc.com/city-komaru/
53. がんばらないポイント: 仕組みに取り込む • 開発に関わる全員が関係するような仕組みに、アクセシビリティを 取り込まなければ、直すよりも速いスピードで問題が増えていく • 開発に関わるメンバーでアクセシビリティについて共通認識をつくり、 そのための仕組みとして、ツールによるチェックを取り込む ◦ CI に組み込み、問題を解消しないと Pull Request をマージできなくする ◦ コードレビュー時に確認するべき項⽬としておく
54. がんばるべきポイント
55. 当事者に向き合う • 当事者がいないところでの改善は、なかなか当事者のためのものにならない ◦ ここまでの「がんばらない」は、当事者がいない状況でできるもの ◦ Nothing about us without us（私たち抜きで私たちのことを決めないで） • 本当に困っている⼈の問題に向き合うことこそ、がんばるポイント ◦ 困っている状態を解消できれば、ユーザーの幅を広げられるチャンス ◦ ユーザーの声を集めたり、困りそうな属性の⼈に会いにいく ◦ ここからが本当のアクセシビリティへの取り組みのはじまり
56. 当事者のための窓⼝をつくる • freeeでは、社内に合理的配慮委員会をつくり、 当事者からの問い合わせに応える窓⼝にした • 使いづらさを感じる⼈に対して、その問題に 向き合う姿勢を伝えたい freee、「合理的配慮の対応⽅針」公開のお知らせ 障害のあるお客様等が「合理的配慮」について相談できる専⽤のお問い合わせ窓⼝を設置 https://corp.freee.co.jp/news/20240625_gouritekihairyo.html
57. おわりに • 「誰でも使える」を本当に達成しようとするのは、本来は難しいこと ◦ まずは⾃分⾃⾝、そして周囲の⼈が「使える」「使いやすい」と 思えるようにしていくところから取り組んでいきましょう • WebやモバイルOSには、アクセシビリティを⾼めるための⼟台がある ◦ それらを上⼿く使えば、がんばらなくてもある程度の⽔準になる • 本当にがんばるべきなのは、困っている当事者に向き合うこと • 「使いづらい」「使えない」を「使える」「使いやすい」にしていくための 考え⽅や道のりについて、理解していただけたなら幸いです
58. 楽天ブックスのキャンペーンのお知らせ 「Webアプリケーションアクセシビリティ」 「モバイルアプリアクセシビリティ⼊⾨」の アクリルキーホルダーまたはアクリルスタンドと、 サイン本のセットが楽天ブックスで販売中です 「Webを⽀える技術」 「オブジェクト指向UIデザイン」 「縁の下のUIデザイン」 でも、キャンペーン実施中です
59. ご清聴ありがとう ございました