aria-role : tab

13672 ワード
テキストリンク

✅ tablist


アリアキャラに小紙があります.
tabsitはtabとtabpanelをフレームワークに組み合わせ、グループとしてマークします.

✅ tab


ariaキャラクターにtabがあります.
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">Tab label</button>

👍 aria-controls


tabボタンをクリックすると、
aria-controls=「パネルID」でtabをtabpanelに関連付けます.

👍 aria-selected


Webサイトでは、Tablistのほとんどがデフォルトでtabを選択し、対応するtabpanelが表示されます.
aria-selectedは、押下された状態を示すブール状態です.
ステータス値にはtrueとfalseがあります.

👍 ボタンラベル


ボタンラベルはキーボードでアクセスできます.
  • tab:タブリストにフォーカスが移動すると、tabにフォーカスが移動します.

    • ✅ tabpanel


    アリアキャラにはtabpanelがあります.
    tabとtabpanelは1:1対応でなければなりません

    基本例


    <div class="tabs">
  <div role="tablist" aria-label="Entertainment">
    <button role="tab"
            aria-selected="true"
            aria-controls="nils-tab"
            id="nils">
      Nils Frahm
    </button>
    <button role="tab"
            aria-selected="false"
            aria-controls="agnes-tab"
            id="agnes"
            tabindex="-1">
      Agnes Obel
    </button>
    <button role="tab"
            aria-selected="false"
            aria-controls="complexcomplex"
            id="complex"
            tabindex="-1"
            data-deletable="">
      Joke
    </button>
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="nils-tab"
       aria-labelledby="nils">
    <p>
      Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
    </p>
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="agnes-tab"
       aria-labelledby="agnes"
       hidden="">
    <p>
      Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.
    </p>
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="complexcomplex"
       aria-labelledby="complex"
       hidden="">
    <p>
      Fear of complicated buildings:
    </p>
    <p>
      A complex complex complex.
    </p>
  </div>
</div>
    HTMLコードソース
    Bootstrap実現modal中央
    Array method