Webアクセシビリティって？制作で気をつけるポイント＆2022年締めくくり

tagawaです。

2022年、本日が仕事納めの方も多かったのではないでしょうか。
WOWNも本日が仕事納めです！
（と書いたものの投稿忘れていたので昨日が仕事納めでした…笑）

さて、今日はWebアクセシビリティについてのお話です。
担当させていただいている案件で詳しく調べる機会があり、Web制作に携わる人間としてきちんと知っておかないといけないなと感じたのでブログでも書いておこうと思います。

Webアクセシビリティって？

Webアクセシビリティとは、高齢者・障がい者の方などの年齢や身体的な条件に関わらず、すべての人がWebサービスを利用できるようにすることです。今は情報の多くがWeb上で提供される時代。誰もが平等に情報を得るために、Webアクセシビリティを意識することは大切です。

視覚障がいのある方は音声でサイトを読み上げるサービスで、Webサイトを閲覧することが多いです。サイトの見た目は整っていても、Webアクセシビリティを意識していないと音声で読み上げた際にはサイトの内容が理解できなくなってしまうのです。

今回はコーディングの際に気をつけるポイントをいくつかご紹介します。

ポイント１：画像のalt属性を入れる

Webサイトに画像を掲載するとき、画像が表示されない場合に備えてalt属性で画像に代わるテキスト・代替テキストを設定しますよね。画像に入っている文字は音声読み上げではスルーされてしまいます。画像に情報が載っている場合は、載っている情報と同等の代替テキストを入れるようにしましょう。

例えば、画像にイベントのタイトルと開催日程が記載されている場合は、alt属性にイベントタイトルと開催日程を入力します。

逆に情報の役割にはなっていない画像、つまり画像がなくなってもサイトの情報が伝わる場合は「空欄」を設定します。alt属性にスペースを入れて空欄にした場合は読み上げがスルーされるのです。ただし、alt属性を入れなかった場合は、「画像のファイル名＆imege」が読み上げられてしまいます。設定しないのではなく「空欄」を設定することが大事です！

ポイント２：ボタンはbuttonタグで実装する

クリッカブルなボタンであることがわかるよう、問い合わせフォームの遷移ボタンや送信ボタンなどはbuttonタグで実装します。buttonタグにすることで、フォーカスが当たるためキーボード操作の場合もボタンをクリックすることができます。
aタグやdivタグではフォーカスが当たらないので注意です。

ポイント３：アルファベットは最初のみ大文字にする

Web上でアルファベットを全て大文字で表示したいとき、htmlですべて大文字入力すればいいや。と思いがちです。しかしすべて大文字で入力した場合、音声読み上げソフトではアルファベット一文字ずつを読み上げられてしまいます。

たとえば「PARK」と入力した場合、一部の読み上げソフトでは「P」「A」「R」「K」と一文字ずつ読まれるのです。そのため「Park」と入力するのがベストです。

でも小文字で表記すると、Webサイトのデザインが崩れてしまいますよね。
その場合はcssで「text-transform:uppercase;」とするとすべての文字が大文字で表示されます。

また、今回は割愛しますがHTMLのタグは目的にあったもので実装するなど他にもたくさん気をつけるポイントがあります。
Webサイトがデザイン通り綺麗に実装できると満足してしまいがちですが、こういったことを意識することでより多くの人がそのサイトを利用できるようになります。みんなが使いやすいサイトを目指して、わたしももっと勉強していきたいです！

以上、Webアクセシビリティについてのお話でした！
そして今回のブログの見出しはhanawaさんのブログを参考にさせてもらいました。使いやすい見出しばかりなので見出しに迷っている方はぜひ。

話は変わりますが、今日で仕事納め。2022年は個人的に変動の年でした。

8年間携わっていたエンタメ業界をはなれ、IT業界へ。
去年の年末はWebデザインの勉強でずっとPCと向き合っていたなぁと思い出しました。

希望の仕事には就けましたが、今もまだまだ勉強中。というか移り変わりが速いこの業界では今後も勉強し続けないとダメだろうなと思ってます。

もちろん仕事は大変なことも多いですが、WOWNに入社できて本当に良かったと思っています！すごく柔軟な会社なので自分の頑張り次第でぐんぐん成長していける環境だなと。
そして何より睡眠時間がちゃんと確保できるようになったのでとっても健康になりました。睡眠大事。笑

2023年はデザイナーとしてもプロジェクトマネージャーとしても、もっともっと成長できるよう日々精進します！

年末は、今年1年頑張ったご褒美に温泉に行ってプチ贅沢してきます。わくわく。
みなさまも良いお年をお迎えください！