アクセスしやすいサイト コンテンツを作成する

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

最終更新日 2024年9月09日

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

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

備考

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

明確で簡潔な言葉遣い

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

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

タイトル

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

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

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

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

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

テキスト

見出し

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

実施すべきこと
  • 見出しを⁠、テキストの重要度に基づいて使用する⁠。たとえば⁠、最も重要な見出しには見出し1 (⁠H1⁠) を使用します⁠。
  • ペ⁠ージごとに1つのタイトル/見出し1を作成する⁠。
  • 短い見出しを使用して⁠、関連する段落をグル⁠ープ化し⁠、セクシ⁠ョンを明確に説明する⁠。
  • テキスト ツ⁠ールバ⁠ーを使用して⁠、テキストを見出しとしてフ⁠ォ⁠ーマ⁠ットします⁠。
避けるべきこと
  • 見出しを順不同で使用する⁠。見出しオプシ⁠ョンの範囲はH1~H6で⁠、スクリ⁠ーン リ⁠ーダ⁠ーはそれらを順番に読み上げます⁠。
  • 意味を伝えるために画像に埋め込まれたテキストを使用する⁠。ただし⁠、代替テキストが追加されている場合を除きます⁠。
  • 太字⁠、斜体⁠、その他のデザイン書式を使用して構造を作る⁠。
  • テキストのスタイル設定のためだけに⁠、コンテンツと関連していない見出しを使用する⁠。ペ⁠ージの構造が不明瞭になり⁠、理解しにくくなります⁠。
  • 見出しにするつもりがないのに⁠、見出しのように見えるスタイルをテキストに設定する⁠。訪問者が混乱し⁠、支援技術を使用しているユ⁠ーザ⁠ーがサイトを適切に操作できなくなる可能性があります⁠。

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

リンク

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

以下に例をあげます⁠。

実施すべきこと 「⁠お問い合わせについては⁠、お問い合わせペ⁠ージをご覧ください⁠」
避けるべきこと 「⁠お問い合わせについては⁠、こちらをクリ⁠ックしてください⁠」

リスト

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

  • コンテンツをナビゲ⁠ートしやすくなります⁠。
  • 認知障害のある訪問者がコンテンツを理解しやすくなります⁠。
実施すべきこと
  • コンテンツの順序が重要である場合は⁠、番号付きリストを使用します⁠。
避けるべきこと
  • リストは⁠、リスト以外のコンテンツ (⁠デ⁠ータの表やスタイル設定のみなど⁠) に使用します⁠。

間隔設定

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

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

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

備考

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

実施すべきこと コントラストの高い色をグル⁠ープ化する⁠。
避けるべきこと 青と紫など⁠、区別がつきにくい色のペアを使う⁠。

フ⁠ォ⁠ーム

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

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

備考

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

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

アクセスしやすいサイト コンテンツを作成する