frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Webアクセシビリティで気を付けたいこと6つまとめ

スポンサードリンク


スポンサードリンク


フロントエンドでアクセシビリティ
先日下記のtweetをしました。
https://twitter.com/funclur_01/status/1100216512198074369

フロントエンドでアクセシビリティは後回しにされがちですが、Webを使う人は様々な環境、様々な人がいるので重要です。
例えばaltの書き方は悩みどころですが、過不足なくというのがポイントです。また、文字となっていないものは基本的に過にあたるので女性の画像に女性というaltは不要です。

というわけで後回しにされがちなアクセシビリティですが、まずはこれを覚えてコーディングしておこうという事柄をまとめました。

altは過不足なく

tweetしたことになりますが、altの書き方の原則は過不足なくです。
altの大きな目的の一つは盲目の人がスクリーンリーダーで音声を読み上げたものを聞くことができることですが、無駄に冗長なaltを書いてしまうと聞きづらいだけになってしまいます。
逆に足りないと情報が不足して戸惑いが生じます。
画像中の文字をそのまま書くということにまずは注力しましょう。

TABキーの順序

ページをTABで巡回するユーザーは一定数います。
そのため順序通りフォーカスさせる必要があります。
基本的にはa要素やbutton要素がhtml順序通りフォーカスするので特段処理は必要ないのですが、JSの機能でモーダルウィンドウやスムーススクロールは注意する必要があります。

モーダルウィンドウ

モーダルウィンドウが開いてるときは、モーダル内のコンテンツとブラウザのボタンのみでフォーカスが当たるようにして、元のページはフォーカスさせないようにします。

スムーススクロール

スムーススクロールはTOPに戻るボタン押下後、ページ内で最初のフォーカス対象要素にフォーカスさせる必要があります。

JS無効可

今のご時世JS無効にしてるユーザーなんているの?って感じですが、情報だけ取得したユーザーがJS無効にしてないとも限りません。
JS無効にしても情報が閲覧できるようにロジックを組むことが必要です。

htmlの順序

ボックス内で画像→見出し→テキストの順序でデザインが上がってきた場合は、注意してください。
文書構造として正しいのは見出しが先に来てそのほかのテキストや画像が来なければいけません。
大切なのはhtmlをセマンティクスの観点で実装することです。そのため、そういうデザインになってたとしても見出し→画像→テキストの順序にhtmlはしておき、cssで順序を変えます。
flexで簡単に順序は変えられます。

img要素?背景画像?

img要素?背景画像?に迷うことがあるかもしれません。

  • 迷ったら読み上げ必要な画像か?
  • 動的に吐き出す場合システムがどちらを仕様としているか

を気にしましょう。
例えばアイコンなどはアイコン+テキストであればテキストがあるので読み上げは必要ないので背景画像にします。
しかし、アイコン画像だけであればimg要素にしてaltを入れましょう。
また、アイコンであっても装飾ではなくフリーダイヤルアイコンのように意味のあるアイコンもありますので、意味を考えて読み上げ必要な画像か?を判断基準としましょう。

コントラスト比

主にデザイナーが意識しなければいけませんが色のコントラスト比が低いと差がわかりづらく見にくいサイトになります。

取り急ぎ6個上げてみましたが、フォーム関連などまだまだアクセシビリティは奥が深いので、学んでいきましょう。

アクセシビリティを学ぶ上では下記の2冊が主力です。この2冊が頭に入っていればアクセシビリティについて問題はないと言えます。

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

  • 作者: ヘイドン・ピカリング,Heydon Pickering,伊原力也,太田良典,株式会社Bスプラウト
  • 出版社/メーカー: ボーンデジタル
  • 発売日: 2015/03/27
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る