みなさんこんにちは！
今日はホームページを作る上で知ってて損はない、今回はWEBアクセシビリティについて解説していきたいと思います＾＾
WEBアクセシビリティって何！？
皆さん、WEBアクセシビリティという言葉を聞いたことはありますか？
正直私は聞いたことはあったけど、言葉の意味まで気にしたことなかったです。
ウェブアクセシビリティとは、高齢者や障害者を含め、誰もが ホームページ等で提供される情報や機能を支障なく利用でき ることを意味します。
総務省 情報流通行政局 情報通信利用促進課
目が見えない方や日本語がわからない方にも正しい情報を提供できるように様々な工夫がされています。
特に自治体のホームページはいろんな方が情報を取得するためにアクセスしますよね？
私が働いている職場でも自治体のホームページを作成しているので、このアクセシビリティに十分注意しています。
アクセシビリティのための機能
誰もが支障なく情報を取得するために、工夫しているホームページが最近多くなっています。
どんな工夫をしているか私が大好きな札幌市のホームページを使って少しご紹介します！
※私の働いている会社で作っているわけではございません！
▼札幌市ホームページ
https://www.city.sapporo.jp/
①音声読み上げ機能
目の見えない方が情報を取得できるように、ホームページの情報を音声で読み上げてくれる機能があります。
基本的にはテキストを読み上げますが、画像はaltを読み上げます。
コーダーさんが適切な画像の説明をaltに入れているかどうかを、結合テストの際にchromeのデベロッパーツールで確認します。
1つ1つ全部の画像を確認するので…結構大変です＞＜
②文字サイズ拡大縮小
小さい文字が見えにくい人のために文字を拡大する機能があります。
上の画像と比べて文字が大きくなっていることがわかります。
結合テストの時は文字を拡大したいときにレイアウトが崩れていないか確認します。
③背景の色を変更する
色覚異常がある方がある方が情報を取得しやすいように、背景の色を変更できる機能です。
色覚異常とは正常とされる他の大勢の人とは色が異なって見えてしまう・感じてしまう状態のことをいいます。そのため色の区別がつきにくい場合があり、日常生活に支障をきたしてしまう可能性があります。
参天製薬ホームページ
札幌市のホームページは背景を青、黒、黄色に変更できるようです。
④Foreign language
海外からの移住者も年々増えているため、日本語以外の英語、中国語、韓国語などに翻訳する機能もあります。
音声読み上げ機能があるサイトは表記に注意！
いろんな機能があることを見ていただきましたが、特に注意が必要なのが音声読み上げ機能があるサイトで新しくページを作成するときです。
目の見えない方が音声を聞いて正確な情報を得られるためには文章の書き方にとても注意が必要なのです。
どこに注意すべきか簡単に解説します！
①時間、日付、単位、曜日は省略しない！
音声読み上げソフトによっては、意図していない読み方になる可能性があるので、基本的に省略しない表記が望ましいです。
- 時間）× 12:30 ○12時30分
- 日付）× 2020/2/29 ○2020年2月29日
- 単位）× 2km ○2キロメートル
- 曜日）× (月) ○(月曜日)
2kmも「ニケーエム」と読まれてしまうらしいです！
それでは意味が通じないですよね＞＜
②単語の間にスペースを入れない！
例えば、「日時」を「日 時」のように単語の間にスペースを入れると「ひ とき」と読まれてしまうそうです。
他にも、「図書館」を「図 書 館」にすると「ず しょ やかた」と読まれるので、こちらも意味が通じませんね。
③画像にはaltを入れる！
画像の説明は必ずaltに入れないと画像の情報が音声読み上げされません。
そして画像についてもなるべく詳しく5W1Hを意識して書いた方がいいみたいです。
例えばこの写真。
「2匹の犬」にしがちですが、可能な限り「ストライプ柄のハンモックに乗っている2匹の犬」にした方がいいようです！
④リンクはどんなリンクかわかるように書く！
リンクもよくあるのが「観光情報についてはこちら」のような こちらに対してリンクが設定されているもの…これあまり良くないのです。
音声読み上げソフトがリンクだけを読み上げる時があるので、そのときに「こちら」しか読み上げられないと、なんのリンクかわからなくなるからです。
知っていてほしい！WEBアクセシビリティの大切さ
全ての人にとって情報を正確に受け取れるサイトを目指して、Webアクセシビリティをより学んで行きたいと思います＾＾
皆さんも興味をもっていただけたら嬉しいです！