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コードソース