タブコンテンツ1

  • ・マークアップについて
     タブパネル(コンテンツ)内に見出しが存在する場合はsection要素、存在しない場合はdiv要素でラップしてください
  • ・キーボード操作について
     選択操作をしない場合、フォーカスは文書構造に沿って上/左の順で当たります(Webページでの基本的な動き)。
     当該タブをクリックした場合、次に表示タブパネル内のリンクなどインタラクティブ要素にフォーカスします
     ※隠れたタブパネル内の要素にフォーカスしません(CSS・visibility: hidden;の仕様)
  • ・JavaScriptまたはCSSをオフにしても閲覧可能
     JSやCSSをユーザー側設定でオフにしてもコンテンツを見られるつくりにしています。
     JSオフの場合タブはページ内リンクとして機能し、コンテンツは縦レイアウトになります
     ※どのような閲覧条件でも、文書情報(コンテンツ)の表示を優先する方針
ダミーのリンクです

タブUIのコンポーネント外に配置されたコンテンツのサンプルです

各タブパネルのラップ要素の高さ(height)値に、各タブパネルのなかで最高値をJavaScriptで付与し、高さ固定しています。そのため、タブUIのあとに続くコンテンツは各タブパネルのコンテンツ量に応じて位置上下しません。