Slide 1

Slide 1 text

  Webアクセシビリティの概要 2023.01.19

Slide 2

Slide 2 text

  2 Webデザイン会社ビジネス・アーキテクツに13年勤務ののち、 多様な働き方の実現を目指し2017年にfreeeに参加。 デザインチームのマネジメント、 およびアクセシビリティ普及啓発を行う。 ほか、外部コンサルタントとしてnote、Ubie、STUDIO、 東京都新型コロナウイルス感染症対策サイトの アクセシビリティ改善を推進。 ウェブアクセシビリティ基盤委員会(WAIC)委員、 人間中心設計推進機構(HCD-Net) 評議委員。 著書(共著)、監訳書に 「Webアプリケーションアクセシビリティ」 「デザイニングWebアクセシビリティ」、 「コーディングWebアクセシビリティ」 「インクルーシブHTML+CSS&JavaScript」がある。 伊原 力也 デザイナー Rikiya Ihara

Slide 3

Slide 3 text

3 本内容は、2023年2月27日発売の書籍 「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(能力) 場所やモノや情報が持つ「アクセスを成立させる能力」 ● 略して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

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

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.1 ○ 2023年中にWCAG 2.2が勧告される予定 ● 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

freee アクセシビリティー・ガイドライン

Slide 39

Slide 39 text

39 ただし、ガイドラインの前にやることがある ● ユーザーの存在を認知する ● ユース・ケースを確認する ● そのうえで、ガイドラインなどの活用 ● やがて、はじめからアクセシビリティーを意識したサービス構築へ

Slide 40

Slide 40 text

  5. Webアクセシビリティに 取り組む理由 ● ユーザーを増やせる ● ユーザビリティを高められる ● 権利を守り、法を遵守できる

Slide 41

Slide 41 text

41 ユーザーを増やせる ● ①アクセスできない人を減らせる ● ②アクセスできると口コミが広がり、市場が生まれる ● ③サイトやサービスの枠を超えて情報が広がる

Slide 42

Slide 42 text

42 ①アクセスできない人を減らせる(1/2) ● 日本での障害者手帳所持者は約560万人。 視覚障害・聴覚障害・肢体不自由に限っても約258万人 ● 視覚障害者の91.7%、聴覚障害者の93.4%、肢体不自由者の82.7%が インターネットを利用 ● しかし障害者にとってWebサイトはアクセシブルとはいえない ○ 障がいのある方々のインターネット等の利用に関する調査研究 ○ 障害者のインターネット利用実態調査 平成28年 生活のしづらさなどに関する調査、障がいのある方々のインターネット等の利用に関する調査研究

Slide 43

Slide 43 text

パソコン利用時にWeb上にバリアがあることで、欲しかった情報が見られなかったり、 手続きが最後までできなかった経験 障害者のインターネット利用実態調査

Slide 44

Slide 44 text

44 ①アクセスできない人を減らせる(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 45

Slide 45 text

45 ②アクセスできると口コミが広がり市場が生まれる(1/2) ● 障害者は、その障害ごとのコミュニティに属し、 日々情報交換をしている場合がある ● 現時点のWebではアクセシビリティを欠いたサービスのほうが多数派 ● アクセシブルなサービスがあるのであれば、それを当然推奨する ● アクセシビリティに取り組むことは、サービス側からの 「あなたをユーザーと認識し、関係性を築くつもりがある」 という宣言になる ● noteでは実際にこの口コミによるユーザー増加が起き始めている

Slide 46

Slide 46 text

46 ②アクセスできると口コミが広がり市場が生まれる(2/2) ● 「今はあまり使われていないのでニーズはない」は順序が逆。 使えるようになっていないから使う人が出現しない ● 例:ロービジョンユーザー向けのカメラ ● WebサイトやWebサービスがアクセシブルであれば、 これまで存在しなかった市場を作り出せる ● たとえば、会計ソフトや人事労務ソフト、 グループウェアなどがアクセシブルになれば、 これまでの紙ベースでは難しかった データ整理や申請承認といった業務を行うような雇用を創出できる

Slide 47

Slide 47 text

47 ③サイトやサービスの枠を超えて情報が広がる ● マシンリーダブルなコンテンツがあれば、機械が情報の使い方を拡張できる ○ コンテンツを翻訳して読める ○ Webページからメインコンテンツ部分だけを取り出して読める ○ 今見ているWebページをクリップして保存しておき、あとで読める ○ Webページを電子書籍化できる ○ 外部サービスがコンテンツを取得・加工し、新たな意味を与えられる ○ ページの一部の情報をGoogleの検索結果ページに「出張」させられる

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

50 ユーザビリティを高められる ● アクセシビリティは「使える」の幅広さを拡大する取り組み ● これは、特段の障害がない状態におけるユーザビリティも押し上げる ● WCAGにも「しばしば利用者全般のユーザビリティを向上させる」と 明記されている

Slide 51

Slide 51 text

51 権利を守り、法を遵守できる ● ①障害者差別解消法、合理的配慮と環境の整備 ――Webアクセシビリティも合理的配慮・環境の整備の範囲内 ● ②アメリカではすでに訴訟リスクに

Slide 52

Slide 52 text

52 ①障害者差別解消法、合理的配慮と環境の整備(1/2) ● 「不当な差別的取扱いの禁止」「合理的配慮の提供」を求めている ● 合理的配慮 国・都道府県・市町村などの役所や、会社やお店などの事業者に対して、 障害のある人から、社会の中にあるバリアを取り除くために何らかの対応を 必要としているとの意思が伝えられたときに、負担が重すぎない範囲で対応すること ○ 障害のある人の障害特性に応じて、座席を決める ○ 代わりに書くことに問題がない書類の場合は、 障害のある人の意思を十分に確認しながら代わりに書く ○ 意思を伝え合うために絵や写真のカードやタブレット端末などを使う ○ 段差がある場合に、スロープなどを使って補助する 障害者差別解消法、障害者差別解消法リーフレット

Slide 53

Slide 53 text

53 ①障害者差別解消法、合理的配慮と環境の整備(2/2) ● 障害者差別解消法は2016年4月に施行、2021年6月に改正法が公布 ○ 民間事業者でも合理的配慮について法定義務に ● 合理的配慮の土台となる「環境の整備」 ○ 企業や店舗などの事業者や行政機関等に対して、個別の場面において、 個々の障害者に対する合理的配慮が的確に行えるよう、 不特定多数の障害者を主な対象として行う事前の改善措置のこと ○ ホームページ掲載情報が音声読み上げソフトで読み上げることができないと 問合せがあった場合、問合せ者に音声読み上げソフトで読み上げることが 可能なテキストファイル等を提供することが「合理的配慮の提供」、 音声読み上げソフトで読み上げ可能になるように ホームページを修正することが「環境の整備」 ● 環境の整備、公的機関に求められるウェブアクセシビリティ対応

Slide 54

Slide 54 text

環境の整備

Slide 55

Slide 55 text

55 ②アメリカではすでに訴訟リスクに ● 法律でWebアクセシビリティへの対応を義務付けている地域が多数ある ○ アメリカ、カナダ、イギリス、ドイツ、フランス、イタリア、 オーストラリア、中国、インド、韓国、EUなど ○ 民間事業者も含めて明確な罰則規定が存在するケースもある ● アメリカの2021年のデジタルアクセシビリティ訴訟は4,000件超 ○ 2019年に歌手のビヨンセの公式サイトが全盲のファンに訴えられた ○ 同年にはドミノピザのECサイトがアクセシブルでなかった点について ユーザーから訴訟があり、連邦最高裁でユーザー側が勝訴した ○ Amazon、Apple、Netflix、Nike、ディズニー、マクドナルド、 バーガーキングといった著名な企業のWebサービスが訴えられている WebAccessibility Laws & Policies

Slide 56

Slide 56 text

  6. なぜWebアプリケーションで アクセシビリティなのか ● 繰り返し利用することで 生活や仕事が変化するから ● 共同利用のうえでは 全員が使える必要があるから ● 企業のミッションにつながるから

Slide 57

Slide 57 text

57 繰り返し利用することで生活や仕事が変化するから ● Webアプリケーションは、あるタスクを繰り返し行うような 継続的な利用を前提としている ● 日々使うアプリケーションがアクセシブルになると、 自力では不可能だったことや多大な労力を払っていたことが、 単独で苦もなく行えるという変化が訪れる ● 業務アプリケーションであれば、使えるかどうかが働けるかに直結する ● たとえば、個人事業主向けの会計ソフトがアクセシブルになれば、 これまで会計ソフトが使えなかったユーザーも自力で会計業務を行い、 確定申告を行える。そのインパクトは生活を一変させるもの

Slide 58

Slide 58 text

58 共同利用のうえでは全員が使える必要があるから ● 複数人で利用するものを一部のユーザーが使えないと、 コラボレーションは不完全。全員が使えるものでなければ導入しづらい ● アクセシビリティが必要な人がチーム内に1人でも含まれる確率は、 5人チームで50%以上、30人で98%以上になる ● 障害者雇用率制度によれば、民間企業の法定雇用率は2.3%(3年後に2.7%) 従業員を43.5人以上雇用している事業主は、 障害者を1人以上雇用しなければならない ● 一定以上の従業員がいる事業所では、ほぼ確実にアクセシビリティを 必要とする人が存在する。その人を含めて使えなければ 全員の生産性が上がることにはつながらない なぜ、サイボウズでアクセシビリティなのか?、障害者雇用のルール

Slide 59

Slide 59 text

59 企業のミッションにつながるから ● Webというプラットフォームを使ってサービスを提供する各企業は、 実はWebが持つ圧倒的なアクセシビリティを前提として成立している ● 企業の理念を本当に実現し、今の社会や生活の構造を根本から変えるには、 さらにWebのポテンシャルを引き出し、 そのサービスのユーザーになり得る人をすべて巻き込まねばならない ● アクセシビリティに取り組むことは、ユーザーがサービスを通じて 企業の理念にアクセスできるようにすることと同義である ● その理念に「誰もが」を意味する言葉が入っていたり、 Webを通じてその理念を伝えようとしていたりするのであれば、 その実現にWebアクセシビリティは必要不可欠

Slide 60

Slide 60 text

60 freeeのミッション・ビジョン ● ミッション「スモールビジネスを、世界の主役に。」 ● ビジョン「だれもが自由に経営できる統合型経営プラットフォーム」 ● これを追い求めるには、個人で開業する人が使うサービスも、 スモールビジネスで働く従業員が使うサービスも、 「だれもが」使えるようになっていなければならない ミッション | freee株式会社

Slide 61

Slide 61 text

スモールビジネスを、世界の主役に。

Slide 62

Slide 62 text

62 本内容は、2023年2月27日発売の書籍 「Webアプリケーションアクセシビリティ」 の1章から抜粋してお届けしました Amazonで予約受付中! 以下QRコードもご利用ください