アクセシビリティと見出し：視覚障害のあるユーザー向けのデザイン

ウェブサイトやアプリで見出しをどのように使用するかなどの細かい詳細は、見込み客や売上に費用がかかる可能性があります。 Webサイトにアクセスできる必要がある理由、アクセスできない場合に発生する可能性のあること、および見出しを使用してユーザーをページに正しく誘導する方法に関するいくつかのベストプラクティスを確認するために読んでください。

アクセシビリティの事例

新しいウェブサイトをデザインしたり、古いウェブサイトを更新したりするとき、見出しは簡単に見落とされる可能性があります。 マーケターは、デザインの美的側面に焦点を当て、実用的側面にはあまり焦点を当てない傾向があります。 確かに視覚要素はウェブサイトのユーザーエクスペリエンス（UX）で重要な役割を果たしますが、視覚障害を持つユーザーが視覚要素にアクセスしやすくすることで、コンバージョンを達成する訪問者の数を増やすことができます。

統計は、アクセシビリティに関する私たちの主張を強化します。

• 世界中で約2億5300万人が視覚障害に苦しんでいます
• 毎日250人が英国で視力を失い始めています
• 英国では200万人以上が失明しており、運転不能など日常生活に大きな影響を与えています。
• 加齢に伴う変性は、成人の失明の主な原因です。

410万人は2050年に英国で視力喪失によって影響を受けることが予想されると、企業はすべての観客に自分のウェブサイトを適応させることがない余裕はありません。 これは、ターゲット市場が古い人口統計であり、視力の問題が発生する可能性が高い場合に特に重要です。

見出しを正しく使用するような単純な側面は、大きな違いを生む可能性があり、適用するのは難しくありません。 また、訴訟を起こす費用を節約することもできます。

ドミノの場合

ドミノ・ピザは、視覚障害のあるユーザーのアクセシビリティを無視することがいかにコストがかかるかを示す良い例です。

目の見えない米国の顧客は、トッピングの選択、割引コードの使用、さらにはレストランのiPhoneアプリでの注文の完了に苦労した後、2016年に苦情を申し立てました。 問題は、アプリが電話の画面読み上げソフトウェアと統合されていなかったことでした。画面読み上げソフトウェアは、テキストが正しく使用され、画像がテキストでタグ付けされていることに基づいてコンテンツを発声します。 同社のアプリとウェブサイトには、iPhoneがオプションを読み取れるようにするための正しいコードがありませんでした。

裁判官は当初ドミノの側に立っていましたが、控訴裁判所は先週、「ドミノのウェブサイトとアプリにアクセスできないとされているため、公共の場所である物理的なピザフランチャイズの商品やサービスへのアクセスが妨げられている」という理由で顧客に有利な判決を下しました。宿泊施設」。

英国では、英国王立盲人協会もBCCに対する判決のコメントを歓迎しました。「すべての組織は、 2010年平等法に基づき、視覚障害者や弱視者を含む、視覚障害者や弱視者が自分のウェブサイトやアプリを使用できるようにする責任があります。スクリーンリーダーを使用している人」。

企業がWebサイトにアクセスしやすくする方法はいくつかあり、見出しタグを正しく使用することは、ユーザーがページをナビゲートするのに大いに役立ちます。

アクセシビリティに関する見出しのベストプラクティス

開発者がデザインを厳密にフォローしすぎているか、デザイナーが見出しの正しい使用方法を認識していないこともあり、見出しの混乱と誤用がかなりあります。

見出しがわからない場合は、W3Cの定義が適切であり、YoastがSEOの使用について説明しています。

W3Cは、正しい使用法を次のように定義しています。

「6つの見出し要素H1からH6は、セクションの見出しを示します。 見出しの順序と出現はHTMLDTDによって制約されませんが、そのようなドキュメントを他の表現に変換することはしばしば問題があるため、ドキュメントはレベル（たとえば、H1からH3）をスキップするべきではありません。

見出しを正しく使用すると、ユーザーやGoogleがページを読む方法に影響を与えるだけでなく、スクリーンリーダーがユーザーにコンテンツを表示する方法にも大きな影響を与えます。 アクセシビリティツールを使用しているユーザーは、見出しを介してページをナビゲートできるため、重要なことを言う場合は、意図したとおりに構造的および視覚的にレイアウトする必要があります。

ページを作成するときに見出しにアクセスできるようにするために、追加の作業は必要ありません。 正しい使用法に従うと、アクセシビリティ基準が満たされます。 見出しに関するW3cのアクセシビリティに関するアドバイスは、これを非常によく説明しています。ご覧のとおり、アクセシビリティにとって意味があるだけでなく、構造的および視覚的にも意味があります。

見出しを確認するにはどうすればよいですか？

開発者またはテーマが見出しの正しい使用法に従っている場合は、エディター/ CMSを介して、コンテンツを追加し、正しい方法で見出しを追加することができるはずです。

補足として、どこにでも見出しを追加する必要はありません。単純なH1（通常はページタイトル）の後にH2を追加するだけで十分ですが、特に長いページを正しく構成したい場合や、他の人のページをチェックしている場合を考えてみましょう。作業？ お気に入りのブラウザに次のプラグインのいずれかを使用してみてください。

• Chromeの見出しマップ
• Firefoxの見出しマップ

インストールすると、非常に使いやすく、プラグインボタンをクリックすると、サイドバーに誤った見出しが赤で強調表示されます。 この機能は、WordPress 5.0リリースのGutenbergエディターのデフォルトオプションでもあり、このサイトで説明されています。

見出しを使用する正しい方法：

見出しの誤った使用方法：

下の画像は、構造ではなくスタイリングに使用される見出しを示しています。 これはマークアップエラーを引き起こし、意味的に正しくありません–このように使用することは避けてください！

この投稿が、すべての人のWebページを正しく構成するのに役立つことを願っています。

Web開発についてサポートが必要な場合は、遠慮なくお問い合わせください。