header-logo
はじめましょう!Wix でサイトやビジネスを構築する方法をご紹介します。テンプレートを使用してサイトをカスタマイズしたり、パートナーに依頼してウェブプレゼンスを確立しましょう。
サイトの作成Wix エディタの使い方とサイトコンテンツの管理方法について学びましょう。訪問者のプライバシーを保護し、サイトをよりアクセシブルにします。
アカウント・お支払いアカウント設定を確認し、定期購入とプレミアムプランを管理、請求内容を把握しましょう。
Wix モバイルアプリの使用Wix Owner アプリを使用してビジネスを効率的に運営し、訪問者と関わり、コミュニティを構築しましょう。
ドメインの接続ドメインの購入・接続・移管方法と、サイトデータを安全に保つ方法について理解しましょう。
ビジネスの管理支払いの受け付け、分析、訪問者とのつながりなど、ビジネスを構築し成長させるための適切なツールを見つけましょう。
サイトの宣伝検索エンジンでサイトを宣伝し、メルマガを送信し、有料広告を掲載する方法を学びましょう。
Wix Studio・パートナー・エンタープライズWix Studio、パートナー、エンタープライズアカウントを最大限に活用し、ビジネスを拡大しましょう。
ヘルプサイトのパフォーマンスや技術的な問題を解決するための情報を入手しましょう。製品ロードマップでは今後の機能について確認できます。
placeholder-preview-image
Wix Learnコースとチュートリアルでスキルを習得する。
Wix ブログウェブデザインやマーケティングなどのヒントを得る。
SEO ラーニングハブ検索エンジンからのトラフィックを増やす方法について学ぶ。
Website developmentフルスタックプラットフォームでカスタムサイトを構築する。
placeholder-preview-image
この記事では下記を説明します:
  • ステップ 1 | 項目のタイトルを表示する
  • ステップ 2 | 項目のタイトルを定義する
  • ステップ 3 | フォームのデザインをカスタマイズする
  • ステップ 4 | サイトで視覚インジケーターを有効にする

アクセシビリティ:アクセスしやすい Wix フォームを作成する

この記事内
  • ステップ 1 | 項目のタイトルを表示する
  • ステップ 2 | 項目のタイトルを定義する
  • ステップ 3 | フォームのデザインをカスタマイズする
  • ステップ 4 | サイトで視覚インジケーターを有効にする
フォームを使うと、サイト訪問者は情報を送信したり、メーリングリストに参加したりすることができます。フォームを作成する際、すべての人が閲覧して使用できるよう、アクセシビリティに配慮することが重要です。
この記事の手順に従って、訪問者がサイト内を移動・操作できるフォームを作成し、サイトを最大限に活用しましょう。
重要:
旧 Wix フォームはアクセシビリティには対応していません。アクセシビリティの規制に準拠する必要がある場合は、新 Wix フォームに切り替えてください。

ステップ 1 | 項目のタイトルを表示する

訪問者が各フォームの項目を識別できるように、項目のタイトルを表示します。タイトルを表示すると、サイト訪問者にとって分かりやすくなり、現在表示しているフィールドを示すことができます。

項目名を表示する方法:

  1. エディタ内でフォームを選択します。
  2. 「フォームを編集」をクリックします。
  3. フォーム項目を選択します。
  4. 「設定」をクリックします。
  5. 項目のタイトルにマウスオーバーし、「その他のアクション」アイコン  をクリックします。
  6. 「項目名を表示」をクリックします。
フォーム中央。項目が選択され、カーソルが「項目名を表示」をクリックしています。

ステップ 2 | 項目のタイトルを定義する

項目のタイトル表示を有効にしたら、明確に定義します。タイトルは、訪問者が何を入力すべきかが分かる具体的なもの(姓、電話番号など)にしましょう。

項目のタイトルを定義する方法:

  1. エディタ内でフォームを選択します。
  2. 「フォームを編集」をクリックします。
  3. フォーム項目を選択します。
  4. 「設定」をクリックします。
  5. 「項目のタイトル」下にテキストを入力します。
  6. 「保存する」をクリックします。
フォーム中央。項目が選択され、カーソルがタイトル項目をクリックしています。

ステップ 3 | フォームのデザインをカスタマイズする

フォームの項目とボタンを状態(通常時、ホバー時、エラー)ごとに調整すると、フォームのアクセシビリティを向上させることができます。たとえば、マウスオーバー時のデザインをカスタマイズしておくと、訪問者がフォームのどの部分を操作しているかが分かりやすくなります。
参考:
ホバー時の状態とは、訪問者がマウスオーバーした際のフォーム項目 / ボタンの表示方法のことです。通常時の状態は、訪問者が操作する前の状態です。

フォームのデザインをカスタマイズする方法:

  1. エディタ内でフォームを選択します。
  2. 「設定」をクリックします。
  3. 「デザイン」を選択します。
  4. フォームのどの部分をカスタマイズするかを選択します:
    • 項目:
      1. 「フォームの項目」を選択します。
      2. ドロップダウンメニューで「ホバー時」を選択します。
      3. 項目のデザインを変更します:
        • 色・不透明度:項目の背景色を設定し、スライダーをドラッグして不透明度を変更します。
        • 枠線の色・不透明度:項目の枠線の色と不透明度を設定します。
    • ボタン:
      1. 「ボタン」を選択します。
      2. カスタマイズするボタン(送信、戻る、アップロードなど)を選択します。
      3. 「ホバー時」タブをクリックします。
      4. ボタンのデザインを変更します:
        • テキストの色:ホバー状態でのボタンテキストの色を設定します。
        • 色・不透明度:ボタンの背景色を設定し、スライダーをドラッグして不透明度を変更します。
        • 枠線の色・不透明度:ボタンの枠線の色と不透明度を設定します。
フォーム項目のデザインパネルが開いています。ホバー状態が選択され、カーソルがカラーボックスをクリックしています。
ヒント:

ステップ 4 | サイトで視覚インジケーターを有効にする

視覚インジケーター(フォーカスインジケーター)は、視力や運動機能に障がいのある方がサイト内を移動する際に役立ちます。視覚インジケーターを有効にすると、Tab キーを使用している訪問者に、現在表示しているセクションやパーツの周りに青いボックスが表示されます。視覚インジケーターに関する詳細はこちら
Wix Studio エディタで作成されたサイトでは、視覚インジケーターが自動的に有効になります。

視覚インジケーターを有効にする方法:

  1. Wix エディタトップバーにある「設定」を選択します。
  2. 「アクセシビリティ設定」を選択します。
  3. ウィザード右上の「その他のアクション」アイコン  を選択します。
  4. 「高度なアクセシビリティ設定」をクリックします。
  5. 「視覚インジケーター」を選択します。
  6. 「キーボードユーザーがサイト内を移動できるようにします」横のトグルを有効にします。
アクセシビリティ詳細設定で、視覚インジケーターのトグルが有効になっています。
次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
Unlock personalized helpLog in to get the most out of Helpmate.