Web Accessibility Academy · レッスン

タブのパターン：tablist、tab、tabpanel

タブセットに必要な3つのロールを接続します。

「タブのパターン：tablist、tab、tabpanel」はCoddyKit上の無料Web Accessibility Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

What a Tab Set Really Is

A tab set shows one panel at a time and lets users switch between them. To assistive tech it must look like one widget, not loose links.

Three Roles Work Together

The pattern relies on three ARIA roles: a tablist that holds the tabs, each tab, and the panel each tab reveals. Get all three right.

The Container Is a tablist

Wrap your row of tabs in an element with role="tablist". This tells screen readers the children inside are a related set of tabs.

<div role="tablist">...</div>

Each Tab Is a Button

Build each tab from a real button with role="tab". A button is focusable and clickable for free, so you avoid extra wiring.

<button role="tab">Profile</button>

The Panel Is a tabpanel

The content each tab shows gets role="tabpanel". This marks it as the region controlled by the currently selected tab.

<div role="tabpanel">Profile details</div>

Mark the Selected Tab

Set aria-selected="true" on the active tab and false on the rest. Screen readers announce which tab is currently chosen.

<button role="tab" aria-selected="true">Profile</button>

Link Tab to Its Panel

Point each tab at its panel with aria-controls, set to the panel id. Users learn which region the tab opens.

<button role="tab" aria-controls="p1">Profile</button>

Name the Panel From Its Tab

Give the panel an aria-labelledby that points back to its tab. Now the panel borrows the tab text as its accessible name.

<div role="tabpanel" aria-labelledby="tab1">...</div>

Hide the Inactive Panels

Only one panel should show at a time. Add the hidden attribute to the panels whose tab is not selected so they leave the page.

<div role="tabpanel" hidden>...</div>

Give the Tablist a Label

A tablist deserves an aria-label describing its purpose, like Account settings. Users hear what the whole set of tabs is for.

<div role="tablist" aria-label="Account settings">...</div>

How It All Sounds

Put together, a screen reader announces something like Profile, tab, selected, 1 of 3. That orientation is exactly what makes tabs usable.

Quick Check

You are wiring up the container that holds your row of tabs. Which role belongs on it?

Recap: The Tabs Pattern

You learned the tablist, tab, tabpanel trio. Mark the selected tab, link each tab to its panel, and hide the inactive ones.

よくある質問

「タブのパターン：tablist、tab、tabpanel」レッスンは無料ですか？

はい。「タブのパターン：tablist、tab、tabpanel」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「タブのパターン：tablist、tab、tabpanel」で何を学びますか？

タブセットに必要な3つのロールを接続します。ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「タブのパターン：tablist、tab、tabpanel」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Web Accessibility Academyに戻る