誰にでも
読みやすいサイトへ

特別な誰かのための作業じゃないんです。老眼の社長にも、日なたでスマホを見る人にも効くんですよ。

2024年4月に障害者差別解消法の改正が施行され、「ウェブアクセシビリティが義務になった」という話が広まりました。実際に義務になったのは、障害のある人から求めがあったときの「合理的配慮の提供」で、サイトをあらかじめ使いやすくしておくことは、今も努力義務です。

ただ、義務かどうかとは別に、読みにくいサイトは、障害のある人だけでなく、小さな文字が見えにくい年配の人、片手でスマホを見る人、音を出せない場所にいる人も遠ざけます。直す場所の多くは、作り直さなくても手を入れられます。

この記事では、法改正で変わったこと、基準の考え方、まず直したい5つの場所、自分でできる確かめ方を扱います。

2024年4月の改正で変わったこと

内閣府の説明をもとに、2つの言葉を並べるとこうなります。

求めがあったときは、一方的に断らず、話し合いで代わりの方法を探すことが求められています。求めが来てから慌てるより、ふだんから環境を整えておくほうが、結局は手間が少なく済みます。

基準としてよく使われるのは、日本産業規格のJIS X 8341-3:2016と、その元になった国際的な指針のWCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）です。達成の度合いはA・AA・AAAの3段階で、自治体などはAAを目標に掲げていることが多くあります。中小企業のサイトなら、まずは次の5か所から始めます。

まず直したい5つの場所

色は、差の大きさに加えて、色だけで伝えないことも大事です。例えば、地域の整体院のサイトで、営業日カレンダーの休みの日を赤い色だけで示していると、色の見え方によっては区別がつきません。「休」と文字を添えれば、誰にでも伝わります。

薄いグレーの細い文字、おしゃれなんですけどね。日なたのスマホだと、すっと消えちゃうんですよ。

画像の代替テキストは、画面を読み上げる機能を使う人に、画像の代わりに読まれる文字です。「画像」「写真1」では何も伝わりません。営業時間やキャンペーンの中身を画像の中だけに書いているなら、本文にも文字で書きます。飾りのための画像は、代替テキストを空にして、読み飛ばされるようにします。

読み上げてみたら「画像、画像、画像」。これ、本当によくあるんです。

フォームの作りは、こちらで詳しく扱っています。

文字の大きさや、指で押すボタンの広さは、スマホで見やすくする作りと重なります。

もう1つ、見落とされやすいのが見出しです。読み上げを使う人は、見出しだけを順にたどって、ページの中身をつかむことがあります。文字を太く大きくしただけの「見た目の見出し」は、見出しとして読まれません。見出しは見出しとして設定し、大きな見出しから順番に並べます。

動画も同じ考え方です。字幕を付けるだけでなく、動画で話している要点を本文に数行書いておくと、音を出せない場所にいる人にも、読み上げを使う人にも届きます。

自分でできる確かめ方

専門のツールがなくても、ふだんの道具でかなりのことが確かめられます。

1. 01キーボードだけで回るマウスから手を離し、Tabキーだけでメニュー・リンク・フォームを順にたどる。今どこにいるかの枠が見えるかを見る
2. 02読み上げで聞くiPhoneのVoiceOverやAndroidのTalkBackをオンにして、トップページを聞いてみる
3. 03拡大するブラウザで200%に拡大し、文字が重なったり切れたりしないかを見る
4. 04色を抜く画面を白黒にして、色だけで伝えている所がないかを見る
5. 05声を集める問い合わせの窓口に「見にくい所があれば教えてください」と一言添える

最初から全部を直そうとすると、手が止まります。見つかった所を、問い合わせや予約に近いページから順に直していきます。

コーヒー片手に、Tabキーだけで自社のサイトを回ってみてください。意外な所で迷子になりますよ。

読みやすいサイトづくりを、お手伝いします

• ご相談の中で、今のサイトを5つの場所と確かめ方に沿って一緒に見る
• 色・文字・代替テキストまで含めて組み立てる、サイトとLPの制作
• 縦型動画の字幕と、動画で伝えたことをページの本文にも書く作り

初回のご相談は無料で、オンライン60分でもお受けしています。サービスの一覧はこちらです。

一度で完璧じゃなくていいんです。直せる所から、1つずつ一緒にやっていきましょう。