[ Webridge Meeting SP22 ] Web アクセシビリティはじめの一歩に参加してきました〜。(^o^) #wmsp22

2016年10月1日（土）14:00-18:00 レグザムホール（香川県民ホール）大会議室で行われた [Webridge Meeting SP22 ] Web アクセシビリティはじめの一歩に参加してきました。

この記事の目次非表示

今日から始める Web アクセシビリティ、まずはココから！～ Web アクセシビリティはじめの一歩、キホンの「キ」～（植木真さま）
HTML5 で今日から使える WAI-ARIA ～Webアクセシビリティはじめの一歩、アリアの「ア」～（大藤幹さま）
今日からできるカラーデザインチェック～ Web アクセシビリティはじめの一歩、カラーの「カ」～（坂本邦夫さま）
感想

今日から始める Web アクセシビリティ、まずはココから！～ Web アクセシビリティはじめの一歩、キホンの「キ」～（植木真さま）

アメリカでは、Web アクセシビリティの実装が法律で義務付けられている。
日本でも、平成28年4月1日から「障害者差別解消法」が施行された。
障害がある人のためだけでなく、デバイスの多様化や多種多彩な使われ方に対応する必要がある。
高齢のユーザーでも使いやすく、さらにはユーザー全般のユーザビリティーを向上する。
超高齢社会＋障害者差別解消法＋2020年パラリンピック
ユーザー×利用環境×場面・状況で多種多彩なシチュエーション。
アクセシビリティは Web コンテンツの品質基準
ガイドラインには３つのレベルの達成基準がある。A, AA, AAA

見出し

ユーザーは文章の全てを読んでいない。
目の動きは F 字型。
見出しレベルはスキップしないほうが良い。
h1 要素はページ内でひとつにする。

リンク

「ここをクリック」や「こちら」ではリンク先の内容がわからない。
このストレスがサイトの印象を悪くする。
リンクテキストとリンク先の大見出しは同じにする。

画像の代替テキスト

画像に文字がある場合はそのまま代替テキストにする。
グラフの中もテキストに書く。
alt 属性がないとファイル名やリンク先の URL を読んでしまう。
画像と隣り合ったリンクテキストは一個の a 要素で囲む。この場合、alt の記述は不要となる。
figcaption 要素は写真用のキャプションを入力できる。

文字サイズ

文字サイズ変更ボタンは不要。
音声読み上げ用ボタンは不要。
色合いの変更ボタンは不要。
読みやすい文字サイズは人それぞれ。
コンテンツは拡大できるようにする。
老眼世代には標準文字サイズを大きく

フォーム

label 要素でラベルと入力エリアを関連付ける。
プレースホルダーに項目名を入れない。
エラーはエラーが起こった場所を明示する。
どういうエラーが起きて、どうすれば良いのかを伝える。

色

坂本様のセッションにて。

キーボード操作

フォーカスの移動・リンクを押すなどの動作がキーボードでできるように。
フォーカスの現在位置がが表示されているか？

ページタイトル

前後の文脈がなくても意味がわかる
簡潔である
「ページタイトル | サイト名」が良い。

WAI-ARIA

タブなどはソースコードからどんな構造か判断できない。
role 属性はデフォルトの役割を上書きする。

HTML5 で今日から使える WAI-ARIA ～Webアクセシビリティはじめの一歩、アリアの「ア」～（大藤幹さま）

WAI-ARIA とは、Web アプリケーション向けの要素と属性の追加セット
role 属性を使い、既存の要素を上書きして別の要素に変更する。
追加される属性は３種類。HTML5 ではすべての要素に使用できる。
- role 属性
- aria-**** 属性
- tabindex 属性

tabindex 属性

インタラクティブな要素は全てフォーカス可能にする必要がある。
tabindex=”0” フォーカスのみを可能にする。
tabindex=”-1” フォーカスできなくする。

role 属性

ランドマーク・ロール（nav, main とか）
文章構造ロール
ウィジェット・ロール（部品）
抽象ロール

ランドマーク・ロール

ランドマーク・ロールは全８種類
- banner
- main
- contentinfo
- navigation
- complementary
- form
- search
- application

文章構造ロール

以下抜粋
- document
- img
- separator
- heading
- region
- article
- list
- listitem
- presentation = 要素から意味・役割を削除する。見た目だけ。継承される。

ウィジェット・ロール

以下抜粋
- tree = Windows エクスプローラーみたいな表現のときに使う。

aria- 属性

関係を示す属性
ウィジェット属性
ライブ領域属性（リアルタイム更新を知らせる）
ドラッグ＆ドロップ属性
aria-label 属性 = テキストリンクにラベルを付けられる。
aria-labelledby 属性 = 他の要素をラベルとして使用する。

まとめ

WAI-ARIA はすぐにでも導入可能
属性を覚えるだけでオッケー
アクセシビリティの問題もかんたんに解決できる機能がある
使わないのはもったいない
普通のブラウザでは影響がない。アクセスビリティ API 利用時のみ影響が出る。

今日からできるカラーデザインチェック～ Web アクセシビリティはじめの一歩、カラーの「カ」～（坂本邦夫さま）

老眼が進み 12px のフォントサイズに殺意を覚える
ウェブサイトは目で見ている人が多い。
見えることには個人差がある
- 視力の衰え・加齢による目の変化
- 疾病などによる個人差
- そもそも色を識別する錐体細胞の数や働きが同じとは限らない。
色々な見え方
- ロービジョン = 全盲ではないが極端に見えにくい
- 色覚の違い。日本人の男性の５％は色弱者。
配色の基本的な考え方
- 色だけに頼らないようにする
- 多くの人に見えるように作る
- 小さい字・薄い字は読みにくい
- 資格での閲覧を配慮しないのは、機会損失の極み
客観的基準としての基準
- JIS X8341-3 色に関する基準
- 色だけで区別しないこと
  - 「はい」は緑のボタンをクリックしてください。など
  - 色と形状とテキストをセットで使う
  - 文中のテキストリンクは文字色が青いだけじゃなくアンダーラインを引くとか。
  - 色分けされたグラフなどは使いにくい。
  - モノクロにしてみて判断できない物はアウト。
- 読みやすくすること
  - コントラスト比が高いほうが見やすい
  - カラー・コントラスト・アナライザーというソフトがある。
  - コントラストは最低 4.5:1 以上。
  - 高度（AAA）レベルのコントラスト比は 7:1 以上。
  - 実務的には全て 6:1 を目標に！
  - オレンジと緑はコントラスト比が出にくい。
  - Google など有名なサイトでは、モバイルサイトの方がコントラスト比が高い
    - 外光などの屋外環境に影響されやすい
    - 文字が物理的に小さい
    - フィルムを貼っている
- ピカピカさせない
  - ポケモンフラッシュはだめ
  - 閃光は一秒間に三回まで？
  - 判断基準が難しいので閃光は使わない
カラーユニバーサルデザイン推奨配色セット
- 文字で使うとコントラスト比が足りない場合があるので注意
- 色分けとか背景色などに使うと良いかも。
様々なツールでチェック
- Illustrator, Photoshop で色に関するチェックができる。
- 「色のシミュレータ」というアプリ
- (un)clrd という Chrome 拡張機能がある
- ChromeLens という Chrome 拡張機能がある
- 実際に目を細めてみる。かすみ目や老眼のエミュレーション。
- 後から直すと大変
- デザインの要件とする？コントラスト比とか。
まとめ
- 見え方と環境は一定ではない
- 最低限の基準を満たしたサイトに
- デザインと配色チェックを習慣づける。慣れるとわかる。