WordCamp Tokyo 2016の感想 (1) －Webアクセシビリティのお話。
先日、東京で行われたWordCamp Tokyo 2016に参加してきました。
WordCampへの参加は初めてで、なおかつWordPressを触っていないという素人っぷり。
先に感想を言うと、普段WordPressを触っていなくても勉強になりました。
というか何からでも学ぶことってあると思うんですね、異業種からだって学ぶことはあります。
学ぼうという気持ちがあれば、必ず発見や気づきがあると思います。
話が脱線しましたね、すみません。
特に印象に残った2つのセッションのうちの1つについてお話しします。
（もう一つは近いうちに書きます）
「WordPressでも意識したいアクセシビリティ ～「優しいウェブサイト」作りをはじめよう～」
このセッションのスピーカーは横田 東母子さんと森田 壮さんです。
スライドはこちら。
私は「Webアクセシビリティ」というワードを聞いたことはあるし、
なんとなくこんな感じだよね？ってぼんやりと知っているつもりでいました。
Webアクセシビリティとは、一言で言うとこういう事のようです。
Webアクセシビリティとは、主に高齢者や障害者など身体に障害や不自由のあるWeb利用者に配慮したホームページなどのWebサービスを提供し、アクセスした誰もが容易に情報を共有できる状態にあることをいいます。
Webアクセシビリティとは - JAWAA
なんとなく理解できますよね、ああその通りだなと。
ですがこのセッションでは、「障害のある人のためだけに特別なことをするのがウェブアクセシビリティなのか？」という問題提起がされました。
例えば、
［急いでいる・慌てている時］
・ボタンが小さくてタップしにくい
・見出しがなく探したい情報が見つけられない
［怪我をした・具合が悪い時］
・キーボードやマウスが使えない
・入力操作やタップ操作に時間がかかる
［年を取った］
・文字が読みずらい、見づらい
・理解に時間がかかる
などなど、上記のような状況は誰にでも起こりうることですよね。
このセッションでのWebアクセシビリティとは「障害のある人のためだけに特別なことをする」のではなく
「全ての人がいつでも・どこでも・どんな状況でも目的の情報にたどり着き、利用できるようにする」ことなのです。
じゃあ具体的にどうするのか？（詳細はスライド37ページ以降をご覧ください）
［見出しを正しく使う］
・見出しで構造化を意識する
・目的の情報に辿り着けるようにする
［イメージの説明］
・alt属性の内容を代替えとしてちゃんと機能するよう考える
・装飾のための画像であればaltは空のほうがいい
・CSSの背景画像は装飾以外で使わない（私はこれアウトのあります。改善します。）
［リンクの記述］
・リンク先の具体内容を予測できる表現にする
「こちらから→」などという文言はリンク先に何があるのかが分かりませんよね。
・キーボードで操作する場合もあるのでフォーカスを消さない
［読みやすさ（リーダブル）］
・行間は1.5以上が望ましい
・余白を効果的に使用する
・簡潔に読みやすい文章にする
［賢明なカラーを使う］
・色だけで情報を伝えない、操作させない
・背景色と文字色のコントラスト比に注意する（装飾や写真などは除く）
・色の反転やグレースケールで使われる場合も想定する
［バリデート］
・きちんとバリデーターに通す
これは当たり前ですが、当たり前なことこそしっかりやりましょう。
ざっくりとですがこんな感じです。
Webアクセシビリティって、Webアクセシビリティだけで成り立ってる訳ではないと思うんですね。
ユーザビリティとかコンテンツの充実とか、適切なコーディング、伝えるデザインなどなど。
それぞれで最善を尽くせば自ずとWebアクセシビリティを意識したものになるんじゃないかな？
とは言っても、Webアクセシビリティを意識することは重要なので、今後当たり前のことにしていきたいですね。
せっかく情報を発信してもユーザーに届けられないのであれば仕方ありません。
勉強になりました。
