タブコンテンツ1

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

タブコンテンツ2

• ・タブUIの欠点
  　タブUIの欠点は各タブパネルのコンテンツ量を同等にしないと、下部に大きく余白ができたり、
  　レイアウト上の不ぞろい感を生んだりすることです。また、JSなどで高さを補う必要や手間も生じます。
  　なので、なるべく同等の情報量を持つようにそれぞれをコンテンツ設計してください
  　※「不ぞろいでも別に気にならない」という方もいるかもしれませんが...
• ・タブUIを考える
  　そもそもタブUIであることの利点とは何でしょうか。
  　情報が並列化され構造把握しやすい、スクロールよりクリック/タップのほうが操作コストが低い、などが挙げられるでしょうか。
  　しかしコンテンツは常に見えていたほうが良く、「隠す」「再表示する」などは逆に認知負荷にもなるとも考えられます。
  　以上のことから、タブUIはそこまで汎用的とはいえず、使い所をよく検討したいUIです。

タブコンテンツ3

タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。タブコンテンツ3の内容です。