UWEB

本文まで飛ばす

誰にでも優しいWebサイトの定義と気を付けるべき3つのポイント

誰にでも優しいWebサイト

こんにちは。やまぐち なな(@nana_winter_web)です。

UWebを始めてから、たびたび、「誰にでも優しいWebサイト」という言葉を使ってきました。
誰にでも優しいWebサイトを増やしたくてUWebを始めたといっても過言ではありません。

ただ、誰にでも優しいサイトの定義がわからないままだと、誰にでも優しいWebサイトは作れないと思います。
そこで、誰にでも優しいWebサイトとは何なのか、どうすれば、そのようなWebサイトを作ることができるのかを紹介します。

誰にでも優しいWebサイトとは。UWebの考える定義を紹介します

「年齢、障がいなどに関わらず、どのような言語、地域、環境であっても内容がわかるWebサイト」という定義で使用しています。

一般的には、アクセシビリティに配慮したWebサイトと言うことや、「どのような人でも利用することができる」という説明、定義が多いように思いますが、利用することができても、内容がわからなければ意味がないので、内容がわかるという定義にしています。

また、アクセシビリティといわれて何のことかわかる人は少ないですし、幅広い人に知ってほしいことなので、あえて、誰にでも優しいWebサイトという言葉を使っています。

以下、Webサイトを略してサイトと記載します。

誰にでも優しいサイトへ近づけるポイント

見た目だけがきれいなサイトはHTMLがぐちゃぐちゃでもCSSで何とかすれば作ることができます。
しかし、HTMLがぐちゃぐちゃだと、誰にでも優しいサイトを作ることができません。

HTMLをきれいに作り上げることで、目が見えない人や検索エンジンに内容が適切に伝わるようになり、体が不自由な人でも使いやすくなります。
ルール通りに書いていけば自然ときれいなHTMLになるので誰にでも優しいサイトを作るうえで一番手を付けやすいところなのではないか思います。

CSSJavaScriptの書き方を工夫することで、目が悪い人が読みやすいようになり、体が不自由な人がサイトを使いやすくなります。

誰にでも優しいサイトを作るために、最低限の気を付けるポイントは大きく分けて下記の3つです。

  • キーボードで操作できるようにする
  • スクリーンリーダーを使用しているユーザーに配慮する
  • 文字サイズを変更可能にする

もっと気を気を付けるべきポイントはもっとあるのですが、今回はわかりやすいところだけ紹介します。

キーボードで操作できるようにする

キーボードでサイトを操作することができれば体が不自由でも、マウスが壊れてしまってもサイトを利用することができます。

キーボードで操作できるようにするために考える必要があるのは下記の3つです。

  • クリック可能なところはすべてTabキーで移動できるようにする
  • Tabキーで移動したときに選んでいるところをわかりやすくする
  • hoverで子メニューが開く場合はTabキーでfocusしたときも開くようにする

それぞれ詳しく説明していきますね。

クリック可能なところはすべてTabキーで移動できるようにする

クリックしたらメニューが開くところなどは、Tabキーでフォーカスして、Enterキーを押してもクリックしたときと同じ動きになるようにする必要があります。

Tabキーで移動できるのは、aタグ、buttonタグ、inputタグです。

リンクはaタグを使いますが、spanタグをクリック、もしくはタップすると「メニューが開閉する」とかはやりがちなので、buttonタグを使ってフォーカスできるようにすると誰にでも優しくなります。

Tabキーで移動したときに選んでいるところをわかりやすくする

せっかくTabキーで操作できるようにしても、どこを選んでいるかわかりにくければ意味がないので、1度Tabキーで操作してみて、わかりにくいと感じたらわかりやすく変えましょう。

Tabキーで選んでいるところはCSSの疑似クラスでわかりやすくすることができます。


セレクタ:focus{
/* 内容 */
}
Chromeのデフォルトのアウトラインは薄い青色の細いアウトラインです。

デフォルトのアウトラインはGoogle Chromeでは、画像のような、青い細めのアウトラインがついています。
ブラウザによってデフォルトのアウトラインのデザインは異なり、Internet ExplorerMicrosoft Edgeは青色ではないのですが、細くて見にくく、デザインが合うサイトは少なそうというところは共通しています。
おしゃれとは言えないアウトラインのデザインも、サイトに合わせて変えると見やすくおしゃれな印象になります。

アウトラインだけだと、そこを選んでいる感じが少ないので、アウトラインのほかに、hover時と同じデザインにしておくが多いです。

UWebでは、基本的にアクセントカラーのアウトラインと色が少し薄くなるように指定しています。

ユーウェブのグローバルナビゲーションはアウトラインを消して太めの下線が表示されるようにしています

ごくまれにアウトインを消す場合がありますが、その時はどこを選んでいるかがわかりやすくなるように、より気を付けています。

上の画像はTabキーでfocusしたときのUWebのグローバルナビゲーションです。
hover時と同じデザインですが、色が薄くなるとかではなく、そこを選んでいるというのがわかりやすいデザインなのでアウトラインを消しています。

スクリーンリーダーを利用しているユーザーに配慮する

目が見えない人や、目が悪い人はスクリーンリーダー(音声ブラウザ)というものを使ってサイトを聞いているので、耳で聞いて内容を理解できる必要があります。

スクリーンリーダーとは

画面に表示されている内容を読み上げてくれるソフトのこと。

パソコンだと、Macを使っている人はVoiceOverというものがデフォルトでついています。
Windowsの人は、有料のソフトと無料のソフトがいろいろありますが、有料のソフトはどれも数万円と安くはありません。
自分のサイトがスクリーンリーダーでどのように読み上げられるのか知りたい時はNVDAというオープンソースの無料ソフトを利用しています。

一部にサイトでメインで使用している言語以外を利用する場合は、正しく読み上げられるようにする

ユーウェブのグローバルナビゲーション。一部のみ英単語を使用しています。

VoiceOverなど、一部のスクリーンリーダーでは、上の画像のようにhtmlタグに付けたlang属性の値と違う言語の単語が使用されている場合、読み上げられないことがあります。

単語が抜けるだけで内容がわからなくなるので、日本語がメインのサイトの場合、英単語などはspanタグなどを使い、lang属性を付け、正しく読み上げられるようにすると、誰にでも優しいサイトに近づきます。

自動出力のところはlang属性を付けるのが難しかったりするので、自分で入力するところから変えていけばいいのではないかと思います。

英単語をすべて大文字で表示する場合は、CSSで大文字に変換する

デザイン的にすべて大文字で表記する場合、HTMLにすべて大文字で入力するのではなく、CSSで大文字に変換すると誰にでも優しいサイトに近づきます。


See the Pen Accessibility by nana (@nana_winter_web) on CodePen.

上記のコードはどちらもTopと表示するためのコードです。
上のpタグはTopとすべて大文字で入力しています。
下のpタグはHTMLにはTopと最初の文字のみ大文字で書き、CSSで大文字に変換して表示しています。

どちらも表示されている結果は同じですが、上のTopは一部のスクリーンリーダーでは、「ティー・オー・ピー」のように一文字ずつ読み上げられてしまいます。
一方、下のコードは、一文字ずつ読み上げられるスクリーンリーダーでも、「トップ」と読み上げられます。
目で見ていたらHTMLで大文字にしていようが、CSSで大文字にしていようが関係ありません。
しかし、アルファベットを1文字ずつ読み上げられてどんな単語か考えずにわかる人は少数ですし、単語として読み上げられた方がわかりやすいです。

今のところ、HTMLなど読み方が一文字ずつ読み上げられた時と変わらない単語はそのまま書いています。

画像のalt属性をどうするか

VoiceOverなど一部のスクリーンリーダーは画像のalt属性を飛ばしてしまいます。

今後どうするかは迷っているのですが、画像がないと内容がわからない場合、alt属性は入れずにスクリーンリーダー用テキストをalt属性の代わりに利用しています。
alt属性のみだと、alt属性を読み上げられないスクリーンリーダーで内容が分かりません。
かといってalt属性とスクリーンリーダー用テキスト、両方入れると、alt属性を読み上げるスクリーンリーダーを使っている人にとっては同じ内容が2度読み上げられることになってしまいます。
画像の説明がなくても、同じ内容を読み上げられても、誰にでも優しいサイトとは言えないので、他の方法を思いつくまでは現状維持の予定です。

スクリーンリーダー関連の汎用クラス

汎用クラスはデザインが変更になった場合に面倒なので使わないのですが、すべて大文字に変換するクラスと、スクリーンリーダー用テキストのクラスはあらかじめ用意しています。


.upper{
text-transform: uppercase;
}

大文字にする必要がなくなったときは、内容が変更になっている場合が多いので、HTMLを変更するついでにクラスを取った方が楽で管理がしやすいので汎用クラスを用意しています。


.screen-reader-text{
position: absolute;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
width: 1px;
height: 1px;
}

スクリーンリーダー用テキストは目が見えている人には必要がないので、画面から消しておきます。
しかし、displayvisibilityで消してしまうと、スクリーンリーダーでは読み上げられません。
なので、とにかく小さくしてclipで切り取り、デザインには影響しないようにします。

overflowhiddenにし忘れると謎の隙間ができることがあるので、忘れないようにしてくださいね。

NVDAは優秀

NVDAは、lang属性がなくても、HTMLにすべて大文字で入力しても、わかりやすく読み上げてくれますし、alt属性も飛ばされません。
NVDAでサイトの聞こえ方を確認する場合は、そのほかのスクリーンリーダーでは「思っている通りに読み上げられないかもしれない」と思った方が良いかもしれません。

文字サイズを変更可能にする

ブラウザの設定を変更すると、サイトの文字サイズを大きくすることができます。

font-sizeの単位をemrem%パーセント以外で指定してしまうと、ブラウザで文字サイズを変更しても、サイトの文字サイズは変わりません。

拡大することで、大きく表示することができますが、ユーザーがわざわざ拡大表示する必要があり、誰にでも優しいサイトということはできません。

文字サイズ関連は語りだすと日付が変わってしまうので、また今度詳しく書きたいと思います。

サイトのターゲットによってどこまで対応するかを決めないといけない

目が見えない人が見る可能性がないサイトは0なので、スクリーンリーダーで内容がわかるようにしておく必要があります。
同様に、目が悪い人や体が不自由な人が見る可能性がないサイトも0のため、ブラウザで文字サイズを変更することができるようにしておく必要があります。

内容をわかってもらう必要がないのであれば、対応する必要はありませんが、そのサイトにたどり着いたなら、そのサイトにその人にとって必要な情報が載っていることがほとんどです。
誰にでも優しくしないということは、情報を求めている人を切り捨てる行為に等しいとわたしは思います。

「どのような言語でも内容がわかる」と定義にありますが、英語がわからない人がサイトのターゲットならば、全ページが英語で表示できるようにする必要はないと考えています。
もちろん、できるなら対応した方が良いのですが、予算に限りがある中で、ターゲットではない人のために時間や予算を割くのはいくら誰にでも優しくするためとはいえやりすぎなのではないかと思います。

最近は、翻訳技術も発達してきたので、制作側が対応しなくてもある程度は賄うことができますし、便利な機能や機械が補うことができないところを誰にでも優しくする方が、制作側やクライアント、ユーザーにとっても良いのではないかと思います。

まとめ

今までに作ったサイトを誰にでも優しいサイトにしようと思うと大規模な改造が必要になることもあるかもしれません。
新しく作るサイトのメインの言語が日本語なら、英単語だけspanタグをつけ、lang属性をつけるということは今日からでもできるのではないかと思います。

できることから変えていけば、それだけで誰にでも優しいサイトに近づきます。
誰にでも優しいサイトにが増えますように。

記事が気に入ったら
シェアしてね

このページのトップに戻る