ラジオ ボタンは、PDF フォーム で使用できるコア入力コントロールの 1 つです。入力可能なドキュメントに追加すると、相互に排他的な選択肢のグループから 1 つの選択肢だけを選択するための明確な方法がユーザーに提供されます。一般的な例には、支払い方法の選択、配送速度の選択、はいまたはいいえの質問への回答、フィードバック フォームでの満足度の選択などがあります。
PDF フォームにラジオ ボタンを追加するには、テキスト フィールドを追加するのとほぼ同じ労力がかかりますが、グループ化を正しく行うことが、機能的なフォームとわかりにくいフォームを区別します。ラジオ ボタンが同じグループ名を共有している場合、1 つを選択すると、そのグループ内の他のすべての選択が自動的に解除されます。名前が異なる場合、それらは独立したチェックボックスとして動作しますが、単一選択の質問ではこれが望ましいことはほとんどありません。このガイドでは、Adobe Acrobat Pro、オンライン エディター、WukongPDF の手順に加えて、初心者のフォーム作成者が見落としがちな設定の詳細について説明します。
WukongPDF の Fillable PDF エディタは、ラジオ ボタン、チェックボックス、テキスト フィールド、ドロップダウンを含むすべてのフォーム コントロールを、ソフトウェアのダウンロードやインストールを行わずにアクセスできる単一のツールバーに配置します。ラジオ ボタンを追加した後、フォームを保存すると、配布できるようになります。
ラジオ ボタン vs チェックボックス vs ドロップダウン
これら 3 つのフィールド タイプの違いを理解すると、ラジオ ボタンが属するチェックボックスを使用するという、フォーム設計で最も一般的な間違いを防ぐことができます。ラジオ ボタンは、名前付きグループ内での相互排他性を強制します。チェックボックスは独立しています。 1 つのチェックボックスをオンにしても、他のチェックボックスには影響しません。ドロップダウンでも単一選択が強制されますが、コンパクトなリスト形式が使用されます。
| ラジオボタン | チェックボックス | ドロップダウン |
|---|---|---|
| セットから 1 つを選択 | 複数の選択肢、独立した | 単一の選択肢、コンパクトなリスト |
| フィールド名ごとにグループ化 | 各ボックスは独立しています | 1 つのフィールド内のすべての項目 |
| 2 ～ 5 のオプションに最適 | 「はい/いいえ」または複数選択に最適 | 4 つ以上のオプションに最適 |
すべてのオプションを一度に表示する必要があり、ユーザーが 1 つだけ選択する必要がある場合は、ラジオ ボタンを使用します。オプションが 5 つ以上あり、画面スペースが限られている場合は、ドロップダウンを使用します。ユーザーがゼロを含む任意の数のオプションを個別に選択できる場合は、チェックボックスを使用します。
Adobe Acrobat Pro でのラジオ ボタンの追加
Acrobat Pro で PDF を開き、「ツール」、「フォームの準備」の順に移動します。 Acrobat は文書をスキャンしてフォームフィールドの候補を探し、配置を提案します。手動で配置するには、ツールバーで小さな円として表示されるラジオ ボタン アイコンをクリックします。最初のラジオ ボタンを表示するページをクリックします。 Group1 のようなデフォルト名が割り当てられます。
重要なステップは次です。同じグループの 2 番目のラジオ ボタンには、最初のラジオ ボタンとまったく同じフィールド名を付ける必要があります。最初のボタンの名前が PaymentMethod の場合、そのグループ内の後続のラジオ ボタンもすべて PaymentMethod という名前にする必要があります。 Acrobat では、「同じ名前のラジオボタンが作成されました」という警告が表示されます。 「はい、この名前のすべてのラジオ ボタンで 1 つの値セットを共有します」を選択します。この確認が相互排除行動を活性化します。誤って 2 番目のボタンに別の名前を付けた場合、2 つのボタンはリンクされたラジオ ボタンではなく、独立したトグルとして機能します。
すべてのボタンをグループに配置した後、任意のボタンをダブルクリックして [プロパティ] ダイアログを開きます。 [オプション] タブで、グループ内の各ボタンに、CreditCard、PayPal、BankTransfer などの一意のボタン値を割り当てます。このエクスポート値は、エクスポートされたフォーム データに表示される値です。 「外観」タブで、すべてのボタンに一貫したフォント サイズと境界線のスタイルを設定します。 PDF を保存し、各ボタンをクリックしてグループをテストします。一度に 1 つだけを入力してください。
オンライン PDF エディターを使用してラジオ ボタンを追加する
オンライン PDF エディターは、同じ名前を共有するボタンを自動的にグループ化することで、ラジオ ボタンのワークフローを簡素化します。 PDF をアップロードした後、ラジオ ボタン ツールを選択し、ページをクリックして最初のオプションを配置します。右側に表示されるプロパティ パネルで、この特定のボタンのグループ名と選択値を入力します。次のラジオ ボタンを配置し、同じグループ名を割り当て、別の選択値を与えます。
ほとんどのオンライン エディタでは、フィールド リストにラジオ ボタンが表示され、展開可能なツリー ビューにはグループ名とその下にネストされた個々の選択肢が表示されます。この視覚的なフィードバックにより、対象のすべてのボタンが同じグループに属していることを簡単に確認できます。ボタンがツリーの外側に表示される場合は、フィールド リスト内の適切なグループにボタンをドラッグします。すべてのボタンを配置したら、完成した PDF をダウンロードし、リーダーでグループの動作をテストします。
デフォルトの選択範囲とスタイル設定オプションの設定
ラジオ ボタンは、フォームを開いたときに 1 つのオプションを事前に選択して読み込むことができます。 [プロパティ] ダイアログの [オプション] タブで、1 つの選択肢を選択し、[デフォルト] ボタンをクリックして、そのボタン値をデフォルトに設定します。フォームが読み込まれると、事前に選択されたオプションが入力されて表示されます。ほとんどの顧客が標準配送を選択する場合に事前に標準配送を選択するなど、1 つの選択肢が大多数のユーザーに適用される場合にこれを使用します。同意に関する質問や法的合意の選択肢を事前に選択しないでください。これらには常に明示的なユーザーアクションが必要です。
ラジオ ボタンの外観のほとんどは使いやすさにとって重要です。デフォルトの外観は、選択すると塗りつぶされた小さな円であり、白い背景ではうまく機能しますが、色付きのフォームセクションでは見にくい場合があります。 「外観」タブでは、ボタンの境界線の色と塗りつぶしの色を変更して、コントラストを向上させることができます。アクセシビリティを確保するために、WCAG 2.1 SC 1.4.11 で推奨されているように、ラジオ ボタンの円の直径が少なくとも 11 ポイントであり、ページの背景に対して十分な色のコントラストがあることを確認してください。
よくある落とし穴とその回避方法
実際に最もよくある間違いは、異なるフィールド名を持つラジオ ボタンを作成し、それらがグループとして機能することを期待することです。すべてのボタンを配置したら、[フィールド] パネルを開いてリストを確認します。グループ内のすべてのボタンはまったく同じ名前を共有する必要があり、異なるのは個々の選択値のみです。 PaymentMethod、PaymentMethod1、PaymentMethod2 が個別のフィールド名として表示されている場合は、後者の 2 つを削除し、正しい共有名で再作成します。
フォーム作成者がラジオ ボタンをコピーして貼り付けて追加の選択肢を作成するときに、別の問題が発生します。コピーすると、フィールド名だけでなく選択値も複製されます。つまり、貼り付けられたすべてのボタンは、エクスポートされたデータで同じ値を報告します。フィールド名が共有されている場合でも、各ラジオ ボタン インスタンスの選択値は常に変更してください。また、フォームをモバイル デバイスで入力する場合は、電話画面でラジオ ボタンの間隔をテストしてください。ボタンの配置が近すぎると、指先で正確にタップするのが困難になります。タッチ入力に対応できるように、ラジオ ボタンの行間に少なくとも 24 ピクセルの垂直方向のスペースを空けてください。
ラジオ ボタンを使用すると、あいまいな質問が明確で構造化されたデータ ポイントに変わります。これらを共有名で正しくグループ化し、それぞれの選択肢に一意のエクスポート値を割り当てることで、手動でクリーンアップせずにデータベースやスプレッドシートに直接インポートされるフォーム データを作成できます。
アクセシビリティ準拠のためのラジオ ボタンの追加
アクセス可能なラジオ ボタン グループは、スクリーン リーダー、キーボード ナビゲーション、またはハイ コントラスト モードに依存するユーザーがフォームを正しく操作するのに役立ちます。グループ内の各ラジオ ボタンには、グループ名と特定の選択肢の両方を説明するツールチップが必要です。 Acrobat Pro でフィールドのプロパティを開き、「一般」タブに移動し、「支払い方法を選択してください: クレジット カード」のようなテキストをツールヒント フィールドに入力します。ユーザーがタブでフィールドに移動すると、スクリーン リーダーによってツールチップが読み上げられます。
ラジオ ボタン グループのタブ オーダーは、各選択肢を順番に移動する必要があります。ユーザーがタブでグループに移動した後、矢印キーを使用してグループ内の選択を変更し、Tab キーを押してグループを終了して次のフィールドに移動できるようにする必要があります。これは、PDF 仕様で定義されている標準のキーボード動作であり、すべての主要なスクリーン リーダーでサポートされています。フォームを完成させる前に、キーボード ナビゲーション フローをテストします。ラジオ グループ内で Tab キーを押すと、ラジオ オプション間を移動せずに次のフィールドにスキップする場合は、グループ内のラジオ ボタンがまったく同じフィールド名を共有していることを確認してください。
WCAG 2.1 レベル AA での高コントラスト要件の場合は、ラジオ ボタンの境界線の色のコントラストがページの背景に対して少なくとも 3:1 であることを確認してください。白い背景上のデフォルトの黒い境界線はこれを満たしますが、灰色または着色されたフォーム背景上のカスタム色の境界線はこれを満たさない場合があります。フォームのスクリーンショットでコントラスト チェッカー ツールを使用して、配布前にコンプライアンスを確認します。
ラジオ ボタンの値を正しくエクスポートする
ラジオ ボタン グループは、選択した値をフォーム データ エクスポートの単一フィールドとしてエクスポートします。ユーザーが PaymentMethod グループから CreditCard を選択した場合、エクスポートされた CSV または XML には PaymentMethod=CreditCard が記録されます。使用されるエクスポート値は、表示されるラベルではなく、フィールドのプロパティで割り当てたボタンの値です。エクスポートされたデータにどのような値が表示されるかを確認するには、テスト フォームを 1 つ開き、選択を行ってデータをエクスポートし、値がデータベースまたはスプレッドシートの期待値と一致することを確認します。
一般的なデータ統合の問題は、ラジオ ボタンの選択値にスペース、特殊文字、または一貫性のない大文字小文字が含まれている場合に発生します。 CreditCard や Credit_card など、Credit Card ではなく、キャメルケースまたはスネークケースの選択値を標準化します。一貫したフォーマットにより CSV 解析エラーが防止され、データベース フィールドの検証が簡単になります。ボタン値の命名規則をフォームの設計ノートに文書化して、後でフォームを管理する人が同じパターンに従うようにします。