サイトで明確で簡潔なコンテンツを作成するためのヒント。

サイトのコンテンツを作成するときは、アクセシビリティを念頭に置くことが重要です。これには、使用する言葉遣い、テキストの構造、コンテンツの整理方法などがあります。

このガイドでは、アクセシビリティを念頭に置いてコンテンツを作成し、サイトを整理する方法のヒントを紹介します。

注: このガイドは、開始に役立つ資料として利用できますが、法的アドバイスとして解釈したり依拠したりはしないでください。Squarespaceは、サイトを特定のアクセシビリティに関する法律、規制、または基準に準拠させるためのアドバイスを提供することはできません。

明確で簡潔な言葉遣い

テキストを十分に整理し、簡潔で明確なものにすると、すべての訪問者、特に障害のある訪問者にとって役立ちます。サイトのテキストを作成するときは、次のヒントを考慮してください。

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

タイトル

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

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

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

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

• ページのトピックと目的を紹介します。
• タイトルは、そのページをサイト上の他のページと区別するものにする必要があります。
• ユニークで関連性の高い情報を最初に配置します。たとえば、「A guide on accessibility」ではなく「Accessibility guide」のようにします。
• 複数ステップのプロセスの一部となっているページの場合は、タイトルに現在のステップを示します。たとえば、「商品の色を選択する (ステップ2/3) - ABC社」などです。

テキスト

見出し

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

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

リンク

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

以下に例をあげます。

間隔設定

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

色

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

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

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

フォーム

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

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

備考: カスタム コードの変更は当社サポートの範囲外です。つまり、セットアップやトラブルシューティングに関し、当社はこれ以上のサポートを提供することができません。さらに、コードベースのソリューションに関しては、その機能性やSquarespaceとの完全な互換性は保証できません。これには、Squarespaceのレスポンシブ デザインにおける当該ソリューションの機能性 (特にモバイル デバイス上での外観)や、すべてのテンプレートでソリューションが機能するかどうかが含まれます。カスタム コードは、当社プラットフォームの今後の更新時に、表示に関する問題を引き起こす可能性もあります。当社はこれ以上サポートを提供できかねますが、次のように、お客様が問題解決のために参照できるリソースが多数あります。

• カスタム コードを追加するためのベスト プラクティスについて学びましょう。
• サードパーティーのカスタマイズに関する基本ガイドをお読みください。
• Squarespace Expertを雇い、ご自分のサイト用のカスタム コードの作成を依頼しましょう。