SlideShare a Scribd company logo
1 of 37
Download to read offline
企業がWebアクセシビリティに
取り組むべき理由
株式会社ミツエーリンクス
⽊達 ⼀仁
2019年10⽉8⽇
SAtisfaction 2019 - Movable Type Conference
• 株式会社ミツエーリンクス

取締役(CTO)
• 主にマークアップやスタイルシートの設計、
関連ガイドラインの策定・運⽤に従事
• ウェブアクセシビリティ基盤委員会(WAIC)
作業部会1 委員
⽊達 ⼀仁
株式会社ミツエーリンクス
https://www.mitsue.co.jp/
本⽇のアジェンダ
1. ⽶国で増加するWebアクセシビリティ関連訴訟
2. Web環境の変化とWebを利⽤するコンテキストの多様化
3. Webアクセシビリティとは
4. 進むWebアクセシビリティの法制化
5. 企業がWebアクセシビリティに取り組むべき理由
⽶国で増加する
Webアクセシビリティ関連訴訟
Beyonce's Parkwood Entertainment Sued | Hollywood Reporter
https://www.hollywoodreporter.com/thr-esq/beyonces-parkwood-entertainment-sued-1172909
ADA.gov homepage
https://www.ada.gov/
アメリカで急増する
Webアクセシビリティ関連訴訟
• UsableNetの調べによると……
• 814件(2017年)から2285件(2018年)へ急増(2.8倍)
• 障害を持つアメリカ⼈法(ADA:Americans with
Disabilities Act)に基づく
• 2019年第⼀四半期も前年同期⽐で31%増加
• Webサイトを利⽤できることは⼈権の⼀つ
Usablenet - 2018 ADA Web Accessibility Lawsuit Recap Report [BLOG]
https://blog.usablenet.com/2018-ada-web-accessibility-lawsuit-recap-report
Web環境の変化と
Webを利⽤するコンテキストの多様化
Bond - Internet Trends 2019
https://www.bondcap.com/report/itr19/#view/9
https://www.flickr.com/photos/adactio/6153558098/
Mobile and tablet internet usage exceeds desktop for first time worldwide | StatCounter Global Stats

https://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
Webを利⽤するコンテキストの多様化
• Webデバイスの多様化
• スマートフォン、タブレット、スマートスピーカー etc.
• 未知のデバイスからのアクセスは常に不可避
• Webユーザーの多様化
• ⽀援技術の普及と障害者・⾼齢者ユーザーの増加
• 障害は多様(全盲、弱視、聴覚障害、肢体不⾃由、認知障害 etc.)
• さまざまなデバイスで、さまざまなユーザーがアクセスするのがWeb
同じユーザーについても
コンテキストは変化し続ける
• 異なるデバイスから
• 異なるネットワーク速度で
• 異なる時間帯(昼間/夜間)で
• 歩きながら/座ってアクセス
• 屋内/屋外でアクセス
• メガネを忘れた
• イヤホンを紛失した
• 突発性難聴を患った
• 周囲が騒がしい
• マウスが故障して使⽤不能
etc.
Webアクセシビリティとは
Webアクセシビリティとは
• アクセシビリティとは
• Access + Ability = Accessibility (A11y)
• アクセスのしやすさ、転じて製品やサービスの利⽤しやすさ
• Webアクセシビリティとは
• Webコンテンツ(Webページにある情報や機能)の利⽤しやすさ
• コンテンツの種類やターゲットユーザーの別を問わず必要な品質
https://intertwingled.org/user-experience-honeycomb/
User Experience Honeycomb
ユーザビリティとは
• ISO 9241-11の定義:ある製品が、指定されたユーザーによって、
指定された利⽤状況において、指定された⽬標を達成するために⽤
いられる際の、有効さ、効率、およびユーザーの満⾜度の度合い
• アクセシビリティとの違いを強調すると
• ユーザビリティ:特定の⼈々にとって利⽤しやすいかどうか
• アクセシビリティ:あらゆる⼈々にとって利⽤しやすいかどうか
• 両者を明確に分けることは難しい
• アクセシビリティが低ければユーザビリティも低くなりがち
• 両者は部分的に重複した概念
• アクセシビリティはユーザビリティにとって⼟台であり前提
• まずアクセシビリティを確保してこそユーザビリティは向上できる
アクセシビリティと
ユーザビリティは不可分
https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
Evaluation method of UX “The User Experience Honeycomb”
アクセシビリティの向上が
多様なコンテキストをカバー
• 陽光の射す屋外でも⽂字を読みやすくしたい
• ⽂字⾊と背景⾊のコントラスト⽐の確保が必要
• 弱視や⾊覚異常にも対応
• ⾳を再⽣できない状況でも動画の内容を伝えたい
• 字幕の付与が必要
• 聴覚障害にも対応
https://www.w3.org/WAI/perspective-videos/
Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone
進むWebアクセシビリティの法制化
障害者の権利に関する条約(略称:障害者権利条約) | 外務省
https://www.mofa.go.jp/mofaj/gaiko/jinken/index_shogaisha.html
障害を理由とする差別の解消の推進 - 内閣府
https://www8.cao.go.jp/shougai/suishin/sabekai.html
障害者差別解消法の要点
• 2013年6⽉制定、2016年4⽉施⾏
• 不当な差別的取扱いの禁⽌
• 合理的配慮の提供
• 国の⾏政機関・地⽅公共団体等は法的義務
• ⺠間事業者は努⼒義務
• 情報アクセシビリティは「社会的障壁の除去の実施についての必要
かつ合理的な配慮に関する環境の整備」の⼀環として推進すること
が求められている
Section508.gov | GSA Government-wide Section 508 Accessibility Program
https://www.section508.gov/
半歩前進した、政府調達での情報アクセシビリティ対応 ‒ アゴラ
http://agora-web.jp/archives/2037876.html
法制化は世界的な潮流
• Webアクセシビリティ確保の法制化が世界各地で進⾏
• アメリカのみならずWebアクセシビリティ関連の訴訟は珍しくない
• 2000年開催のシドニーオリンピックのサイトにまつわる裁判が端緒
• 海外の法律が⽇本の企業に影響を及ぼすことも
• ⽶国外の企業もAir Carrier Access Act(ACAA)の対象
• グローバル企業のWebサイトでアクセシビリティ確保はもはや必須
Web Accessibility Laws & Policies | Web Accessibility Initiative (WAI) | W3C
https://www.w3.org/WAI/policies/
企業がWebアクセシビリティに
取り組むべき理由
取り組まないデメリット
• 新たなユーザー/デバイス/コンテキストへの対応
• 都度の改修コストの発⽣
• 部分最適化の繰り返しによる全体最適化の遅延
• コンバージョンの潜在的な取りこぼし
• 機会損失の最⼤化
• コンプライアンス違反/訴訟リスク
• SEO(検索エンジン最適化)上の不利
• ユーザーはWebコンテンツを「直接」利⽤しているわけではない
• 機械(ソフトウェア)がコンテンツを処理した結果を利⽤
• Webブラウザーや検索エンジンのクローラーなどのユーザー
エージェント(UA:User Agent)による処理
• スクリーン・リーダーなどの⽀援技術(AT:Assistive
Technology)による処理
• アクセシビリティの確保は、コンテンツを適切に処理できるよう機
械可読性を確保することでもあり、SEOにつながる
WebアクセシビリティとSEO
取り組むメリット
• ユーザー/デバイス/コンテキストの多様化への対応
• 障害者や⾼齢者、使⽤⾔語を⺟語としないユーザー etc.
• 未知のデバイス
• 全体的なユーザビリティの向上
• 機会損失の最⼩化
• 法制化への対応(法令遵守)
• SEO
ご静聴ありがとうございました

More Related Content

More from Mitsue-Links Co.,Ltd. Accessibility Department

More from Mitsue-Links Co.,Ltd. Accessibility Department (10)

Webデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組みWebデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組み
 
Accessible Graphics for High Pixel Density Era
Accessible Graphics for High Pixel Density EraAccessible Graphics for High Pixel Density Era
Accessible Graphics for High Pixel Density Era
 
「10年後のWeb」のために、今すべきこと
「10年後のWeb」のために、今すべきこと「10年後のWeb」のために、今すべきこと
「10年後のWeb」のために、今すべきこと
 
Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向
 
Web Componentsのアクセシビリティ
Web ComponentsのアクセシビリティWeb Componentsのアクセシビリティ
Web Componentsのアクセシビリティ
 
Webアクセシビリティの現状ダイジェスト 2014
Webアクセシビリティの現状ダイジェスト 2014Webアクセシビリティの現状ダイジェスト 2014
Webアクセシビリティの現状ダイジェスト 2014
 
Mobile and Accessibility - A Japanese Perspective
Mobile and Accessibility - A Japanese PerspectiveMobile and Accessibility - A Japanese Perspective
Mobile and Accessibility - A Japanese Perspective
 
Webアクセシビリティ
WebアクセシビリティWebアクセシビリティ
Webアクセシビリティ
 
Webアクセシビリティ 基本のキ
Webアクセシビリティ 基本のキWebアクセシビリティ 基本のキ
Webアクセシビリティ 基本のキ
 
アクセシビリティを加速するWAI-ARIA
アクセシビリティを加速するWAI-ARIAアクセシビリティを加速するWAI-ARIA
アクセシビリティを加速するWAI-ARIA
 

Recently uploaded

あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]Taka Narita
 
動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Components動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Componentsokitamasashi
 
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーンWindowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーンivanwang53
 
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docxWindows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docxivanwang53
 
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元ivanwang53
 
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法ivanwang53
 

Recently uploaded (6)

あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
あらゆる通信環境で切れない「ネットモーション」のモバイルアクセス [NetMotion]
 
動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Components動的 & 非同期コンポーネント / Dynamic & Async Components
動的 & 非同期コンポーネント / Dynamic & Async Components
 
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーンWindowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
Windowsアップデート後の黒い画面を修正する方法|データ復元|ブラックスクリーン
 
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docxWindows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
Windows Defenderのフル・クイック・カスタム・オフラインスキャンを実行する方法.docx
 
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
Windows 10、Windows 11の付箋を簡単に復元する6つの方法|データ復元
 
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
ダウンロードがダウンロード(Downloads)フォルダに表示されない」問題の対処法
 

企業がWebアクセシビリティに取り組むべき理由