アクセシブルなウェブページを作るポイント

HTML とは？

ウェブサイトを形作る骨格となるプログラミング言語です。テキスト、画像、動画などを表示するために、さまざまな役割を持ったタグを組み合わせてウェブサイトを作ります。

<h1>はじめまして</h1>

と書くと「はじめまして」という文字が「見出しレベル 1 (大見出し)」とブラウザに解釈されます。h1 は headding 1を意味しています。

アクセシビリティで、重要なのは、HTML というプログラミング言語の仕様に沿ったプログラミングを心がけることです。独学で Web 制作を勉強したり、現場のノリで実装してしまうと、この HTML タグの仕様をないがしろにしがちです。

例えば、

このように書けば、画像が表示されます。

表示はされますが、目の見えにくい方が利用するスクリーンリーダーというアプリでは読み上げられないため、画像の内容を知ることができません。

よりアクセシブルにするためにのは、

このように画像の「代替テキスト」を定義する alt という属性を付けることで、スクリーンリーダーでもどのような画像が表示されているのか説明することができます。

他にも HTML には、多様なユーザが情報を理解できるようにするための仕様があります。 HTML を正しく書くことで、

スクリーンリーダーで読み上げやすいサイトになる

Google などの検索ボットにも理解しやすい(検索につよい)サイトになる

情報が理路整然として、一般のユーザにもわかりやすいサイトになる

といった一石二鳥・三鳥のインクルーシブ (仲間はずれをつくらない) な効果が期待できます。

可能であればウェブ制作の初期段階である、ワイヤーフレームの検討時などに多様な障害のある方から意見を聞くようにしましょう。最初の段階であればあるほど対応できる幅が広がります。

特にデザインする際の色味の設定は、見えやすい見えにくいが人によって違うので気を配りましょう。

ALT をつける際のポイント

以下のサイトに詳しく情報がまとまっています。ぜひご参照ください。

アクセシビリティの診断

SunneyBankでは、多様な障害をもつ方によるアクセシビリティ診断サービスを行っています。多角的にチェックいただいた上で、レポート化してくれるので、こういったアクセシビリティ診断予算を確保できると自信をもってウェブ制作に取り組めるようになりそうです。

https://scrapbox.io/files/622bff8d8c63130023e74a4e.png