header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

アクセシビリティ:サイトの構造を整える

6分
サイトの階層(構造)は、ウェブブラウザと画像読み上げソフト(スクリーンリーダー)にサイトコンテンツの構成方法を理解してもらうために役立ちます。サイトのテキストに見出しタグを追加することで、サイトの順序における位置を示し、訪問者に明確な体験を提供することができます。

テキストを準備する際の推奨事項

サイトテキストを準備する際は、以下のガイドラインに注意することをおすすめします:
  • テキストに見出しタグを使用する:すべてのページには H1 見出しがあり、それに続いて各ページの見出しタグは連続している必要があります。たとえば、ページのメインの見出しが H1 タグの場合、サブタイトルは H2 となります。これは、視覚障がいのある訪問者が論理的な順序でコンテンツを切り替えることができるようにするためです。
  • 見出しはわかりやすいものにする必要がある:見出しは以下のテキストのラベルと考えてください(これは SEO にとっても重要です)。
  • 間隔は重要です:テキストを編集する際、見出しを複数の行に分割する場合は、「Enter」キーの代わりに、「Shift + Enter」キーを使用して改行を挿入してください。そうすると、各行がそれぞれ別個の見出しとして作成されます。
  • ページ本文に見出しを追加する:サイトヘッダーに追加された H1 は、ヘッダーが表示されているすべてのページに表示されます。そのため、ページ本文に見出しを追加することをおすすめします。
    ヒント:追加ページのない 1ページサイトの場合は、この推奨事項は無視してください。

エディタからテキストに HTML タグを追加する

サイトのテキストに HTML タグを追加して階層構造を定義します。Wix エディタでサイトを構築している場合は、テキスト設定からタグを選択できます。Wix Studio エディタで作業している場合は、要素設定パネルで追加できます。
Wix エディタ
Wix Studio エディタ
  1. エディタで該当するテキストを選択します。
  2. テキストを編集」を選択します。
  3. SEO・アクセシビリティ」を選択します。
  4. ドロップダウンメニューから見出しタグを選択します。
テキスト設定パネルのデザインタブが開いています。カーソルが見出しタグのドロップダウンメニューをクリックしています。

アクセシビリティウィザードからテキスト要素に見出しタグを追加する

アクセシビリティウィザードを使用してサイトをスキャンし、テキスト要素の見出しタグを最適化します。このウィザードは、Wix エディタと Wix Studio エディタの両方で使用できるため、あらゆるサイト要素のアクセシビリティを向上させることができます。
ほとんどのテキスト要素は、アクセシビリティウィザード内で見出しタグを変更することができます。ただし、まだウィザードがサポートしていない一部のテキスト要素(アプリのテキストなど)は、手動で見出しタグを調整する必要があります。
Wix エディタ
Wix Studio エディタ
  1. エディタに移動します
  2. 上部で「設定」をクリックします。
  3. アクセシビリティ設定」を選択します。
  4. サイトをスキャン」を選択します。
  5. 検出済みの問題」タブをクリックします。
  6. 該当するページを選択します。
  7. 見出し構造を整理」をクリックします。
  8. 該当するテキスト要素を選択し、見出しタグを整理します:
テキスト要素に新しい見出しタグを選択して、「適用する」をクリックする様子を示したスクリーンショット。
参考:
ウェブページのコンテンツは、サイトページの DOM 順序で「読み取り」されます。この順序を確認し、必要に応じて調整することができます。サイトの順序を整理する方法はこちら
次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。