誰がためにアクセシビリティ対応をするのか?
https://gyazo.com/3774c9b75f0ca6322c736bfcc7f3da8e
株式会社GEEKでの社内アクセシビリティ勉強会用に作成したものになります yamanoku.icon
アクセシビリティとは何?
Accessibility
Access(アクセス)+ -bility(可能性)
アクセスのしやすさ
利用のしやすさ
「アクセシビリティ」と聞いて思い浮かべる一般的なイメージとしては「障害者・非健常者」のためのもの
主に視覚障害者(のイメージ)
ただ、別に障害者対応することだけがアクセシビリティなわけではない。
いろんな人間が居ていろんなニーズがあることを理解する
たとえば急に自分が片手負傷したときに通常通りの両手での操作ができなくなるかもしれない。
そうなったときに片手だけでもどう操作できるのか?みたいな視点をもつこともアクセシビリティへの加担
https://gyazo.com/1ac91a878094b8e88c6df83e00a056c1 https://www.slideshare.net/waic_jp/web-72165033
どういった状況下でどういう人間が触れても問題ないことがアクセシビリティなのではないだろうかyamanoku.icon
「アクセシビリティである」ということは何も操作をサポートするための意味ではない
https://gyazo.com/3458ec1279803c22e6b786e24f2bed54
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
Webという媒体にのるだけで少なからずアクセシビリティに加担できている
ここから更にどういった工夫できるかがWebに携わる人たちの課題である
そして差別化できる箇所でもあると思うyamanoku.icon
色変更とか文字サイズの選択とかあればアクセシビリティじゃん?
それだけだと不十分
https://gyazo.com/6c006c6ac9d8d114b100b9e31751bd47
みんなの公共サイト運用ガイドライン(2016 年版)
音声読み上げ
文字拡大
文字色変更
これらはいらない三種の神器と呼ばれている
そもそもOS、ブラウザ側で対応できている
色について
ページ色の変更もそれだけではアクセシビリティ対応とは言えないのは上述済み
色覚異常の人は、色で重要な判断をされるとわからない
https://user-images.githubusercontent.com/1811616/40133511-fa0f8828-597a-11e8-96a0-670b8689f964.png
yarnのCLIコマンド例
https://github.com/yarnpkg/yarn/issues/5800
青黄視覚異常の場合、この色判断はキツい。
よくある指示
「ここは重要だから赤色でお願いします」
「赤が見づらい人どうするんですか」
無理に進めず、一旦立ち止まるのも必要
今のデザイナーは白黒のものから強弱さを考える特訓などしているのだろうか yamanoku.icon
日本社会が今後高齢化の一途をたどるとした時にWebの利用者の平均年齢もあがってくる
たぶん自分たちの世代(平成デジタルネイティブ)がそのままスライドしていくと思う
後続はまた別(だと思ってる)yamanoku.icon
そういう「いずれ訪れるであろう未来のため」に投資しておくのは悪いことではない
総務省統計局にその辺のデータがある
平成28年度 高齢者(65歳以上)
障害者データ(5年周期)
高齢者のインターネット利用率
https://gyazo.com/569d570eafe658b97f56a266ff29133c
障害者によるインターネットの利用率
https://gyazo.com/2ca2b4773aaee0f7cdc6fa3300e630e1
増える視覚障害者 ニーズ高まる :日本経済新聞
日本眼科医会は2030年には201万人と07年(164万人)から23%増えると予測している。
ちなみに障害者の差別撤廃は国が施策として取り組んでいる
厚生労働省における障害を理由とする差別の解消の推進|厚生労働省
そもそもユーザは何に対してアクセスしようとしているのか?を明らかにしたい
何を知りたい?
会社情報とか
統計情報とか
商品詳細とか
検索結果とか
こういうのはUI観点での見直しもそうだけど、導線の引き方を考えねばならない気がする
そもそも健常者も理解できるものを提供してるか?
モーダルにおけるキャンセルどっち問題
https://gyazo.com/f0e174c37553acbb0d003285e11b9faf
自分たちでも難しく思えるのに、支援が必要な人は更にどうないせっちゅうねんとなるyamanoku.icon
まずは万人に使えるよりも「そもそも自分たちが使えるか?」が達成しているかを確認してみる
実装での細かい話
テーブル実装
https://gyazo.com/d1a0358a4383a3882edee7ab355cf41a
こういうrowspanやcolspanがあるテーブル
難点は合併すると「2年次単位」というのだけが読まれて、下の「文系」「理系」のヒモ付けができない
1つの正解としては以下みたいにするのがいい
https://gyazo.com/efd5b84f8f27a145fe2d99105a978c1c
そもそもテーブルのマシンリーダブルとヒューマンリーダブル保持はかなりしんどいyamanoku.icon
https://gyazo.com/fe7e207e5625f8a443b08e42558b1391
こういったレスポンシブでthとtdをdisplay: blockとするのがあるが
これはスクリーンリーダーでは認知できない問題がある
Re: A Responsive Accessible Table - White Stage
alt
みなさんご存知の代替テキストと呼ばれるもの、スクリーンリーダーで読み上げてくれる
https://gyazo.com/f95a51b2c749cb1f706008df76453eea
質問:この画像にaltつけるならどうつける?
文脈:アクセスページ内、「浦和駅西口から降りて6番バス停にお越しください」テキストあり
回答編(一例)
https://gyazo.com/d16b4d68c92e3f1ca5805407bc8e2e8b
地図画像がなくても、そこにたどり着けるような情報が代替テキストで書いてあるか?が大事yamanoku.icon
出典:入門者向け alt属性の書き方アドバイス - Google スライド
「altをちゃんと考えた結果として、画像をぱっと見てもわからないような情報がたくさん盛り込まれた長いテキストになる、ということは良くあります。そのテキストは大抵の場合、見えている人にも有益な情報になっているので、altではなくキャプションにすると良い場合が多いです。」
ビジネスのためのアクセシビリティ
「全体のパイを増やす」意識
アクセスできる人が増える
アクセスできるデバイスが増える
PV増加を考えれば有用
海外展開を考えるのであれば考えるに然るべき観点
もちろんローカライゼーション(l10n)や国際化(i18n)の視点も大事
逆に諸外国の人が自分たちの作ったサイトをきちんと理解できるように作っているか?
日本語って複雑な言語ですよねyamanoku.icon
海外の事例
The Business Case for Digital Accessibility | Web Accessibility Initiative (WAI) | W3C
Apple
iTunes Uのアクセシビリティ対応
VoiceOver
Google
オートコンプリート機能
Youtubeでの自動キャプション
The internet is an unwelcoming place to the disabled — Quartz
イギリスの保険会社リーガル&ジェネラルグループは、障がいのある人々がアクセスできるようにウェブサイトを再設計したとき、オンライントラフィックを3ヶ月で 2倍にしました。12ヶ月以内に再設計のコストを回収しました 。
海外であるのと、ユースケース自体が強すぎるので参考にするには難しいが… yamanoku.icon
日本企業のやっていき
ヤフー株式会社はアクセシビリティ対応をなぜ始めたのか、どう進めているのか
すべての人にチームワークを サイボウズのアクセシビリティ
チャットワークはアクセシビリティに対応します
グリー:自社サイトにおけるアクセシビリティ方針提示までの流れ
サイバーエージェントが目指すマスメディアとアクセシビリティ
弁護士ドットコムがアクセシビリティ向上に本気で取り組むワケ
弁護士ドットコムニュースを聴く|瀬戸口光宏|note
スクリーンリーダー対応
freeeのアクセシビリティ、いまとこれから
ミツエーリンクス:自社のアクセシビリティへの取り組みの歴史
コンセント:わたしたちがアクセシビリティに取り組む理由
アルファサード株式会社はなぜアクセシビリティに取り組むのか
Backlog、スクリーンリーダー向けアクセシビリティの改善を実施 -- 視覚障がいを持つ方もより利用しやすいサービスへ
アクセシビリティとは「手段」である
こういう施策をしていると公言するのは同業他社と差別化を図れるが
手段が目的となる危険性がある
私達はやってってるぞアピールをするだけ
規格に対応するために「何が必要か」を取捨選択せずに不要そうなものだけを切り捨てる
そういうのは手段を目的化してしまっている
あくまでも真の目的を忘れてはいけない
どこの誰でもが平等に情報へアクセスしやすいという意識
エンジニア側でアレコレやるだけでは足りない領域に思える
それはアクセシビリティに限っただけの話ではないが…yamanoku.icon
むしろ他の職務とかを分け隔てなく参加できる領域だと思ってる
たとえばコンテンツ自体が導線を確保できていると
それに沿うデザイン設計にすればいいので特に苦労はない(はず)
「コスト」ではなく「チャンス」にしていきたい
全員が参加できて全員が良くしていける分野だからこそ
なにをやればいいのか
1. ページの内容がわかるページタイトルを記述する
2. 見出しやリストなどの文書構造をマークアップする
3. リンクテキストはリンク先が分かる文言にする
4. 情報を伝えている画像に代替テキストを提供する
5. 文字色と背景色のコントラストを確保する
6. ユーザーがコンテンツを拡大表示できるようにする
7. キーボードだけでも操作できるようにする
8. フォーム・コントロールのラベルを提供する
9. データテーブルの構造をマークアップする
10. エラーメッセージではエラー箇所を明示する
参照:https://webtan.impress.co.jp/e/2018/04/20/28538/page/4
「基本を忠実に守る」だけでアクセシビリティの担保となり得る
今すぐは無理でも施策を建てて「XX年をめどに改善を行う予定」と書くだけでも前向きに検討する材料になる
色々と案件が重なる中で難しいのもあるが
将来のマイルストーンだけでもあると嬉しい
直近のイベント
HTML5 Conference 2018
2018/11/25(日)
アクセシビリティ、はじめよう! 〜「できない」から脱出するための20(仮)のネタ🍣〜
「セマンティクスの作り方、これまで、今、そして未来」
UX Cafe: チームで取り組む!サイボウズのアクセシビリティ - connpass
2018/11/28(水)
誰がためにアクセシビリティ対応をするのか?
これの答えを各自で持ってもらうことを今日のゴールとしたい
そのほか
アクセシビリティ対応はどの時点でやっていくのがいいか
やっぱり何事も最初からやるのがいい
途中から1つずつ直していくのはしんどい事が多い
そういった設計にし直すことができないフェーズになっていたりする
もし途中からでも見直しをしたいのであれば
この機能をアクセシブルにしていきたい
この部分をアクセシブルにしていきたい
このページにおいてこういうユーザ層を獲得したい
といった部分的な改修をしていくのがオススメ
yamanoku.icon スタートアップが最初からその辺考慮してるの前例あんまきかんなーと思う
ビジネスとしてスピード感をもとめられているのもあるけど
アクセシビリティやってるサイトってどういうの?
国内で言えば地方自治体のサイトが頑張ってるらしいですyamanoku.icon
小田原市公式ホームページ〜市民の力で未来を拓く希望のまち〜
GitHub.iconアクセシビリティを重要視したサイトにはデザイン性がなかったりするが · Issue #42 · insidefrontend/issue1-ama
アクセシビリティやってないとクレームくるの?
現状、日本ではクレームを送ること自体はあまりないと思う
というのもそういったクレームを「どこにどう送ればいいか」の窓口がないため
ここで諦めてしまう
仮に送ったとしてもそれをどこまでどういうふうに対応するか、を明示してくれる連絡もあまりない
なのでクレーム(というよりは要望)自体はあるけど、声が届かない現状なのでありますyamanoku.icon
ただ海外だとそれが通用しないのは認識しておいてください…
ウェブサイトのアクセシビリティで裁判--米の視覚障害者が提訴 - CNET Japan
サイトのレイアウトが視覚障害者を差別?米の女性がAppleを提訴 - ライブドアニュース