Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
2
Webデザイン会社ビジネス・アーキテクツに勤務ののち、
製品を通じた多様な働き方の実現を目指し
2017年にfreeeに参加。
デザインチームのマネジメント、
およびアクセシビリティ普及啓発を行う。
ほか、外部コンサルタントとして
Ubie、STUDIO、CULUMUの
アクセシビリティ改善を推進。
ウェブアクセシビリティ基盤委員会（WAIC）委員、
人間中心設計推進機構（HCD-Net） 評議委員。
著書（共著）、監訳書に
「Webアプリケーションアクセシビリティ」
「デザイニングWebアクセシビリティ」、
「コーディングWebアクセシビリティ」
「インクルーシブHTML+CSS&JavaScript」がある。
伊原 力也
Rikiya Ihara
@magi1125
Slide 3
Slide 3 text
3
本内容は、書籍
「Webアプリケーションアクセシビリティ」
の1章から抜粋してお届けします
Amazonで販売中！
以下QRコードもご利用ください
Slide 4
Slide 4 text
4
1. アクセシビリティとは
2. Webアクセシビリティとは
3. Webアクセシビリティと「障害」
4. WCAG─Webアクセシビリティの標準
5. Webアクセシビリティに取り組む理由
6. なぜWebアプリケーションで
アクセシビリティなのか
目次
Slide 5
Slide 5 text
1. アクセシビリティとは
● 言葉としての定義
● ユーザビリティとの対比
● アクセシビリティは利用しやすさ？
Slide 6
Slide 6 text
6
言葉としての定義
● access
接近、通路、入口、入手、入場、利用
● access＋ability（能力） = accessibility
場所やモノや情報が持つ「アクセスを成立させる能力」
● 略してa11yと表記されることも（aとyの間に11文字あるため）
Slide 7
Slide 7 text
間嶋沙知著『見えにくい、読みにくい「困った！」を解決するデザイン』マイナビ出版、2022年
Slide 8
Slide 8 text
8
アクセシビリティは「利用しやすさ」？
● この翻訳だと「利用できることを暗黙の前提として、
そのうえで利用しやすいかどうかである」という解釈になりがち
● 現実には、利用しやすさが「ゼロ」であるケースがある。
いずれも致命的なものであり、バグと言って良い
○ 画面上にあるボタンに気付くことすらできない
○ キーボードフォーカスが見えずにまったく操作できない
○ マウスオーバーすると要素が消滅したように見えて操作できない
● アクセシビリティを高める活動とは、こうしたことが起きないように、
「まず利用自体は可能である」という状況を増やしていくこと
Slide 9
Slide 9 text
2. Webアクセシビリティとは
● Webにあるだけで圧倒的にアクセシブル
● Webコンテンツは形を変えられる
Slide 10
Slide 10 text
10
Webにあるだけで圧倒的にアクセシブル
Web上にサービスやコンテンツを作るだけで、
世界をアクセシブルにすることに貢献している
● あらゆるデバイスからインターネットにアクセスでき、
URLによってコンテンツを一意に特定でき、
サーバどうしの相互ネットワークによりコンテンツにたどり着ける
● 通信環境と端末さえあれば、時間や利用場所、デバイスなどの制約を超え、
誰でもサービス利用の入口に立てる
● だからこそオンラインで、買い物をする、ニュースを読む、
学習する、仕事を進めるといった行動が一般的にできる
Slide 11
Slide 11 text
11
アクセシビリティの構成要素
Slide 12
Slide 12 text
12
アクセシビリティの構成要素
Slide 13
Slide 13 text
13
アクセシビリティの構成要素
狭義のアクセシビリティ
Slide 14
Slide 14 text
14
Webコンテンツは形を変えられる（1/3）
● 物理的なプロダクトは形を変えられない
● 1つのもので提供できる
選択肢には限界がある
● 例：ユニバーサルトイレ
○ 全体としてはアクセシビリティが高い
○ そのためには複数の器具が必要
福岡空港のユニバーサルトイレ
Slide 15
Slide 15 text
15
Webコンテンツは形を変えられる（2/3）
● Webは、情報と表現を分離し、表現はユーザー側で変更できる
○ Webページの色や文字が見えづらい場合
OSやブラウザの設定で配色を変更する、画面を拡大する
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
20
Webコンテンツは形を変えられる（2/3）
● Webは、情報と表現を分離し、表現はユーザー側で変更できる
○ Webページの色や文字が見えづらい場合
OSやブラウザの設定で配色を変更する、画面を拡大する
○ 画面がまったく見えない場合
スクリーンリーダーにより、画面上にあるものを音声読み上げ・点字出力できる
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
23
Webコンテンツは形を変えられる（2/3）
● Webは、情報と表現を分離し、表現はユーザー側で変更できる
○ Webページの色や文字が見えづらい場合
OSやブラウザの設定で配色を変更する、画面を拡大する
○ 画面がまったく見えない場合
スクリーンリーダーにより、画面上にあるものを音声読み上げ・点字出力できる
○ マウスやタッチデバイスが使えない場合
キーボードのみ、頭の向きや視線、表情、音声や物理スイッチなどで操作できる
Slide 24
Slide 24 text
らくらくマウスⅢ、キーガード付きキーボード、SFマウススティック、macOSのヘッドポインタ機能、miyasuku EyeConSW
Slide 25
Slide 25 text
macOSの音声コントロール
Slide 26
Slide 26 text
ブルー2、ピロースイッチ、フィンガースイッチ、ピエゾニューマティックセンサスイッチ、macOSのスイッチコントロール
Slide 27
Slide 27 text
27
Webコンテンツは形を変えられる（3/3）
● これは偶然ではなく、Web技術は明確な思想のもとに設計されている
● Webの考案者であるティム・バーナーズ＝リー氏がそのように述べている
Webの力はユニバーサル性にある。
障害の有無に関わらず誰もがアクセスできることがWebの本質である。
The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C
Slide 28
Slide 28 text
3. Webアクセシビリティと「障害」
● 加齢と障害
● 一時的な障害
● 医学モデルと社会モデル
Slide 29
Slide 29 text
29
加齢と障害
● 視覚・上肢・聴覚・認知や学習に関する障害は、
加齢によって誰でも少しずつ発現する
● 壮年者（30～49歳）の動態・視覚・聴覚の能力を1としたとき、
前期高齢者（65～74歳）の能力がおおむね8割～6割まで低下する
高齢者向け生産現場設計ガイドライン
Slide 30
Slide 30 text
高齢者向け生産現場設計ガイドライン
Slide 31
Slide 31 text
31
一時的な障害
視覚 メガネを忘れたりコンタクトレンズをなくしたりして画面が見えにくい
モノクロで印刷したら、色分けされたグラフの意味がわからない
上肢 手を怪我したり腱鞘炎になったりしてマウスが操作しづらい
子供や荷物を抱えているため、手を使って操作できない
聴覚 職場や電車の中なのでスピーカーで音を聞くことができない
Bluetoothイヤホンの電池が切れて音を聞くことができない
認知・学習 飲酒や睡眠不足などで認知能力や学習能力が低下している
体調が悪く集中できない状態で、スマートフォンで病院を探している
Slide 32
Slide 32 text
32
医学モデルと社会モデル（1/2）
● 医学モデル：障害は個人の身体側にある（障害を「持つ」「抱える」）
○ 車椅子ユーザーが段差を登れないのは、個人の歩行能力の問題
○ 治療やリハビリテーションを実施して歩行能力の回復や向上を図る
● 社会モデル：障害は社会や環境側にある（障害が「ある」）
○ 車椅子ユーザーが段差を登れないのは、段差を生じさせている環境や社会側の問題
○ 段差に対してカーブカット（段差の一部を斜面にして段差を解消する）を施工する
● 2011年の障害者基本法の改正により、
障害の社会モデルは国としての基本方針に盛り込まれた
障害者権利条約パンフレット
Slide 33
Slide 33 text
33
医学モデルと社会モデル（2/2）
● Webアクセシビリティの向上には、社会モデルの考え方が必要
● 障害はグラデーションであり、明確な区切りはない
● 原因が何であれ「そのままではWebがうまく使えないため
補助や支援が必要になる」という「状況としての障害」が存在している
● 障害はユーザー側にあるのではなく、
ユーザーとサービスの間の界面に存在する
● サービスを利用しているときに障害を感じる人がいなければ、
社会モデルとしては、「そこに障害者はいない」という状態を作り出せる
Slide 34
Slide 34 text
4. WCAG
──Webアクセシビリティの標準
● WCAGの概略
Slide 35
Slide 35 text
35
WCAG（Web Content Accessibility Guidelines）の概略（1/3）
● アクセシビリティを確保するための国際標準のプラクティス
○ Web標準を策定する国際的なコミュニティであるW3Cが発行
● 最新バージョンはWCAG 2.2（2023/10/5に勧告）
● 4つの「原則」（知覚可能、操作可能、理解可能、堅牢）、
その原則を分解した個別の「ガイドライン」、
それに対して取り組むべきことを示した「達成基準」で構成
Slide 36
Slide 36 text
36
WCAG（Web Content Accessibility Guidelines）の概略（2/3）
● 適合レベルにはA、AA、AAAの3レベルが存在
● 実務的な意味ではレベルAAに適合することがひとつの目標
○ 日本の公的機関向けの「みんなの公共サイト運用ガイドライン」では
JIS X 8341-3:2016の適合レベルAAへの準拠を要求
（このJISはWCAG2.0と一致した規格）
○ 諸外国でWebアクセシビリティに対して法律で対応を義務付けている場合、
WCAG 2.0/2.1のレベルAAを要求するケースが多い
Slide 37
Slide 37 text
37
WCAG（Web Content Accessibility Guidelines）の概略（3/3）
● 有用だが、「現在の技術に依存しない」というポリシーがあるため、
読みにくくわかりにくい
○ 例：画像や音声を「非テキストコンテンツ」と呼称する
● 別途、解説書と達成方法集もあるが、
ドキュメントのボリュームは大きく、書きぶりも難しい
● アクセシビリティへの取り組みを進めるデジタル庁や各社が
わかりやすさや読みやすさを改善した
独自ガイドライン・チェックリストなどを作成し、公開している
Slide 38
Slide 38 text
デジタル庁 ウェブアクセシビリティ導入ガイドブック
Slide 39
Slide 39 text
freee アクセシビリティー・ガイドライン
Slide 40
Slide 40 text
LIFULL Accessibility Guidelines Ameba Accessibility Guidelines
SmartHR ウェブアクセシビリティ簡易チェックリスト アイスリーデザイン とってもやさしいウェブアクセシビリティチェックリスト
Slide 41
Slide 41 text
41
ただし、ガイドラインの前にやることがある
● 支援技術ユーザーの存在を認知し、利用状況や利用方法を確認する
○ 支援技術を触ってみる、使い方の動画をYouTubeで見てみる
○ ユーザーに使い方を見せてもらう、実際にサービスを触ってもらう
● そのうえで、ガイドラインやチェックリストを活用する
○ チェックリストに基づくパッチ当て的な形で始めると、
ユーザーの使い方がイメージできないまま改善に取り組むことになる
○ 結果、不安なままの取り組み、過剰な「対応」、不適切な「対策」になりがち
Slide 42
Slide 42 text
障害者のウェブページ利用方法の紹介ビデオ
Slide 43
Slide 43 text
NVDAでアクセシビリティー チェック
Slide 44
Slide 44 text
44
ユーザーと一緒に進めるアクセシビリティ 〜1年でアクセシビリティを組織に浸透させたnoteの取り組み〜
Slide 45
Slide 45 text
5. Webアクセシビリティに取り組む理由
● ユーザーを増やせる
● ユーザビリティを高められる
● 権利を守り、法を遵守できる
Slide 46
Slide 46 text
46
ユーザーを増やせる
● ①アクセスできない人を減らせる
● ②アクセスできると口コミが広がり、市場が生まれる
● ③サイトやサービスの枠を超えて情報が広がる
Slide 47
Slide 47 text
47
①アクセスできない人を減らせる（1/2）
● 日本での障害者手帳所持者は約560万人。
視覚障害・聴覚障害・肢体不自由に限っても約258万人
● 視覚障害者の91.7％、聴覚障害者の93.4％、肢体不自由者の82.7％が
インターネットを利用
● しかし障害者にとってWebサイトはアクセシブルとはいえない
○ 障がいのある方々のインターネット等の利用に関する調査研究
○ 障害者のインターネット利用実態調査
平成28年 生活のしづらさなどに関する調査、障がいのある方々のインターネット等の利用に関する調査研究
Slide 48
Slide 48 text
パソコン利用時にWeb上にバリアがあることで、欲しかった情報が見られなかったり、
手続きが最後までできなかった経験
障害者のインターネット利用実態調査
Slide 49
Slide 49 text
49
①アクセスできない人を減らせる（2/2）
● 日本の65歳以上人口は3,627万人（29.1%）。
2040年には35.3％になる
● 65～69歳の80.0%、70～79歳の59.4%、80歳以上の27.6%が
インターネットを利用
● しかし高齢者にとってWebサイトはアクセシブルとはいえない
○ Webサイトの定量的ユーザビリティテストにおいて、
21～55歳のタスク成功率：74.5％
65歳以上のタスク成功率：55.3％
● 加齢と身体障害には相関があり、高齢者が増えるほど、身体障害者も増える
統計からみた我が国の高齢者、高齢者のインターネット利用率（令和3年）、
Webユーザーとしての高齢者、身体障害者の年齢階級別状況
Slide 50
Slide 50 text
50
②アクセスできると口コミが広がり市場が生まれる（1/2）
● 障害者は、その障害ごとのコミュニティに属し、
日々情報交換をしている場合がある
● 現時点のWebではアクセシビリティを欠いたサービスのほうが多数派
● アクセシブルなサービスがあるのであれば、それを当然推奨する
● アクセシビリティに取り組むことは、サービス側からの
「あなたをユーザーと認識し、関係性を築くつもりがある」
という宣言になる
● noteでは実際にこの口コミによるユーザー増加が起き始めている
Slide 51
Slide 51 text
51
②アクセスできると口コミが広がり市場が生まれる（2/2）
● 「今はあまり使われていないのでニーズはない」は順序が逆。
使えるようになっていないから使う人が出現しない
● 例：ロービジョンユーザー向けのカメラ
● WebサイトやWebサービスがアクセシブルであれば、
これまで存在しなかった市場を作り出せる
● たとえば、会計ソフトや人事労務ソフト、
グループウェアなどがアクセシブルになれば、
これまでの紙ベースでは難しかった
データ整理や申請承認といった業務を行うような雇用を創出できる
Slide 52
Slide 52 text
52
③サイトやサービスの枠を超えて情報が広がる
● マシンリーダブルなコンテンツがあれば、機械が情報の使い方を拡張できる
○ コンテンツを翻訳して読める
○ Webページからメインコンテンツ部分だけを取り出して読める
○ 今見ているWebページをクリップして保存しておき、あとで読める
○ Webページを電子書籍化できる
○ 外部サービスがコンテンツを取得・加工し、新たな意味を与えられる
○ ページの一部の情報をGoogleの検索結果ページに「出張」させられる
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
54
アクセシビリティの構成要素
Slide 55
Slide 55 text
55
ユーザビリティを高められる
● アクセシビリティは「使える」の幅広さを拡大する取り組み
● これは、特段の障害がない状態におけるユーザビリティも押し上げる
● WCAGにも「しばしば利用者全般のユーザビリティを向上させる」と
明記されている
Slide 56
Slide 56 text
56
権利を守り、法を遵守できる
● ①障害者差別解消法、合理的配慮と環境の整備
――Webアクセシビリティも合理的配慮・環境の整備の範囲内
● ②アメリカではすでに訴訟リスクに
Slide 57
Slide 57 text
57
①障害者差別解消法、合理的配慮と環境の整備（1/2）
● 「不当な差別的取扱いの禁止」「合理的配慮の提供」を求めている
● 合理的配慮
国・都道府県・市町村などの役所や、会社やお店などの事業者に対して、
障害のある人から、社会の中にあるバリアを取り除くために何らかの対応を
必要としているとの意思が伝えられたときに、負担が重すぎない範囲で対応すること
○ 障害のある人の障害特性に応じて、座席を決める
○ 代わりに書くことに問題がない書類の場合は、
障害のある人の意思を十分に確認しながら代わりに書く
○ 意思を伝え合うために絵や写真のカードやタブレット端末などを使う
○ 段差がある場合に、スロープなどを使って補助する
障害者差別解消法、障害者差別解消法リーフレット
Slide 58
Slide 58 text
環境の整備
Slide 59
Slide 59 text
59
①障害者差別解消法、合理的配慮と環境の整備（2/2）
● 障害者差別解消法は2024年4月に改正法が施行
○ 民間事業者でも合理的配慮について法定義務に
● 合理的配慮の土台となる「環境の整備」 ※環境の整備は努力義務
○ 企業や店舗などの事業者や行政機関等に対して、個別の場面において、
個々の障害者に対する合理的配慮が的確に行えるよう、
不特定多数の障害者を主な対象として行う事前の改善措置のこと
○ ホームページ掲載情報が音声読み上げソフトで読み上げることができないと
問合せがあった場合、問合せ者に音声読み上げソフトで読み上げることが
可能なテキストファイル等を提供することが「合理的配慮の提供」、
音声読み上げソフトで読み上げ可能になるように
ホームページを修正することが「環境の整備」
環境の整備、公的機関に求められるウェブアクセシビリティ対応
Slide 60
Slide 60 text
60
②アメリカではすでに訴訟リスクに
● 法律でWebアクセシビリティへの対応を義務付けている地域が多数ある
○ アメリカ、カナダ、イギリス、ドイツ、フランス、イタリア、
オーストラリア、中国、インド、韓国、EUなど
○ 民間事業者も含めて明確な罰則規定が存在するケースもある
● アメリカの2022年のデジタルアクセシビリティ訴訟は4,000件超
○ 2019年に歌手のビヨンセの公式サイトが全盲のファンに訴えられた
○ 同年にはドミノピザのECサイトがアクセシブルでなかった点について
ユーザーから訴訟があり、連邦最高裁でユーザー側が勝訴した
○ Amazon、Apple、Netflix、Nike、ディズニー、マクドナルド、
バーガーキングといった著名な企業のWebサービスが訴えられている
WebAccessibility Laws & Policies
Slide 61
Slide 61 text
6. なぜWebアプリケーションでアクセシビリティなのか
● 繰り返し利用することで生活や仕事が変化するから
● 共同利用のうえでは全員が使える必要があるから
● 企業のミッションにつながるから
Slide 62
Slide 62 text
62
繰り返し利用することで生活や仕事が変化するから
● Webアプリケーションは、あるタスクを繰り返し行うような
継続的な利用を前提としている
● 日々使うアプリケーションがアクセシブルになると、
自力では不可能だったことや多大な労力を払っていたことが、
単独で苦もなく行えるという変化が訪れる
● 業務アプリケーションであれば、使えるかどうかが働けるかに直結する
● たとえば、個人事業主向けの会計ソフトがアクセシブルになれば、
これまで会計ソフトが使えなかったユーザーも自力で会計業務を行い、
確定申告を行える。そのインパクトは生活を一変させるもの
Slide 63
Slide 63 text
63
共同利用のうえでは全員が使える必要があるから
● 複数人で利用するものを一部のユーザーが使えないと、
コラボレーションは不完全。全員が使えるものでなければ導入しづらい
● アクセシビリティが必要な人がチーム内に1人でも含まれる確率は、
5人チームで50％以上、30人で98％以上になる
● 障害者雇用率制度によれば、民間企業の法定雇用率は2.3％（3年後に2.7%）
従業員を43.5人以上雇用している事業主は、
障害者を1人以上雇用しなければならない
● 一定以上の従業員がいる事業所では、ほぼ確実にアクセシビリティを
必要とする人が存在する。その人を含めて使えなければ
全員の生産性が上がることにはつながらない
なぜ、サイボウズでアクセシビリティなのか?、障害者雇用のルール
Slide 64
Slide 64 text
64
企業のミッションにつながるから
● Webというプラットフォームを使ってサービスを提供する各企業は、
実はWebが持つ圧倒的なアクセシビリティを前提として成立している
● 企業の理念を本当に実現し、今の社会や生活の構造を根本から変えるには、
さらにWebのポテンシャルを引き出し、
そのサービスのユーザーになり得る人をすべて巻き込まねばならない
● アクセシビリティに取り組むことは、ユーザーがサービスを通じて
企業の理念にアクセスできるようにすることと同義である
● その理念に「誰もが」を意味する言葉が入っていたり、
Webを通じてその理念を伝えようとしていたりするのであれば、
その実現にWebアクセシビリティは必要不可欠
Slide 65
Slide 65 text
65
ミッション | freee株式会社
● ミッション「スモールビジネスを、世界の主役に。」
● ビジョン「だれもが自由に経営できる統合型経営プラットフォーム」
● これを追い求めるには、個人で開業する人が使うサービスも、
スモールビジネスで働く従業員が使うサービスも、
「だれもが」使えるようになっていなければならない
例：freeeのミッション・ビジョン
Slide 66
Slide 66 text
66
本内容は、書籍
「Webアプリケーションアクセシビリティ」
の1章から抜粋してお届けしました
Amazonで販売中！
以下QRコードもご利用ください
Slide 67
Slide 67 text
No content