WordCamp Tokyo2017 #wctokyo

アクセシビリティとは
高齢者や障碍者なども含めたあらゆる人が、どのような環境(うるさい場所や、暗い場所、逆に明るい場所など)においても柔軟にWebサイトを利用できるように構築することを考慮する場合に使われる。
コンテンツを読み上げ機能で聞いている人もいる。
500%に拡大して見ている。マウスで移動させながら見ている
白い背景に黒い文字だと眩しくて見づらいので反転させている
webは凄い。自分の好きな形で情報を得ることが出来る。
バスの表示も黒背景に白文字、筆談も出来ると言う表示が現れている。
twitterも最近夜間モードを提供し始めた。
アクセシビリティ
文字サイズ変更ボタンはいらない。他のサイトに行くと反映されることはない。そもそもブラウザ側で実装されている。
動画にはキャプションをつける。聴覚障碍のためのものだと思われがちだが、キャプションを入れることでコンテンツに集中することが出来る。Facebookの動画で12%閲覧時間が伸びた。
alt属性で代替テキストを入れる。等。
Webアクセシビリティ 逆引きガイドライン
webページを構成要素からどういうことをやったらいいのかを公開している。
健常者にとっても、聞こえづらい、見づらいということがある。
障碍者、高齢者への配慮により、エレベーター・エスカレーターは法律で義務付けられた結果出来たが、障碍がなくても使っている。社会的に弱い立場へ提供しているサービスは、健常者にとっても非常に有益になる。
アメリカではアクセシビリティの配慮の無さから、法律を根拠に訴訟、苦情申し立てが起きている。
米国でウェブアクセシビリティ訴訟は増加の一途 – アゴラ – https://goo.gl/QC4ttV
国連障碍者権利条約により少なくとも公的機関はアクセシビリティ確保は当たり前になっている。
一方日本は、障碍者差別解消法が出来た。企業の努力義務によってアクセシビリティを確保していく時代になってきた。
アクセシビリティの評価は以下のツールで確認することが出来る。
総務省|「みんなの公共サイト運用ガイドライン(2016年版)」及び「みんなのアクセシビリティ評価ツール:miChecker Ver.2.0」の公表 – https://goo.gl/UoyMJv
企業はアクセシビリティをやることによって、儲かる。マーケティングにも効果的。アクセシビリティを確保することで、単純にお客様の接点が増える。
いま製作者でアクセシビリティが出来る人が少ないので、案件を取ることが出来る。
実際のコーディングについて
role属性aria属性を使うことで、メニューを明確にすることが出来る。(障碍者用読み上げソフト(スクリーンリーダー)でメニューの位置を取得することが出来る)
レイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】 – E-riverstyle Vanguard – https://goo.gl/gokMa
写真を使用する時
alt属性の場合 alt=“写真:踊っている人”という具合に、説明文の前にコロンをつける
HTML5では<figcaption>も使えるので、併用していくのが有効
<figcaption>-HTML5タグリファレンス – https://goo.gl/RjBauv
キーポートフォーカス(Tabキー)で見えているかどうかを確認
文字と背景色にいて4.5:1を確保する。
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認 – https://goo.gl/s4NrkC