ウェブアクセシビリティを意識したコーディングのポイント①

ウェブアクセシビリティを意識したホームページを制作する際に心掛けたいポイントを紹介しています。
前回まではデザインに関わる内容でしたが、今回からはコーディングで意識したいポイントになります。

img要素にはalt属性を書く

目の見えない人がaltの内容を読む（音声で聞く）ことをイメージして、理解できるテキストを書くようにしましょう。

また、デザイン装飾など、意味を持たない画像はalt属性を空にします。
文字は可能な限り画像化しないのが良いです。
やむを得ず画像化する場合は、文字と背景のコントラスト比に気を付けたうえで、alt属性を適切に付けるようにしましょう。

目的が分かるリンクテキストにする

リンク先がどういったページなのか、想像できないようなリンクテキストは不親切です。リンクの目的が分かるようにしましょう。

桜の開花予想についてのページに遷移することが分かります。

クリックしたら何のページに遷移するか、このテキストでは判断できません。

リストまたはリンクのグループには、ol,ul、dl要素を用いる

ただし、カンマ区切りで済むような簡易的ものまでリストにする必要はありません。

まとめ

利用者がどんなところを不便と感じるかをイメージすると、アクセシビリティを意識したコーディングができるようになると思います。
過去に作ったコードを見直してみると、発見があるのではないでしょうか。