【メモ】!important #04 -特盛!アクセシビリティスペシャル-
先日開催されたセミナー、!important #04に参加できたので、ざっくりメモ。
とても勉強になったセミナーで、本当に特盛の内容でした。
後日もう少し整理してレポートにしたいです。
- アウトライン
- あなたの価値を高めるWebアクセシビリティ
- テキストは重要
- 制作時、ほんの少しの工夫で確保できるウェブアクセシビリティ
- より多くの人へ届けるために、Webコンテンツで「ちょっと」気をつけたいこ
- ユーザビリティテストのすすめ
- パネルディスカッション
アウトライン
- あなたの価値を高めるWebアクセシビリティ
- 制作時、ほんの少しの工夫で確保できるウェブアクセシビリティ
- より多くの人へ届けるために、Webコンテンツで「ちょっと」気をつけたいこと
- ユーザビリティテストのすゝめ(Designing Accessible Web Content for Older Users)
あなたの価値を高めるWebアクセシビリティ
アウトライン
- アクセシビリティって?
- 仕事と関係あるのか?
- どこから取り組めば良いの?
アクセシビリティって?
仕様書は見てはいないが感覚的に意識している 55%
障碍者の方に何かするもの=アクセシビリティ?
→そうではなんじゃない?
アクセシビリティガイドライン
要は、当たり前のことを当たり前にしようねということ
- モバイルガイドラインとかなり重複する
幅広い状況でのヒューマンリーダビリティ
=niariアクセシビリティ
→全うなデザインをしようとしていると、だいたい達成している
-
マシンリーダビリティはWebならではのアプローチ
-
ヒューマン…→ひとつのものでは対応範囲に限界がある
-
マシン…形を変えても対応できる→ガイドラインではA(必須)
「わけてある」ことで選択肢が広がる→Webの特徴モニター、キーボード、マウスと分かれている
伝わる可能性が一番高いのはテキスト
テキストになっていれば
仕事と関係あるの?
お金にならない?
→マーケティングに効果的、品質向上に役立つ
- 流入を増やす、入り口をひろくする
- 制作側でできるマーケアプローチ手段
アクセシビリティは追加コストになる?
将来に対応するため
新しい技術、マルチデバイスにも対応
例)Flash
先にやろうと決めておく
あとから対応しなおすと大変
JSによるUI
悪セ氏ぶるなじっそうと検証の工数をみる
テキストは重要
logmi
動画をカキオコすサイト→テキスト→検索結果にあがる
テキストがあると翻訳ができる
カーリル
図書館の蔵書を横断検索できるサイト
→てきすとで公開されているからスクリーディングできる
海外ではアクセシビリティは法律で義務化
日本→障碍者差別解消法
みんなの公共サイト運用ガイドライン
→需要がある!
どうやって取り組むの?
みんな取り組んでいない?
→Webに載せる行為そのものがアクセシビリティ
→みんな取り組んでいる
Webは可能性を広げる、選択肢が広がる
「アクセシビリティとはWebそのものなんじゃないか」
アクセシビリティはゼロか1ではない
できることから
方針をたてる!
勝手にやると…
やる気のある人、やりたくない人、興味ない人
人に左右される
制作時、ほんの少しの工夫で確保できるウェブアクセシビリティ
KDDI Web Communications 神森さん
JIMDO、 goat、Canva
事業者側からのアクセシビリティの考え方
「プロの仕事って何?」
- Webサイト制作のいま
- 企業がなぜ制作会社に依頼するのか
プロに求めてること
ガイドラインを制作するときにワークフローを見直し
- HTMLの仕様に沿っているか バリデート
- テンプレートレベルでの簡易チェック
- ツールをうまく活用する
Photoshopで色覚の簡易チェックができる
現場からの吸い上げは時間がかかる
→日々の仕事に忙殺されている
アクセシビリティの浸透はトップダウン
→経営者は未来をみている
アクセシビリティの確保は、顧客との接点を増やす
→社内のアクセシビリティ事情は?
うちは特に設定されていない
コーディングルールなるものはある
より多くの人へ届けるために、Webコンテンツで「ちょっと」気をつけたいこ
澤田 望さん/SAWADA STANDARD DESIGN デザイナー
大切なことは多様性を知ること、受け入れること
コンテンツのアクセシビリティ
なぜこのお話をするのか?
- Webアクセシビリティのレイヤーの話
- レイヤーの1つでも崩れていると全体に影響し、結果うまく伝わらない
- コンテンツも重要な要素の1つ
- アクセシブルなCMSやワイヤーフレームの増加
- 制作者が意識しなくてもある程度アクセシブルになる →つまり、より重要になるのがコンテンツ
位置関係で表現しない
どうすればアクセシブルに?
→具体的に。位置関係が分からなくてもボタンのラベルが分かれば操作できる
レスポンシブでは特に注意
色だけに頼らない
- みんな同じ条件で色を識別できるわけじゃない
- スクリーンリーダーは色情報を読み上げない
- 図形やテキストで表現
- WEI-ARIA arealabel?
ラベルの名称を統一する
- 同じコンテンツだと思わなければアクセシブルではない
- 情報にたどり着けない=アクセシビリティ低い
altの付け方
alt…伝える必要のある情報はすべて伝える
伝える必要ない情報は控える 却って混乱する
同じ写真でも用途によって書き方を変える
電話の相手に画像を伝えるつもりで書くのがコツ
ユーザビリティテストのすすめ
インフォアクシア植木サン
このセッションは、今年3月に米国で開催された「CSUNカンファレンス」で登壇したセッション「Designing Accessible Web Content for Older Users」をバージョンアップしてお届けします。
older users 高齢者やシニアというわけではない
older usersがWebを使うときの特徴
- 身体能力のおとろえで使うことが困難になる
- 面倒くさい
ユーザーのコンピュータースキルはあなたが思う以上に低い
- Webの仕事をしている時点で一般usersとは違う
- userのニーズの推測は失敗の要因の1つ
Older users対象のユーザーテストから分かったこと
アクセシビリティの達成基準
A(シングルA)…一番基本
AA(ダブルA)…世界基準
AAA…とても高い基準
ページタイトル
A
- Older usersは検索大好き
- PDFのタイトルも検索結果にあがる
- .pdfも検索対象!
テキストリンクの文言
「詳細はこちら」、とか「続き」とかののテキストリンクは、
- 遷移先の内容がよく分からん
- 前後を読んで把握しないと行けないからストレス
- 人にもマシンにも不親切 →テキストリンクの内容は具体的に
見出し
Older usersは見出しを拾い読みする
適切でない見出しは飛ばされてしまう
色のコントラスト
AA
見えづらいナビゲーション
http://egao-saku.com/
カラーコントラストアナライザー
文字サイズ
AA
支援技術なしで200 %に変更できるように
Older usersが押しているとこをまだ見たことがない
アイコン
- ユーザーにとってなじみのあるものか?
スペースの節約
- カルーセルは使うべき?
- 切り替わるスピードが速いのに文字がたくさんあると全部読めない
- 画面を拡大して見るユーザーは特に
- 停止ボタンを用意しているからって全て解決なわけではない
- スライドのページネーションが小さいのもストレス →サムネイルなどにして大きくしたり
ターゲットの大きさ
- 小さいとストレス
- 一度で押せないから
- 隣のターゲットとの距離が近いのもストレス
- 誤動作に繋がりやすい
エラーメッセージ
- エラーメッセージをみてもどう修正すればいいか分からないのが多い
- エラーメッセージの文言まで精査できていない
動画のキャプション
言葉だけを鵜呑みにしないこと
- 特に"Older users"
- 無理して「大丈夫です」といってしまう
- ユーザーの言葉は尊重したいけど、客観的に動画や画面操作も含め判断する
パネルディスカッション
最近リニューアルされた福岡市Webサイトの素直な感想
https://www.city.fukuoka.lg.jp/
気になるところ
- 文字サイズ変更ボタン
- 大 押し続けることができるのはいい
- 大きくしたときに、小と中どちらを押せば良い?
- 標準とかほしい
- カルーセルはもういいかも
- 止めるボタンがあるのはいい
- アクセシビリティ方針がふったーにある
- ガイドラインを達成しているかといって、アクセシビリティを満たしているかどうか…
- スマホサイトへボタンの挙動が?
- PCでスマホサイトへボタンを押すと「スマホで見てください」アラートが出て意味分からない
- 本文へジャンプボタンは必要?
- HTML5でmainタグが出てきた、land mark roleつけておけば、マシンリーダーで同じことができる
- アクセシビリティの取り組みに対象外とするものがある
- 2010年以降は、適応外の要素があると、部分適応であって、(全)適応ではない
- アクセシビリティの試験結果は2010以前の古いものかも
いいところ
- すでに試験を実施しているところが素晴らしい
- みんなの公共サイト運用ガイドライン(2016年版)
- 使えないと感じたときの案内がある
- 画像とテキストにまとめて1つのaタグにしている
- 画像とテキストそれぞれにすると、キーボードでの移動が2倍かかる
どのスクリーンリーダーをサポートするかの判断
最新のHTML5で対応していない古いスクリーンリーダーへの対応はどう考えればいい?
- いま過渡期
- 最新技術の順応にスクリーンリーダーが全て追いついていない
- どこまで保証、対象にするか
- ポリシーを決めるしかない
- でもノリで決めない
- 実装を確認した上で決めるのがプロの仕事
- 最適な落としどころを探す
- 1つの判断基準 WAIC アクセシビリティサポーテッド情報
検索結果にpdfが出たときのタイトルはどこからひろってきているのか?
- 必ずしもPDFのファイル名やプロパティの中を拾っているわけではない
- 植木サン捜索中
- PDF内のテキストを拾ってきてるっぽい
- PDFのテキスト化も大切
制作のときにアクセシビリティの抜けを防ぐには
- 最後に一気にチェックするのは辛い
- はじめに方針を立てる
- 実装チェックリストをつくる
- 参考:http://waic.jp/docs/jis2010/test-guidelines/201211/icl-index.html http://jis8341.net/shiken.html http://jis8341.net/shiken_aa.html
文脈に関係ないaltの記述はどうすればいい?
- altを空にすると無視する
- 空やのにいちいち読み上げられるとうっとうしい
- 真っ当な作り方をしてれば、画像がありますということをaltでいれてもいいのでは
- 賑やかしや装飾にaltをいれない→altの付け方に悩むなら、作り方を見直すほうがいいのでは
- コンテンツの理解に差し支えないときはaltが空でもOK
- コンテンツに差し支えがあるなら空でもOK
やっててよかったと思うとき 仕事編
- 反応をいただけるとき
- クライアントの満足が得られたとき
- 成果があがったとき
- ユーザーの役に立ったとき