やりたいことは家に在る

営業を辞めた女がプログラマーになるまでの記録。

【ウェブカツ10ヶ月経過!】知ってほしい!WEBアクセシビリティ

f:id:echigorira-diary:20200229173313p:plain

 

みなさんこんにちは!

プログラミングスクールウェブカツで絶賛プログラミング勉強中のまるみです!

女性割引を適応させていただいており、格安な金額で入部させてもらってます。

 

 

 1月から地方自治体のホームページを作っている会社に就職しました。

そこで今まで知らなかった知識「WEBアクセシビリティ」という言葉に遭遇しました。

 

ホームページを作る上で知ってて損はない(はず!)の知識なので、今回はWEBアクセシビリティについて解説していきたいと思います^^ 

 

▼そもそもプログラミングスクールウェブカツとは…?という方はこちら

 

webukatu.com

 

 

 

1、WEBアクセシビリティって何!?

皆さん、WEBアクセシビリティという言葉を聞いたことはありますか?

正直私は聞いたことはあったけど、言葉の意味まで気にしたことなかったです。

 

ウェブアクセシビリティとは、高齢者や障害者を含め、誰もが ホームページ等で提供される情報や機能を支障なく利用でき ることを意味します。

 

総務省 情報流通行政局 情報通信利用促進課

 

目が見えない方や日本語がわからない方にも正しい情報を提供できるように様々な工夫がされています。

特に自治体のホームページはいろんな方が情報を取得するためにアクセスしますよね?

私が働いている職場でも自治体のホームページを作成しているので、このアクセシビリティに十分注意しています。

 

2、アクセシビリティのための機能

誰もが支障なく情報を取得するために、工夫しているホームページが最近多くなっています。

どんな工夫をしているか私が大好きな札幌市のホームページを使って少しご紹介します!

※私の働いている会社で作っているわけではございません!

▼札幌市ホームページ

https://www.city.sapporo.jp/

 

①音声読み上げ機能

目の見えない方が情報を取得できるように、ホームページの情報を音声で読み上げてくれる機能があります。

基本的にはテキストを読み上げますが、画像はaltを読み上げます。

コーダーさんが適切な画像の説明をaltに入れているかどうかを、結合テストの際にchromeのデベロッパーツールで確認します。

1つ1つ全部の画像を確認するので…結構大変です><

f:id:echigorira-diary:20200229180805p:plain

 

②文字サイズ拡大縮小

小さい文字が見えにくい人のために文字を拡大する機能があります。

上の画像と比べて文字が大きくなっていることがわかります。

結合テストの時は文字を拡大したいときにレイアウトが崩れていないか確認します。

f:id:echigorira-diary:20200229181821p:plain

 

③背景の色を変更する

色覚異常がある方がある方が情報を取得しやすいように、背景の色を変更できる機能です。

 

色覚異常とは正常とされる他の大勢の人とは色が異なって見えてしまう・感じてしまう状態のことをいいます。そのため色の区別がつきにくい場合があり、日常生活に支障をきたしてしまう可能性があります。

参天製薬ホームページ

 

札幌市のホームページは背景を青、黒、黄色に変更できるようです。

f:id:echigorira-diary:20200229194338p:plain

f:id:echigorira-diary:20200229194611p:plain


④Foreign language

海外からの移住者も年々増えているため、日本語以外の英語、中国語、韓国語などに翻訳する機能もあります。

f:id:echigorira-diary:20200229194911p:plain

 

3、音声読み上げ機能があるサイトは表記に注意!

いろんな機能があることを見ていただきましたが、特に注意が必要なのが音声読み上げ機能があるサイトで新しくページを作成するときです。

目の見えない方が音声を聞いて正確な情報を得られるためには文章の書き方にとても注意が必要なのです。

どこに注意すべきか簡単に解説します!

 

①時間、日付、単位、曜日は省略しない!

音声読み上げソフトによっては、意図していない読み方になる可能性があるので、基本的に省略しない表記が望ましいです。

 

時間)× 12:30     ○12時30分

日付)× 2020/2/29  ○2020年2月29日

単位)× 2km                  ○2キロメートル

曜日)× (月)     ○(月曜日)

2kmも「ニケーエム」と読まれてしまうらしいです!

それでは意味が通じないですよね><

 

②単語の間にスペースを入れない!

例えば、「日時」を「日 時」のように単語の間にスペースを入れると「ひ とき」と読まれてしまうそうです。

他にも、「図書館」を「図 書 館」にすると「ず しょ やかた」と読まれるので、こちらも意味が通じませんね。

 

③画像にはaltを入れる!

画像の説明は必ずaltに入れないと画像の情報が音声読み上げされません。

そして画像についてもなるべく詳しく5W1Hを意識して書いた方がいいみたいです。

f:id:echigorira-diary:20200229203307j:plain

例えばこの写真。

「2匹の犬」にしがちですが、可能な限り「ストライプ柄のハンモックに乗っている2匹の犬」にした方がいいようです!

 

④リンクはどんなリンクかわかるように書く!

リンクもよくあるのが「観光情報についてはこちら」のような こちらに対してリンクが設定されているもの…これあまり良くないのです。

音声読み上げソフトがリンクだけを読み上げる時があるので、そのときに「こちら」しか読み上げられないと、なんのリンクかわからなくなるからです。

 

4、知っていてほしい!WEBアクセシビリティの大切さ

民間企業のサイトを作る時はあまり意識する機会がないですが、UX/UIと同じように、今後少しでも意識したサイト作りをしていただけると嬉しいと思いました!

 

5、余談

ここ最近の進捗報告を最後に少し。

働いてからプログラミングが全然進んでおりません。

本当に平日に少しできるかどうか…という感じ。

 

開発練習はついにテスト1回目が終わり、3月上旬にはサーバーにあげて再度テストするという感じです。

かなり佳境でエラーが出すぎて吐きそうなくらいしんどいです笑

 

平日の仕事の疲れから土日も全然プログラミングを学習する気力がわかず、土日数時間できればいいかなというくらいで自己嫌悪です。

 

開発練習を終えたら自分がなんのためにプログラミングやっているのか、ウェブカツはどうするのか1度考えようと思います!

まずは開発練習に集中!

 

今月もプログラミング学習頑張っていきましょう!