障害者のためのサイトのユーザビリティを改善します。

サイトのさまざまな要素をカスタマイズすると、障害のある人や、スクリーン リーダーなどの支援技術を使用している人など、すべての訪問者にとって、サイトがよりアクセシブルでナビゲートしやすいものになります。

このガイドでは、コンテンツの設計と構造化のベスト プラクティスを紹介します。

こちらもご覧ください: 組み込みの機能でサイトのアクセシビリティを高める

注: このガイドは資料であり、法的アドバイスではありません。Squarespaceでは、サービス利用規約に記載されているとおり、お客様のサイトまたはビジネスに適用される特定のアクセシビリティ法や基準に関するアドバイスは提供しておりません。

レイアウト

明確なレイアウトとデザインでWebサイトを作成すると、弱視の人や認知障害のある人にとって役立ちます。また、わかりやすく一貫性のあるレイアウトは、パソコンに自信のない訪問者や、モバイル端末などの小さな画面でサイトを閲覧している訪問者にもメリットがあります。ナビゲーション メニュー、リンク、テキスト セクションなど、Webサイトのさまざまな部分を明確に識別できるようにする必要があります。

キーボード ナビゲーション

訪問者によっては、マウスの代わりにキーボードを使用してサイトを移動する場合があります。また、キーボードのアクセシビリティは、音声認識やスクリーン リーダーなどの特定の支援技術にとって重要です。キーボードのみを使用してサイトをナビゲートし、サイトのアクセシビリティをテストしてみてください。

フォーカス アウトラインのカスタマイズ

訪問者がTabキーを押してサイト内を移動すると、強調外枠でナビゲーション リンクやフォーム フィールドなどのインタラクティブなページ エレメントが自動的に強調表示されます。

Tabキーを初めて押す際、[スキップしてコンテンツに移動] リンクが開きます。スペースバーを押すと、サイト ヘッダーをスキップしてメイン コンテンツに直接移動できます。または、Tabキーをもう一度押すと、ページ上の他のエレメントに移動できます。強調外枠の色や太さをカスタマイズすることはできません。 

強調外枠が確実に機能するように、ブラウザーを最新バージョンに更新してください。

Squarespaceのキーボード ショートカット

サイトの管理と編集に使用できるキーボードショートカットについて詳しく説明します。

創造エディター

創造エディターのセクションを編集するときは、次のベスト プラクティスに留意してください。

• ブロックがオーバーラップしている場合でも、すべてのブロックの内容が訪問者に引き続き表示され、使用可能であることをご確認ください。
• さまざまなブロック エレメントがどのように相互作用するかを考慮してください。たとえば、フォーム ブロックがある場合、その上にボタン ブロックを配置すると、訪問者はどのボタンがフォームを送信するためのものかわからない可能性があるため、そのような配置をしない方がよいことがあります。
• 他の種類のコンテンツの上にテキストを配置する場合は、それが読みやすいことをご確認ください。たとえば、ブロックに色の背景を追加したり、画像上で目立つようにテキストの色を変更したり、テキストをまだ読める場所に移動したりすることなどがあげられます。

明確で簡潔な言葉遣い

サイトのコンテンツを作成するときは、アクセシビリティを念頭に置くことが重要です。これには、使用する言葉遣い、テキストの構造、コンテンツの整理方法などがあります。テキストを十分に整理し、簡潔で明確なものにすると、すべての訪問者、特に障害のある訪問者にとって役立ちます。

サイトのテキストを作成するときは、次のヒントを考慮してください。

• 明確な言語と書式を使用します。
• 簡潔な文章と段落で記載します。
• 専門用語や不必要に複雑な語句は使用しないようにします。
• 頭字語は、最初の使用時に正式名を記載します。たとえば、「トップレベル ドメイン (TLD)」のような形式です。
• 必要に応じて箇条書きを使用します。
• 意味を明確にするために、画像、動画、およびオーディオの使用を検討してください。

タイトル

訪問者が新しいWebページにアクセスしたときに、スクリーン リーダーが最初に伝えるのはタイトルです。ページにSEOタイトルがある場合、スクリーン リーダーはそれを読み上げ、ページ タイトルをスキップします。ページにSEOタイトルがない場合、スクリーン リーダーはページ タイトルを読み上げます。

短く、具体的でユニークなページ タイトルを設定すると、支援テクノロジーを使用して移動するユーザーがWebページのコンテンツと目的をすぐに理解できるようになります。

タイトルのベスト プラクティス

タイトルを作成するときは、次の点を考慮するとよいでしょう。

• ページのトピックと目的を紹介します。
• 各ページのタイトルは一意で、そのページをサイト上の他のページと区別するものにする必要があります。
• ユニークで関連性の高い情報を最初に配置します。たとえば、「A guide on accessibility」ではなく「Accessibility guide」のようにします。

テキスト

見出し

スクリーン リーダーは、ページの構造を理解するために、視覚要素の代わりにHTMLコードを使用します。スクリーン リーダーを使用する場合、ページの各セクションに見出しがあると、訪問者はページをナビゲートしやすくなります。検索エンジンはコンテンツの適切な理解のため見出しを使用します。そのため、見出しはサイトのSEOの強化方法として効果的です。

ページ構造と見出しの詳細については、Web Accessibility Initiativeをご覧ください。

リスト

リストと見出しを使用してテキストのレイアウトを整理します。リストは、リンクのグループや一連の例など、コンテンツの一部が互いに関連していることを示すのに役立ちます。テキストをリストとして書式設定することにより、次の結果が得られます。

• コンテンツをナビゲートしやすくなります。
• 認知障害のある訪問者がコンテンツを理解しやすくなります。

リンク

支援技術を使用する訪問者が、リンク間の移動で状況がわからなくなることがないように、リンク テキストで各リンクの目的を明確にご説明ください。リンクを適切にフォーマットすると、SEOの向上にも役立ちます。リンクのテキストに「リンク」という単語を入れる必要はありません。ほとんどのスクリーン リーダーでは、各リンクの前に「リンク」と読み上げられます。

以下に例を示します。

間隔設定

テキストの行の間隔が適切であることをご確認ください。これにより、訪問者は必要に応じて行の間隔を変更し、読み取りやすくすることができます。サイト スタイルで文字の間隔と行の高さを調整できます。

色

サイト スタイルを使用して、サイトの色をカスタマイズできます。しかし、訪問者への情報を色だけで伝えることは避けてください。弱視や色覚異常の人は、色の違いを見逃してしまうことがあります。また、色だけでは、スクリーン リーダーを使う目の不自由な訪問者には意味が伝わりません。

Google Chromeのデベロッパー ツールまたはFirefoxのアクセシビリティ インスペクターを使用すると、一般的な色覚障害を持つユーザーがページをどのように体験するかをシミュレートできます。

注: これらのサードパーティー ツールは、Squarespaceサポートの範囲外です。

フォーム

一部の訪問者にとって、フォームは利用しにくい場合があります。各項目に明確なラベルを付け、フォームを簡単に操作できるようにすることが重要です。テキスト ブロックを使用して簡単な指示を追加し、フォームに適切に記入するために知る必要があることを訪問者が正確に理解できるようにします。

フォームのフィールドに表示されるテキストが設定されたプレースホルダーを追加し、訪問者に例として表示することができます。こうすることで、訪問者はフォームにどのように記入すればよいのかをよりよく理解できるようになります。なお、プレースホルダー テキストはラベル テキストの代わりに使用するものではありません。プレースホルダー テキストの詳細については、フォーラムをご覧ください。