アクセシブルなタブのジェネレーター
各タブのタイトルと内容を書き、スタイルを選んでコピーします。プレビューは、マウスでも矢印キーでも試せます。
使い方キーボードで操作できるタブ
利用できる言語: 
広告
アクセシブルなタブのジェネレーター: 用途
タブを使うと、商品の説明、サイズ、配送などの内容を小さなスペースにまとめられます。注意せずに作ると、キーボードやスクリーンリーダーでは使えなくなります。
このジェネレーターは、WAI-ARIA Authoring PracticesのTabsパターンに従います。aria-selected付きのtablistとtab、aria-controlsとaria-labelledbyで結び付けたtabpanel、Tabキーで入れるのは有効なタブだけ、矢印キー、Home、Endでの移動に対応します。パネルはスクリプトが読み込まれたときだけ隠されます。スタイルは下線またはピル型、色も選べます。
使い方
- 各タブのタイトルと内容を書きます。
- スタイルと色を選びます。
- プレビューでテストして、コードをコピーします。
使うタイミング
- ネットショップの商品詳細。
- プランやサービスの並べて比較。
- イベントの情報。
よくある質問
何がタブをアクセシブルにしますか？
WAI-ARIAのTabsパターンに従うことです。リストにrole=tablist、各タブにはrole=tabとaria-selectedを持つボタン、各内容にはrole=tabpanelを設定し、aria-controlsとaria-labelledbyでタブと結び付けます。Tabキーで入れるのは有効なタブだけで、タブ間の移動は矢印キーで行います。
JavaScriptが読み込まれない場合は？
コードは、スクリプトが実行されたあとでパネルを隠します。JavaScriptがなければ、すべての内容が上から順に表示され、使えなくなる部分はありません。
タブとアコーディオンのどちらがよいですか？
タブは、パソコンで短いタイトルが少ない場合に向いています。項目が多い場合や文章が長い場合、特にスマートフォンでは、アコーディオン（開閉する質問）のほうが適していることが多いです。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。