{"version":1,"site":{"name":"UI Component Lab","url":"https://oekazuma.github.io/ui-component-lab/"},"categories":[{"id":"action","names":{"en":"Action","ja":"アクション"}},{"id":"input","names":{"en":"Input","ja":"入力"}},{"id":"navigation","names":{"en":"Navigation","ja":"ナビゲーション"}},{"id":"disclosure","names":{"en":"Disclosure","ja":"開閉・切替"}},{"id":"overlay","names":{"en":"Overlay","ja":"オーバーレイ"}},{"id":"feedback","names":{"en":"Feedback","ja":"フィードバック"}},{"id":"data","names":{"en":"Data display","ja":"データ表示"}}],"components":[{"id":"accordion","category":"disclosure","names":{"en":"Accordion","ja":"アコーディオン"},"aliases":[{"name":"Collapse","source":"Ant Design","url":"https://ant.design/components/collapse"}],"summary":{"en":"A vertical stack of headings that each show or hide a section of content.","ja":"縦に並んだ見出しごとに、内容の表示・非表示を切り替える部品です。"},"appearance":{"en":"A list of rows separated by lines, each with a title and a +/− or chevron icon. An open row shows its content directly below the title.","ja":"線で区切られた行が並び、各行にタイトルと「+/−」や山形のアイコンがあります。開いた行はタイトルのすぐ下に内容が出ます。"},"behavior":[{"en":"Clicking a heading opens or closes its section.","ja":"見出しをクリックすると、その項目が開閉します。"},{"en":"The icon changes to show whether the section is open.","ja":"アイコンが変わり、開いているかどうかが分かります。"},{"en":"Some accordions allow only one open section at a time; this demo lets each section open independently.","ja":"同時に1つしか開けないものもあります。このデモでは各項目を独立して開閉できます。"},{"en":"In this demo, the headings are questions, and the first section starts open. The sections hold a paragraph, a link and a list; Tab reaches the link only while its section is open.","ja":"このデモでは、見出しを質問の形にし、先頭の項目を開いた状態で始めます。項目の中には段落、リンク、リストを置いています。リンクには、その項目が開いている間だけ Tab で移れます。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the headings, and into any focusable elements inside open sections.","ja":"見出しの間を移動します。開いた項目の中にフォーカスできる要素があれば、そこにも移ります。"}},{"key":"Enter / Space","action":{"en":"Opens or closes the focused section.","ja":"フォーカス中の項目を開閉します。"}}],"usage":[{"en":"Write each heading as a short summary of its content, such as a question in an FAQ.","ja":"見出しには、よくある質問なら「会員登録の手順は？」のように、中身を要約した文を書きます。"},{"en":"Decide whether sections start open or closed. Opening the first one shows that the ones after it are collapsed in the same way.","ja":"項目を開いた状態で始めるか、閉じた状態で始めるかを決めます。先頭の項目を開いておくと、続く項目も同じように畳まれていることが伝わります。"},{"en":"To collapse supplementary content within a single section, use a disclosure instead.","ja":"1つのセクションの中の補足を畳むなら、ディスクロージャーを使います。"},{"en":"Do not nest it inside a list, table, accordion or disclosure.","ja":"リスト、テーブル、アコーディオン、ディスクロージャーの中には入れません。"},{"en":"The GOV.UK Design System says to use an accordion only if there is evidence that it helps users, because accordions hide content and not all users notice them or understand how they work. It suggests trying simpler approaches first, such as making the content shorter, splitting it across pages or separating it with headings.","ja":"GOV.UK は、役に立つという根拠があるときだけアコーディオンを使うよう求めています。アコーディオンは内容を隠すため、気づかない人や使い方が分からない人がいるからです。まずは内容を簡潔にする、ページを分ける、見出しで区切るといった、より単純な方法を試すよう勧めています。"},{"en":"The U.S. Web Design System suits an accordion to cases where people need only a few pieces of the content, or where space is tight. It advises against one when most users need to see most of the information, or when there is too little content to be worth condensing, since an accordion adds cognitive load and interaction cost.","ja":"U.S. Web Design System は、内容のうち必要な部分が少しだけの場合や、場所が限られている場合にアコーディオンが向いているとしています。ほとんどの利用者が情報の大部分を見る必要がある場合や、まとめるほどの量がない場合は避けるよう勧めています。どの見出しを開くか判断する手間が増え、認知的な負担と操作の手間が増えるためです。"},{"en":"For many pieces of content, the GOV.UK Design System suggests an accordion over tabs, because tabs fit fewer sections. When people view one section at a time or switch quickly, it suggests tabs, which do not push other sections down the page.","ja":"内容の数が多いとき、GOV.UK Design System はタブよりアコーディオンを勧めています。タブには少しの区分しか収まらないためです。一度に 1 つの区分だけを見るときや、すばやく切り替えるときは、ほかの区分を下へ押し下げないタブを勧めています。"}],"misuse":[{"pattern":{"en":"Collapsing information that most users need","ja":"多くの利用者が必要とする情報を閉じた項目に入れる"},"harm":{"en":"People have to open sections one by one to find what they need, which adds clicks, and they can miss essential information.","ja":"必要な情報を探すために項目を1つずつ開くことになり、操作が増えるうえ、大事な情報を見落とすことがあります。"},"instead":{"en":"Show information that most people need directly on the page, even if the page gets longer. Use an accordion for content where each person needs only some of the sections.","ja":"多くの人が必要とする情報は、ページが長くなってもそのまま表示します。アコーディオンは、人によって必要な項目が違う内容に使います。"}},{"pattern":{"en":"Putting fees or contract terms inside a collapsed section","ja":"料金や契約の条件を閉じた項目の中に入れる"},"harm":{"en":"People agree to a purchase or contract without seeing the costs or conditions. They may pay for things they did not choose, or find out about a fee only after they have been charged.","ja":"費用や条件を見ないまま購入や契約に同意してしまいます。選んでいないものにお金を払ったり、請求されてから手数料に気づいたりします。"},"instead":{"en":"Show the total cost and the renewal and cancellation terms in the open, next to the button that confirms the purchase or agreement.","ja":"合計の金額と、自動更新や解約の条件は、購入や同意を確定するボタンの近くに、開いた状態で表示します。"},"deceptive":true}],"related":[{"id":"disclosure","diff":{"en":"An accordion is a set of disclosures stacked under headings; a disclosure is a single toggle on its own.","ja":"アコーディオンはディスクロージャーを見出し付きで縦に並べたもので、ディスクロージャーは単独の開閉部品です。"}},{"id":"tabs","diff":{"en":"An accordion stacks sections vertically and can open several at once; tabs show one panel at a time side by side.","ja":"アコーディオンは項目を縦に積んで複数を同時に開けますが、タブは横に並べて1枚ずつ表示します。"}},{"id":"tree-view","diff":{"en":"An accordion opens sections of content; a tree view opens nested items, such as folders, in several levels.","ja":"アコーディオンは内容のまとまりを開閉し、ツリービューはフォルダのような入れ子の項目を何段にも開閉します。"}}],"sources":[{"label":"Nielsen Norman Group: Accordions on Desktop: When and How to Use","url":"https://www.nngroup.com/articles/accordions-on-desktop/","checkedAt":"2026-10-21"},{"label":"FTC Staff Report: Bringing Dark Patterns to Light (2022)","url":"https://www.ftc.gov/system/files/ftc_gov/pdf/P214800%20Dark%20Patterns%20Report%209.14.2022%20-%20FINAL.pdf","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Sneaking","url":"https://www.deceptive.design/types/sneaking","checkedAt":"2026-10-21"},{"label":"Open UI: Accordion","url":"https://open-ui.org/components/accordion.research","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Accordion Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「アコーディオン」をもとに作成","url":"https://design.digital.go.jp/dads/components/accordion/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「アコーディオン（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/accordion/usage/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: accordion","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/accordion","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Accordion","url":"https://design-system.service.gov.uk/components/accordion/","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: Accordion","url":"https://designsystem.digital.gov/components/accordion/","checkedAt":"2026-11-02"},{"label":"GOV.UK Design System: Tabs","url":"https://design-system.service.gov.uk/components/tabs/","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/accordion/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/accordion/"}},{"id":"alert","category":"feedback","names":{"en":"Alert","ja":"アラート（ノティフィケーションバナー）"},"aliases":[{"name":"Inline notification","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/notification/usage/"},{"name":"ノティフィケーションバナー","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/notification-banner/"},{"name":"Section message","source":"Atlassian Design System","url":"https://atlassian.design/components/section-message"},{"name":"Message bar","source":"Fluent UI React v9","url":"https://fluent2.microsoft.design/components/web/react/core/messagebar/usage"}],"summary":{"en":"An important message shown in the page, announced right away without interrupting what the user is doing.","ja":"ページの中に表示する重要なメッセージです。作業を中断させずに、すぐ読み上げられます。"},"appearance":{"en":"A colored box with an icon and a short message, placed near the related content or at the top of the page. The color shows the type: error, warning, success, or info.","ja":"アイコンと短い文の入った色付きの箱で、関連する内容の近くかページの上部に出ます。色でエラー・警告・成功・お知らせの種類を表します。"},"behavior":[{"en":"Content added to a `role=\"alert\"` element is read out by screen readers without moving focus.","ja":"`role=\"alert\"` の要素に中身を入れると、フォーカスを動かさずにスクリーンリーダーが読み上げます。"},{"en":"An alert that is already on the page when it loads is not announced.","ja":"ページを読み込んだ時点ですでにあるアラートは読み上げられません。"},{"en":"In this demo, the message is rebuilt each time Save is pressed, because putting the same text in again is not read out.","ja":"このデモでは、同じ文を入れ直しても読み上げられないため、「保存」を押すたびにメッセージを作り直しています。"},{"en":"In this demo, the type is given in words (“Error:”) as well as by color and the icon, so the icon is hidden from screen readers to avoid reading it twice.","ja":"このデモでは、色とアイコンに加えて「エラー：」の文字で種類を示します。読み上げが重ならないよう、アイコンはスクリーンリーダーから隠しています。"},{"en":"It should not disappear on its own, so the user has time to read it.","ja":"読む時間を確保するため、自動で消しません。"}],"keyboard":[{"key":"—","action":{"en":"None. An alert does not take focus, so the user can keep working.","ja":"なし。アラートはフォーカスを受けないので、そのまま作業を続けられます。"}}],"usage":[{"en":"Fluent 2 brings a dismissed warning or error back in the next session until the problem is resolved.","ja":"Fluent 2 は、閉じた警告やエラーを、問題が解決するまで次のセッションでまた表示します。"},{"en":"The GOV.UK Design System notification banner is for news that is not directly about what the person is doing on the page. It says to use it sparingly because people often miss banners, to show only one per page, and not to use one for validation errors, which belong in an error message and an error summary.","ja":"GOV.UK のノティフィケーションバナーは、利用者がそのページでしていることに直接関係しない知らせに使います。見落とされやすいので控えめに使うこと、1ページに1つだけにすること、入力エラーには使わず、エラーメッセージとエラーサマリーを使うことを求めています。"},{"en":"The U.S. Web Design System says to start an alert’s text with a word naming its type, so the purpose is clear without relying on color or icon shape. It picks the ARIA role by urgency: `role=\"alert\"` for errors and emergencies, `role=\"status\"` for advisory messages such as success, and `role=\"region\"` for informative or warning messages that should not interrupt.","ja":"U.S. Web Design System は、色やアイコンの形に頼らず目的が分かるよう、アラートの文を種類を表す言葉で始めるよう求めています。ARIA ロールは緊急度で選び、エラーや緊急のお知らせには `role=\"alert\"`、成功のような補足的な知らせには `role=\"status\"`、割り込ませたくない情報や警告には `role=\"region\"` を使います。"}],"misuse":[{"pattern":{"en":"Showing the type of message by color alone","ja":"メッセージの種類を色だけで示す"},"harm":{"en":"People with low vision or color vision deficiency, many older people, and anyone on a monochrome or limited-color display cannot tell an error from a success, so they can miss what the message means.","ja":"弱視や色覚に特性のある人、色を見分けにくくなった高齢の人、白黒や色数の少ない画面で見ている人には、エラーか成功かが分からず、メッセージの意味を受け取れないことがあります。"},"instead":{"en":"Pair the color with an icon and words that name the type, such as “Error:” or “Done:”.","ja":"色に加えて、種類を表すアイコンと「エラー：」「完了：」のような文言を添えます。"}},{"pattern":{"en":"Showing alerts one after another","ja":"アラートを次々と出す"},"harm":{"en":"Every alert interrupts the user. Frequent interruptions make the page harder to use for people with visual or cognitive disabilities, and a stream of notices breaks anyone’s concentration.","ja":"アラートは出るたびに利用者に割り込みます。頻繁に割り込まれると、視覚や認知に障害のある人には使いにくくなります。通知が多いと、だれでも集中が途切れます。"},"instead":{"en":"Use an alert only for what the user needs to know now. Combine related messages into one, and show the rest in the page without `role=\"alert\"`.","ja":"アラートは今すぐ知る必要があることだけに使います。関連するメッセージは1つにまとめ、それ以外は `role=\"alert\"` を付けずにページに載せます。"}},{"pattern":{"en":"Removing the alert automatically after a few seconds","ja":"数秒後に自動で消す"},"harm":{"en":"People who need more time to find and read content, such as screen reader users and people with low vision or cognitive disabilities, can lose the message before they finish reading it.","ja":"スクリーンリーダーの利用者や、弱視や認知に障害のある人など、内容を見つけて読むのに時間がかかる人は、読み終える前にメッセージを見失うことがあります。"},"instead":{"en":"Keep the alert until it is no longer needed or the user closes it.","ja":"不要になるか、利用者が閉じるまで表示しておきます。"}}],"related":[{"id":"toast","diff":{"en":"An alert stays in the page content; a toast floats over the page, and one with only a message disappears on its own.","ja":"アラートはページの中に残り、トーストはページの上に浮かんで、文字だけのものは自動で消えます。"}},{"id":"alert-dialog","diff":{"en":"An alert informs without interrupting; an alert dialog stops the user until they respond.","ja":"アラートは作業を中断させずに知らせ、アラートダイアログは応答するまで作業を止めます。"}},{"id":"callout","diff":{"en":"An alert tells the user something important, and content added to it is announced right away; a callout sets apart helpful extra information and is never announced on its own.","ja":"アラートは重要なことを知らせ、中身を入れるとすぐに読み上げられます。注釈ブロックは役立つ補足を区別して見せるだけで、ひとりでに読み上げられることはありません。"}},{"id":"emergency-banner","diff":{"en":"An alert carries ordinary important messages and can stay up for a long time; an emergency banner warns about urgent danger and cannot be closed.","ja":"アラートはふだんの重要なお知らせを長く載せておけますが、緊急時バナーは差し迫った危険を知らせ、閉じられません。"}},{"id":"empty-state","diff":{"en":"An alert reports something important and is announced right away; an empty state stands in for missing content and points to the next step.","ja":"アラートは大事なことを知らせ、すぐに読み上げられますが、空の状態は内容がないときにその代わりに置き、次の操作を示します。"}},{"id":"cookie-banner","diff":{"en":"An alert reports an important message and asks for nothing; a cookie banner asks the visitor to accept or reject optional cookies and is replaced by a confirmation once answered.","ja":"アラートは重要なお知らせを伝えるだけで何も求めませんが、Cookie バナーは任意の Cookie を受け入れるか拒否するかを尋ね、答えると確認の文に替わります。"}}],"sources":[{"label":"WAI-ARIA APG: Alert Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/alert/","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 2.2.1: Timing Adjustable (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Notification","url":"https://carbondesignsystem.com/components/notification/usage/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ノティフィケーションバナー」をもとに作成","url":"https://design.digital.go.jp/dads/components/notification-banner/","checkedAt":"2026-10-20"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Notification banner","url":"https://design-system.service.gov.uk/components/notification-banner/","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: Alert","url":"https://designsystem.digital.gov/components/alert/","checkedAt":"2026-11-02"},{"label":"Fluent 2 Design System: Message bar","url":"https://fluent2.microsoft.design/components/web/react/core/messagebar/usage","checkedAt":"2026-11-03"},{"label":"MDN: ARIA: alert role","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/alert/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/alert/"}},{"id":"alert-dialog","category":"overlay","names":{"en":"Alert dialog","ja":"アラートダイアログ"},"aliases":[{"name":"Alert","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/alerts"}],"summary":{"en":"A modal dialog that interrupts the user with an urgent message and waits for a response.","ja":"緊急のメッセージで作業を中断させ、応答を待つモーダルダイアログです。"},"appearance":{"en":"Looks like a modal dialog: a box over a dimmed page with a short title, a message and two buttons, one of them for the risky action. In this demo, “Discard” is the same filled button as other main actions; the safer “Keep editing” is on the left and “Discard” on the right.","ja":"モーダルダイアログと同じく、暗くした背景の上に箱が出ます。箱には短いタイトルと本文、2つのボタンがあり、片方は危険な操作のボタンです。このデモの「破棄」は、ほかの主な操作と同じ塗りのボタンで、安全な「編集を続ける」を左、「破棄」を右に置きます。"},"behavior":[{"en":"It has `role=\"alertdialog\"`, which lets browsers and screen readers tell it apart from other dialogs, so they can treat it specially, for example with an alert sound. Its title and message are tied to it with `aria-labelledby` and `aria-describedby`.","ja":"`role=\"alertdialog\"` を持つので、ブラウザやスクリーンリーダーはほかのダイアログと区別でき、警告音を鳴らすなどの特別な扱いができます。タイトルと本文は `aria-labelledby` と `aria-describedby` で結びます。"},{"en":"When it opens, focus goes to the least destructive button; in this demo, “Keep editing”.","ja":"開くと、最も安全なボタンにフォーカスが移ります。このデモでは「編集を続ける」です。"},{"en":"Like any modal, the page behind cannot be used until it closes, and focus then returns to the button that opened it.","ja":"他のモーダルと同じく、閉じるまで背後のページは使えず、閉じると開いたボタンにフォーカスが戻ります。"},{"en":"In this demo, the note stays on the page and the dialog only asks for confirmation. “Discard” empties the note; “Keep editing” or Esc leaves it as it was.","ja":"このデモでは、メモ欄はページに置いたままで、ダイアログは確認だけをします。「破棄」を選ぶとメモが空になり、「編集を続ける」か Esc ではそのまま残ります。"},{"en":"In this demo, the dialog opens inside the demo frame and dims only the frame, so it is easy to see which demo it belongs to. On a real page, it dims the whole page.","ja":"このデモでは、どのデモの動きかが分かりやすいよう、ダイアログをデモの枠の中に出し、枠の中だけを暗くします。実際のページでは、ページ全体を暗くします。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the dialog’s buttons.","ja":"ダイアログ内のボタンの間を移動します。"}},{"key":"Enter / Space","action":{"en":"Activates the focused button.","ja":"フォーカス中のボタンを押します。"}},{"key":"Esc","action":{"en":"Closes the dialog as if “Keep editing” was chosen.","ja":"「編集を続ける」を選んだのと同じ扱いで閉じます。"}}],"usage":[{"en":"Use it only for urgent messages that need a decision, such as confirming an action that cannot be undone.","ja":"取り消せない操作の確認など、判断が必要な緊急のメッセージにだけ使います。"},{"en":"Apple Human Interface Guidelines call an alert critical information that people need right away, and say to use alerts sparingly. They advise against an alert that only informs, and against one for common actions that can be undone. Buttons are titled with verbs that say the result, such as “Delete”, and “OK” is not the default unless the alert is purely informational.","ja":"Apple Human Interface Guidelines は、アラートを今すぐ必要な重要な情報を伝えるものとし、控えめに使うよう求めています。情報を伝えるだけのアラートや、元に戻せるよくある操作のためのアラートは避けます。ボタンの名前は「削除」のように結果を表す動詞にし、情報を伝えるだけのアラートでない限り、「OK」を既定のボタンにしません。"}],"misuse":[{"pattern":{"en":"Relying on the confirmation dialog as the only safeguard, or asking for confirmation on routine actions","ja":"確認ダイアログだけを安全策にしたり、日常的な操作にも確認を出したりする"},"harm":{"en":"When confirmations appear often, people stop reading them and press the confirm button out of habit, so the dialog no longer prevents mistakes; people can still delete things such as their account by accident even after several confirmations.","ja":"確認がたびたび出ると、利用者は読まずに反射的に確定のボタンを押すようになり、誤操作を防げなくなります。何度確認しても、アカウントなどを誤って削除してしまうことがあります。"},"instead":{"en":"Keep confirmations for actions that destroy work or cost money, say exactly what will happen, and label the buttons with their outcome, such as “Delete file” and “Keep file”. Wherever possible, let people undo or restore instead.","ja":"確認は作業内容が消える操作やお金がかかる操作に絞り、何が起きるかを具体的に書き、「ファイルを削除」「ファイルを残す」のように結果がわかるボタン名にします。できる限り、取り消しや復元ができるようにします。"}},{"pattern":{"en":"Wording the decline button to make people feel guilty or foolish","ja":"断るボタンに、罪悪感や恥ずかしさを覚えさせる文言を付ける"},"harm":{"en":"Being made to feel guilty or foolish for saying no pressures people into the choice the provider wants, even one they would not otherwise make.","ja":"断ることに後ろめたさや恥ずかしさを感じさせられ、本来なら選ばない、提供する側の望む選択をしてしまいます。"},"instead":{"en":"Label both buttons neutrally with what they do, such as “Cancel subscription” and “Keep subscription”.","ja":"「解約する」「契約を続ける」のように、両方のボタンに操作の結果だけを中立的な言葉で書きます。"},"deceptive":true}],"related":[{"id":"modal","diff":{"en":"An alert dialog is a modal for an urgent message that needs a response; its role lets browsers and screen readers tell it apart from other dialogs.","ja":"アラートダイアログは応答が必要な緊急のメッセージ用のモーダルで、ブラウザやスクリーンリーダーはその role でほかのダイアログと区別できます。"}},{"id":"alert","diff":{"en":"An alert dialog stops the user until they respond; an alert informs without interrupting.","ja":"アラートダイアログは応答するまで作業を止め、アラートは作業を中断させずに知らせます。"}},{"id":"toast","diff":{"en":"An alert dialog stops people and asks before an action that cannot be undone; a toast reports a result after the action has run and can offer Undo.","ja":"アラートダイアログは取り消せない操作の前に止めて確認しますが、トーストは操作のあとに結果を伝え、「元に戻す」を添えることもできます。"}}],"sources":[{"label":"WAI-ARIA APG: Alert and Message Dialogs Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Alert Dialog Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/","checkedAt":"2026-10-21"},{"label":"MDN: ARIA alertdialog role","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alertdialog_role","checkedAt":"2026-10-21"},{"label":"Nielsen Norman Group: Confirmation Dialogs Can Prevent User Errors — If Not Overused","url":"https://www.nngroup.com/articles/confirmation-dialog/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「モーダルダイアログ」をもとに作成","url":"https://design.digital.go.jp/dads/components/modal-dialog/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「ボタン（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/button/usage/","checkedAt":"2026-10-21"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Confirmshaming","url":"https://www.deceptive.design/types/confirmshaming","checkedAt":"2026-10-21"},{"label":"Apple Human Interface Guidelines: Alerts","url":"https://developer.apple.com/design/human-interface-guidelines/alerts","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/alert-dialog/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/alert-dialog/"}},{"id":"avatar","category":"data","names":{"en":"Avatar","ja":"アバター"},"aliases":[],"summary":{"en":"A small picture, initial, or icon that stands for a person or account.","ja":"人やアカウントを表す、小さな写真・頭文字・アイコンです。"},"appearance":{"en":"A circle (sometimes a rounded square) with a photo or a colored background and an initial. Several can overlap in a row with a “+N” at the end.","ja":"写真か、色の付いた背景に頭文字を入れた丸（角丸の四角のこともある）です。複数を少し重ねて並べ、最後に「+N」を付けることもあります。"},"behavior":[{"en":"When there is no photo, or it fails to load, it falls back to an initial or a generic icon.","ja":"写真がないときや読み込めないときは、代わりに頭文字や汎用のアイコンを表示します。"},{"en":"If the person’s name is already next to it, the avatar is decorative (`alt=\"\"`), so the name is not read twice; otherwise it needs the name as alternative text.","ja":"隣に名前があるならアバターは飾り扱い（`alt=\"\"`）にして、名前が2回読み上げられないようにします。ないなら名前を代替テキストとして付けます。"},{"en":"In this demo, the member list shows no names, so the photo has the name as its `alt`, and each initial is hidden from screen readers with the full name read instead. In the line below, the name is shown next to the photo, so the photo is decorative.","ja":"このデモのメンバー一覧には名前が見えていないので、写真の `alt` に名前を入れ、頭文字はスクリーンリーダーから隠して代わりにフルネームを読ませています。下の行では写真の隣に名前があるので、写真は飾り扱いにしています。"},{"en":"In this demo, the second photo is an empty data URL that fails to load without a network request, and the `error` event switches it to the initial.","ja":"このデモでは、2人目の写真を、通信せずに読み込みに失敗する空の data URL にしています。`error` イベントで頭文字に切り替わります。"}],"keyboard":[{"key":"—","action":{"en":"None. An avatar that opens a profile is a link or button and follows its keys.","ja":"なし。プロフィールを開くアバターはリンクかボタンにし、そのキー操作に従います。"}}],"misuse":[{"pattern":{"en":"Showing an avatar with no name anywhere","ja":"名前をどこにも示さずにアバターだけを置く"},"harm":{"en":"People who have difficulty seeing the picture and use a screen reader or braille cannot get information that exists only in the picture, so they cannot tell whose avatar it is.","ja":"画像を見て内容をつかむことが難しく、スクリーンリーダーや点字を使う人には、画像にしかない情報が届かず、誰のアバターなのかが分かりません。"},"instead":{"en":"Give the avatar the person’s name as alternative text, or show the name next to it and mark the avatar as decorative.","ja":"アバターに名前を代替テキストとして付けます。隣に名前を表示するなら、アバターは飾り扱いにします。"}}],"sources":[{"label":"MUI: Avatar","url":"https://mui.com/material-ui/react-avatar/","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 1.1.1: Non-text Content (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html","checkedAt":"2026-10-21"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/avatar/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/avatar/"}},{"id":"back-to-top","category":"navigation","names":{"en":"Back to top button","ja":"スクロールトップボタン"},"aliases":[{"name":"スクロールトップボタン","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/scroll-top-button/"}],"summary":{"en":"A button that returns a long page to its top in one step.","ja":"長いページの先頭へ、ひと操作で戻るためのボタンです。"},"appearance":{"en":"A small button with an upward arrow and a label such as “Back to top”, usually in the lower right corner of the screen. It often appears only after the page has been scrolled down.","ja":"上向きの矢印と「ページの先頭へ」のようなラベルを付けた小さなボタンで、多くは画面の右下の隅にあります。ページを下までスクロールしてから現れることが多いです。"},"behavior":[{"en":"Pressing it scrolls back to the top of the page.","ja":"押すと、ページの先頭までスクロールして戻ります。"},{"en":"The browser already does the same with the Home key, and Safari on iPhone does it when the status bar at the top of the screen is tapped.","ja":"ブラウザでは、すでに Home キーで同じことができます。iPhone の Safari では、画面上端のステータスバーをタップしても同じことができます。"},{"en":"In this demo, the article scrolls inside its own box so the page stays still, and it starts partway down. The button stays in the lower right of the box, appears only after scrolling about half the height of the box, and moves focus to the article’s title when pressed, so the next Tab starts from the top instead of from the hidden button.","ja":"このデモでは、ページを動かさないよう、記事を専用の枠の中でスクロールさせ、途中までスクロールした状態で始めます。ボタンは枠の右下にとどまり、枠の高さの半分ほどスクロールしてから現れます。押すと記事のタイトルへフォーカスを移し、次に Tab キーを押したとき、消えたボタンの位置からではなく先頭から移るようにしています。"},{"en":"In this demo, the box itself can take focus, so with focus in the box, Home and End also scroll it to the start and the end. If the button has focus when it hides, focus moves to the box.","ja":"このデモでは枠そのものにもフォーカスでき、枠にフォーカスがあるときは Home キーと End キーでも先頭と末尾へスクロールします。ボタンにフォーカスがあるまま消えるときは、枠へフォーカスを移します。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"Returns to the top.","ja":"先頭へ戻ります。"}},{"key":"Home / End","action":{"en":"With focus in the box, scrolls to the start / end. This is the browser’s own feature.","ja":"枠にフォーカスがあるとき、先頭・末尾へスクロールします。ブラウザの機能です。"}}],"usage":[{"en":"The Digital Agency Design System no longer recommends this component: it has accessibility problems and does not make pages easier to use, since the browser can already return to the top. If you use it anyway, keep in mind the people it gets in the way of.","ja":"デジタル庁デザインシステムは、この部品の使用を推奨していません。アクセシビリティの問題があり、ブラウザでも先頭へ戻れるので使いやすさも上がらない、という理由によります。それでも使う場合は、不利益を受ける人がいることを踏まえて慎重に使います。"},{"en":"Nielsen Norman Group takes a different view: most people do not know shortcuts such as the Home key, so for pages longer than about four screens it suggests one button per page in the lower right corner, labeled in words, and small enough not to cover content. It also suggests showing it only once people have scrolled a few screens and start scrolling back up, and notes that other techniques, such as navigation at the bottom of the page or sticky menus, may work better.","ja":"Nielsen Norman Group は、Home キーのような方法を知らない人が多いとして、画面およそ4つ分より長いページでは、ボタンをページに1つだけ右下の隅に置き、文字のラベルを付け、内容を覆わない小ささにすることを勧めています。何画面か下までスクロールして上へ戻ろうとしたときに初めて出すことも提案し、ページ下部のナビゲーションや固定のメニューなど、ほかの方法のほうが合う場合もあるとしています。"}],"misuse":[{"pattern":{"en":"Keeping the button fixed over the content at all times","ja":"ボタンを内容の上に重ねて、常に画面に固定しておく"},"harm":{"en":"A fixed button always hides part of the content, which gets in the way of reading, especially for people who zoom in.","ja":"固定したボタンは常に内容の一部を隠し、特に画面を拡大して見ている人の閲覧を妨げます。"},"instead":{"en":"Consider leaving it out, since the Home key and the browser already return to the top. If you add it, show it only once people have scrolled a few screens and start scrolling back up, and keep it small.","ja":"Home キーやブラウザの機能で先頭へ戻れるので、置かないことを検討します。置くなら、何画面か下までスクロールして上へ戻ろうとしたときに初めて出し、小さくします。"}},{"pattern":{"en":"Placing the button at the end of the page’s source as the way back for keyboard users","ja":"ボタンをページのソースの最後に置き、キーボードの利用者が先頭へ戻る手段にする"},"harm":{"en":"Keyboard users have to move focus all the way to the end of the page to reach it, so they cannot use it to go back from partway down.","ja":"キーボードの利用者は、ページの最後までフォーカスを移さないとボタンに届かず、途中から先頭へ戻るのには使えません。"},"instead":{"en":"Do not count on it for keyboard users. The Home key returns to the top.","ja":"キーボードの利用者向けの手段としては当てにしません。先頭へは Home キーで戻れます。"}}],"related":[{"id":"floating-action-button","diff":{"en":"A back to top button has one job, returning to the top; a floating action button stands for the main action of a screen, such as creating something.","ja":"スクロールトップボタンは先頭へ戻ることだけを受け持ち、フローティングアクションボタンは何かを作るなど、画面の主な操作を受け持ちます。"}},{"id":"link","diff":{"en":"A back to top button only returns to the top of the current page; a link moves to any page or place.","ja":"スクロールトップボタンは今のページの先頭へ戻るだけで、リンクはどのページや場所へも移れます。"}},{"id":"button","diff":{"en":"A back to top button is a button for one job, returning to the top, that often floats over the page; a button runs any action in its place in the layout.","ja":"スクロールトップボタンは先頭へ戻ることだけを受け持ち、ページの上に浮かぶことが多いです。ボタンはレイアウトの中の決まった場所で、さまざまな操作を実行します。"}},{"id":"skip-link","diff":{"en":"A back to top button returns to the top after reading; a skip link at the very top jumps past the header to the main content.","ja":"スクロールトップボタンは読み進めたあとに先頭へ戻り、スキップリンクはページの先頭からヘッダーを飛ばして本文へ移ります。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「スクロールトップボタン」をもとに作成","url":"https://design.digital.go.jp/dads/components/scroll-top-button/","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Back-to-Top Button Design Guidelines","url":"https://www.nngroup.com/articles/back-to-top/","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/back-to-top/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/back-to-top/"}},{"id":"badge","category":"data","names":{"en":"Badge","ja":"バッジ"},"aliases":[],"summary":{"en":"A small marker on another element, such as an unread count on a notification button.","ja":"通知ボタンの未読件数のように、別の要素に重ねて付ける小さな印です。"},"appearance":{"en":"A small round or pill-shaped label, usually red, in the top-right corner of an icon or button, holding a number or just a dot.","ja":"アイコンやボタンの右上に重なる小さな丸や角丸の印で、多くは赤色です。数字が入るか、点だけのこともあります。"},"behavior":[{"en":"Updates when the count changes and disappears at zero; in this demo, pressing a button clears its badge.","ja":"件数が変わると更新され、0になると消えます。このデモではボタンを押すとバッジが消えます。"},{"en":"Large numbers are capped, such as “99+” for 120.","ja":"大きな数は、120件を「99+」とするように頭打ちにします。"},{"en":"In this demo, the badge itself is hidden from screen readers; the count is put into the name of the button it belongs to, such as “Notifications, 3 unread”. A capped count goes into the name as shown, “99+”, so that voice control users can say what they see.","ja":"このデモでは、バッジ自体はスクリーンリーダーから隠し、件数は「通知、未読3件」のように持ち主のボタンの名前に含めます。頭打ちにした件数は見えているとおり「99+」と名前に入れ、音声で操作する人が見たままの言葉で呼べるようにします。"},{"en":"In this demo, the buttons show only an icon, so each gets its name from `aria-label`. A dot carries no number, so the name says “new” instead.","ja":"このデモのボタンはアイコンだけなので、名前は `aria-label` で付けます。ドットには数がないため、名前に「新着あり」と入れます。"}],"keyboard":[{"key":"—","action":{"en":"None. The badge itself has no keyboard interaction; the button it sits on uses Enter / Space.","ja":"なし。バッジ自体にはキー操作がなく、付いているボタンは Enter / Space で押せます。"}}],"variations":[{"name":{"en":"Count","ja":"件数"},"description":{"en":"A number, capped at a maximum such as “99+”. It is usually hidden at zero.","ja":"数字を入れるものです。「99+」のように上限で頭打ちにし、0のときはふつう隠します。"}},{"name":{"en":"Dot","ja":"ドット"},"description":{"en":"A small dot with no number, showing only that there is something new.","ja":"数字のない小さな点で、新しいものがあることだけを示すものです。"}}],"usage":[{"en":"Material Design 3 puts a badge at the ending edge of an icon in a component such as a navigation bar. A small badge, a plain dot, marks something new, and a large badge shows a count of up to four characters, including a + for more. A badge keeps a fixed position and is not moved over its icon, and in a navigation bar it is hidden once the destination is selected.","ja":"Material Design 3 は、ナビゲーションバーなどの部品の中で、アイコンの末尾側の端にバッジを付けます。小さなバッジは丸い点だけで新しい通知を示し、大きなバッジは件数などを最大4文字（「+」を含む）で示します。バッジの位置は固定でアイコンの上には重ねず、ナビゲーションバーでは移動先を選んだらバッジを隠します。"}],"related":[{"id":"tag","diff":{"en":"A badge is attached to another element to show a count or status; a tag stands on its own as a label for content.","ja":"バッジは別の要素に付けて件数や状態を示し、タグは単独で内容のラベルとして置きます。"}}],"sources":[{"label":"Understanding Success Criterion 2.5.3: Label in Name (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html","checkedAt":"2026-10-21"},{"label":"MUI: Badge","url":"https://mui.com/material-ui/react-badge/","checkedAt":"2026-10-21"},{"label":"Material Design 3: Badge","url":"https://m3.material.io/components/badges/guidelines","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/badge/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/badge/"}},{"id":"bottom-navigation","category":"navigation","names":{"en":"Bottom navigation","ja":"ボトムナビゲーション"},"aliases":[{"name":"Navigation bar","source":"Material Design 3","url":"https://m3.material.io/components/navigation-bar/overview"},{"name":"Tab bar","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/tab-bars"}],"summary":{"en":"A bar along the bottom of a phone-sized screen with three to five top-level destinations, each an icon with a label and one marked as the current one. The Digital Agency Design System no longer recommends it.","ja":"スマートフォンほどの大きさの画面の下端に置く、3〜5個の最上位の行き先を並べたバーです。行き先はアイコンとラベルで示し、1つを今いる場所として示します。デジタル庁デザインシステムは、使うことを勧めていません。"},"appearance":{"en":"A full-width bar fixed to the bottom edge of the screen, divided into equal-width items. Each item has an icon with a short text label below it, and the current item is set apart with something besides color, such as a filled icon or a pill-shaped indicator.","ja":"画面の下端に固定した、幅いっぱいのバーです。同じ幅の項目に分かれ、各項目はアイコンとその下の短い文字のラベルでできています。今の項目は、塗りつぶしたアイコンや丸みのある帯など、色のほかの手がかりでも区別します。"},"behavior":[{"en":"Each item takes people to one top-level destination of the product. The bar stays in the same place while the content above it changes, so people can move on to another destination.","ja":"項目はそれぞれ、サービスの最上位の行き先の1つへ移ります。バーは同じ場所に残ったまま上の内容が切り替わるので、続けて別の行き先へ移れます。"},{"en":"One destination is always current. Material Design 3 marks it with a filled icon and an active indicator, and uses the indicator for one destination at a time.","ja":"今の行き先は、常に1つあります。Material Design 3 では塗りつぶしたアイコンとアクティブインジケーターで示し、インジケーターを付けるのは同時に1つの行き先だけです。"},{"en":"When the destinations are links to pages, the current one has `aria-current=\"page\"` as well as the visible mark. Only one element in a set is marked with `aria-current`. A tab that is selected rather than current uses `aria-selected` instead, which is how this differs from tabs.","ja":"行き先がページへのリンクのときは、今の項目に、見た目の印に加えて `aria-current=\"page\"` を付けます。`aria-current` を付けるのは、1つの集まりの中で1つの要素だけです。現在のものではなく選択されたタブには `aria-selected` を使います。ここがタブとの違いです。"},{"en":"It is a `<nav>` with a list of links. A page can have several `<nav>` elements, and MDN suggests naming each (for example with `aria-labelledby`) so they can be told apart.","ja":"`<nav>` の中にリンクの一覧を置いて作ります。1つのページに `<nav>` が複数あってよく、MDN は、区別できるよう、それぞれに名前を付けることを勧めています（たとえば `aria-labelledby`）。"},{"en":"Choosing the destination that is already current scrolls its content back to the top. When moving to another destination, the product either returns to where the person left off there (scroll position, tab, in-line search) or resets it, depending on what suits the product.","ja":"すでに今の行き先を選び直すと、その内容の先頭へ戻ります。別の行き先へ移るときは、前に離れた状態（スクロール位置、タブ、ページ内の検索）に戻すか、初期の状態にするか、サービスに合うほうを選びます。"},{"en":"Swiping across the screen does not move between destinations. Material Design 3 reserves swiping for related items such as carousel cards, or for actions such as archiving.","ja":"画面を横になぞっても、行き先は切り替わりません。Material Design 3 は、なぞる操作をカルーセルのカードのような関連する項目や、アーカイブのような操作のために空けておくとしています。"},{"en":"In this demo, the `<nav>` comes before the content in the source, and CSS only draws it below the content. Tab reaches the bar first, which avoids the problem the Digital Agency Design System describes for a bar placed last in the DOM. The cost is that the focus order no longer matches what is drawn: Tab goes through the bar at the bottom and then jumps back up to the Reset button at the top of the frame.","ja":"このデモでは、`<nav>` を内容より前に置き、CSS で内容の下に描いています。Tab キーはバーにいちばん先に届くので、デジタル庁デザインシステムが挙げる、バーを DOM の最後に置いたときの問題を避けられます。代わりに、フォーカスの順序と描いてある位置が合わなくなります。Tab キーは下のバーを通ったあと、枠の上端にあるリセットのボタンへ戻るように移ります。"},{"en":"In this demo, the bar sits at the bottom of the phone-shaped frame, not of the browser window, and choosing an item does not leave the page. It marks the item as current and changes the heading of the content. The current item has a bar above it and bold text, not only a different color.","ja":"このデモでは、バーはブラウザーの画面ではなく、スマートフォン形の枠の下端に置きます。項目を選んでもページは移らず、その項目を今の項目として示し、内容の見出しを切り替えます。今の項目には、色を変えるだけでなく、上の線と太字も付けます。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves through the items in order. In this demo the bar is reached first, even though it is drawn at the bottom, because it is first in the source.","ja":"項目を順に移動します。このデモでは、バーは内容より前に置いてあるので、下に描いていても最初に届きます。"}},{"key":"Enter","action":{"en":"On a link, goes to that destination.","ja":"リンクでは、その行き先へ移ります。"}}],"variations":[{"name":{"en":"Vertical and horizontal items","ja":"縦並びの項目と横並びの項目"},"description":{"en":"Material Design 3 puts the label below the icon in compact windows such as phones, and beside it in medium windows such as tablets. For expanded windows it advises a navigation rail instead, not a navigation bar.","ja":"Material Design 3 では、スマートフォンのような小さな画面ではアイコンの下に、タブレットのような中くらいの画面ではアイコンの横にラベルを置きます。大きな画面には、ナビゲーションバーではなくナビゲーションレールを使うよう案内しています。"}},{"name":{"en":"Floating tab bar","ja":"浮かせたタブバー"},"description":{"en":"On iOS, Apple’s tab bar floats above the content at the bottom of the screen, on a translucent background. On iPadOS the system shows it near the top of the screen instead, and it can be changed into a sidebar.","ja":"Apple の iOS のタブバーは、画面の下で内容の上に浮かび、背景が透けます。iPadOS では、システムが画面の上のほうに出し、サイドバーに変えることもできます。"}},{"name":{"en":"Icons only for inactive items","ja":"現在でない項目はアイコンだけ"},"description":{"en":"MUI shows the labels all the time when there are three destinations, and only the icon on inactive items when there are four or five. Material Design 3 and Apple both ask for a label on every item, so check which guidance fits before dropping them.","ja":"MUI は、行き先が3つのときはラベルを常に見せ、4つか5つのときは今でない項目をアイコンだけにする例を示しています。Material Design 3 と Apple はどちらもすべての項目にラベルを付けるよう求めているので、外す前にどの指針に沿うか確かめます。"}},{"name":{"en":"Badges","ja":"バッジ"},"description":{"en":"A small badge on an icon shows that something has been updated, and a larger badge shows how many updates there are. Apple reserves badges for critical information so they keep their meaning.","ja":"アイコンに付ける小さなバッジは更新があることを、大きなバッジは更新の件数を示します。Apple は、バッジの意味が薄れないよう、重要な情報のためだけに使うよう勧めています。"}}],"usage":[{"en":"The Digital Agency Design System marks the bottom navigation as deprecated: it says the component is no longer recommended for accessibility or usability reasons. If it cannot be avoided, it asks people to use it carefully, bearing in mind the users who are put at a disadvantage.","ja":"デジタル庁デザインシステムは、ボトムナビゲーションを非推奨（deprecated）としています。アクセシビリティやユーザビリティの観点などから、使うことを勧めないコンポーネントだとしています。やむを得ず使うときは、不利益を受ける利用者がいることを踏まえて、注意深く使うよう求めています。"},{"en":"Its reasons: fixing the navigation to the bottom of the screen can conflict with the mobile browser’s own UI and gesture areas when people try to use it. And when the navigation is last in the DOM, keyboard users have to move focus all the way down to it even though it is visible, and screen reader users have a hard time finding it.","ja":"理由は次の2つです。画面の下にナビゲーションを固定すると、操作しようとしたときに、モバイルブラウザーの UI やジェスチャーの領域と競合するおそれがあります。また、ナビゲーションを DOM の最後に置くと、目には見えていても、キーボード操作では最後までフォーカスを移さないと届かず、スクリーンリーダーでも見つけにくくなります。"},{"en":"Instead, the Digital Agency Design System says to put a horizontal menu at the top of the page, and on phones to combine a hamburger menu button with a mobile menu.","ja":"代わりにデジタル庁デザインシステムは、ページの上部に水平メニューを置き、スマートフォンではハンバーガーメニューボタンとモバイルメニューを組み合わせて使うよう案内しています。"},{"en":"Material Design 3 and Apple describe it for native apps. Material Design 3 lists its navigation bar as available for Android, Compose and Flutter and as unavailable for the Web, and says that bottom navigation was renamed navigation bar and that the baseline bar is no longer recommended. Apple’s tab bar is guidance for apps on Apple platforms such as iOS and iPadOS. The Digital Agency Design System’s deprecation is about websites, so these are not rival advice for one context. What they do say about the bar in an app: three to five main destinations of equal importance on phones and tablets only (Material Design 3), and the top-level sections of an app (Apple). MUI, a React library for the web, also offers a bottom navigation component for three to five primary destinations.","ja":"Material Design 3 と Apple は、ネイティブアプリの部品として説明しています。Material Design 3 はナビゲーションバーを、Android、Compose、Flutter 向けには提供し、Web 向けには提供していないとしています。また、ボトムナビゲーションがナビゲーションバーに名前を変えたこと、従来のバーは勧められなくなったことも書いています。Apple のタブバーは、iOS や iPadOS など Apple のプラットフォームのアプリ向けの指針です。デジタル庁デザインシステムが非推奨としているのはウェブサイトの場合なので、同じ場面についての食い違う助言ではありません。アプリでのバーについては、スマートフォンとタブレットだけで同じ重みの3〜5個の主要な行き先（Material Design 3）、アプリの最上位の区分（Apple）としています。ウェブ向けの React ライブラリの MUI にも、3〜5個の主要な行き先のためのボトムナビゲーションの部品があります。"},{"en":"Keep it to three to five destinations. Material Design 3 says that with more than five the items may collide and leave too little room for translated text, and to use tabs for related content within a page or a menu icon that opens a modal navigation rail instead. With fewer than three destinations, it advises tabs. Apple advises avoiding the More tab that appears when there are too many tabs, because it makes the hidden ones harder to reach and notice.","ja":"行き先は3〜5個にします。Material Design 3 は、5個より多いと項目がぶつかり、翻訳した文字の場所も足りなくなるおそれがあるとし、ページ内の関連する内容にはタブ、または、メニューのアイコンから開くモーダルのナビゲーションレールを使うよう案内しています。3個に満たないときはタブを勧めています。Apple は、タブが多すぎると現れる「その他」のタブを避けるよう勧めています。隠れた項目に気づきにくく、届きにくくなるためです。"},{"en":"Use it to move between sections, not to act. Apple says a tab bar is for navigation and that controls acting on the current view belong in a toolbar, and Material Design 3 says not to use it for a single task such as viewing one email. Use tabs for related content within a page, and the bar for distinct pages.","ja":"操作ではなく、区分の移動に使います。Apple は、タブバーはナビゲーションのためのもので、今の画面に働きかける操作はツールバーに置くとし、Material Design 3 は、メールを1通開くような1つの作業には使わないとしています。関連する内容を1ページの中で切り替えるときはタブ、別々のページにはこのバーを使います。"},{"en":"Give every item a label as well as an icon, of one or two words. Material Design 3 says the label is another way to understand the icon and should not be wrapped, truncated or shrunk, and Apple suggests single words whenever possible.","ja":"すべての項目にアイコンとラベルを付け、ラベルは1〜2語にします。Material Design 3 は、ラベルはアイコンの意味を知るもう1つの手がかりであり、折り返したり、切り詰めたり、縮めたりしないとしています。Apple も、できるだけ1語にするよう勧めています。"},{"en":"Keep the bar visible when people move between sections. Apple says that hiding it can make people forget which area they are in. Material Design 3 allows hiding it on scroll, but not while a screen reader is active, and says it should not be permanently covered on any screen.","ja":"区分を移るあいだも、バーは見える状態にしておきます。Apple は、隠すと今どこにいるのか忘れてしまうことがあるとしています。Material Design 3 は、スクロールで隠してもよいが、スクリーンリーダーが動いているときは隠さないとし、どの画面でも、いつまでもバーが覆われたままにしないよう求めています。"},{"en":"Show the current destination with more than color. Material Design 3 asks for a filled icon and an active indicator on one destination only, with active and inactive icons at a contrast ratio of at least 3:1 against the bar, and warns against using several or low-contrast colors, which make the active item harder to tell apart.","ja":"今の行き先は、色だけでなく別の手がかりでも示します。Material Design 3 は、塗りつぶしたアイコンとアクティブインジケーターを1つの行き先だけに付け、今の項目も今でない項目も、アイコンとバーとのコントラスト比を3:1以上にするよう求めています。色をいくつも使ったり、コントラストの低い色を使ったりすると、今の項目が分かりにくくなると注意しています。"},{"en":"Keep the source order in mind. WCAG 2.4.3 Focus Order says that without scripting or `tabindex` the focus order is the order of the components in the content stream, and the order must preserve meaning and operability. Moving a bar to the bottom with CSS only changes where it is drawn, so Tab still follows the source. Putting the `<nav>` first avoids the problem the Digital Agency Design System describes, but trades it for a mismatch between the focus order and the visual order that needs care. The same page says that a sighted keyboard user follows the visual presentation while a screen reader user follows the reading order, that care is needed so that focus does not seem to jump around randomly to either of them, and that as a best practice the focus order should reinforce the reading order the visual layout implies. WCAG does not endorse this remedy.","ja":"内容の並び順に気を付けます。WCAG の達成基準 2.4.3 フォーカスの順序は、スクリプトや `tabindex` を使わなければ、フォーカスの順序はコンテンツの中での部品の並び順になり、その順序は意味と操作を損なわないものでなければならないとしています。CSS でバーを下に動かしても、変わるのは描く位置だけなので、Tab キーは今までどおり内容の並び順に従います。`<nav>` を先に置くと、デジタル庁デザインシステムが挙げる問題は避けられますが、代わりに、フォーカスの順序と見た目の順序が合わなくなり、注意が必要になります。同じページは、目で見るキーボード利用者は見た目の並びに、スクリーンリーダーの利用者は読み上げの順序に従うこと、どちらの利用者にも、フォーカスがでたらめに飛ぶように見えないよう気を付けること、フォーカスの順序は見た目のレイアウトが示す読み順を補強するのが望ましいことを述べています。WCAG は、この方法を勧めているわけではありません。"}],"misuse":[{"pattern":{"en":"Fixing the site’s main navigation to the bottom of the screen on a phone","ja":"スマートフォンで、サイトの主なナビゲーションを画面の下に固定する"},"harm":{"en":"The bar can conflict with the mobile browser’s UI and gesture areas when people try to operate it.","ja":"操作しようとしたときに、モバイルブラウザーの UI やジェスチャーの領域と競合するおそれがあります。"},"instead":{"en":"Put a horizontal menu at the top of the page, and on phones combine a hamburger menu button with a mobile menu, as the Digital Agency Design System recommends.","ja":"デジタル庁デザインシステムが勧めるとおり、ページの上部に水平メニューを置き、スマートフォンではハンバーガーメニューボタンとモバイルメニューを組み合わせます。"}},{"pattern":{"en":"Putting the navigation last in the DOM because it is drawn at the bottom","ja":"画面の下に見えるからと、ナビゲーションを DOM の最後に置く"},"harm":{"en":"Although it is visible, keyboard users have to move focus all the way to the bottom to reach it, and screen reader users have a hard time finding it.","ja":"目には見えていても、キーボード操作では最後までフォーカスを移さないと届かず、スクリーンリーダーでも見つけにくくなります。"},"instead":{"en":"Avoid the bar. If it cannot be avoided, one option is to put the `<nav>` early in the source and draw it at the bottom with CSS, as the demo does, but then the focus order differs from the visual order and needs care.","ja":"バーを避けます。やむを得ず使うときの1つの方法は、このデモのように `<nav>` を内容より前に置いて CSS で下に描くことですが、その場合はフォーカスの順序と見た目の順序が合わなくなるので、注意が必要です。"}},{"pattern":{"en":"Putting more than five destinations in the bar","ja":"バーに5個より多い行き先を入れる"},"harm":{"en":"The items may collide and there likely will not be enough room for translated text. With a More tab for the rest, the hidden ones are harder to reach and notice.","ja":"項目がぶつかり、翻訳した文字の場所も足りなくなるおそれがあります。残りを「その他」のタブにまとめると、隠れた項目に気づきにくく、届きにくくなります。"},"instead":{"en":"Keep to three to five top-level destinations. For more, use tabs for related content within a page, or put the navigation behind a menu button, as Material Design 3 suggests.","ja":"最上位の行き先は3〜5個にします。それより多いときは、ページ内の関連する内容にはタブを使うか、Material Design 3 が案内するように、ナビゲーションをメニューのボタンの後ろに置きます。"}},{"pattern":{"en":"Showing only icons, with no labels","ja":"ラベルを付けず、アイコンだけにする"},"harm":{"en":"The label is another way for people to understand what an icon means.","ja":"ラベルは、アイコンの意味を知るもう1つの手がかりです。"},"instead":{"en":"Give each item a short label of one or two words next to its icon.","ja":"各項目に、アイコンと並べて1〜2語の短いラベルを付けます。"}}],"related":[{"id":"floating-action-button","diff":{"en":"Bottom navigation moves between a few top-level destinations in a bar along the bottom of the screen; a floating action button runs one main action and floats over the content.","ja":"ボトムナビゲーションは画面の下のバーで、いくつかの最上位の行き先の間を移り、フローティングアクションボタンは主な操作を1つ実行して内容の上に浮かびます。"}},{"id":"tabs","diff":{"en":"Bottom navigation moves between three to five top-level destinations along the bottom of a phone screen, with the current one marked; tabs switch between panels of related content inside one page.","ja":"ボトムナビゲーションはスマートフォンの画面の下で、3〜5個の最上位の行き先の間を移り、今の行き先を示します。タブは1つのページの中の関連する内容のパネルを切り替えます。"}},{"id":"side-navigation","diff":{"en":"Bottom navigation puts three to five top-level destinations in a bar along the bottom of a phone screen; side navigation lists the pages of a site or a section in a column beside the content.","ja":"ボトムナビゲーションはスマートフォンの画面の下のバーに3〜5個の最上位の行き先を並べ、サイドナビゲーションはサイトやそのあるまとまりのページを内容の横の列に並べます。"}},{"id":"mobile-menu","diff":{"en":"Bottom navigation keeps three to five destinations in a bar along the bottom of the screen; a mobile menu stacks the site’s navigation in a list that is opened from a button, which the Digital Agency Design System recommends for phones.","ja":"ボトムナビゲーションは画面の下のバーに3〜5個の行き先を残し、モバイルメニューはサイトのナビゲーションを縦に積んでボタンから開きます。デジタル庁デザインシステムは、スマートフォンにはこちらを勧めています。"}},{"id":"hamburger-menu","diff":{"en":"Bottom navigation shows its destinations in a bar at the bottom of the screen; a hamburger menu button keeps them behind one button that opens the menu, which the Digital Agency Design System recommends for phones.","ja":"ボトムナビゲーションは行き先を画面の下のバーに見せ、ハンバーガーメニューボタンは行き先を1つのボタンの後ろに置いてメニューを開きます。デジタル庁デザインシステムは、スマートフォンにはこちらを勧めています。"}},{"id":"mega-menu","diff":{"en":"Bottom navigation is a bar of three to five destinations along the bottom of a phone screen; a mega menu is a wide panel of a section’s pages that opens from a horizontal menu on a wide screen.","ja":"ボトムナビゲーションはスマートフォンの画面の下にある3〜5個の行き先のバーで、メガメニューは広い画面で水平メニューから開く、カテゴリのページをまとめて見せる幅の広いパネルです。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「ボトムナビゲーション」をもとに作成","url":"https://design.digital.go.jp/dads/components/bottom-navigation/","checkedAt":"2026-11-02"},{"label":"Material Design 3: Navigation bar","url":"https://m3.material.io/components/navigation-bar/overview","checkedAt":"2026-11-02"},{"label":"Material Design 3: Navigation bar (guidelines)","url":"https://m3.material.io/components/navigation-bar/guidelines","checkedAt":"2026-11-02"},{"label":"Apple Human Interface Guidelines: Tab bars","url":"https://developer.apple.com/design/human-interface-guidelines/tab-bars","checkedAt":"2026-11-02"},{"label":"MUI: Bottom Navigation","url":"https://mui.com/material-ui/react-bottom-navigation/","checkedAt":"2026-11-02"},{"label":"MDN: aria-current","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current","checkedAt":"2026-11-02"},{"label":"MDN: <nav>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav","checkedAt":"2026-11-02"},{"label":"Understanding Success Criterion 2.4.3: Focus Order (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/bottom-navigation/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/bottom-navigation/"}},{"id":"bottom-sheet","category":"overlay","names":{"en":"Bottom sheet","ja":"ボトムシート"},"aliases":[{"name":"Sheet","source":"React Aria","url":"https://react-aria.adobe.com/Sheet"}],"summary":{"en":"A panel anchored to the bottom edge of the screen that shows secondary content, mainly on phones.","ja":"画面の下端に固定して、補助的な内容を見せるパネルです。おもにスマートフォンで使います。"},"appearance":{"en":"A panel along the bottom edge, as wide as the screen on a phone. Material Design 3 rounds its top corners, and it often has a small handle bar at the top. A modal one dims the page behind it. This demo is a store-details sheet with a handle button, a title, a Close button and two lines of text; the handle button makes it taller.","ja":"画面の下端に沿ったパネルで、スマートフォンでは画面の幅いっぱいになります。Material Design 3 では上の角を丸くし、上端に小さな持ち手の印を付けることがよくあります。モーダルのものは、後ろのページを暗くします。このデモは店舗の詳細を見せるシートで、持ち手のボタン、タイトル、「閉じる」ボタン、2行の文字があり、持ち手のボタンで高さが変わります。"},"behavior":[{"en":"There are two kinds. A modal bottom sheet appears in front of the app, disables everything else, and stays until the person confirms, dismisses it or finishes a required action. A standard bottom sheet sits alongside the screen’s main UI, so people can see and use both at the same time.","ja":"2種類あります。モーダルのボトムシートはアプリの前に出て、ほかの機能をすべて使えなくし、確定するか閉じるか、必要な操作を終えるまで残ります。標準のボトムシートは画面の主な部分と並んで置かれ、両方を同時に見て使えます。"},{"en":"It can rest at more than one height. Material Design 3 caps the starting height of a modal bottom sheet at 50% of the screen so the top actions are within reach, and a taller one can be pulled to full screen and scrolled inside. Apple’s sheets can rest at a medium detent, about half of the fully expanded height, and at a large detent.","ja":"高さを複数にでき、その高さで止まります。Material Design 3 は、上のほうの操作に手が届くよう、モーダルのボトムシートの最初の高さを画面の50%までにしています。内容が多いときは全画面まで引き上げて、中でスクロールします。Apple のシートは、全開の高さの半分ほどの medium と、全開の large の2つの高さで止まれます。"},{"en":"The handle changes the height. Material Design 3 says it can be dragged or selected, and selecting it should step through the preset heights or close the sheet. Apple says people can drag the grabber or tap it to cycle through the detents.","ja":"持ち手で高さを変えます。Material Design 3 は、持ち手をドラッグしても選んでもよく、選ぶと決まった高さを順に切り替えるか、シートを閉じるのがよいとしています。Apple は、グラバーをドラッグするかタップして、高さを順に切り替えられるとしています。"},{"en":"A modal one closes when the person picks an item or action in it, taps the scrim, swipes the sheet down, or uses a close control inside a full-screen sheet. Tapping the scrim should always close it. Apple says people expect to swipe down to dismiss a sheet, and to be asked to confirm with an action sheet if they have unsaved changes.","ja":"モーダルのものは、中の項目や操作を選ぶ、スクリムをタップする、シートを下にスワイプする、全画面のシートで閉じる操作を使う、のいずれかで閉じます。スクリムをタップしたときは、必ず閉じます。Apple は、シートは下にスワイプして閉じると利用者が期待しているとし、保存していない変更があるときは、アクションシートで確認するよう案内しています。"},{"en":"On the web, a modal one is a modal dialog. The WAI-ARIA Authoring Practices say the content outside it is inert, focus moves into it when it opens, Tab stays inside it, Esc closes it, and focus returns to the element that opened it. They strongly recommend a visible close button.","ja":"ウェブでは、モーダルのものはモーダルダイアログです。WAI-ARIA オーサリング プラクティスは、外側の内容は操作できなくなり、開くとフォーカスが中に移り、Tab キーは中にとどまり、Esc で閉じ、フォーカスは開いた要素に戻るとしています。見える閉じるボタンを置くことも強く勧めています。"},{"en":"In this demo, the sheet is a native modal `<dialog>`. To make the movement easy to see, it comes up from the bottom edge of the demo frame and dims only the frame. On a real page, it comes up from the bottom of the screen and dims the whole page.","ja":"このデモでは、シートをネイティブのモーダル `<dialog>` で作っています。動きが分かりやすいよう、デモの枠の下端から出して、枠の中だけを暗くします。実際のページでは、画面の下端から出て、ページ全体を暗くします。"},{"en":"In this demo, the handle is a button that switches between about half of the frame and the full frame, and its `aria-expanded` tells which one it is in. The sheet cannot be dragged and does not close on a swipe down, so every change of height and every way to close it works with a single tap or click. It starts at about half each time it opens.","ja":"このデモでは、持ち手はボタンで、枠の半分ほどの高さと枠いっぱいの高さを切り替え、今どちらかは `aria-expanded` で伝えます。シートはドラッグできず、下へのスワイプでも閉じません。高さの変更も閉じる操作も、1回のタップかクリックでできます。開くたびに、半分ほどの高さから始まります。"},{"en":"In this demo, the Close button, Esc, and a click on the dimmed part of the frame or anywhere outside the frame all close it, and focus returns to the button that opened it. The slide and the change of height are skipped when the system asks for reduced motion.","ja":"このデモでは、「閉じる」ボタン、Esc、枠の中の暗い部分や枠の外のクリックのどれでも閉じ、フォーカスは開いたボタンに戻ります。システムが動きを減らす設定のときは、すべり出る動きと高さの変化を省きます。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"On the button that opens the sheet, opens it. On the handle, switches between the heights; Material Design 3 describes the same keys for its handle.","ja":"シートを開くボタンでは、シートを開きます。持ち手では、高さを切り替えます。Material Design 3 の持ち手でも、同じキーを挙げています。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the controls in the sheet; in a modal one, focus does not go to the page behind. In this demo the handle is the first stop.","ja":"シートの中の操作できる要素の間を移動します。モーダルのものでは、後ろのページには移りません。このデモでは、持ち手が最初の停止位置です。"}},{"key":"Esc","action":{"en":"Closes a modal sheet and returns focus to the control that opened it.","ja":"モーダルのシートを閉じ、開いたきっかけの要素にフォーカスを戻します。"}}],"variations":[{"name":{"en":"Modal bottom sheet","ja":"モーダルのボトムシート"},"description":{"en":"Appears in front of the app with a scrim and blocks the rest of it. Material Design 3 uses it as an alternative to inline menus or simple dialogs on mobile, and says modal bottom sheets are for mobile apps only.","ja":"アプリの前にスクリムを敷いて出て、そのほかの部分を操作できなくします。Material Design 3 は、スマートフォンでインラインのメニューや簡単なダイアログの代わりに使うものとし、モーダルのボトムシートはモバイルアプリだけで使うとしています。"}},{"name":{"en":"Standard bottom sheet","ja":"標準のボトムシート"},"description":{"en":"Stays beside the main UI so both can be used together, for example an audio player beside an album list. On iOS and iPadOS, Apple’s nonmodal sheet works the same way; its example is the Notes format sheet.","ja":"主な部分と並べて置き、両方を一緒に使えます。たとえば、アルバムの一覧と並べる音楽プレーヤーです。Apple の iOS と iPadOS の非モーダルなシートも同じ働きで、例として「メモ」の書式のシートを挙げています。"}},{"name":{"en":"Half and full height","ja":"半分の高さと全面の高さ"},"description":{"en":"Material Design 3 lets a sheet go from a preview height to full-screen height, with a collapse icon in an app bar on a full-height standard sheet. Apple’s medium and large detents are the same idea; specifying only medium keeps a sheet from expanding to full height.","ja":"Material Design 3 では、シートはプレビューの高さから全画面の高さまで動かせ、全画面の高さの標準のシートには、アプリバーに元の位置へ戻す折りたたみのアイコンを置きます。Apple の medium と large の2つの高さも同じ考え方で、medium だけを指定すると、全開の高さまで広がりません。"}},{"name":{"en":"Drawer on the bottom edge","ja":"下端に付けるドロワー"},"description":{"en":"Web libraries put a drawer or sheet on the bottom edge: MUI sets `anchor=\"bottom\"` on a Drawer, Bootstrap adds `.offcanvas-bottom` to an offcanvas, and React Aria’s Sheet takes `position=\"bottom\"`, which it describes as a mobile sheet.","ja":"ウェブのライブラリは、ドロワーやシートを下端に付けて作ります。MUI は Drawer に `anchor=\"bottom\"` を、Bootstrap はオフキャンバスに `.offcanvas-bottom` を指定し、React Aria の Sheet は `position=\"bottom\"` を指定でき、これをモバイル向けのシートとしています。"}},{"name":{"en":"Side sheet on large screens","ja":"大きな画面ではサイドシート"},"description":{"en":"Material Design 3 gives a bottom sheet a default maximum width on medium and expanded screens, and says that on expanded screens such as desktops it can be swapped for a side sheet with similar content.","ja":"Material Design 3 は、中くらいの画面と大きな画面では、ボトムシートに既定の最大幅を持たせるとしています。デスクトップのような大きな画面では、同じような内容のサイドシートに替えてもよいとしています。"}}],"usage":[{"en":"Use it for supplementary content and actions on a mobile screen, such as menu items in a list or grid, actions, or extra information. Material Design 3 says the content should be additional or secondary, not the app’s main content, and that it can be dismissed so people can get back to the main content.","ja":"スマートフォンの画面で、補助的な内容や操作を見せるときに使います。たとえば、リストやグリッドのメニュー項目、操作、追加の情報です。Material Design 3 は、内容は追加のものや副次的なもので、アプリの主な内容ではないとし、閉じて主な内容に戻れるとしています。"},{"en":"Choose the kind by how the sheet relates to the screen. Use a standard sheet for content that complements the screen, such as a music player beside an album list. Use a modal one as an alternative to an inline menu or a simple dialog on mobile, especially for a long list of actions or items that need longer descriptions and icons; its blocking behavior helps people focus on their choices. Apple’s sheets are for a scoped task closely related to the current context, and it suggests alternatives such as a full-screen view for complex or prolonged flows. On larger screens, Material Design 3 suggests a non-transient surface such as a floating sheet for more complex tasks and flows.","ja":"画面との関係で種類を選びます。アルバムの一覧と並べる音楽プレーヤーのように、画面の内容を補う場合は標準のシートを使います。スマートフォンでインラインのメニューや簡単なダイアログの代わりにするときは、特に長い操作の一覧や、長い説明とアイコンが要る項目の場合に、モーダルを使います。ふさぐ動きが、選択肢に集中する助けになります。Apple のシートは、今の文脈と深く関わる範囲の限られた作業のためのもので、複雑で長い流れには全画面の表示などの別の方法を勧めています。Material Design 3 は、大きな画面では、より複雑な作業や流れには、フローティングシートのような消えない面を勧めています。"},{"en":"Check where each source’s guidance applies. Material Design 3 lists bottom sheets as available for Flutter, Android Views and Jetpack Compose and unavailable for the Web. Apple’s page covers more than a bottom panel: on macOS a sheet is a card floating on its parent window, for iPadOS apps it prefers page or form sheets that centre the content on a dimmed background, and for visionOS it says to avoid a sheet that emerges from the bottom edge of a window. The resizable sheet with detents and a grabber is in its iOS and iPadOS section, where its advice on the medium detent is written for iPhone apps. So that guidance on heights and gestures is written for apps, not for websites.","ja":"資料ごとに、指針が当てはまる範囲を確かめます。Material Design 3 は、ボトムシートを Flutter、Android Views、Jetpack Compose 向けには提供し、Web 向けには提供していないとしています。Apple のページが扱うのは下端のパネルだけではありません。macOS ではシートは親のウインドウの上に浮かぶカードで、iPadOS のアプリでは内容を暗くした背景の中央に置くページシートかフォームシートを勧め、visionOS ではウインドウの下端から出るシートを避けるよう案内しています。高さを変えられて持ち手のあるシートは iOS と iPadOS の節にあり、medium の高さについての助言は iPhone のアプリ向けに書かれています。そのため、その高さや操作についての指針は、ウェブサイトではなくアプリ向けのものです。"},{"en":"On the web, the libraries in the sources build a bottom sheet from their edge panels: MUI’s Drawer takes `anchor=\"bottom\"`, Bootstrap’s offcanvas takes `.offcanvas-bottom` and is described as conceptually a modal dialog, and React Aria’s Sheet takes `position=\"bottom\"`. The Digital Agency Design System’s drawer overview mentions the top, bottom, left and right edges as places it opens from, but its usage page provides only full-surface and right and left overlay patterns, and says a drawer is always modal.","ja":"ウェブでは、資料にあるライブラリは、端に付けるパネルでボトムシートを作ります。MUI の Drawer は `anchor=\"bottom\"`、Bootstrap のオフキャンバスは `.offcanvas-bottom`、React Aria の Sheet は `position=\"bottom\"` を指定します。Bootstrap は、オフキャンバスを概念としてはモーダルダイアログだとしています。デジタル庁デザインシステムのドロワーの概要は、上下左右の端から開くと触れていますが、使い方のページが用意している展開パターンは、全面と右・左のオーバーレイだけで、ドロワーは必ずモーダルだとしています。"},{"en":"Add a handle only if it works without dragging. Material Design 3 makes the top 48dp of the sheet the target when the handle is present, lets the handle take focus, and says to label only the drag handle, whose role is button. Apple asks for a grabber on a resizable sheet because it also works with VoiceOver.","ja":"持ち手は、ドラッグしなくても使えるときだけ付けます。Material Design 3 は、持ち手があるとき、シートの上の48dpを操作の的とし、持ち手にフォーカスできるようにし、ラベルを付けるのは持ち手だけで、その役割はボタンだとしています。Apple は、高さを変えられるシートにグラバーを付けるよう勧めています。VoiceOver でも使えるためです。"},{"en":"Give every way of leaving the sheet a plain alternative to the swipe. Include a visible control that closes it, because the WAI-ARIA Authoring Practices strongly recommend one, and MDN asks for a way to close that also works on devices without a physical keyboard. Apple still asks to support swiping down, and says that if a sheet has a Done button it should be paired with Cancel or Back.","ja":"閉じる方法には、スワイプのほかに、ふつうの操作を用意します。見える閉じる操作を置きます。WAI-ARIA オーサリング プラクティスが強く勧めているうえ、MDN も、物理的なキーボードがない端末でも使える閉じる方法を求めているためです。Apple は、下へのスワイプも使えるようにするよう求め、「完了」ボタンを付けるなら「キャンセル」か「戻る」と組み合わせるよう案内しています。"},{"en":"Keep the content clear of the browser’s own UI and the on-screen keyboard. React Aria’s Sheet exposes `--sheet-scroll-padding-y`, the amount of the sheet covered by browser UI or the software keyboard, to add as padding to the scrolling content.","ja":"ブラウザー自体の UI や画面のキーボードで内容が隠れないようにします。React Aria の Sheet は、ブラウザーの UI やソフトウェアキーボードで隠れるシートの量を `--sheet-scroll-padding-y` で渡していて、スクロールする内容のパディングに足せます。"},{"en":"Apple has a separate component, the action sheet, which it describes as a modal view that presents choices related to an action people initiate. Its page does not say where on the screen it appears, so this site does not treat it as the same thing as a bottom sheet. Apple tells people to use an action sheet, rather than a menu, for choices related to an action on iOS and iPadOS, and to confirm a swipe-down dismissal when there are unsaved changes.","ja":"Apple には、別の部品としてアクションシートがあり、利用者が始めた操作に関する選択肢を示すモーダルな表示だとしています。そのページは画面のどこに出るかを書いていないので、このサイトではボトムシートと同じものとは扱いません。Apple は、iOS と iPadOS では、操作に関する選択肢にはメニューではなくアクションシートを使うこと、保存していない変更があるときの下へのスワイプには、アクションシートで確認することを案内しています。"}],"misuse":[{"pattern":{"en":"Letting the sheet be resized or dismissed only by dragging or swiping","ja":"シートの高さの変更や、閉じる操作を、ドラッグやスワイプだけにする"},"harm":{"en":"Some people cannot press and hold while moving a pointer precisely, and people who use a trackball, head pointer, eye-gaze system or speech-controlled mouse emulator find dragging cumbersome and error-prone. WCAG also says the alternative cannot rest only on a swipe or flick.","ja":"押したままポインターを正確に動かせない人がいます。トラックボール、ヘッドポインター、視線入力、音声で操作するマウスエミュレーターを使う人にとって、ドラッグは扱いにくく、間違えやすい操作です。WCAG は、代わりの操作がスワイプやフリックだけでは足りないとも述べています。"},"instead":{"en":"Make the handle a button that steps through the preset heights, label it, and add a visible close control, as Material Design 3 asks, so the sheet can change height and close with a single tap or click.","ja":"Material Design 3 が求めるように、持ち手を決まった高さを順に切り替えるボタンにしてラベルを付け、見える閉じる操作も置いて、1回のタップかクリックで高さを変えて閉じられるようにします。"}},{"pattern":{"en":"Opening a second sheet from a sheet, so that closing it lands back on the first","ja":"シートの中から別のシートを開き、閉じると最初のシートに戻るようにする"},"harm":{"en":"People expect to return to the parent view when they close a sheet, and if closing one takes them back to another sheet they can lose track of where they are in the app.","ja":"シートを閉じると親の画面に戻ると利用者は期待しています。閉じたら別のシートに戻ると、アプリの中で今どこにいるのか分からなくなることがあります。"},"instead":{"en":"Show one sheet at a time. Close the first before showing the next, and show the first again after the second is dismissed if that is needed.","ja":"同時に出すシートは1つにします。次のシートを出す前に最初のシートを閉じ、必要なら2つ目を閉じたあとで最初のシートをもう一度出します。"}},{"pattern":{"en":"Making a Done button the only way out of a sheet","ja":"「完了」ボタンを、シートから出る唯一の方法にする"},"harm":{"en":"Relying only on Done suggests that completing the task is the only way to leave the sheet, which can feel restrictive or misleading.","ja":"「完了」だけに頼ると、作業を終えることがシートから出る唯一の方法だと受け取られ、窮屈に感じたり、誤解したりすることがあります。"},"instead":{"en":"Pair Done with a Cancel button that leaves without confirming or saving, or with a Back button for a previous step, as Apple advises.","ja":"Apple の案内のとおり、「完了」には、確定や保存をせずに出る「キャンセル」か、前の手順に戻る「戻る」を組み合わせます。"}}],"related":[{"id":"drawer","diff":{"en":"A bottom sheet is anchored to the bottom edge, mainly on phones; a drawer usually runs along a side edge, and for apps Material Design 3 swaps a bottom sheet for a side sheet on expanded screens.","ja":"ボトムシートは画面の下端に固定され、おもにスマートフォンで使います。ドロワーはたいてい側面の端に沿って出ます。Material Design 3 は、アプリの大きな画面では、ボトムシートをサイドシートに替えてよいとしています。"}},{"id":"modal","diff":{"en":"A bottom sheet is anchored to the bottom edge, mainly on phones, and for apps Material Design 3 has a standard kind that leaves the main UI usable beside it; a modal dialog sits in the middle and blocks the page.","ja":"ボトムシートは画面の下端に固定され、おもにスマートフォンで使います。Material Design 3 は、アプリ向けに、主な部分を並べて操作できる標準の種類を挙げています。モーダルダイアログは中央に出て、ページを操作できなくします。"}},{"id":"popover","diff":{"en":"A bottom sheet is anchored to the bottom edge of the screen and a modal one dims the page; a popover opens next to the button that opened it and leaves the page usable.","ja":"ボトムシートは画面の下端に固定され、モーダルのものはページを暗くします。ポップオーバーは開いたボタンの隣に出て、ページを操作できます。"}},{"id":"menu","diff":{"en":"A bottom sheet can hold menu items, other actions or supplementary content at the bottom of the screen; a menu is a list of actions that opens from a button.","ja":"ボトムシートは画面の下端に、メニュー項目、そのほかの操作、補助的な内容を入れられます。メニューはボタンから開く操作の一覧です。"}}],"sources":[{"label":"Material Design 3: Bottom sheets","url":"https://m3.material.io/components/bottom-sheets/overview","checkedAt":"2026-11-02"},{"label":"Material Design 3: Bottom sheets (guidelines)","url":"https://m3.material.io/components/bottom-sheets/guidelines","checkedAt":"2026-11-02"},{"label":"Material Design 3: Bottom sheets (accessibility)","url":"https://m3.material.io/components/bottom-sheets/accessibility","checkedAt":"2026-11-02"},{"label":"Apple Human Interface Guidelines: Sheets","url":"https://developer.apple.com/design/human-interface-guidelines/sheets","checkedAt":"2026-11-02"},{"label":"Apple Human Interface Guidelines: Action sheets","url":"https://developer.apple.com/design/human-interface-guidelines/action-sheets","checkedAt":"2026-11-02"},{"label":"React Aria: Sheet","url":"https://react-aria.adobe.com/Sheet","checkedAt":"2026-11-02"},{"label":"MUI: Drawer","url":"https://mui.com/material-ui/react-drawer/","checkedAt":"2026-11-02"},{"label":"Bootstrap: Offcanvas","url":"https://getbootstrap.com/docs/5.3/components/offcanvas/","checkedAt":"2026-11-02"},{"label":"デジタル庁デザインシステムウェブサイト「ドロワー」をもとに作成","url":"https://design.digital.go.jp/dads/components/drawer/","checkedAt":"2026-11-02"},{"label":"デジタル庁デザインシステムウェブサイト「ドロワー（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/drawer/usage/","checkedAt":"2026-11-02"},{"label":"WAI-ARIA APG: Dialog (Modal) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/","checkedAt":"2026-11-02"},{"label":"Understanding Success Criterion 2.5.7: Dragging Movements (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html","checkedAt":"2026-11-02"},{"label":"MDN: <dialog>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/bottom-sheet/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/bottom-sheet/"}},{"id":"breadcrumb","category":"navigation","names":{"en":"Breadcrumb","ja":"パンくずリスト（パンくずナビゲーション）"},"aliases":[{"name":"パンくずナビゲーション","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/breadcrumb/"}],"summary":{"en":"A row of links to the parent pages of the current page, in order of hierarchy.","ja":"今のページの上の階層にあるページへのリンクを、階層順に並べたものです。"},"appearance":{"en":"Page names separated by “/” or “>”, usually above the page title. A long trail wraps onto more lines. The last name is the current page, shown as plain text rather than a link.","ja":"「/」や「>」で区切ったページ名が並び、多くはページタイトルの上にあります。長いときは複数行に折り返します。最後の名前は今のページで、リンクではなくただの文字で表示されます。"},"behavior":[{"en":"Each name links to that level of the site; the last one is the current page.","ja":"それぞれの名前はその階層のページへのリンクで、最後の名前は今いるページを示します。"},{"en":"The current page is a `<span>` with `aria-current=\"page\"`, not a link, because a link to the page you are already on does nothing when followed. Nielsen Norman Group and the Digital Agency Design System also show it as plain text, and GOV.UK leaves the current page out, ending the trail at its parent. APG also allows a link with `aria-current=\"page\"`, and says `aria-current` is optional when the current page is not a link; this demo keeps it so screen readers announce the current page.","ja":"今いるページへのリンクはたどっても何も起きないので、今のページはリンクにせず、`aria-current=\"page\"` を付けた `<span>` にします。Nielsen Norman Group とデジタル庁デザインシステムもただの文字で示し、GOV.UK は今のページを載せず、1つ上の階層で終えます。APG は `aria-current=\"page\"` を付けたリンクも認め、今のページがリンクでなければ `aria-current` は任意としています。このデモでは、スクリーンリーダーが今のページと読み上げるよう付けています。"},{"en":"In this demo the links do not navigate; they show where they would go.","ja":"このデモのリンクは移動せず、移動先を表示するだけにしています。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the links. The current page is not a link, so focus skips it.","ja":"リンク間を移動します。今のページはリンクではないので、フォーカスは止まりません。"}},{"key":"Enter","action":{"en":"Follows the focused link.","ja":"フォーカス中のリンク先へ移動します。"}}],"usage":[{"en":"Place it between the header and the page heading.","ja":"ヘッダーとページの見出しの間に置きます。"},{"en":"Page names cannot be kept short, so let the trail wrap when it is wider than the content area, also on narrow screens. The Digital Agency Design System allows a single line that scrolls sideways on phones when many pages have long trails, so the breadcrumb does not push the content down; in that case, also put a wrapping breadcrumb at the bottom of the page, above the footer. Nielsen Norman Group instead advises against trails that wrap, and suggests showing only the last level or two on phones. GOV.UK can show only the first and last items of a long trail on phones.","ja":"ページ名の長さは制御できないので、コンテンツの幅を超えたら折り返します。狭い画面でも同じです。デジタル庁デザインシステムは、長いパンくずリストになるページが多いときは、コンテンツを押し下げないようスマートフォンで折り返さず横にスクロールさせる形も認めています。その場合は、ページ下部のフッターの上にも折り返すパンくずリストを置きます。一方 Nielsen Norman Group は複数行に折り返すパンくずリストを避け、スマートフォンでは最後の1〜2階層だけを見せる方法を挙げています。GOV.UK には、長いパンくずリストをスマートフォンで最初と最後の項目だけにする形があります。"}],"misuse":[{"pattern":{"en":"Listing the pages the user visited, in the order visited","ja":"利用者が見てきたページを、見た順に並べる"},"harm":{"en":"The trail grows long, repetitive and confusing, and it does nothing for people who land on a deep page directly from an outside link.","ja":"並びが長く重複が多くなって分かりにくく、外部のリンクから深い階層のページに直接来た人には何の手がかりにもなりません。"},"instead":{"en":"Show where the current page sits in the site’s hierarchy. Leave going back through history to the browser’s Back button.","ja":"サイトの階層の中で今のページがどこにあるかを示します。たどってきた順に戻る操作は、ブラウザの「戻る」に任せます。"}},{"pattern":{"en":"Using a breadcrumb in place of the global or section navigation","ja":"グローバルナビゲーションやセクション内のナビゲーションの代わりに、パンくずリストだけを置く"},"harm":{"en":"Users lose easy access to the other pages in the same section.","ja":"利用者が同じセクションのほかのページへ移りにくくなります。"},"instead":{"en":"Keep the global and section navigation, and add the breadcrumb alongside them.","ja":"グローバルナビゲーションやセクション内のナビゲーションは残し、パンくずリストはそれに添えて置きます。"}}],"related":[{"id":"table-of-contents","diff":{"en":"A breadcrumb shows where the page sits among the pages of the site; a table of contents lists the sections within one page.","ja":"パンくずリストはサイトの階層の中で今のページの位置を示し、目次は1つのページの中の節を並べます。"}}],"sources":[{"label":"WAI-ARIA APG: Breadcrumb Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「パンくずナビゲーション」をもとに作成","url":"https://design.digital.go.jp/dads/components/breadcrumb/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「パンくずナビゲーション（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/breadcrumb/usage/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: breadcrumb","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/breadcrumb","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Breadcrumbs","url":"https://design-system.service.gov.uk/components/breadcrumbs/","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Breadcrumbs: 11 Design Guidelines for Desktop and Mobile","url":"https://www.nngroup.com/articles/breadcrumbs/","checkedAt":"2026-10-21"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/breadcrumb/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/breadcrumb/"}},{"id":"button","category":"action","names":{"en":"Button","ja":"ボタン"},"aliases":[],"summary":{"en":"Triggers an action, such as submitting a form or opening a dialog.","ja":"フォームを送信する、ダイアログを開くといった操作を実行する部品です。"},"appearance":{"en":"A short label (sometimes with an icon) inside a clickable area, usually with a background or border. The most important action is often filled with the accent color. In this demo, “Cancel”, “Save draft” and “Submit” sit in a row as a text button, an outline button and a filled button.","ja":"短いラベル（アイコン付きのこともある）を、背景色や枠線のある押せる領域で囲んだ形です。最も重要な操作はアクセントカラーで塗りつぶされることが多いです。このデモでは「キャンセル」「下書き保存」「送信する」を、テキストボタン、アウトラインボタン、塗りボタンとして横に並べています。"},"behavior":[{"en":"Click or tap runs the action once.","ja":"クリック・タップで操作を1回実行します。"},{"en":"Shows a hover style under a mouse pointer and a visible focus ring when reached by keyboard.","ja":"マウスを乗せると見た目が変わり、キーボードでフォーカスするとフォーカスリングが出ます。"},{"en":"APG treats navigating to another page as the job of a link, not a button. The Digital Agency Design System also uses buttons to trigger page transitions.","ja":"APG は、別のページへの移動をボタンではなくリンクの役割としています。デジタル庁デザインシステムは、ページ遷移のきっかけにもボタンを使います。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus to the button.","ja":"ボタンにフォーカスを移します。"}},{"key":"Enter / Space","action":{"en":"Activates the button.","ja":"ボタンを押します。"}}],"variations":[{"name":{"en":"Filled (primary)","ja":"塗りボタン（プライマリ）"},"description":{"en":"Filled with the accent color, with a white label. Used for the main action of a screen.","ja":"アクセントカラーで塗りつぶし、ラベルを白にしたものです。画面の主な操作に使います。"}},{"name":{"en":"Outline (secondary)","ja":"アウトラインボタン（セカンダリ）"},"description":{"en":"A colored border and label on a white background. Used next to a filled button for alternative actions.","ja":"白い背景に、色の付いた枠線とラベルのものです。塗りボタンの隣で代わりの操作に使います。"}},{"name":{"en":"Text (tertiary)","ja":"テキストボタン（ターシャリ）"},"description":{"en":"No border or background. The Digital Agency Design System underlines the colored label so it still reads as something to press. Used for low-emphasis actions. Some design systems, such as Carbon, call a similar style a ghost button.","ja":"枠線も背景もないものです。デジタル庁デザインシステムは、色の付いたラベルに下線を引いて押せることを示しています。目立たせなくてよい操作に使います。Carbon のように、似た形をゴーストボタンと呼ぶデザインシステムもあります。"}}],"usage":[{"en":"Use one primary (filled) button per screen, and show priority by shape (filled, outline, text) as well as color.","ja":"塗りのボタンは1画面に1つにし、優先度は色だけでなく形（塗り、枠線、テキスト）でも示します。"},{"en":"When buttons sit side by side, the Digital Agency Design System puts the most important one on the right and the least important on the left, so actions such as Cancel or Back go on the left, and it centers a single button in a modal dialog. Carbon puts the primary button on the left on full pages and on the right in dialogs and wizards, and GOV.UK aligns the primary button with the left edge of the form.","ja":"ボタンを横に並べるとき、デジタル庁デザインシステムは最も優先度の高いボタンを右端に、低いボタンを左に置き、「キャンセル」「戻る」のような操作を左にします。ボタンが1つだけのモーダルダイアログでは、デジタル庁デザインシステムはそのボタンを中央に置きます。Carbon はページ全体では主なボタンを左に、ダイアログやウィザードでは右に置き、GOV.UK は主なボタンをフォームの左端にそろえます。"},{"en":"Make the target at least 44 × 44 CSS px, the size WCAG success criterion 2.5.5 Target Size (Enhanced) asks for at Level AAA.","ja":"押せる領域は44 × 44 CSS px 以上にします。WCAG の達成基準 2.5.5「ターゲットのサイズ（高度）」（レベル AAA）が求める大きさです。"},{"en":"Setting `disabled` on a button that has focus, such as the one just pressed, drops focus to the page in Chrome and Firefox, and the button leaves the Tab order. To keep focus on it while showing that it cannot be used, use `aria-disabled=\"true\"` and stop the action in your code.","ja":"フォーカス中のボタン（押したばかりのボタンなど）に `disabled` を付けると、Chrome と Firefox ではフォーカスがページ全体へ外れ、ボタンは Tab の順番からも外れます。フォーカスを保ったまま押せないことを示すなら、`aria-disabled=\"true\"` を付け、操作が動かないようにコードで止めます。"},{"en":"An `aria-label` hides the button’s content from screen readers, so a state shown only inside it, such as a check mark or a count, is not announced. Put that state in the name, or expose it another way such as `aria-pressed`.","ja":"`aria-label` を付けると、ボタンの中身はスクリーンリーダーから隠れます。チェックの印や件数のように中身だけで示した状態は読み上げられないので、名前に含めるか、`aria-pressed` などの別の方法で伝えます。"},{"en":"WCAG success criterion 2.5.8 Target Size (Minimum), at Level AA, asks for at least 24 × 24 CSS px. A smaller target can still pass with enough space: a circle 24 CSS px across, centered on it, must not touch another target or another small target’s circle.","ja":"WCAG の達成基準 2.5.8「ターゲットのサイズ（最低限）」（レベル AA）は、24 × 24 CSS px 以上を求めています。小さいターゲットでも、中心に置いた直径 24 CSS px の円が、ほかのターゲットや、ほかの小さいターゲットの円に触れなければ満たせます。"},{"en":"Run the action on the `click` event, not on `mousedown` or `touchstart`. WCAG 2.5.2 Pointer Cancellation explains that `click` fires when the pointer is released, so people who touch the wrong button can move off it before lifting their finger.","ja":"操作は `mousedown` や `touchstart` ではなく、`click` イベントで実行します。WCAG 2.5.2「ポインタのキャンセル」によると、`click` はポインターを離したときに起きるので、違うボタンに触れた人は、指を離す前にボタンの外へずらして取りやめられます。"},{"en":"Before showing only an icon instead of a text label, check that the button’s purpose is still understood. Primer says to consider the audience and the context, and to add a tooltip with a text label.","ja":"文字のラベルをやめてアイコンだけにする前に、それでもボタンの目的が伝わるかを確かめます。Primer は、使う人と場面を考えること、文字のラベルを入れたツールチップを付けることを求めています。"}],"misuse":[{"pattern":{"en":"Disabling the submit button until the form is complete","ja":"入力が終わるまで送信ボタンを無効にしておく"},"harm":{"en":"People can see the button but cannot tell why it does not respond, so they get stuck or give up. A `disabled` button cannot be reached with Tab, so people using a screen reader with a keyboard have trouble finding where it is.","ja":"ボタンは見えているのに押せない理由が分からず、操作が止まったり、途中でやめたりしてしまいます。`disabled` のボタンは Tab で到達できないため、スクリーンリーダーとキーボードを使う人はボタンの位置をつかみにくいです。"},"instead":{"en":"Keep the button enabled. Mark required fields, and if it is pressed too early, explain what is missing with an error message. If it must be disabled, state the condition for enabling it right next to the button.","ja":"ボタンは押せるままにし、必須の項目に印を付けます。早く押されたら、足りない項目をエラーメッセージで案内します。どうしても無効にするなら、押せるようになる条件をボタンのすぐ近くに書きます。"}},{"pattern":{"en":"Emphasizing the Agree button and making Disagree hard to notice","ja":"「同意する」ボタンを目立たせ、「同意しない」ボタンを目立たなくする"},"harm":{"en":"People are steered toward the choice that suits the provider, such as agreeing to the use of their personal data, and may end up “agreeing” to something they never really consented to.","ja":"個人情報の利用への同意のように、提供する側に都合のよい選択へ誘導されます。本人が納得して同意していないのに、同意したことになりかねません。"},"instead":{"en":"Give both choices the same size and the same button style, and let the labels alone tell them apart.","ja":"「同意する」と「同意しない」を同じ大きさ、同じ種類のボタンにし、違いはラベルだけで示します。"},"deceptive":true},{"pattern":{"en":"Wording the decline button to make people feel guilty","ja":"断るボタンの文言で後ろめたさを感じさせる"},"harm":{"en":"Turning down the offer is made to feel shameful, so people are pressured into choices they would not otherwise make.","ja":"断ることを恥ずかしく感じるように仕向けられ、本来なら選ばない選択をしてしまいます。"},"instead":{"en":"Label the decline button with a neutral description of what happens, such as “Not now” or “Don’t subscribe”.","ja":"「今はしない」「登録しない」のように、押すと何が起きるかだけを中立な言葉で書きます。"},"deceptive":true}],"related":[{"id":"floating-action-button","diff":{"en":"A button runs any action in its place in the layout; a floating action button is a button for a screen’s main action that floats in front of the content and stays put as it scrolls.","ja":"ボタンはレイアウトの中の決まった場所でさまざまな操作を実行し、フローティングアクションボタンは画面の主な操作のためのボタンで、内容の手前に浮かんでスクロールしても動きません。"}},{"id":"link","diff":{"en":"A button runs an action on the current page; a link moves to another page or place.","ja":"ボタンは今のページで操作を実行し、リンクは別のページや場所へ移動します。"}},{"id":"toggle-button","diff":{"en":"A button runs its action once per press; a toggle button keeps an on or off state.","ja":"ボタンは押すたびに操作を1回実行し、トグルボタンはオン・オフの状態を保ちます。"}},{"id":"split-button","diff":{"en":"A button offers one action; a split button adds a menu of related actions beside it.","ja":"ボタンは操作が1つだけで、スプリットボタンはその横に関連する操作のメニューが付きます。"}},{"id":"file-upload","diff":{"en":"A button runs an action; a file upload’s button opens a file picker and keeps the chosen files as a form value.","ja":"ボタンは操作を実行し、ファイルアップロードのボタンはファイル選択画面を開いて、選んだファイルをフォームの値として持ちます。"}},{"id":"back-to-top","diff":{"en":"A button runs any action in its place in the layout; a back to top button only returns to the top and often floats over the page.","ja":"ボタンはレイアウトの中の決まった場所でさまざまな操作を実行し、スクロールトップボタンは先頭へ戻ることだけを受け持ち、ページの上に浮かぶことが多いです。"}},{"id":"button-group","diff":{"en":"A button is a single control that runs one action; a button group puts a few related buttons together, each running its own action.","ja":"ボタンは1つの操作を実行する単独の部品で、ボタングループは関連するボタンを数個まとめて並べ、それぞれが自分の操作を実行します。"}}],"sources":[{"label":"Open UI: Button","url":"https://open-ui.org/components/button","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Button Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/button/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ボタン」をもとに作成","url":"https://design.digital.go.jp/dads/components/button/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「ボタン（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/button/usage/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「ボタン（アクセシビリティ）」をもとに作成","url":"https://design.digital.go.jp/dads/components/button/accessibility/","checkedAt":"2026-10-21"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Button","url":"https://design-system.service.gov.uk/components/button/","checkedAt":"2026-10-22"},{"label":"Carbon Design System: Button","url":"https://carbondesignsystem.com/components/button/usage/","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 2.5.5: Target Size (Enhanced) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html","checkedAt":"2026-10-22"},{"label":"Deceptive Patterns: Confirmshaming","url":"https://www.deceptive.design/types/confirmshaming","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/","checkedAt":"2026-11-03"},{"label":"MDN: aria-disabled","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-disabled","checkedAt":"2026-11-03"},{"label":"WAI-ARIA APG: Providing Accessible Names and Descriptions","url":"https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/","checkedAt":"2026-11-03"},{"label":"Understanding Success Criterion 4.1.2: Name, Role, Value (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html","checkedAt":"2026-11-03"},{"label":"Understanding Success Criterion 2.5.8: Target Size (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html","checkedAt":"2026-11-04"},{"label":"Understanding Success Criterion 2.5.2: Pointer Cancellation (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/pointer-cancellation.html","checkedAt":"2026-11-04"},{"label":"Primer: IconButton guidelines","url":"https://primer.style/product/components/icon-button/guidelines/","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/button/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/button/"}},{"id":"button-group","category":"action","names":{"en":"Button group","ja":"ボタングループ"},"aliases":[{"name":"Button group","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/button-group/"},{"name":"Button group","source":"Bootstrap","url":"https://getbootstrap.com/docs/5.3/components/button-group/"},{"name":"Button Group","source":"MUI","url":"https://mui.com/material-ui/react-button-group/"},{"name":"ButtonGroup","source":"Primer","url":"https://primer.style/product/components/button-group/guidelines/"},{"name":"Button group","source":"Atlassian Design System","url":"https://atlassian.design/components/button/button-group/usage"}],"summary":{"en":"A set of related buttons placed side by side, each running its own action, such as Save, Save as draft and Cancel.","ja":"「保存する」「下書き保存」「キャンセル」のように、関係するボタンを並べたものです。ボタンはそれぞれの操作を実行します。"},"appearance":{"en":"Two or three buttons in a row, often with one filled as the main action and the others in a quieter style. Some design systems leave a gap between the buttons, and others join them into one bar. In this demo, “Save”, “Save as draft” and “Cancel” sit in a row with a gap between them and wrap onto the next row on a narrow screen. The result of each press appears in the line below.","ja":"2つか3つのボタンが1列に並び、主な操作のボタンを塗りつぶし、ほかを控えめな見た目にすることが多いです。デザインシステムによって、ボタンの間をあけるものと、1本の帯のようにつなげるものがあります。このデモでは「保存する」「下書き保存」「キャンセル」が間をあけて並び、狭い画面では次の行に折り返します。押した結果は下の行に出ます。"},"behavior":[{"en":"Each button runs its own action when pressed. The group does not mark any button as selected.","ja":"各ボタンは押すとそれぞれの操作を実行します。グループのどのボタンも、選ばれた状態にはなりません。"},{"en":"The group itself is not a focus target, and each button is its own Tab stop, so three buttons are three Tab stops. Primer says a button group becomes a single Tab stop, with the cursor keys moving between the buttons, only when it is given `role=\"toolbar\"`, which makes it a toolbar.","ja":"グループ自体にはフォーカスが止まらず、ボタンごとに Tab の止まる場所があります。3つのボタンなら Tab の止まる場所は3か所です。Primer によると、ボタングループの Tab の止まる場所が1か所になり、ボタンの間をカーソルキーで移るようになるのは、`role=\"toolbar\"` を付けたときだけで、そうするとツールバーになります。"},{"en":"Material Design 3’s accessibility page says Tab lands on the first button and the arrow keys move between the items, while its key table lists Tab for moving between the buttons and the arrow keys for moving inside the component. This page and demo follow the plain Tab behavior that Primer describes.","ja":"Material Design 3 のアクセシビリティのページは、Tab が最初のボタンに届き、項目の間は矢印キーで移ると書いています。一方、同じページのキーの表では、Tab はボタンの間の移動、矢印キーは部品の中の移動としています。このページとデモは、Primer が書いている、Tab だけで移るふつうの動作に合わせています。"},{"en":"Bootstrap asks for `role=\"group\"` and a name from `aria-label` or `aria-labelledby`, so screen readers announce the buttons as a group. USWDS asks for `role=\"group\"` when the buttons are not in a list. MDN describes the `group` role as a collection of items with related functionality that is left out of a page summary.","ja":"Bootstrap は、スクリーンリーダーがボタンをひとまとまりとして読み上げるように、`role=\"group\"` と、`aria-label` か `aria-labelledby` による名前を求めています。USWDS は、ボタンをリストに入れないとき `role=\"group\"` を付けるよう求めています。MDN は `group` ロールを、関連する機能を持つ項目の集まりで、ページの要約には含めないものと説明しています。"},{"en":"The sources do not agree on this. The GOV.UK example is a plain `<div>` with no role, Primer says the grouping is purely visual unless `role=\"toolbar\"` is added, and Material Design 3 says the container does not need a label.","ja":"この点は資料によって違います。GOV.UK の例は役割のない `<div>` で、Primer は `role=\"toolbar\"` を足さない限りグループ分けは見た目だけだとし、Material Design 3 は入れ物に名前は要らないとしています。"},{"en":"In this demo, the group is a `<div role=\"group\">` named with `aria-label`, and each button is a native `<button>`. The browser handles Tab and Enter / Space, and the demo adds no key handling. The result of a press appears in a `role=\"status\"` line.","ja":"このデモでは、グループを `aria-label` で名前を付けた `<div role=\"group\">` にし、各ボタンをネイティブの `<button>` にしています。Tab や Enter / Space の操作はブラウザが受け持ち、デモはキー操作を足していません。押した結果は `role=\"status\"` の行に出ます。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus to the next or previous button in the group, one button at a time, and then out of the group.","ja":"グループの中の次または前のボタンへ、1つずつフォーカスを移し、端まで来るとグループの外へ出ます。"}},{"key":"Enter / Space","action":{"en":"Presses the focused button.","ja":"フォーカス中のボタンを押します。"}}],"variations":[{"name":{"en":"Separate buttons","ja":"間をあけて並べる型"},"description":{"en":"Each button stays a separate element with a gap between them, as in the default button group of USWDS and the GOV.UK example. USWDS stacks these buttons in a column on mobile screens.","ja":"各ボタンを別の要素として、間をあけて並べるものです。USWDS の標準のボタングループと GOV.UK の例がこの形で、USWDS はモバイルの画面ではボタンを縦に積みます。"}},{"name":{"en":"Joined buttons","ja":"つなげる型"},"description":{"en":"USWDS has a segmented button group that shows discrete buttons in a row as a single element, for categorically related controls such as switching between views. It shows the current state by button style, with the default style for the current button and the outline style for the others. That is a selection, so this site covers it as the segmented control, not as a plain button group.","ja":"USWDS には、独立したボタンを1列に並べ、1つの要素として見せるセグメンテッドのボタングループがあります。分類として関係のある操作部品、たとえば表示を切り替えるものに使います。現在の状態はボタンの見た目で示し、現在のボタンは標準の見た目、それ以外はアウトラインにします。これは選択なので、このサイトでは通常のボタングループでなく、セグメンテッドコントロールとして扱っています。"}},{"name":{"en":"Vertical","ja":"縦に積む型"},"description":{"en":"Bootstrap has a vertical button group, and MUI sets it with an `orientation` prop. The Digital Agency Design System says buttons are often stacked vertically on mobile devices, in the same meaning-based order as on desktop.","ja":"Bootstrap には縦に積むボタングループがあり、MUI は `orientation` プロパティで切り替えます。デジタル庁デザインシステムは、モバイルではボタンを縦に積むことが多く、順序の意味はデスクトップと同じにするとしています。"}},{"name":{"en":"With a menu","ja":"メニューを加える型"},"description":{"en":"Bootstrap nests a dropdown button inside a group. MUI and Primer build a split button out of a button group, with a main action and a button that opens a list of related actions. This site covers that as the split button.","ja":"Bootstrap はグループの中にドロップダウンのボタンを入れ子にします。MUI と Primer はボタングループで、主な操作のボタンと関連する操作の一覧を開くボタンからなるスプリットボタンを作ります。このサイトではスプリットボタンとして扱っています。"}}],"usage":[{"en":"Group only buttons whose actions are related, such as a main action with an alternative in a form, or Back and Next through sequential content (USWDS). Do not group buttons just because they sit close together (Primer).","ja":"まとめるのは、操作に関係があるボタンだけにします。たとえば、フォームの主な操作とその代わりの操作、順に進む内容での「戻る」「次へ」です（USWDS）。近くに置くというだけでまとめません（Primer）。"},{"en":"Carbon uses a button group for two or three actions the user weighs against each other, groups more than three into menu buttons, and suggests a toolbar for interfaces that need many common actions.","ja":"Carbon は、ボタングループを、利用者が見比べる2つか3つの操作に使います。3つを超える操作はメニューボタンにまとめ、よく使う操作がたくさん要る画面ではツールバーを考えるよう勧めています。"},{"en":"Keep to one main action. Carbon asks for one high-emphasis button, Primer treats a primary button in a group as rare and allows at most one, and Atlassian lets the main action be the primary button.","ja":"主な操作は1つにします。Carbon は強調の強いボタンを1つにするよう求め、Primer はグループに主なボタンを入れるのはまれで、入れても1つまでとし、Atlassian は主な操作を主なボタンにしてよいとしています。"},{"en":"The name means different things. Here it means buttons that each run an action, as in USWDS, GOV.UK, Atlassian and Primer. Material Design 3’s connected button group holds toggle buttons for single or multiple selection and replaces its segmented button, which this site covers as the segmented control. Primer says to use a segmented control, not a button group, to show a selection.","ja":"名前が指すものは資料によって違います。ここでは、USWDS、GOV.UK、Atlassian、Primer と同じく、それぞれが操作を実行するボタンを指します。Material Design 3 のコネクテッドボタングループは、1つまたは複数を選ぶトグルボタンを入れるもので、セグメンテッドボタンに代わるものです。このサイトではセグメンテッドコントロールとして扱っています。Primer は、選んだ状態を示すときはボタングループでなくセグメンテッドコントロールを使うよう書いています。"},{"en":"Bootstrap and USWDS use `role=\"group\"` for a button group and `role=\"toolbar\"` for a toolbar, and Bootstrap builds a toolbar out of several groups. The WAI-ARIA Authoring Practices Guide says to use a toolbar only when it has three or more controls.","ja":"Bootstrap と USWDS は、ボタングループには `role=\"group\"`、ツールバーには `role=\"toolbar\"` を使います。Bootstrap は複数のグループを組み合わせてツールバーを作ります。WAI-ARIA Authoring Practices Guide は、ツールバーにするのは操作部品が3つ以上のときだけとしています。"},{"en":"Material Design 3 keeps a button group on one line and lets the buttons at its end collapse into an overflow menu on small screens. This demo wraps onto the next row instead, so every button stays visible at 320 px wide and at 200% text size.","ja":"Material Design 3 は、ボタングループを1行に収め、小さい画面では端のボタンをオーバーフローメニューにしまえるとしています。このデモは代わりに次の行へ折り返し、幅320pxや文字を200%にしても、すべてのボタンが見えるようにしています。"}],"misuse":[{"pattern":{"en":"Putting a destructive action, such as delete, in the same group as non-destructive ones","ja":"削除のような破壊的な操作を、そうでない操作と同じグループに入れる"},"harm":{"en":"USWDS says mixing them can lead to input mistakes.","ja":"混ぜると、入力の間違いにつながることがあると USWDS は書いています。"},"instead":{"en":"Look for another placement or structure, such as giving the destructive action its own place apart from the group.","ja":"別の配置や構成を考えます。たとえば、破壊的な操作をグループから離して、別の場所に置きます。"}},{"pattern":{"en":"Putting many buttons in one group","ja":"1つのグループに多くのボタンを入れる"},"harm":{"en":"Carbon says too many calls to action overwhelm and confuse people, and Primer says a group of too many buttons can be overwhelming.","ja":"行動を促すボタンが多すぎると利用者が圧倒され、混乱すると Carbon は書いています。Primer も、ボタンが多すぎるグループは圧倒されかねないとしています。"},"instead":{"en":"Keep it to two or three buttons. Put more than three actions in menu buttons, or consider a toolbar for interfaces that need many common actions (Carbon).","ja":"2つか3つのボタンにとどめます。3つを超える操作はメニューボタンにまとめ、よく使う操作がたくさん要る画面ではツールバーを考えます（Carbon）。"}}],"related":[{"id":"button","diff":{"en":"A button group puts a few related buttons together, each running its own action; a button is a single control that runs one action.","ja":"ボタングループは関連するボタンを数個まとめて並べ、それぞれが自分の操作を実行します。ボタンは1つの操作を実行する単独の部品です。"}},{"id":"toolbar","diff":{"en":"A button group is a few related buttons that each take a Tab stop; a toolbar is a single Tab stop with the arrow keys moving between its controls.","ja":"ボタングループは関連するボタンを数個並べ、Tab はボタンごとに止まります。ツールバーは Tab の止まる場所が1か所で、中の操作部品の間を矢印キーで移ります。"}},{"id":"segmented-control","diff":{"en":"A button group has each button run its own action and marks none as chosen; a segmented control shows which of its segments is chosen.","ja":"ボタングループはそれぞれのボタンが自分の操作を実行し、選ばれた状態を示しません。セグメンテッドコントロールは、区画のうちどれが選ばれているかを示します。"}},{"id":"split-button","diff":{"en":"A button group is a set of separate buttons, each running its own action; a split button is one main action joined to an arrow button that opens a menu of related actions.","ja":"ボタングループは別々のボタンを並べ、それぞれが自分の操作を実行します。スプリットボタンは主な操作に、関連する操作のメニューを開く矢印のボタンをつなげたものです。"}}],"sources":[{"label":"U.S. Web Design System: Button group","url":"https://designsystem.digital.gov/components/button-group/","checkedAt":"2026-11-03"},{"label":"GOV.UK Design System: Button (Grouping buttons)","url":"https://design-system.service.gov.uk/components/button/","checkedAt":"2026-11-03"},{"label":"Bootstrap: Button group","url":"https://getbootstrap.com/docs/5.3/components/button-group/","checkedAt":"2026-11-03"},{"label":"MUI: Button Group","url":"https://mui.com/material-ui/react-button-group/","checkedAt":"2026-11-03"},{"label":"Primer: ButtonGroup guidelines","url":"https://primer.style/product/components/button-group/guidelines/","checkedAt":"2026-11-03"},{"label":"Primer: ButtonGroup accessibility","url":"https://primer.style/product/components/button-group/accessibility/","checkedAt":"2026-11-03"},{"label":"Atlassian Design System: Button group usage","url":"https://atlassian.design/components/button/button-group/usage","checkedAt":"2026-11-03"},{"label":"Carbon Design System: Button usage","url":"https://carbondesignsystem.com/components/button/usage/","checkedAt":"2026-11-03"},{"label":"Material Design 3: Button groups guidelines","url":"https://m3.material.io/components/button-groups/guidelines","checkedAt":"2026-11-03"},{"label":"Material Design 3: Button groups accessibility","url":"https://m3.material.io/components/button-groups/accessibility","checkedAt":"2026-11-03"},{"label":"MDN: ARIA group role","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/group_role","checkedAt":"2026-11-03"},{"label":"WAI-ARIA APG: Toolbar Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/","checkedAt":"2026-11-03"},{"label":"デジタル庁デザインシステムウェブサイト「ボタン（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/button/usage/","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/button-group/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/button-group/"}},{"id":"callout","category":"feedback","names":{"en":"Callout","ja":"注釈ブロック"},"aliases":[{"name":"注釈ブロック","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/notice-block/"},{"name":"Inset text","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/inset-text/"}],"summary":{"en":"A block set apart from the surrounding text that holds helpful extra information, such as help with a step or an example.","ja":"周りの文章と区別して、手続きの助けになる補足や具体例を載せるブロックです。"},"appearance":{"en":"A paragraph inside a border, sometimes with a light background or a short title. Some have a thick border only on the left edge.","ja":"枠線で囲んだ段落です。薄い背景色や短いタイトルが付くこともあります。左端の線だけを太くしたものもあります。"},"behavior":[{"en":"It does nothing on its own. It is part of the page content and is read in order with the text around it.","ja":"それ自体は何の動作もしません。ページの内容の一部で、周りの文章と同じ順に読まれます。"},{"en":"Unlike an alert, it has no `role=\"alert\"`, so screen readers do not announce it out of turn.","ja":"アラートと違って `role=\"alert\"` を持たないので、スクリーンリーダーが割り込んで読み上げることはありません。"},{"en":"In this demo, a callout under the description of a procedure gives examples of the documents to bring. The title is bold text, not a heading, so it does not add an entry to the page’s outline.","ja":"このデモでは、手続きの説明の下に注釈ブロックを置き、持っていく書類の例を挙げています。タイトルは見出しではなく太字にして、ページの見出しの構成に項目を増やさないようにしています。"}],"keyboard":[{"key":"—","action":{"en":"None. A callout is not a control and does not take focus. Links inside it are reached with Tab as usual.","ja":"なし。注釈ブロックは操作する部品ではなく、フォーカスを受けません。中にリンクがあれば、ふだんどおり Tab キーで移ります。"}}],"variations":[{"name":{"en":"Border only","ja":"枠線だけ"},"description":{"en":"A colored border around the text, with no title.","ja":"本文を色の付いた枠線で囲むだけで、タイトルを付けないものです。"}},{"name":{"en":"With a title","ja":"タイトル付き"},"description":{"en":"A short title above the text and a light background, as in this demo.","ja":"このデモのように、本文の上に短いタイトルを置き、薄い背景色を付けたものです。"}},{"name":{"en":"Left border with a disclosure","ja":"左端の線とディスクロージャー"},"description":{"en":"A thick left border, with a disclosure inside that folds away extra information people can skip.","ja":"左端の線を太くし、中のディスクロージャーに、読まなくても進められる補足を畳んでおくものです。"}}],"usage":[{"en":"Use it for extra information that helps with a step, such as help with what to enter, documents to prepare, or examples that show the difference between choices.","ja":"入力内容のヘルプ、用意する書類、選択肢の違いが分かる例など、手続きを進める助けになる補足に使います。"},{"en":"Put conditions on the input itself, such as which characters are allowed, in the support text of the text field instead.","ja":"入力できる文字の種類のように、入力そのものに付く条件は、テキストフィールドのサポートテキストに書きます。"},{"en":"Do not use it to change the subject like a sidebar column, or just to emphasize part of the text.","ja":"コラムのように話題を切り替えたり、本文の一部を強調したりするためには使いません。"},{"en":"Fold information into a disclosure inside it only when people can finish the step without reading it.","ja":"中のディスクロージャーに畳むのは、読まなくても手続きを進められる補足だけにします。"}],"misuse":[{"pattern":{"en":"Putting information that everyone must see only in a callout","ja":"全員が必ず読む必要のある情報を、注釈ブロックにだけ書く"},"harm":{"en":"On a busy page, or next to other eye-catching elements, some people do not notice the block.","ja":"要素の多いページや、ほかに目立つ要素が近くにある場所では、このブロックに気づかない人がいます。"},"instead":{"en":"Put it in the main text. For very important content, such as legal information, use a warning that is made to stand out.","ja":"本文に書きます。法的な情報のように特に重要な内容は、目立たせるための警告の表示を使います。"}},{"pattern":{"en":"Putting many callouts on one page","ja":"1つのページに注釈ブロックをいくつも置く"},"harm":{"en":"The more it is used, the less it works at setting information apart for readers.","ja":"多く使うほど、読む人に情報を区別して見せる効果が薄れます。"},"instead":{"en":"Keep it for the few pieces of extra information that help the most, and write the rest in the main text.","ja":"特に役立ついくつかの補足だけに使い、それ以外は本文に書きます。"}}],"related":[{"id":"alert","diff":{"en":"A callout sets apart helpful extra information and is never announced on its own; an alert tells the user something important, and content added to it is announced right away.","ja":"注釈ブロックは役立つ補足を区別して見せるだけで、ひとりでに読み上げられることはありません。アラートは重要なことを知らせ、中身を入れるとすぐに読み上げられます。"}},{"id":"emergency-banner","diff":{"en":"A callout sits next to the content it adds to; an emergency banner takes over the top of the page to warn about an urgent danger.","ja":"注釈ブロックは補足する内容のそばに置き、緊急時バナーはページの上部を占めて差し迫った危険を知らせます。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「注釈ブロック」をもとに作成","url":"https://design.digital.go.jp/dads/components/notice-block/","checkedAt":"2026-10-22"},{"label":"GOV.UK Design System: Inset text","url":"https://design-system.service.gov.uk/components/inset-text/","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/callout/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/callout/"}},{"id":"card","category":"data","names":{"en":"Card","ja":"カード"},"aliases":[],"summary":{"en":"A box that groups the content and actions about one topic, such as a product or an article.","ja":"商品や記事など、1つの話題についての内容と操作をまとめた箱です。"},"appearance":{"en":"A rectangle with rounded corners and a border or shadow, often with an image at the top, then a small category label, a title, short text, and buttons.","ja":"角の丸い長方形で、枠線か影があります。上に画像、その下に小さな分類のラベル・見出し・短い文・ボタンが並ぶことが多いです。"},"behavior":[{"en":"Cards are usually laid out in a grid so the user can scan and compare them. In this demo, the grid drops to fewer columns on narrow screens.","ja":"一覧で見比べられるよう、格子状に並べることが多いです。このデモでは、狭い画面では列の数を減らします。"},{"en":"If the whole card is a link, it should contain no other buttons or links. The cards in this demo have a Save button, so only the heading is a link.","ja":"カード全体をリンクにするなら、中に別のボタンやリンクを置きません。このデモのカードには保存ボタンがあるため、見出しだけをリンクにしています。"},{"en":"Each card is an `<article>` named by its heading, and the cards are items of a list so screen readers announce how many there are.","ja":"各カードは見出しを名前にした `<article>` にし、カードの並びをリストにして、スクリーンリーダーが件数を伝えられるようにします。"},{"en":"In this demo, the ad card is labeled “Ad” in text and has a dashed border and a different background, so it is not mistaken for the other cards.","ja":"このデモでは、広告のカードに「PR」と文字で示し、破線の枠と別の背景にして、ほかのカードと取り違えないようにしています。"},{"en":"In this demo, the heading links do not go anywhere.","ja":"このデモでは、見出しのリンクを押しても移動しません。"},{"en":"In this demo, each Save button is described by its card’s heading with `aria-describedby`, so a list of buttons still tells which card each one belongs to.","ja":"このデモでは、各カードの「保存」ボタンに `aria-describedby` でカードの見出しを結び、ボタンの一覧で聞いてもどのカードのものか分かるようにしています。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves through the heading links and buttons in the cards.","ja":"カードの中の見出しのリンクとボタンの間を移動します。"}},{"key":"Enter","action":{"en":"Follows the focused link, or presses the focused button.","ja":"フォーカス中のリンクを開きます。ボタンなら押します。"}},{"key":"Space","action":{"en":"Presses the focused button.","ja":"フォーカス中のボタンを押します。"}}],"usage":[{"en":"Separate cards with an outline of at least 3:1 contrast instead of relying on a shadow alone.","ja":"影だけに頼らず、背景とのコントラスト比3:1以上の枠線で区切ります。"},{"en":"A card has a container with a visible outline and a title. A label for a category, an image, text, and a sub area with links or buttons can be added. When the title is a link, underline it.","ja":"カードは外周の見えるコンテナと見出しを必ず持ちます。分類などのラベル、画像、本文、リンクやボタンを置くサブエリアは必要に応じて加えます。見出しをリンクにするときは下線を付けます。"}],"misuse":[{"pattern":{"en":"Putting links or buttons inside a card that is itself a link","ja":"カード全体をリンクにしたうえで、中にリンクやボタンを置く"},"harm":{"en":"Screen readers skip a control nested inside another one. Keyboard users can still reach it with Tab, but no name, role or state is announced, so it becomes an empty stop that tells them nothing.","ja":"スクリーンリーダーは操作部品の中に入れ子になった操作部品を読み飛ばします。キーボードの利用者は Tab でそこへ移動できても、名前も役割も状態も伝わらず、何の手がかりもない場所に止まることになります。"},"instead":{"en":"If the card needs its own buttons or links, make only the heading a link and leave the rest of the card unlinked.","ja":"カードの中にボタンやリンクが要るなら、見出しだけをリンクにし、カード全体はリンクにしません。"}},{"pattern":{"en":"Making an ad card look the same as the content cards around it","ja":"広告のカードを、周りの記事のカードと同じ見た目で並べる"},"harm":{"en":"Users mistake the ad for content or a regular control and click it without meaning to, sometimes ending up on a page or sign-up they did not intend.","ja":"利用者は広告を記事やふつうの操作と思い込んで押してしまい、意図しないページや申し込みに進むことがあります。"},"instead":{"en":"Label the card as an ad in text, such as “Ad” or “Sponsored”, and give it a look that sets it apart from content cards.","ja":"「広告」「PR」のように広告だと文字で示し、記事のカードと見分けられる見た目にします。"},"deceptive":true}],"related":[{"id":"list","diff":{"en":"Cards give each item room for an image and actions; a list stacks items compactly in rows.","ja":"カードは1件ごとに画像や操作を置く余裕があり、リストは項目を行で詰めて並べます。"}}],"sources":[{"label":"MUI: Card","url":"https://mui.com/material-ui/react-card/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「カード」をもとに作成","url":"https://design.digital.go.jp/dads/components/card/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「カード（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/card/usage/","checkedAt":"2026-10-21"},{"label":"Deque University: Interactive controls must not be nested","url":"https://dequeuniversity.com/rules/axe/4.10/nested-interactive","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Disguised ads","url":"https://www.deceptive.design/types/disguised-ads","checkedAt":"2026-10-21"},{"label":"Deque University: <li> elements must be contained in a <ul> or <ol>","url":"https://dequeuniversity.com/rules/axe/4.10/listitem","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/card/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/card/"}},{"id":"carousel","category":"disclosure","names":{"en":"Carousel","ja":"カルーセル"},"aliases":[{"name":"Slide show","source":"WAI-ARIA APG","url":"https://www.w3.org/WAI/ARIA/apg/patterns/carousel/"},{"name":"Image rotator","source":"WAI-ARIA APG","url":"https://www.w3.org/WAI/ARIA/apg/patterns/carousel/"},{"name":"イメージスライダー","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/image-slider/"}],"summary":{"en":"Shows a set of slides one at a time, with buttons to choose a slide or move to the previous or next one.","ja":"複数のスライドを1枚ずつ表示し、ボタンでスライドを選んだり前後へ切り替えたりする部品です。"},"appearance":{"en":"A heading above a wide panel showing one slide. Below it are numbered buttons with the current one highlighted, previous and next arrow buttons with the position as text, such as “1 / 4”, and an All slides toggle that lists the rest.","ja":"見出しの下に、1枚のスライドを表示する横長の枠があります。その下に、表示中のものが強調された番号のボタンと、「1 / 4」のように今の位置を文字で示す前後の矢印のボタン、残りのスライドを一覧にする「すべてのスライド」が並びます。"},"behavior":[{"en":"Pressing a numbered button shows that slide. The numbered buttons are tabs (`role=\"tab\"` in a `tablist`), and `aria-selected` marks the slide being shown.","ja":"番号のボタンを押すと、そのスライドが表示されます。番号のボタンはタブ（`tablist` の中の `role=\"tab\"`）で、表示中のスライドを `aria-selected` で示します。"},{"en":"Only the selected numbered button is in the Tab order; the arrow keys move between them and show each slide as focus moves (automatic activation).","ja":"Tab キーで止まる番号のボタンは選択中のものだけで、矢印キーで移ると同時にそのスライドが表示されます（自動アクティベーション）。"},{"en":"The previous and next buttons wrap around from the last slide to the first. Focus stays on the button, and the new slide is announced through a live region (`aria-live=\"polite\"`).","ja":"前後のボタンは最後のスライドから最初に戻ります。フォーカスはボタンに残り、新しいスライドはライブリージョン（`aria-live=\"polite\"`）で読み上げられます。"},{"en":"The carousel is a region named by its visible heading (`aria-labelledby`), and each slide takes its name from its own heading.","ja":"カルーセルは見えている見出しを名前にした領域（`aria-labelledby`）で、各スライドの名前もスライドの見出しから取ります。"},{"en":"All slides is a `<details>` element that lists the other slides, starting from the one after the slide being shown.","ja":"「すべてのスライド」は `<details>` 要素で、表示中のスライドの次から順に、ほかのスライドを一覧にします。"},{"en":"In this demo, which is the container type, slides use text instead of images, the Learn more links do not navigate, and the numbered buttons and the previous and next buttons are shown together at every width.","ja":"このデモはコンテナタイプで、スライドを画像ではなく文字で作り、「詳しく見る」のリンクは移動しません。番号のボタンと前後のボタンは、どの幅でも両方を表示します。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves through the link in the slide, the selected numbered button, the previous and next buttons, and All slides.","ja":"スライドのリンク、選択中の番号のボタン、前後のボタン、「すべてのスライド」の順に移動します。"}},{"key":"Enter / Space","action":{"en":"On the previous or next button, shows that slide and keeps focus on the button. On All slides, opens or closes the list.","ja":"前後のボタンでは、前または次のスライドを表示し、フォーカスはボタンに残ります。「すべてのスライド」では一覧を開閉します。"}},{"key":"← / →","action":{"en":"On the numbered buttons, moves to the previous / next number and shows its slide. Wraps around at either end.","ja":"番号のボタンで、前・次の番号へ移り、そのスライドを表示します。端では反対の端へ戻ります。"}},{"key":"Home / End","action":{"en":"On the numbered buttons, moves to the first / last number and shows its slide.","ja":"番号のボタンで、最初・最後の番号へ移り、そのスライドを表示します。"}}],"variations":[{"name":{"en":"Key visual type","ja":"打ち出しタイプ"},"description":{"en":"The Digital Agency Design System divides carousels into this key visual type and the container type. The key visual type is placed at the top of a page to show what the site is about, and is used only when the page `<title>` can serve as its heading.","ja":"デジタル庁デザインシステムは、カルーセルをこの打ち出しタイプとコンテナタイプに分けています。打ち出しタイプはページの最上部に置き、ウェブサイトの主題を示すものです。ページの `<title>` 要素が見出しの役目を果たせる場合だけに使います。"}},{"name":{"en":"Container type","ja":"コンテナタイプ"},"description":{"en":"Groups content on one topic, such as news, with a heading placed before it.","ja":"「新着情報」のような1つの話題のまとまりに使い、前に見出しを置くものです。"}},{"name":{"en":"Multiple and single","ja":"マルチとシングル"},"description":{"en":"In the Digital Agency Design System, a multiple carousel has 2 to 6 slides. A single one has only one slide and no controls for switching, and is used only for the key visual type. Nielsen Norman Group suggests 5 slides or fewer, since people are unlikely to engage with more.","ja":"デジタル庁デザインシステムでは、マルチはスライドを2〜6枚にします。シングルはスライドが1枚だけで切り替えの操作部品を出さず、打ち出しタイプだけで使います。Nielsen Norman Group は、それより多いと見てもらいにくいとして5枚以下を勧めています。"}},{"name":{"en":"Standard size","ja":"標準サイズ"},"description":{"en":"The standard size. Beside the slide, a next area shows a small version of the next slide as a Next slide button. Numbered buttons below show the position.","ja":"標準の大きさで、スライドの横に次のスライドの縮小画像を「次のスライド」ボタンとして示す領域を置きます。下の番号のボタンで位置を示します。"}},{"name":{"en":"Narrow size","ja":"幅狭サイズ"},"description":{"en":"The counterpart of the standard size for narrow content areas, down to 320 px. There is no next area; previous and next buttons with the position as text, such as “1 / 4”, take its place.","ja":"標準サイズに対して、コンテンツ領域が狭いとき（320px まで）の型です。次のスライドを示す領域はなく、代わりに「1 / 4」のような位置の表示と前後のボタンを置きます。"}},{"name":{"en":"Auto-rotating","ja":"自動再生"},"description":{"en":"Changes slides on a timer, with a stop/start button placed first inside the carousel. The Digital Agency Design System carousel does not rotate automatically.","ja":"一定時間ごとにスライドが切り替わるものです。停止・再開のボタンをカルーセル内の最初に置きます。デジタル庁デザインシステムのカルーセルは自動では切り替わりません。"}}],"usage":[{"en":"Keep the text on each slide short and explain the details on the linked page.","ja":"スライドの文字は短くし、詳しいことはリンク先で説明します。"},{"en":"Try doing without one first. Nielsen Norman Group says people often scroll past carousels, and that a static hero image or putting the content into the page may be better. It adds that swiping through many frames is taxing on a phone, and that people struggle to recognize topics they have seen once a set exceeds about five.","ja":"まず、カルーセルなしで済まないかを考えます。Nielsen Norman Group は、カルーセルは読み飛ばされることが多く、静止した大きな画像や、内容をページに組み込むほうがよい場合があるとしています。スマートフォンで何枚もスワイプするのは負担で、5 枚ほどを超えると見た話題を見分けにくくなるとも述べています。"},{"en":"Do not make swiping the only way to change slides. WCAG 2.5.1 Pointer Gestures gives the example of a news carousel that detects swipes and also has forward and backward buttons that work with a single tap.","ja":"スライドを替える手段をスワイプだけにしません。WCAG 2.5.1「ポインタのジェスチャ」は、スワイプを検出しつつ、1 回のタップで使える進むボタンと戻るボタンも置いたニュースのカルーセルを例に挙げています。"}],"misuse":[{"pattern":{"en":"Advancing slides automatically","ja":"スライドを自動で切り替える"},"harm":{"en":"Continuous motion pulls attention away from the rest of the page. People with cognitive or attention disabilities, and people who read slowly or have trouble following moving content, can find the page hard or impossible to use.","ja":"動き続ける表示に気を取られ、ページのほかの部分に注意が向かなくなります。認知障害や注意欠如のある人、読むのに時間がかかる人、動くものを目で追いにくい人には、ページが使いにくくなったり使えなくなったりします。"},"instead":{"en":"Let users change slides themselves. If slides must rotate, provide a button that stops rotation, and pause while focus or the pointer is on the carousel.","ja":"スライドは利用者の操作で切り替えます。どうしても自動で切り替えるなら、止めるボタンを置き、フォーカスやマウスがカルーセル上にある間は止めます。"}},{"pattern":{"en":"Putting must-read information only in a carousel","ja":"必ず読んでほしい情報をカルーセルにだけ載せる"},"harm":{"en":"Many people scroll past a carousel, so slides after the first often go unseen. Someone who sees only one slide can get the wrong idea about the organization.","ja":"カルーセルを読み飛ばす人が多く、2枚目以降のスライドは見られないことが多いです。1枚しか見なかった人は、その組織について誤った印象を持つことがあります。"},"instead":{"en":"Also place important information elsewhere on the page or in the site navigation, or use a single static image instead of a carousel.","ja":"大事な情報はページのほかの場所やサイトのナビゲーションにも置きます。または、カルーセルをやめて1枚の固定した画像にします。"}},{"pattern":{"en":"Using small dots as the only way to pick a slide","ja":"スライドを選ぶ手段を小さな点だけにする"},"harm":{"en":"People cannot tell what a dot will show before selecting it, and dots are easy to miss, especially on mobile.","ja":"点を押すと何が出るのかを前もって知ることができません。点は特にスマートフォンで見落としやすいです。"},"instead":{"en":"Use previous and next buttons, or give each slide a control that names or shows its content, such as a label or thumbnail. Numbers show the position but not the content, so also offer a list of all slides. Make the controls large enough to read and select.","ja":"前後のボタンで切り替えるか、スライドごとにラベルやサムネイルなど中身が分かる操作部品を付けます。番号は位置を示すだけで中身は分からないので、すべてのスライドの一覧も用意します。操作部品は読めて押せる大きさにします。"}}],"related":[{"id":"tabs","diff":{"en":"A carousel picks slides by number or steps through them with previous and next buttons; tabs let the user jump to any panel by its name.","ja":"カルーセルは番号でスライドを選ぶか前後のボタンで順に切り替え、タブは名前の付いたパネルへ直接切り替えます。"}},{"id":"pagination","diff":{"en":"A carousel shows one slide of a small set in place; pagination moves through pages of a long list.","ja":"カルーセルは少数のスライドをその場で1枚ずつ見せ、ページネーションは長い一覧のページを移動します。"}}],"sources":[{"label":"Nielsen Norman Group: Carousel Usability: Designing an Effective UI for Websites with Content Overload","url":"https://www.nngroup.com/articles/designing-effective-carousels/","checkedAt":"2026-10-22"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Carousel (Slide Show or Image Rotator) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/carousel/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Auto-Rotating Image Carousel with Tabs for Slide Control Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-2-tablist/","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 2.2.2: Pause, Stop, Hide (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html","checkedAt":"2026-10-21"},{"label":"W3C WAI Tutorials: Carousels: Animations","url":"https://www.w3.org/WAI/tutorials/carousels/animations/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「カルーセル（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/carousel/usage/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「カルーセル」をもとに作成","url":"https://design.digital.go.jp/dads/components/carousel/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「カルーセル（アクセシビリティ）」をもとに作成","url":"https://design.digital.go.jp/dads/components/carousel/accessibility/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: carousel","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/carousel","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 2.5.1: Pointer Gestures (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures.html","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/carousel/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/carousel/"}},{"id":"checkbox","category":"input","names":{"en":"Checkbox","ja":"チェックボックス"},"aliases":[],"summary":{"en":"A small box the user checks or unchecks; any number of options in a group can be checked.","ja":"チェックを付けたり外したりする小さな四角です。グループ内でいくつでも選べます。"},"appearance":{"en":"A small square next to a label. A checked box shows a check mark; a partly checked parent shows a dash.","ja":"ラベルの横に小さな四角があります。選ぶとチェックマークが付き、一部だけ選ばれた親には横線が出ます。"},"behavior":[{"en":"Clicking the box or its label toggles the check.","ja":"四角かラベルをクリックすると、チェックが付いたり外れたりします。"},{"en":"A parent checkbox can show a mixed state when only some of its children are checked; checking it checks them all.","ja":"子の一部だけが選ばれているとき、親のチェックボックスは中間状態になります。親を押すと子をすべて選びます。"},{"en":"The WAI-ARIA APG mixed-state example goes further: the parent cycles through unchecked, mixed and checked, and the mixed step brings back the last partial selection. This demo keeps to the simpler behavior and only checks or unchecks all (Carbon and the Digital Agency Design System example do the same).","ja":"WAI-ARIA APG の中間状態の例では、親を押すたびにオフ・中間・オンを順に切り替え、中間に戻ったときは直前の一部だけの選択を復元します。このデモはより簡単な動きにとどめ、すべて選ぶか、すべて外すだけにしています（Carbon とデジタル庁デザインシステムの例も同じです）。"},{"en":"In this demo, Cheese starts checked so the mixed state is visible right away. In a real form, leave answers unchecked (see Misuses to avoid).","ja":"このデモでは、中間状態をすぐ見せるために「チーズ」を選んだ状態から始めます。実際のフォームでは回答をあらかじめ選んでおきません（避けたい使い方を参照）。"},{"en":"Related checkboxes are grouped with a `<fieldset>` and `<legend>` so the group has a name.","ja":"関連するチェックボックスは `<fieldset>` と `<legend>` でまとめ、グループに名前を付けます。"},{"en":"In this demo, the single “I agree to the terms of use” checkbox starts unchecked. Pressing Apply without checking it shows an error below it, links the error with `aria-describedby`, sets `aria-invalid`, and moves focus to the checkbox. Checking it removes the error.","ja":"このデモでは、単独の「利用規約に同意する」はチェックなしで始まります。チェックを付けずに「申し込む」を押すと、下にエラーの文を出して `aria-describedby` でつなぎ、`aria-invalid` を付けて、フォーカスをチェックボックスへ移します。チェックを付けるとエラーは消えます。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between checkboxes.","ja":"チェックボックス間を移動します。"}},{"key":"Space","action":{"en":"Checks or unchecks the focused box.","ja":"フォーカス中のボックスのチェックを付けたり外したりします。"}}],"usage":[{"en":"Use it for choosing several options, or for a single on/off choice.","ja":"複数の選択や、単独のオン・オフの選択に使います。"},{"en":"Put the box to the left of its label.","ja":"ボックスはラベルの左に置きます。"},{"en":"When a single checkbox has to be checked to go on, such as agreeing to terms, say in the error what to do, such as “Select if you agree to the terms of use”.","ja":"利用規約への同意のように、単独のチェックボックスにチェックがないと先へ進めないときは、「利用規約に同意する場合は、チェックを付けてください」のように、どうすればよいかをエラーに書きます。"},{"en":"Tie the label to the box with `<label>`. MDN explains that a label gives a larger hit area, which helps anyone trying to activate the input, including people on touch screens.","ja":"ラベルは `<label>` でボックスに結び付けます。MDN によると、ラベルの分だけ押せる範囲が広がり、タッチ画面を使う人を含めて、入力欄を操作しやすくなります。"}],"misuse":[{"pattern":{"en":"Checking consent or marketing boxes in advance","ja":"同意やメール配信のチェックを最初からオンにしておく"},"harm":{"en":"People tend to go with an option that has already been chosen for them. Anyone who scrolls past without noticing the setting goes on unaware of what it means, and can end up agreeing to things they never intended, such as recurring payments.","ja":"人はあらかじめ選ばれている選択肢をそのまま受け入れやすいです。気づかずに先へ進んだ人は、その意味を知らないまま、定期的な支払いのような意図しない内容に同意してしまうことがあります。"},"instead":{"en":"Show these boxes unchecked, so that agreement only comes from people checking them themselves, and say in the label exactly what they agree to.","ja":"チェックは外した状態で表示し、利用者が自分でオンにしたときだけ同意とします。何に同意するのかはラベルに具体的に書きます。"},"deceptive":true},{"pattern":{"en":"Wording an opt-out checkbox with double negatives","ja":"オプトアウトのチェックボックスを二重否定の文言にする"},"harm":{"en":"People scan labels instead of reading every word. When the wording is confusing, the label seems to say one thing while it means another, and people take an action they did not intend.","ja":"人はラベルを一語ずつ読まずに流し読みします。文言が紛らわしいと、書いてあることと違う意味に受け取り、意図しない操作をしてしまいます。"},"instead":{"en":"Write the label as a plain statement of what checking the box does, such as “Email me about new features”.","ja":"「新機能のお知らせをメールで受け取る」のように、オンにすると何が起きるかをそのまま書きます。"},"deceptive":true},{"pattern":{"en":"Checking answers to a question in advance","ja":"質問の回答をあらかじめチェックしておく"},"harm":{"en":"People become more likely to miss that they still had a question to answer, and to submit the wrong answer.","ja":"答えていない質問があることに気づきにくくなり、誤った回答のまま送信しやすくなります。"},"instead":{"en":"Show every option unchecked and let people choose.","ja":"すべての選択肢をチェックなしで表示し、利用者に選んでもらいます。"}}],"related":[{"id":"radio","diff":{"en":"Checkboxes allow any number of choices; radio buttons allow exactly one.","ja":"チェックボックスはいくつでも選べますが、ラジオボタンは1つだけ選びます。"}},{"id":"switch","diff":{"en":"A checkbox is often confirmed later with a submit button; a switch takes effect right away.","ja":"チェックボックスは送信ボタンで後から確定することが多く、スイッチは切り替えるとすぐに反映されます。"}},{"id":"token-field","diff":{"en":"Checkboxes show every option at once; a token field picks several values from a long or open-ended list by typing.","ja":"チェックボックスはすべての選択肢を一度に見せ、トークン入力は長い一覧や決まっていない候補から入力で複数の値を選びます。"}}],"sources":[{"label":"WAI-ARIA APG: Checkbox Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Checkbox (Mixed-State) Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「チェックボックス」をもとに作成","url":"https://design.digital.go.jp/dads/components/checkbox/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「チェックボックス（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/checkbox/usage/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: checkbox","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/checkbox","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Preselection","url":"https://www.deceptive.design/types/preselection","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Trick wording","url":"https://www.deceptive.design/types/trick-wording","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Checkboxes","url":"https://design-system.service.gov.uk/components/checkboxes/","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Checkbox","url":"https://carbondesignsystem.com/components/checkbox/usage/","checkedAt":"2026-10-22"},{"label":"MDN: <label>: The Label element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/checkbox/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/checkbox/"}},{"id":"color-picker","category":"input","names":{"en":"Color picker","ja":"カラーピッカー"},"aliases":[{"name":"Color well","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/color-wells"},{"name":"Color well control","source":"HTML","url":"https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)"}],"summary":{"en":"A control for choosing a color. It usually shows the current color as a small swatch and opens a picker when activated.","ja":"色を選ぶ部品です。たいてい今の色を小さな色見本で見せ、押すと色を選ぶ画面が開きます。"},"appearance":{"en":"A small swatch of the current color, often with its value as text, that opens a picker with a color spectrum, preset swatches or text boxes for the color values. This demo is a background color field: a label, the browser’s own swatch, a larger preview swatch with a border, and the value as text.","ja":"今の色を見せる小さな色見本で、値を文字で添えることも多く、押すと、色のスペクトルや色見本の一覧、色の値を入れる欄を備えたピッカーが開きます。このデモは背景色の欄で、ラベル、ブラウザ自身の色見本、枠線付きの大きなプレビュー、文字の値が並びます。"},"behavior":[{"en":"This demo uses the native `<input type=\"color\">`. It always holds a color: the HTML Standard says there is no way for people to set it to the empty string, and MDN says it starts as opaque black (`#000000`) when `value` is missing or invalid.","ja":"このデモはネイティブの `<input type=\"color\">` を使っています。値は必ず色になります。HTML Standard は、空の文字列にする方法は利用者にないとしており、MDN は、`value` がないか無効なときは不透明な黒（`#000000`）から始まるとしています。"},{"en":"The HTML Standard says the value is sanitized by parsing it as a CSS color and serializing the result, and that a value that does not parse becomes opaque black. Without `alpha`, and with the default `limited-srgb` color space, the serialization is the `#rrggbb` form, which MDN describes as seven-character lowercase hexadecimal, such as `#ff8800`.","ja":"HTML Standard は、値を CSS の色として解釈し、その結果を文字列にして整えるとしており、解釈できない値は不透明な黒になります。`alpha` がなく、色空間が既定の `limited-srgb` なら、文字列は `#rrggbb` の形で、MDN はこれを `#ff8800` のような小文字の7文字の16進数と説明しています。"},{"en":"The `alpha` attribute lets people change the opacity, and `colorspace` (`limited-srgb` by default, or `display-p3`) sets the color space and hints at the picker’s interface. With them the value is no longer a plain hex string: the HTML Standard serializes it as a `color()` string such as `color(display-p3 …)`. When this page was checked, MDN’s compatibility data listed them as supported from Safari 18.4, only as a preview in Firefox, and not in Chrome or Edge, so this demo uses neither.","ja":"`alpha` 属性で透明度を変えられるようになり、`colorspace`（既定は `limited-srgb`、もう1つは `display-p3`）で色空間とピッカーの画面の傾向を指定できます。どちらかを使うと、値はふつうの16進数ではなくなり、HTML Standard の定める `color(display-p3 …)` のような `color()` 形式の文字列になります。このページを確かめた時点の MDN の互換性データでは、Safari 18.4 から対応、Firefox はプレビューのみ、Chrome と Edge は未対応とされているので、このデモはどちらも使いません。"},{"en":"The picker is drawn by the browser, not by the page. MDN says the interface may vary substantially between browsers and platforms, from a plain text box that validates the format to a platform color picker or a custom picker window.","ja":"ピッカーはページではなくブラウザが描きます。MDN は、画面の作りがブラウザやプラットフォームによって大きく変わることがあり、形式を確かめるだけのテキストボックスのこともあれば、プラットフォームのカラーピッカーや独自のピッカーのウィンドウのこともあるとしています。"},{"en":"MDN says `input` fires every time the color changes, even while someone is still adjusting it in the picker, and `change` fires when the picker is dismissed. In this demo, `oninput` updates the preview swatch and the text, so they follow the picker as it moves.","ja":"MDN によると、`input` は、ピッカーで調整している最中も含め、色が変わるたびに発火し、`change` はピッカーを閉じたときに発火します。このデモでは `oninput` でプレビューと文字を更新するので、ピッカーの動きに合わせて追従します。"},{"en":"In this demo, the value text is not a live region, because `input` keeps firing while the picker is dragged and each change would be read out. A visually hidden status is updated on `change` instead, so screen reader users hear the chosen value once, when the picker is dismissed.","ja":"このデモでは、値の文字を読み上げ領域にしていません。ピッカーを動かしている間は `input` が発火し続け、変わるたびに読み上げられてしまうためです。代わりに、見えない状態表示を `change` で更新するので、スクリーンリーダーの利用者には、ピッカーを閉じたときに選んだ値が1回だけ読み上げられます。"},{"en":"In this demo, the value is also written as text beside the preview swatch. The swatch only repeats the color, so people who cannot tell colors apart still get the value, which WCAG 1.4.1 asks for by saying color should not be the only means of conveying information. The border keeps the swatch’s edge visible whatever color is chosen.","ja":"このデモでは、プレビューの色見本の隣に、値を文字でも書いています。色見本は色をなぞるだけなので、色を見分けにくい人にも値が伝わります。WCAG 1.4.1 が、色だけで情報を伝えないよう求めているためです。枠線は、どの色を選んでも色見本の輪郭が見えるようにします。"},{"en":"In this demo, `list` points to a `<datalist>` of four suggested colors. MDN’s `<datalist>` page documents this for the color type, as predefined colors in a browser-provided interface, and whether and how they appear is up to the browser. When this page was checked, MDN’s compatibility data said Firefox does not support it on macOS and Android, so the suggestions may not appear there.","ja":"このデモでは、`list` で4色のおすすめを入れた `<datalist>` を結んでいます。MDN の `<datalist>` のページは、色の入力ではあらかじめ決めた色がブラウザの画面に出るとしており、出るかどうか、どう出るかはブラウザしだいです。このページを確かめた時点の MDN の互換性データでは、Firefox は macOS と Android で対応していないので、そこではおすすめが出ないことがあります。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"Activates the input, and the HTML Standard says activating it shows the picker. The browser decides which keys activate it; both work in Chrome.","ja":"入力を操作します。HTML Standard は、操作するとピッカーが出るとしています。どのキーで操作できるかはブラウザしだいで、Chrome ではどちらでも開きます。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves focus onto the input and away from it; the input is a single stop (in Chrome).","ja":"入力に入り、そこから出ます。入力で止まるのは1回だけです（Chrome の場合）。"}},{"key":"Esc","action":{"en":"Closes the picker and puts focus back on the input (in Chrome). Other keys inside the picker depend on the browser and the operating system.","ja":"ピッカーを閉じて、フォーカスを入力に戻します（Chrome の場合）。ピッカーの中のほかのキーの動作は、ブラウザと OS によって変わります。"}}],"variations":[{"name":{"en":"Swatch with a popup","ja":"色見本から開くポップアップ"},"description":{"en":"The current color as a swatch that opens a picker when activated. Apple’s “color well” names only this swatch, which shows a color picker, the system’s or a custom one, when tapped or clicked. Ant Design’s ColorPicker is a trigger that opens a popup panel, and can show the color as text beside the swatch with `showText`. The native `<input type=\"color\">` is this form.","ja":"今の色を色見本として見せ、押すとピッカーが開く形です。Apple の「カラーウェル」は、タップやクリックでシステムのものか独自のカラーピッカーを出すこの色見本だけを指します。Ant Design の ColorPicker は、押すとポップアップのパネルが開くトリガーで、`showText` で色見本の横に色を文字でも表示できます。ネイティブの `<input type=\"color\">` はこの形です。"}},{"name":{"en":"Picker built from parts","ja":"部品を組み合わせたピッカー"},"description":{"en":"A picker laid out on the page from separate controls. React Aria’s ColorPicker keeps one color in sync across its ColorArea, ColorSlider, ColorWheel and ColorField, which you compose. Fluent’s ColorPicker has a spectrum to navigate by default, and text boxes for RGB, alpha or hex values.","ja":"別々の部品を並べて作るピッカーです。React Aria の ColorPicker は、組み合わせて使う ColorArea、ColorSlider、ColorWheel、ColorField の間で、1つの色を同期します。Fluent の ColorPicker は、既定でスペクトルから色を選べ、RGB、アルファ、16進数の値を入れる欄も備えます。"}},{"name":{"en":"Preset swatches","ja":"色見本の一覧"},"description":{"en":"A set of ready-made colors to choose from. React Aria’s ColorSwatchPicker provides presets for a ColorPicker, Ant Design has a `presets` option, and a native color input can take a `<datalist>`.","ja":"あらかじめ用意した色から選ぶ形です。React Aria の ColorSwatchPicker は ColorPicker に色見本の一覧を足し、Ant Design には `presets` があり、ネイティブの色の入力は `<datalist>` を結べます。"}},{"name":{"en":"Color value field","ja":"色の値の入力欄"},"description":{"en":"A text field for typing the color. React Aria’s ColorField edits a hex color or a single channel value, and shows hex by default.","ja":"色を文字で入力する欄です。React Aria の ColorField は16進数の色か1つのチャンネルの値を編集でき、既定では16進数で表示します。"}}],"usage":[{"en":"Ant Design says to use its ColorPicker when people need to make a customized color selection. It offers color formats (`hex`, `rgb`, `hsb`), `presets`, `allowClear` to let people clear the color, and `disabledAlpha` to turn the alpha channel off.","ja":"Ant Design は、自分で色を選ぶ必要があるときに ColorPicker を使うとしています。色の形式（`hex`、`rgb`、`hsb`）、`presets`、色を消せる `allowClear`、アルファのチャンネルを使わない `disabledAlpha` を用意しています。"},{"en":"If “no color” is a valid answer, add a way to clear it. A native color input always holds a color and cannot be emptied, while Ant Design’s `allowClear` lets people clear the color.","ja":"「色なし」が有効な答えなら、色を消す手段を足します。ネイティブの色の入力は必ず色を持ち、空にできませんが、Ant Design の `allowClear` は色を消せます。"},{"en":"Consider the system’s color picker in native apps. Apple says it gives a consistent, familiar experience, lets people save a set of colors they can reach from any app, and helps across iOS, iPadOS and macOS. A custom one is allowed.","ja":"ネイティブアプリではシステムのカラーピッカーを検討します。Apple は、一貫した使い慣れた操作になり、どのアプリからも使える色の組を保存でき、iOS、iPadOS、macOS をまたぐアプリでも使い慣れた操作になるとしています。独自のピッカーを使うこともできます。"},{"en":"Name the color, not only show it. React Aria’s ColorSwatch gives screen reader users a localized color description by default, such as “dark vibrant blue”, and lets you replace it with a more specific name through `colorName`, together with an `aria-label` for context.","ja":"色は見せるだけでなく、名前や値でも伝えます。React Aria の ColorSwatch は、既定で「dark vibrant blue」のような、ロケールに合った色の説明をスクリーンリーダー向けに付け、`colorName` でより具体的な名前に置き換えられ、`aria-label` で文脈も添えられます。"},{"en":"Fluent’s ColorPicker guidance says to label each part clearly, update the selected color in real time while people use the sliders or boxes, validate hex and RGB text with clear error messages, allow keyboard input, and keep one color format rather than mixing several.","ja":"Fluent の ColorPicker の案内では、各部分に分かりやすいラベルを付ける、スライダーや入力欄を操作している間も選んだ色をその場で更新する、16進数と RGB の文字は検証して分かりやすいエラーを出す、キーボードで入力できるようにする、複数の形式を混ぜず1つにそろえる、としています。"}],"misuse":[{"pattern":{"en":"Showing a chosen color only as a swatch, with no name or value","ja":"選んだ色を、名前や値なしに色見本だけで見せる"},"harm":{"en":"WCAG says some people have difficulty perceiving color, that people with partial sight often have limited color vision, and that many older people do not see color well. It adds that people on limited-color or monochrome displays cannot get information given only in color.","ja":"WCAG は、色を見分けにくい人がいること、弱視の人は色の見え方が限られることが多いこと、高齢の人の多くは色がよく見えないことを挙げています。また、色数の限られた表示や白黒の表示では、色だけで示された情報は得られないとしています。"},"instead":{"en":"Show the value or name as text next to the swatch, such as the hex value, as Fluent says to make and show color selections without relying on color alone, using labels, indicators and tooltips.","ja":"色見本の隣に、16進数の値のような値や名前を文字で出します。Fluent も、ラベル、印、ツールチップを使い、色だけに頼らずに色を選べて確かめられるようにするよう求めています。"}},{"pattern":{"en":"Mixing color formats in one picker without saying which is which","ja":"1つのピッカーの中で、色の形式を説明なしに混ぜる"},"harm":{"en":"Fluent says mixing different formats without a clear explanation confuses people.","ja":"Fluent は、形式を混ぜて説明がないと、利用者が混乱するとしています。"},"instead":{"en":"Keep one format throughout, or label each box and the format switch clearly, as in React Aria’s example that lets people switch the color space with a select.","ja":"ピッカー全体で形式を1つにそろえるか、欄と形式の切り替えにはっきりラベルを付けます。React Aria の例は、セレクトボックスで色空間を切り替えられるようにしています。"}}],"related":[{"id":"date-picker","diff":{"en":"A color picker chooses a color, usually from a swatch, a spectrum or presets; a date picker chooses a day, usually from a calendar.","ja":"カラーピッカーは色を色見本やスペクトル、一覧から選び、日付ピッカーは日付をカレンダーなどで選びます。"}},{"id":"time-picker","diff":{"en":"A color picker chooses a color, usually from a swatch, a spectrum or presets; a time picker chooses a time of day, in hours and minutes with no date.","ja":"カラーピッカーは色を色見本やスペクトル、一覧から選び、タイムピッカーは日付を含まない時刻を時と分で選びます。"}},{"id":"text-field","diff":{"en":"A color picker chooses a color from a swatch, a spectrum or presets, and the native input always holds a valid color; a text field takes any text, and React Aria’s ColorField is a text field for typing a hex or channel value.","ja":"カラーピッカーは色を色見本やスペクトル、一覧から選び、ネイティブの入力は必ず有効な色を持ちますが、テキストフィールドは自由な文字列を入れられ、React Aria の ColorField は16進数やチャンネルの値を入力するための入力欄です。"}}],"sources":[{"label":"MDN: <input type=\"color\">","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color","checkedAt":"2026-11-03"},{"label":"HTML Standard: Color state (type=color)","url":"https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)","checkedAt":"2026-11-03"},{"label":"MDN: <datalist>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist","checkedAt":"2026-11-03"},{"label":"MDN browser-compat-data: input type=\"color\"","url":"https://github.com/mdn/browser-compat-data/blob/main/html/elements/input/color.json","checkedAt":"2026-11-03"},{"label":"MDN browser-compat-data: input alpha and colorspace","url":"https://github.com/mdn/browser-compat-data/blob/main/html/elements/input.json","checkedAt":"2026-11-03"},{"label":"Ant Design: ColorPicker","url":"https://ant.design/components/color-picker/","checkedAt":"2026-11-03"},{"label":"React Aria: ColorPicker","url":"https://react-aria.adobe.com/ColorPicker","checkedAt":"2026-11-03"},{"label":"React Aria: ColorSwatch","url":"https://react-aria.adobe.com/ColorSwatch","checkedAt":"2026-11-03"},{"label":"React Aria: ColorField","url":"https://react-aria.adobe.com/ColorField","checkedAt":"2026-11-03"},{"label":"Fluent UI React v9: ColorPicker","url":"https://react.fluentui.dev/?path=/docs/components-colorpicker--docs","checkedAt":"2026-11-03"},{"label":"Apple Human Interface Guidelines: Color wells","url":"https://developer.apple.com/design/human-interface-guidelines/color-wells","checkedAt":"2026-11-03"},{"label":"Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/color-picker/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/color-picker/"}},{"id":"combobox","category":"input","names":{"en":"Combobox","ja":"コンボボックス"},"aliases":[{"name":"Autocomplete","source":"MUI","url":"https://mui.com/material-ui/react-autocomplete/"},{"name":"Combo box","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/combo-box/"}],"summary":{"en":"A text field with a list of suggestions; the user can pick one or type their own value.","ja":"候補リスト付きのテキスト入力欄です。候補から選ぶことも、自由に入力することもできます。"},"appearance":{"en":"Looks like a text field, sometimes with a downward arrow on the right. Typing or pressing the arrow shows a list of suggestions below it.","ja":"テキスト入力欄の見た目で、右端に下向きの矢印があることもあります。文字を入力するか矢印を押すと、下に候補のリストが出ます。"},"behavior":[{"en":"Typing shows suggestions that start with the typed text.","ja":"文字を入力すると、その文字で始まる候補が出ます。"},{"en":"Choosing a suggestion puts it into the field; the user can also keep a value that is not in the list.","ja":"候補を選ぶと入力欄に入ります。リストにない値をそのまま使うこともできます。"},{"en":"Keyboard focus stays in the text field while the arrow keys highlight suggestions.","ja":"矢印キーで候補を選んでいる間も、キーボードのフォーカスは入力欄に残ります。"},{"en":"While text is still being composed with an input method (such as for Japanese), the arrow keys, Enter and Esc go to the input method and do not move through or choose suggestions.","ja":"日本語入力などで変換している間は、矢印キー・Enter・Esc は変換の操作に使われ、候補の移動や決定には使われません。"},{"en":"In this demo, the arrow button at the right end opens or closes the list of suggestions. As in the APG example, Tab skips it (`tabindex=\"-1\"`): keyboard users open the list with ↓, and the button is there for pointer and touch users. Focus stays in the text field after pressing it.","ja":"このデモでは、右端の矢印のボタンで候補のリストを開閉します。APG の例と同じく、このボタンは Tab で止まりません（`tabindex=\"-1\"`）。キーボードでは ↓ で開き、ボタンはマウスやタッチの利用者のために置いています。押したあともフォーカスは入力欄に残ります。"},{"en":"In this demo, the typed part of each suggestion is marked with `<mark>` and shown in bold.","ja":"このデモでは、候補のうち入力した文字に一致した部分を `<mark>` で示し、太字で表示します。"},{"en":"In this demo, when nothing matches, the list stays closed and “No matching fruit” appears below the field instead. It is a `role=\"status\"` live region, so screen readers announce it.","ja":"このデモでは、一致する候補がないとき、リストは開かず、代わりに欄の下に「該当する果物はありません」と出します。`role=\"status\"` のライブリージョンなので、スクリーンリーダーが読み上げます。"},{"en":"HTML can also make a simple combobox with `<input list>` and `<datalist>`, but how the list looks and works differs by browser.","ja":"HTML の `<input list>` と `<datalist>` でも簡易的なコンボボックスを作れますが、リストの見た目や動きはブラウザで異なります。"}],"keyboard":[{"key":"↓","action":{"en":"Opens the suggestions and highlights the first one, or highlights the next one.","ja":"候補を開いて最初の候補を選びます。開いているときは次の候補を選びます。"}},{"key":"↑","action":{"en":"Opens the suggestions and highlights the last one, or highlights the previous one.","ja":"候補を開いて最後の候補を選びます。開いているときは前の候補を選びます。"}},{"key":"Alt + ↓","action":{"en":"Opens the suggestions without highlighting one.","ja":"候補を選ばずにリストだけを開きます。"}},{"key":"Enter","action":{"en":"Puts the highlighted suggestion into the field and closes the list.","ja":"選んでいる候補を入力欄に入れ、リストを閉じます。"}},{"key":"Esc","action":{"en":"Closes the list. If it is already closed, clears the field.","ja":"リストを閉じます。閉じているときは入力欄を空にします。"}},{"key":"← / → / Home / End","action":{"en":"Moves the text cursor and removes the highlight from the suggestions.","ja":"入力欄の中でカーソルを動かし、候補の選択を外します。"}}],"usage":[{"en":"Use it when there are many options. For a short list, a select is enough.","ja":"選択肢が多いときに使います。少なければセレクトで足ります。"},{"en":"There are two kinds: one that only filters a fixed list, and one that also accepts free text.","ja":"決まった選択肢を絞り込むだけのものと、自由な入力も受け付けるものの2種類があります。"},{"en":"The U.S. Web Design System suggests a combo box when there are more than 15 options, and a select or radio buttons when there are few. Because the list is filtered by matching text, it advises writing options in strings people know, such as a postal abbreviation beside a state name. It also notes that testing with assistive technology found usability problems and, for now, recommends considering a select instead.","ja":"U.S. Web Design System は、選択肢が15個を超えるときにコンボボックスを使い、少ないときはセレクトかラジオボタンを使うよう勧めています。入力した文字との一致で絞り込むため、州名の横に郵便用の略称を添えるなど、利用者がなじんでいる表記で選択肢を書くよう求めています。また、支援技術を使った検証で使いにくさが見つかったため、現時点ではセレクトの利用を検討するよう勧めています。"}],"related":[{"id":"command-palette","diff":{"en":"A combobox puts the chosen value into the field; a command palette puts a combobox in a dialog and runs or opens the chosen item.","ja":"コンボボックスは選んだ値を入力欄に入れます。コマンドパレットはコンボボックスをダイアログに入れ、選んだものを実行したり開いたりします。"}},{"id":"text-field","diff":{"en":"A combobox adds a list of suggestions to a text field.","ja":"コンボボックスはテキストフィールドに選べる候補のリストが付いたものです。"}},{"id":"select","diff":{"en":"A combobox lets the user type and accept a value outside the list; a select only allows options from the list.","ja":"コンボボックスは文字を入力でき、リストにない値も使えますが、セレクトはリストの選択肢からしか選べません。"}},{"id":"search-field","diff":{"en":"A combobox suggests values to pick from while typing; a search field sends the typed words as they are.","ja":"コンボボックスは入力中に選べる候補を出し、検索ボックスは入力した語をそのまま送ります。"}},{"id":"token-field","diff":{"en":"A combobox puts a single value into the field; a token field keeps several chosen values as removable tokens and empties the input after each choice.","ja":"コンボボックスは1つの値を入力欄に入れます。トークン入力は選んだ複数の値を外せるトークンとして残し、選ぶたびに入力欄を空にします。"}},{"id":"time-picker","diff":{"en":"A combobox suggests whatever list its author provides; a time picker is made for times of day, and the U.S. Web Design System builds one as a combo box of times at set steps.","ja":"コンボボックスは作り手が用意したどんな候補の一覧も出せますが、タイムピッカーは時刻のための部品で、U.S. Web Design System は一定の刻みの時刻を並べたコンボボックスとして作っています。"}}],"sources":[{"label":"WAI-ARIA APG: Combobox Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Editable Combobox With List Autocomplete Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/","checkedAt":"2026-10-21"},{"label":"Open UI: Combobox (Explainer)","url":"https://open-ui.org/components/combobox.explainer","checkedAt":"2026-10-20"},{"label":"MUI: Autocomplete","url":"https://mui.com/material-ui/react-autocomplete/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「コンボボックス」をもとに作成","url":"https://design.digital.go.jp/dads/components/combobox/","checkedAt":"2026-10-21"},{"label":"U.S. Web Design System: Combo box","url":"https://designsystem.digital.gov/components/combo-box/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/combobox/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/combobox/"}},{"id":"command-palette","category":"overlay","names":{"en":"Command palette","ja":"コマンドパレット"},"aliases":[],"summary":{"en":"A dialog with a search field that narrows a list of commands or pages as you type, then runs or opens the chosen one.","ja":"検索欄に入力すると操作やページの一覧が絞り込まれ、選んだものを実行したり開いたりするダイアログです。"},"appearance":{"en":"A box in the middle of the screen, over a dimmed page, with a large search field at the top and a list of commands below it. The highlighted command is shaded.","ja":"暗くしたページの上、画面の中ほどに箱が出ます。上に大きな検索欄、その下に操作の一覧があり、選んでいる操作に色が付きます。"},"behavior":[{"en":"This site’s header search (“Search by name”, opened with ⌘K or Ctrl + K) is a command palette whose commands open the component pages.","ja":"このサイトのヘッダーの検索窓（「名前で検索」、⌘K か Ctrl + K で開きます）がこの部品で、操作を選ぶと部品のページを開きます。"},{"en":"It is a modal dialog that holds a combobox. Typing narrows the list, and the arrow keys highlight a command while focus stays in the field; `aria-activedescendant` tells screen readers which command is highlighted.","ja":"コンボボックスを入れたモーダルダイアログです。入力すると一覧が絞り込まれ、矢印キーで操作を選ぶ間もフォーカスは入力欄に残ります。選んでいる操作は `aria-activedescendant` でスクリーンリーダーに伝えます。"},{"en":"The list is shown the whole time the palette is open, so the field keeps `aria-expanded=\"true\"`.","ja":"開いている間は一覧を常に表示するので、入力欄の `aria-expanded` は `true` のままにします。"},{"en":"A native `<dialog>` opened with `showModal()` makes the rest of the page inert, moves focus to the field, and closes with Esc. In this demo, focus then goes back to the button that opened it.","ja":"ネイティブの `<dialog>` を `showModal()` で開くと、ページのほかの部分が操作できなくなり、フォーカスが入力欄へ移り、Esc で閉じます。このデモでは、閉じると開いたボタンへフォーカスが戻ります。"},{"en":"This site’s own search palette opens with ⌘K or Ctrl + K. This demo opens only with its button, so that it does not clash with that shortcut. Its commands only show which one was run.","ja":"このサイト自身の検索パレットは ⌘K や Ctrl + K で開きます。このデモはそのショートカットとぶつからないよう、ボタンでだけ開きます。操作を選んでも、選んだ操作を表示するだけです。"},{"en":"While text is still being composed with an input method (such as for Japanese), the arrow keys and Enter go to the input method and do not move through or run commands.","ja":"日本語入力などで変換している間は、矢印キーと Enter は変換の操作に使われ、操作の移動や実行には使われません。"},{"en":"In this demo, the palette opens inside the demo frame and dims only the frame, so it is easy to see which demo it belongs to. On a real page, it dims the whole page.","ja":"このデモでは、どのデモの動きかが分かりやすいよう、パレットをデモの枠の中に出し、枠の中だけを暗くします。実際のページでは、ページ全体を暗くします。"}],"keyboard":[{"key":"Enter","action":{"en":"On the button, opens the palette. In the palette, runs the highlighted command and closes it.","ja":"ボタンでは、パレットを開きます。パレットでは、選んでいる操作を実行して閉じます。"}},{"key":"↑ / ↓","action":{"en":"Highlights the previous / next command. From the first it goes to the last, and from the last to the first.","ja":"前・次の操作を選びます。最初からは最後へ、最後からは最初へ回ります。"}},{"key":"Esc","action":{"en":"Closes the palette without running anything and returns focus to the button.","ja":"何も実行せずにパレットを閉じ、ボタンへフォーカスを戻します。"}}],"misuse":[{"pattern":{"en":"Opening the palette with a single character key, such as / or K on its own","ja":"/ や K だけのように、1文字のキーでパレットを開く"},"harm":{"en":"People who use speech input can open it by accident, because what they say is typed as letters. Keyboard users who press a key by mistake, including people with limited dexterity, lose their place when focus jumps to the palette.","ja":"音声入力を使う人は、話した言葉が文字として入力されるため、意図せず開いてしまいます。手の動きに制約のある人など、キーを押し間違えたキーボード利用者は、フォーカスがパレットへ移って作業の場所を見失います。"},"instead":{"en":"Use a shortcut with a modifier key, such as ⌘K or Ctrl + K. If a single character key is used, let people turn it off or change it to include a modifier key.","ja":"⌘K や Ctrl + K のように、修飾キーを含むショートカットにします。1文字のキーを使うなら、無効にしたり修飾キーを含むキーに変えたりできるようにします。"}}],"related":[{"id":"combobox","diff":{"en":"A command palette puts a combobox in a dialog and runs or opens the chosen item; a combobox puts the chosen value into the field.","ja":"コマンドパレットはコンボボックスをダイアログに入れ、選んだものを実行したり開いたりします。コンボボックスは選んだ値を入力欄に入れます。"}},{"id":"search-field","diff":{"en":"A command palette narrows a list as you type and goes straight to the chosen item; a search field sends the typed words and shows the results on a page.","ja":"コマンドパレットは入力に合わせて一覧を絞り込み、選んだものへ直接移ります。検索ボックスは入力した語を送り、結果をページに出します。"}},{"id":"modal","diff":{"en":"A command palette is a modal dialog that holds only a search field and a list of commands; a modal can hold any content.","ja":"コマンドパレットは検索欄と操作の一覧だけを持つモーダルダイアログで、モーダルはどんな内容でも持てます。"}}],"sources":[{"label":"WAI-ARIA APG: Combobox Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/","checkedAt":"2026-10-22"},{"label":"MDN: <dialog>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog","checkedAt":"2026-10-22"},{"label":"React Aria: Autocomplete","url":"https://react-aria.adobe.com/Autocomplete","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 2.1.4: Character Key Shortcuts (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts.html","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/command-palette/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/command-palette/"}},{"id":"context-menu","category":"action","names":{"en":"Context menu","ja":"コンテキストメニュー"},"aliases":[{"name":"Context menu","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/context-menus"},{"name":"Contextual menu","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/context-menus"}],"summary":{"en":"A menu of actions for an item that opens where you right-click it.","ja":"項目を右クリックした場所に開く、その項目に対する操作のメニューです。"},"appearance":{"en":"Nothing shows until it is opened. Then a small panel of action names, stacked vertically, appears at the pointer, over the page.","ja":"開くまでは何も見えません。開くと、操作名を縦に並べた小さなパネルが、ページに重なってマウスポインターの位置に出ます。"},"behavior":[{"en":"Right-clicking, Control-clicking on a Mac, or pressing the Menu key on the keyboard fires a `contextmenu` event. Calling `preventDefault()` on it stops the browser’s own menu so the page can open its own.","ja":"右クリック、Mac での Control + クリック、キーボードのメニューキーで `contextmenu` イベントが起きます。そこで `preventDefault()` を呼ぶと、ブラウザ既定のメニューが出なくなり、ページ独自のメニューを開けます。"},{"en":"From the keyboard, Shift + F10 opens it on the focused item, as in Windows. It then opens at the bottom left of the item, where the browser’s own menu would appear.","ja":"キーボードでは、Windows と同じく Shift + F10で、フォーカスしている項目のメニューを開きます。そのときは、ブラウザ既定のメニューと同じく項目の左下に出ます。"},{"en":"Inside, it works like any APG menu: focus moves to the first item, the arrow keys move between items, and Esc closes it and returns focus to the item it was opened on.","ja":"開いたあとは APG のメニューと同じく、最初の項目にフォーカスが移り、矢印キーで項目の間を移動し、Esc で閉じて開いた元の項目へフォーカスを戻します。"},{"en":"In this demo, each file also has a visible “⋯” button that opens the same menu, so people who cannot right-click, or do not know they can, still reach every action.","ja":"このデモでは、各ファイルに同じメニューを開く「⋯」ボタンも見える形で置き、右クリックできない人や、できると知らない人も、すべての操作にたどり着けるようにしています。"},{"en":"In this demo, choosing an item only shows what was chosen, and the menu keeps within the screen when opened near its right edge.","ja":"このデモでは、項目を選んでも選んだ操作を表示するだけです。画面の右端の近くで開いたときは、画面からはみ出さないよう左へ寄せます。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"On an item in the menu, runs it and closes the menu. On a file, opens it.","ja":"メニューの項目では、その操作を実行してメニューを閉じます。ファイルでは、そのファイルを開きます。"}},{"key":"↑ / ↓","action":{"en":"Moves to the previous or next item; from the first item it goes to the last, and from the last to the first.","ja":"前または次の項目へ移ります。最初の項目からは最後へ、最後の項目からは最初へ回ります。"}},{"key":"Home / End","action":{"en":"Moves to the first or last item.","ja":"最初または最後の項目へ移ります。"}},{"key":"Shift + F10","action":{"en":"On a file, opens its context menu with focus on the first item.","ja":"ファイルで、そのコンテキストメニューを開き、最初の項目にフォーカスを移します。"}},{"key":"Menu key","action":{"en":"Opens the same menu, on keyboards that have it.","ja":"メニューキーのあるキーボードでは、同じメニューを開きます。"}},{"key":"Esc","action":{"en":"Closes the menu and returns focus to the file, or to the ⋯ button if it was opened from there.","ja":"メニューを閉じ、ファイル（「⋯」ボタンから開いたときはそのボタン）にフォーカスを戻します。"}},{"key":"Tab / Shift + Tab","action":{"en":"Closes the menu and moves on to the next or previous element.","ja":"メニューを閉じ、次または前の要素へ移ります。"}}],"usage":[{"en":"Include only the actions people are most likely to need for that item, and keep the list short. Group items with dividers. On iOS, iPadOS and visionOS, Apple lists destructive items such as Delete at the end.","ja":"その項目でよく使う操作だけを入れ、短くします。区切り線でまとめます。iOS、iPadOS、visionOS では、Apple は削除のようにデータを失う操作を最後に置くとしています。"},{"en":"Offer context menus consistently. If some items have one and others do not, people do not know where to look and may think something is broken.","ja":"コンテキストメニューはどこでも同じように用意します。ある項目にはあって別の項目にはないと、どこで使えるのか分からず、不具合だと思われることもあります。"},{"en":"Leave out actions that do not apply to the item instead of showing them dimmed.","ja":"その項目に使えない操作は、薄く表示せずに外します。"},{"en":"A touch screen has no right-click. Apple says iPadOS reveals a context menu on a long press. Keep a visible control for the same actions, so people on touch screens can reach them too.","ja":"タッチ画面に右クリックはありません。Apple によると、iPadOS では長押しでコンテキストメニューを出します。タッチ画面を使う人も同じ操作にたどり着けるよう、見える操作部品を別に置きます。"}],"misuse":[{"pattern":{"en":"Putting actions only in the context menu","ja":"操作をコンテキストメニューの中にしか置かない"},"harm":{"en":"Nothing on screen shows that a right-click does anything, so some people never find the actions.","ja":"右クリックで何かできることが画面のどこにも示されないので、操作を見つけられない人がいます。"},"instead":{"en":"Make every action in the context menu available in the main interface too, such as a visible “⋯” button, a toolbar or the menu bar.","ja":"コンテキストメニューの操作は、見える「⋯」ボタンやツールバー、メニューバーなど、画面のほかの場所でも使えるようにします。"}},{"pattern":{"en":"Filling the context menu with many items","ja":"コンテキストメニューに項目をたくさん入れる"},"harm":{"en":"People have to read down a long list to find an action, and may have to scroll through it.","ja":"操作を探すのに長い一覧を上から読むことになり、スクロールが要ることもあります。"},"instead":{"en":"Keep it to a few items that fit the item, and move rarely used actions elsewhere. Carbon suggests no more than 12.","ja":"その項目に合ういくつかの操作に絞り、あまり使わない操作は別の場所に移します。Carbon は12項目までを目安にしています。"}}],"related":[{"id":"menu","diff":{"en":"A context menu opens where an item is right-clicked and has no visible trigger; a menu opens from a visible button.","ja":"コンテキストメニューは項目を右クリックした場所に開き、開くための見えるボタンがありません。メニューは見えるボタンから開きます。"}},{"id":"popover","diff":{"en":"A context menu lists actions to run on an item; a popover is a panel of any content next to its button.","ja":"コンテキストメニューは項目に対する操作を並べます。ポップオーバーは、ボタンの隣に好きな内容を出すパネルです。"}}],"sources":[{"label":"WAI-ARIA APG: Menu and Menubar Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menubar/","checkedAt":"2026-10-22"},{"label":"MDN: Element: contextmenu event","url":"https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event","checkedAt":"2026-10-22"},{"label":"Apple Human Interface Guidelines: Context menus","url":"https://developer.apple.com/design/human-interface-guidelines/context-menus","checkedAt":"2026-10-22"},{"label":"Carbon Design System: Menu","url":"https://carbondesignsystem.com/components/menu/usage/","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/context-menu/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/context-menu/"}},{"id":"cookie-banner","category":"feedback","names":{"en":"Cookie banner","ja":"Cookie バナー"},"aliases":[{"name":"Cookie banner","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/cookie-banner/"}],"summary":{"en":"A banner that asks visitors whether a site may set optional cookies, and lets them accept or reject them.","ja":"任意の Cookie をサイトが使ってよいかを訪問者に尋ね、受け入れるか拒否するかを選んでもらうバナーです。"},"appearance":{"en":"A box in the normal flow of the page, near the top. It has a heading that includes the service name, a couple of short paragraphs, and a row with two buttons of the same style, accept and reject, plus a link to details. After a choice it becomes a one-line confirmation with a hide button.","ja":"ページの上のほうに、ふつうの流れの中で置く箱です。サービス名を含む見出し、短い段落が2つ、同じ見た目の「受け入れる」「拒否する」の2つのボタン、詳細へのリンクが入ります。選ぶと、1行の確認の文と「隠す」ボタンに替わります。"},"behavior":[{"en":"It stays in the page flow instead of floating over the page, because a fixed banner can cover the element that has focus. GOV.UK says not to make it sticky.","ja":"ページの上に浮かべず、ページの流れの中に置きます。固定したバナーは、フォーカスのある要素を覆い隠すことがあるためです。GOV.UK は固定しないよう求めています。"},{"en":"It is a `<section>` with an `aria-label`, which screen readers expose as a region landmark. GOV.UK uses a region named after the service (“Cookies on …”). MDN says a region is for a section important enough that users will want to jump to it. It is labeled with `aria-label` instead of the heading, because the confirmation has no heading, so the name stays the same before and after the choice.","ja":"`<section>` に `aria-label` を付けたもので、スクリーンリーダーにはリージョンのランドマークとして伝わります。GOV.UK はサービス名を使った名前（「Cookies on …」）を付けたリージョンにしています。MDN は、リージョンを、利用者が一足飛びに移動したくなるほど重要な部分に使うものとしています。名前を見出しではなく `aria-label` で付けるのは、確認の文には見出しがなく、選ぶ前も後も同じ名前にするためです。"},{"en":"It is shown on every visit until the visitor accepts or rejects, or saves the choice on the cookies page. GOV.UK then saves the choice in a cookie for 1 year, does not show the banner again, and sets no optional cookies unless the visitor accepted them.","ja":"訪問者が受け入れるか拒否するか、Cookie のページで設定を保存するまで、訪れるたびに表示します。GOV.UK は、選んだあとは選択を Cookie に1年間保存し、バナーを再び出さず、受け入れられていない任意の Cookie は設定しません。"},{"en":"When the visitor chooses, the question is replaced by a confirmation with a hide button. In GOV.UK’s script-based version the confirmation has `tabindex=\"-1\"` and `role=\"alert\"` and receives focus, so assistive technology reads it.","ja":"選ぶと、質問が確認の文と「隠す」ボタンに替わります。GOV.UK のスクリプトによる実装では、確認の文に `tabindex=\"-1\"` と `role=\"alert\"` を付けてフォーカスを移し、支援技術が読み上げられるようにします。"},{"en":"GOV.UK’s version works without scripts too, when the banner is inside a form and a submitted choice reloads the page with the confirmation.","ja":"GOV.UK の実装には、バナーをフォームの中に入れ、選択を送信するとページを読み込み直して確認の文を出す、スクリプトなしでも動く形もあります。"},{"en":"In this demo, the confirmation takes focus, as in GOV.UK, and shows the site’s own focus indicator. GOV.UK removes the focus ring from it, for three reasons: the message cannot be used, it is the first element at the very top of the page, and it appears in place of the cookie message, which was the last thing the visitor used. GOV.UK says this is an assumption and that it still needs more research.","ja":"このデモでは、GOV.UK と同じく確認の文にフォーカスを移し、サイトのフォーカスの表示を出します。GOV.UK は、確認の文にはフォーカスの枠を出しません。理由は3つで、操作できないメッセージであること、ページの一番上の最初の要素であること、直前に使った Cookie のメッセージの代わりに出ることです。GOV.UK はこれを推測だとし、さらに調べる必要があるとしています。"},{"en":"In this demo, the hide button moves focus to the “Cookie settings” button, which always stays on the page and stands in for the cookies page. Pressing it says where a real site would go and asks the question in the banner again, and the message is read out each time. The “View cookies” link also shows where it would go instead of leaving the page.","ja":"このデモでは、「隠す」ボタンを押すとフォーカスを「Cookie の設定」ボタンに移します。このボタンは常にページに残り、Cookie のページの代わりをします。押すと、実際のサイトの行き先を表示してバナーでもう一度尋ね、そのたびにメッセージを読み上げます。「Cookie の一覧を見る」リンクもページを移らず、行き先を表示します。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus between the accept button, the reject button, and the details link. After a choice, focus is on the confirmation, and the next stop is the hide button.","ja":"受け入れるボタン、拒否するボタン、詳細へのリンクの間でフォーカスを移します。選んだあとはフォーカスが確認の文にあり、次は「隠す」ボタンです。"}},{"key":"Enter","action":{"en":"Presses the focused button, or follows the focused link.","ja":"フォーカスのあるボタンを押すか、リンク先へ移動します。"}},{"key":"Space","action":{"en":"Presses the focused button.","ja":"フォーカスのあるボタンを押します。"}}],"usage":[{"en":"GOV.UK says to use it when a service sets any cookies on a visitor’s device, and that a service must tell visitors about its cookies and let them accept or reject the optional ones (its “non-essential cookies” include HTML5 local storage and service workers). It also says its page is not legal advice, so check with the organization’s privacy expert.","ja":"GOV.UK は、サービスが訪問者の端末に何らかの Cookie を設定するときに使うとしています。サービスは Cookie について訪問者に知らせ、任意のものは受け入れるか拒否するかを選べるようにしなければならない、としています（GOV.UK の「任意の Cookie」には、HTML5 のローカルストレージやサービスワーカーも含まれます）。また、このページは法的な助言ではないので、組織の個人情報の専門家に確かめるよう求めています。"},{"en":"If the service sets only essential cookies, GOV.UK says no banner is needed, but the visitor still has to be told, for example on a cookies page linked from the footer.","ja":"サービスが必須の Cookie しか設定しないなら、GOV.UK はバナーは要らないとしています。ただし訪問者への案内は必要で、たとえばフッターからリンクした Cookie のページで知らせます。"},{"en":"Put the service name in the heading, so visitors can tell these cookies from other sites’ cookies. Keep the text as short as it can be while still describing the cookies accurately, and mention third parties if they set cookies.","ja":"見出しにサービス名を入れ、ほかのサイトの Cookie とは別のものだと分かるようにします。説明は、Cookie の使い方を正しく伝えられる範囲でできるだけ短くし、第三者も Cookie を設定するならそのことも書きます。"},{"en":"Place it after the opening `<body>` tag and before the skip link, and do not fix it to the screen. WCAG says a sticky cookie banner fails success criterion 2.4.11, Focus Not Obscured (Minimum), if it completely covers the focused element. It lists making the banner modal, or adding scroll padding so it does not overlap other content, as ways to pass.","ja":"`<body>` の開始タグの直後、スキップリンクより前に置き、画面に固定はしません。WCAG は、固定したクッキーバナーがフォーカスのある要素を完全に隠すと、達成基準 2.4.11 Focus Not Obscured (Minimum) を満たさないとしています。満たす方法として、バナーをモーダルにするか、スクロールの余白を付けてほかの内容と重ならないようにする方法を挙げています。"}],"misuse":[{"pattern":{"en":"Making the reject button small or faint, with a large accept button","ja":"受け入れるボタンを大きくし、拒否するボタンを小さく薄くする"},"harm":{"en":"Small, low-contrast text is hard to see, so people can miss that they are allowed to refuse. Deceptive Patterns calls hiding, obscuring or disguising information in this way visual interference.","ja":"小さく、コントラストの低い文字は見えにくく、拒否できることに気づかないことがあります。Deceptive Patterns は、このように情報を隠したり目立たなくしたり偽装したりすることを、視覚的な干渉（visual interference）としています。"},"instead":{"en":"Give accept and reject the same size and button style, side by side, as the GOV.UK banner does, and let only the labels tell them apart.","ja":"GOV.UK のバナーのように、受け入れると拒否を同じ大きさ、同じボタンの種類で並べ、違いはラベルだけで示します。"},"deceptive":true},{"pattern":{"en":"Asking again on every visit after the answer, or offering only “Not now”","ja":"答えたあとも訪れるたびに尋ねる、または「今はしない」しか選べなくする"},"harm":{"en":"Each interruption costs the person time and attention. Deceptive Patterns calls this nagging: after enough of them, people may agree to what is asked even if it is not in their interest.","ja":"尋ねられるたびに、利用者の時間と注意が奪われます。Deceptive Patterns はこれをしつこい要求（nagging）としていて、何度も続くと、自分のためにならなくても求めに応じてしまうことがあるとしています。"},"instead":{"en":"Offer a real reject button, save the answer, and do not show the banner again once it is saved, as GOV.UK says.","ja":"本当の「拒否する」ボタンを用意し、答えを保存して、GOV.UK の求めるとおり、保存したあとはバナーを再び出しません。"},"deceptive":true},{"pattern":{"en":"Showing optional cookie choices already switched on","ja":"任意の Cookie の選択肢をあらかじめオンにしておく"},"harm":{"en":"People tend to keep the option that is already chosen. If they do not notice, read and understand it, they pass by it without knowing what it means for them.","ja":"人はあらかじめ選ばれている選択肢をそのまま使いがちです。気づいて読み、意味を理解しなければ、何が起きるかを知らないまま通り過ぎてしまいます。"},"instead":{"en":"In a banner that adds toggles for optional cookies (GOV.UK’s has none), show them switched off, and set no optional cookies until the visitor has accepted them, as GOV.UK says.","ja":"任意の Cookie の切り替えを加えたバナーでは（GOV.UK のバナーにはありません）、オフの状態で見せます。GOV.UK の求めるとおり、訪問者が受け入れるまで任意の Cookie は設定しません。"},"deceptive":true},{"pattern":{"en":"Fixing the banner to the top or bottom of the screen","ja":"バナーを画面の上端や下端に固定する"},"harm":{"en":"Keyboard users cannot see what has focus when the banner covers it. WCAG says people who cannot use a mouse need to see what has keyboard focus, and that a sticky cookie banner fails if it completely hides the focused element.","ja":"バナーが覆うと、キーボードを使う人はフォーカスのある場所が見えなくなります。WCAG は、マウスを使えない人にはキーボードフォーカスの位置が見える必要があるとし、固定したクッキーバナーがフォーカスのある要素を完全に隠すと基準を満たさないとしています。"},"instead":{"en":"Leave it in the page flow, as GOV.UK does.","ja":"GOV.UK のように、ページの流れの中に置きます。"}}],"related":[{"id":"emergency-banner","diff":{"en":"A cookie banner asks the visitor to choose and can be hidden once answered; an emergency banner warns about urgent danger and cannot be closed.","ja":"Cookie バナーは訪問者に選択を尋ね、答えたあとは隠せます。緊急時バナーは差し迫った危険を知らせ、閉じられません。"}},{"id":"modal","diff":{"en":"A cookie banner stays in the page flow and lets the visitor keep using the page; a modal blocks the page until it is closed.","ja":"Cookie バナーはページの流れの中に置かれ、訪問者はページを使い続けられます。モーダルは閉じるまでページを操作できなくします。"}},{"id":"alert","diff":{"en":"A cookie banner asks for a choice with two buttons and is replaced by a confirmation once answered; an alert reports an important message and asks for nothing.","ja":"Cookie バナーは2つのボタンで選択を尋ね、答えると確認の文に替わります。アラートは重要なお知らせを伝えるだけで、何も求めません。"}}],"sources":[{"label":"GOV.UK Design System: Cookie banner","url":"https://design-system.service.gov.uk/components/cookie-banner/","checkedAt":"2026-11-03"},{"label":"Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html","checkedAt":"2026-11-03"},{"label":"MDN: ARIA: region role","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role","checkedAt":"2026-11-03"},{"label":"Deceptive Patterns: Visual interference","url":"https://www.deceptive.design/types/visual-interference","checkedAt":"2026-11-03"},{"label":"Deceptive Patterns: Nagging","url":"https://www.deceptive.design/types/nagging","checkedAt":"2026-11-03"},{"label":"Deceptive Patterns: Preselection","url":"https://www.deceptive.design/types/preselection","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/cookie-banner/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/cookie-banner/"}},{"id":"data-grid","category":"data","names":{"en":"Data grid","ja":"グリッド"},"aliases":[{"name":"Data Grid","source":"MUI","url":"https://mui.com/x/react-data-grid/"},{"name":"Table","source":"React Aria","url":"https://react-aria.adobe.com/Table"}],"summary":{"en":"A table whose cells can be operated, where the arrow keys move from cell to cell.","ja":"セルを操作できる表です。矢印キーでセルからセルへ移ります。"},"appearance":{"en":"Looks like a table with a header row and lines between the cells. Some cells hold controls such as checkboxes or editable text, and the focused cell is outlined.","ja":"見出しの行があり、セルが線で区切られた表の見た目です。チェックボックスや編集できる文字を持つセルがあり、フォーカスしたセルに枠が付きます。"},"behavior":[{"en":"The whole grid is a single Tab stop, and the arrow keys move between cells (roving `tabindex`). Tab leaves the grid instead of visiting every cell.","ja":"グリッド全体で Tab キーが止まるのは1か所だけで、セルの間は矢印キーで移ります（ロービングタブインデックス）。Tab キーではすべてのセルを回らずに、グリッドの外へ出ます。"},{"en":"Every data cell can take focus. A cell that holds a single control that does not use the arrow keys, such as a checkbox, passes focus to that control; a cell that holds only text takes focus itself.","ja":"データのセルはすべてフォーカスを受け取ります。チェックボックスのように矢印キーを使わない部品を1つだけ持つセルでは、その部品にフォーカスを渡します。文字だけのセルは、セル自体がフォーカスを受け取ります。"},{"en":"The arrow keys stop at the edges. Unlike a layout grid, a data grid does not wrap from the end of one row to the start of the next, which the APG says would be disorienting.","ja":"矢印キーは端で止まります。レイアウトグリッドと違い、データグリッドは行の終わりから次の行の初めへ回りません。APG は、回ると位置が分からなくなるとしています。"},{"en":"A native `<table>` with `role=\"grid\"` keeps the rows, cells and headers of the table, so screen readers still announce the column heading while moving through cells. The APG data grid examples are built the same way.","ja":"ネイティブの `<table>` に `role=\"grid\"` を付けると、表の行・セル・見出しの構造がそのまま伝わり、スクリーンリーダーはセルを移るときに列の見出しを読み上げます。APG のデータグリッドの例も同じ作り方をしています。"},{"en":"In this demo, the checkboxes in the Done column are named after the task in the same row. As in the first APG data grid example, there are only a few rows, so Page Up and Page Down are left out.","ja":"このデモでは、「完了」の列のチェックボックスに、同じ行のタスク名を名前として付けています。APG の最初のデータグリッドの例と同じく、行が少ないので Page Up と Page Down は省いています。"}],"keyboard":[{"key":"Space","action":{"en":"On a checkbox in the Done column, checks or unchecks it.","ja":"「完了」の列のチェックボックスで、チェックを付けたり外したりします。"}},{"key":"↑ / ↓","action":{"en":"Moves to the cell above / below. Stops at the first / last row.","ja":"上・下のセルへ移ります。最初・最後の行では止まります。"}},{"key":"← / →","action":{"en":"Moves to the cell on the left / right. Stops at the first / last cell of the row.","ja":"左・右のセルへ移ります。行の最初・最後のセルでは止まります。"}},{"key":"Home / End","action":{"en":"Moves to the first / last cell of the row.","ja":"その行の最初・最後のセルへ移ります。"}},{"key":"Ctrl + Home / Ctrl + End","action":{"en":"Moves to the first cell of the first row / the last cell of the last row.","ja":"最初の行の最初のセル・最後の行の最後のセルへ移ります。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves into the grid at the cell last used, or out of the grid.","ja":"グリッドに入るときは最後に使ったセルへ移ります。グリッドの中からは外へ出ます。"}}],"variations":[{"name":{"en":"Editable cells","ja":"編集できるセル"},"description":{"en":"Enter or F2 starts editing the focused cell, and Esc returns to moving between cells. While editing, the arrow keys move the text cursor instead of the focus.","ja":"Enter か F2でフォーカスしたセルの編集を始め、Esc でセル間の移動に戻ります。編集している間、矢印キーはセルを移らずに文字のカーソルを動かします。"}},{"name":{"en":"Layout grid","ja":"レイアウトグリッド"},"description":{"en":"Uses the same keys to group controls such as links or buttons that are not tabular data, cutting down the Tab stops. It may have no headers, and the arrow keys may wrap to the next row.","ja":"表のデータではないリンクやボタンなどを同じキー操作でまとめ、Tab キーで止まる場所を減らすものです。見出しがないこともあり、矢印キーで次の行へ回ってもかまいません。"}}],"usage":[{"en":"For data that is only read, with nothing to operate in the cells, use a table. Use a data grid when cells can be edited or operated, or when a table would have too many Tab stops.","ja":"読むだけで、セルの中に操作するものがないデータには、テーブルを使います。セルを編集・操作できるときや、テーブルでは Tab キーで止まる場所が多すぎるときに、グリッドを使います。"},{"en":"Arrow keys inside a cell belong to the grid, so a cell should not hold a control that needs them, such as a text field or a combobox, unless it is entered with Enter or F2 first.","ja":"セルの中の矢印キーはグリッドの移動に使われます。テキスト入力欄やコンボボックスのように矢印キーを使う部品は、Enter や F2で入ってから操作する作りでない限り、セルに置きません。"}],"related":[{"id":"table","diff":{"en":"A data grid lets people move between cells with the arrow keys and operate them; a table is for reading, and only the controls inside it are in the Tab order.","ja":"グリッドは矢印キーでセルを移って操作でき、テーブルは読むための表で、中の操作できる要素だけが Tab キーの順に入ります。"}}],"sources":[{"label":"WAI-ARIA APG: Grid (Interactive Tabular Data and Layout Containers) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/grid/","checkedAt":"2026-10-22"},{"label":"WAI-ARIA APG: Data Grid Examples","url":"https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/","checkedAt":"2026-10-22"},{"label":"MUI X: Data Grid","url":"https://mui.com/x/react-data-grid/","checkedAt":"2026-10-22"},{"label":"MUI X: Data Grid - Accessibility","url":"https://mui.com/x/react-data-grid/accessibility/","checkedAt":"2026-10-22"},{"label":"React Aria: Table","url":"https://react-aria.adobe.com/Table","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/data-grid/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/data-grid/"}},{"id":"date-picker","category":"input","names":{"en":"Date picker","ja":"日付ピッカー"},"aliases":[{"name":"日付ピッカー／カレンダー","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/date-picker/"}],"summary":{"en":"A field for entering a date, by typing or by choosing from a calendar.","ja":"日付を入力する欄です。直接入力するか、カレンダーから選びます。"},"appearance":{"en":"A text field showing a date format such as yyyy/mm/dd, with a calendar icon at the right. Opening it shows a month grid.","ja":"「年/月/日」のような日付の形式が表示された入力欄で、右端にカレンダーのアイコンがあります。開くと1か月分の日付の表が出ます。"},"behavior":[{"en":"The year, month, and day can be typed directly or picked from the calendar.","ja":"年・月・日は直接入力することも、カレンダーから選ぶこともできます。"},{"en":"This demo uses the native `<input type=\"date\">`, so the display format and calendar depend on the browser and language settings; the value is always yyyy-mm-dd.","ja":"このデモはネイティブの `<input type=\"date\">` を使っているため、表示形式やカレンダーはブラウザと言語設定で変わります。値は常に yyyy-mm-dd になります。"},{"en":"Earliest and latest dates can be limited with `min` and `max`.","ja":"選べる日付の範囲は `min` と `max` で制限できます。"},{"en":"In this demo, `min` is today, so earlier days cannot be picked from the calendar. It is set in the browser when the page opens, because a date written into the page when it was built would go out of date. An earlier date can still be typed in, so once a whole date is entered, an error appears below the field.","ja":"このデモでは `min` を今日にしているので、カレンダーでは今日より前の日を選べません。ページを作った時点の日付が残らないよう、`min` はページを開いたときにブラウザで入れます。直接入力では前の日付も入れられるので、日付を入れ終えた時点で欄の下にエラーを出します。"},{"en":"The hint between the label and the field says which dates can be chosen, that the year is in the Western calendar, and gives an example of a whole date. It is linked with `aria-describedby`, and no placeholder text is used.","ja":"ラベルと欄の間の補足の文で、選べる日付と、年は西暦で入れることを伝え、年月日の入力例を示します。補足は `aria-describedby` でつなぎ、プレースホルダーは使いません。"}],"keyboard":[{"key":"↑ / ↓","action":{"en":"Changes the focused part (year, month, or day).","ja":"フォーカス中の部分（年・月・日）の数値を増減します。"}},{"key":"← / →","action":{"en":"Moves between the year, month, and day parts (in Chrome).","ja":"年・月・日の間を移動します（Chrome の場合）。"}},{"key":"0–9","action":{"en":"Types the number for the focused part.","ja":"フォーカス中の部分に数字を入力します。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the year, month, and day parts, then out of the field (in Chrome).","ja":"年・月・日の間を移動し、端からは入力欄の外へ出ます（Chrome の場合）。"}}],"variations":[{"name":{"en":"Separate fields","ja":"年・月・日に分けた欄"},"description":{"en":"Year, month and day are separate text fields, each with its own label and `inputmode=\"numeric\"`. GOV.UK’s date input works this way. The Digital Agency Design System calls this the Separated type, and the single field the Consolidated type, and lets a field be left out when it is not needed, such as for a year and month only.","ja":"年・月・日をそれぞれラベル付きの別の入力欄にし、`inputmode=\"numeric\"` を付けたものです。GOV.UK の日付入力もこの形です。デジタル庁デザインシステムではこれを Separated タイプ、1つの欄にまとめたものを Consolidated タイプと呼び、年月だけのように要らない欄は省けるとしています。"}},{"name":{"en":"Calendar dialog","ja":"カレンダーのダイアログ"},"description":{"en":"A text field plus a button that opens a calendar grid in a dialog. In the grid, arrow keys move by day and week, and Page Up / Page Down move by month.","ja":"入力欄の横のボタンで、カレンダーの表をダイアログで開くものです。表の中は矢印キーで日・週単位、Page Up / Page Down で月単位に移動します。"}}],"usage":[{"en":"Give an example of a whole date in the hint. Show the format in the hint rather than as placeholder text, which disappears once people start typing. The Digital Agency Design System also has the hint say that the year is in the Western calendar.","ja":"補足の文で年月日の入力例を示します。プレースホルダーは入力を始めると消えてしまうので、形式はプレースホルダーではなく補足の文で示します。デジタル庁デザインシステムでは、年は西暦で入れることも補足の文で伝えます。"},{"en":"The WAI-ARIA APG example and the Digital Agency Design System open the calendar only from its button, and the Digital Agency Design System says not to open it on focus or hover. Carbon also opens it when the field gets focus.","ja":"WAI-ARIA APG の例とデジタル庁デザインシステムはカレンダーをボタンからだけ開き、デジタル庁デザインシステムはフォーカスやホバーで開かないよう求めています。Carbon は欄にフォーカスしたときにも開きます。"},{"en":"The U.S. Web Design System uses a date picker when people schedule an event or the day of the week helps them choose. For a date they know well, such as a birthday, it uses memorable date fields instead. It always lets people type the date, because usability testing suggests some prefer that to the calendar.","ja":"U.S. Web Design System は、予定を決めるときや、曜日が分かると選びやすいときに日付ピッカーを使います。誕生日のようによく知っている日付には、代わりに覚えやすい日付の入力欄を使います。カレンダーより直接入力を好む人がいるとユーザビリティテストで分かったため、日付はいつでも入力できるようにします。"}],"misuse":[{"pattern":{"en":"Making people pick a date they already know, such as a birthday, from a calendar","ja":"誕生日のように本人が知っている日付を、カレンダーから選ばせる"},"harm":{"en":"Calendar pickers work for dates within a year. For a date far in the past they take too much navigation, which slows people down.","ja":"カレンダーは1年以内の日付に向いています。遠い過去の日付では何度もめくる必要があり、入力に時間がかかります。"},"instead":{"en":"Let people type the date directly, and do not add a calendar button for dates they already know, such as a birthday or a card expiry date.","ja":"日付は直接入力してもらい、生年月日やカードの有効期限のように本人が知っている日付にはカレンダーのボタンを置きません。"}}],"related":[{"id":"time-picker","diff":{"en":"A date picker chooses a day, usually from a calendar; a time picker chooses a time of day, in hours and minutes with no date.","ja":"日付ピッカーは日付をカレンダーなどで選び、タイムピッカーは日付を含まない時刻を時と分で選びます。"}},{"id":"color-picker","diff":{"en":"A date picker chooses a day, usually from a calendar; a color picker chooses a color, usually from a swatch, a spectrum or presets.","ja":"日付ピッカーは日付をカレンダーなどで選び、カラーピッカーは色を色見本やスペクトル、一覧から選びます。"}},{"id":"text-field","diff":{"en":"A date picker adds a calendar for dates people schedule or choose by the day of the week; a text field alone suits dates they already know, such as a birthday.","ja":"日付ピッカーは、予定を入れる日や曜日で選ぶ日のためにカレンダーを添えますが、誕生日のように分かっている日付にはテキストフィールドだけが向いています。"}}],"sources":[{"label":"MDN: <input type=\"date\">","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Date Picker Dialog Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「日付ピッカー／カレンダー」をもとに作成","url":"https://design.digital.go.jp/dads/components/date-picker/","checkedAt":"2026-10-20"},{"label":"Nielsen Norman Group: Date-Input Form Fields: UX Design Guidelines","url":"https://www.nngroup.com/articles/date-input/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「日付ピッカー／カレンダー（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/date-picker/usage/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: date-picker","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/date-picker","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Date input","url":"https://design-system.service.gov.uk/components/date-input/","checkedAt":"2026-10-22"},{"label":"Carbon Design System: Date picker","url":"https://carbondesignsystem.com/components/date-picker/usage/","checkedAt":"2026-10-22"},{"label":"U.S. Web Design System: Date picker","url":"https://designsystem.digital.gov/components/date-picker/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/date-picker/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/date-picker/"}},{"id":"description-list","category":"data","names":{"en":"Description list","ja":"説明リスト"},"aliases":[{"name":"Descriptions","source":"Ant Design","url":"https://ant.design/components/descriptions"},{"name":"Summary list","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/summary-list/"},{"name":"説明リスト","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/description-list/"}],"summary":{"en":"Pairs of a name and its value or explanation, such as the answers on a confirmation page.","ja":"確認画面の回答のように、項目名と値や説明を組にして並べたものです。"},"appearance":{"en":"Rows with a short name on the left (or above) in gray and its value next to it, often separated by thin lines.","ja":"左（または上）に灰色の短い項目名、その横に値がある行が並び、細い線で区切られることが多いです。"},"behavior":[{"en":"The list itself is not interactive; it is used for reading. On a confirmation page, each row can have a link such as “Change” that goes back to the question.","ja":"リスト自体は操作する部品ではなく、読むためのものです。確認画面では、行ごとに設問へ戻る「変更」などのリンクを置くことがあります。"},{"en":"This demo uses `<dl>` with a `<dt>` (name) and `<dd>` (value) in each row, so screen readers that support it can treat them as pairs. The link goes in another `<dd>` in the same row.","ja":"このデモは `<dl>` を使い、各行を `<dt>`（項目名）と `<dd>`（値）で書いているので、対応するスクリーンリーダーは組として扱えます。リンクは同じ行の別の `<dd>` に置きます。"},{"en":"Each link shows only “Change”, and visually hidden text adds the row name, so it is read as “Change name” even out of context, such as in a list of links.","ja":"リンクの見た目は「変更」だけにし、見えない文字で項目名を補って、リンクの一覧などで単独で読まれても「氏名を変更」と伝わるようにします。"},{"en":"In this demo, the Change links do not go anywhere. On narrow screens, the name moves above the value.","ja":"このデモでは、「変更」のリンクを押しても移動しません。狭い画面では、項目名を値の上に出します。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the Change links.","ja":"「変更」のリンクの間を移動します。"}},{"key":"Enter","action":{"en":"Follows the focused link.","ja":"フォーカス中のリンクを開きます。"}}],"variations":[{"name":{"en":"With row actions","ja":"行ごとの操作付き"},"description":{"en":"Adds a link such as “Change” at the end of each row. Rows with missing answers get a link to the question in the value instead.","ja":"各行の末尾に「変更」などのリンクを添えたものです。回答のない行には、値の場所に設問へのリンクを置きます。"}}],"usage":[{"en":"Use it for repeated name–value pairs: glossaries, FAQs, specifications or a summary of answers.","ja":"用語集・よくある質問・仕様・入力内容の確認など、項目名と値の組が続く情報に使います。"},{"en":"Use a table when values need to be compared across rows and columns. Use a plain list when there are no names.","ja":"行と列で値を比べるならテーブルを、項目名がなく並べるだけならリストを使います。"}],"related":[{"id":"list","diff":{"en":"A description list pairs each name with its value; a list shows single items.","ja":"説明リストは項目名と値を組にして並べ、リストは項目を1つずつ並べます。"}},{"id":"table","diff":{"en":"A description list shows name–value pairs for one subject; a table compares values across rows and columns.","ja":"説明リストは1つの対象について項目名と値の組を並べ、テーブルは行と列で値を比べます。"}}],"sources":[{"label":"MDN: <dl>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「説明リスト」をもとに作成","url":"https://design.digital.go.jp/dads/components/description-list/","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Summary list","url":"https://design-system.service.gov.uk/components/summary-list/","checkedAt":"2026-10-21"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/description-list/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/description-list/"}},{"id":"disclosure","category":"disclosure","names":{"en":"Disclosure","ja":"ディスクロージャー"},"aliases":[{"name":"Details","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/details/"},{"name":"Collapse","source":"Bootstrap","url":"https://getbootstrap.com/docs/5.3/components/collapse/"},{"name":"Expansion panel","source":"Angular Material","url":"https://material.angular.dev/components/expansion/overview"}],"summary":{"en":"A single button that shows or hides one section of content.","ja":"1つのボタンで、1か所の内容の表示・非表示を切り替える部品です。"},"appearance":{"en":"A short label, often with a triangle or chevron that points right when closed and down when open. The hidden content appears just below the label.","ja":"短いラベルの横に、閉じているときは右向き、開くと下向きになる三角や山形のアイコンがあります。隠れていた内容はラベルのすぐ下に出ます。"},"behavior":[{"en":"Activating the label toggles the content between shown and hidden.","ja":"ラベルを押すと、内容の表示・非表示が切り替わります。"},{"en":"Used for optional extra information, such as help text, that most users do not need.","ja":"補足の説明など、多くの人には不要な追加情報をしまっておくのに使います。"},{"en":"This demo uses the native `<details>` and `<summary>` elements, which handle the toggling and keyboard support.","ja":"このデモはネイティブの `<details>` と `<summary>` 要素を使っており、開閉とキーボード操作はブラウザが受け持ちます。"},{"en":"In this demo, the disclosure sits under a postal code field and explains what to do for people who live outside Japan, an exception that most people filling in the form do not need.","ja":"このデモでは、郵便番号の欄の下にディスクロージャーを置き、海外に住む人向けの入力方法を畳んでいます。フォームに記入するほとんどの人には要らない、例外の説明にあたります。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"Shows or hides the content.","ja":"内容を表示・非表示にします。"}}],"usage":[{"en":"Use it for supplementary content within a section, such as a note on an exception under a form field, the data behind a chart, or the transcript of a video.","ja":"申し込みフォームの欄の下に置く例外の説明、グラフの元データの表、動画の文字起こしなど、セクションの中の補足に使います。"},{"en":"Make the title describe the content. Avoid vague text like “Show more”, and do not switch it between “Open” and “Close”.","ja":"タイトルには中身が分かる文言を使います。「もっと見る」のような曖昧な文言や、「開く」「閉じる」の切り替えは避けます。"},{"en":"For one or two short, less important pieces of content, the GOV.UK Design System prefers a details component to tabs or an accordion, because it is smaller and less prominent.","ja":"短くて重要度の低いものが 1 つか 2 つなら、GOV.UK Design System はタブやアコーディオンより details コンポーネントを勧めています。小さくて目立ちにくいためです。"}],"misuse":[{"pattern":{"en":"Hiding information that most users need in a disclosure","ja":"多くの利用者が必要とする情報をディスクロージャーにしまう"},"harm":{"en":"Some people do not open it because they expect the label to take them away from the page, so they miss the information inside.","ja":"ラベルを押すと別のページに移ると考えて開かない人は、中の情報を見落とします。"},"instead":{"en":"Show information that most people need directly on the page, and keep disclosures for extra details that only some people need.","ja":"多くの人が必要とする情報はそのまま表示し、ディスクロージャーには一部の人だけが必要とする補足を入れます。"}},{"pattern":{"en":"Putting fees or contract terms inside a closed disclosure","ja":"料金や契約の条件を閉じたディスクロージャーの中に入れる"},"harm":{"en":"People agree to a purchase or contract without seeing the costs or conditions. They may pay for things they did not choose, or find out about a fee only after they have been charged.","ja":"費用や条件を見ないまま購入や契約に同意してしまいます。選んでいないものにお金を払ったり、請求されてから手数料に気づいたりします。"},"instead":{"en":"Show the total cost and the renewal and cancellation terms in the open, next to the button that confirms the purchase or agreement.","ja":"合計の金額と、自動更新や解約の条件は、購入や同意を確定するボタンの近くに、開いた状態で表示します。"},"deceptive":true}],"related":[{"id":"accordion","diff":{"en":"A disclosure is one toggle on its own; an accordion is a set of disclosures stacked under headings.","ja":"ディスクロージャーは単独の開閉部品で、それを見出し付きで縦に並べたものがアコーディオンです。"}},{"id":"toggle-button","diff":{"en":"A disclosure shows or hides content, and its button uses `aria-expanded`; a toggle button turns a setting or mode on or off and shows it with `aria-pressed`.","ja":"ディスクロージャーは内容を表示・非表示にして、そのボタンは `aria-expanded` で伝え、トグルボタンは設定やモードをオンかオフにして `aria-pressed` で伝えます。"}}],"sources":[{"label":"FTC Staff Report: Bringing Dark Patterns to Light (2022)","url":"https://www.ftc.gov/system/files/ftc_gov/pdf/P214800%20Dark%20Patterns%20Report%209.14.2022%20-%20FINAL.pdf","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Sneaking","url":"https://www.deceptive.design/types/sneaking","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Disclosure (Show/Hide) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/","checkedAt":"2026-10-20"},{"label":"GOV.UK Design System: Details","url":"https://design-system.service.gov.uk/components/details/","checkedAt":"2026-10-20"},{"label":"Bootstrap: Collapse","url":"https://getbootstrap.com/docs/5.3/components/collapse/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ディスクロージャー」をもとに作成","url":"https://design.digital.go.jp/dads/components/disclosure/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: disclosure","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/disclosure","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「ディスクロージャー（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/disclosure/usage/","checkedAt":"2026-11-03"},{"label":"WAI-ARIA APG: Button Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/button/","checkedAt":"2026-11-03"},{"label":"GOV.UK Design System: Tabs","url":"https://design-system.service.gov.uk/components/tabs/","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/disclosure/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/disclosure/"}},{"id":"divider","category":"data","names":{"en":"Divider","ja":"ディバイダー（区切り線）"},"aliases":[{"name":"Divider","source":"Ant Design","url":"https://ant.design/components/divider"},{"name":"Separator","source":"React Aria","url":"https://react-aria.adobe.com/Separator"},{"name":"ディバイダー","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/divider/"}],"summary":{"en":"A thin line that separates sections or groups of content.","ja":"セクションや項目のまとまりの間を区切る細い線です。"},"appearance":{"en":"A thin gray horizontal line across the content, or a short vertical line between items in a row.","ja":"内容を横切る細い灰色の横線です。横に並んだ項目の間に入る短い縦線のこともあります。"},"behavior":[{"en":"It is not interactive.","ja":"操作する部品ではありません。"},{"en":"`<hr>` is announced by screen readers as a separator. It marks a change of topic within the text of one section, such as from opening hours to parking.","ja":"`<hr>` はスクリーンリーダーが区切りとして読み上げます。1つのセクションの文章の中で、営業時間から駐車場の話へ移るような話題の切り替わりに使います。"},{"en":"In this demo, the lines between sections are CSS borders, because the headings already show where each section starts. They run edge to edge (full width), while the lines between the notification channels stay inside the padding (inset).","ja":"このデモでは、見出しでセクションの始まりがすでに伝わるため、セクションの間の線は CSS の border にしています。この線は枠の端から端まで（全幅）引き、通知の項目の間の線は余白の内側（インセット）に引いています。"},{"en":"In this demo, the vertical lines between links are only decoration and are hidden from screen readers.","ja":"このデモでは、リンクの間の縦線は飾りなので、読み上げないようにしています。"}],"keyboard":[{"key":"—","action":{"en":"None.","ja":"なし。"}}],"variations":[{"name":{"en":"Full width","ja":"全幅"},"description":{"en":"Runs edge to edge to separate major sections or lists.","ja":"端から端まで引き、大きなセクションやリストを区切ります。"}},{"name":{"en":"Inset","ja":"インセット"},"description":{"en":"Starts with an indent, separating items within the same section while keeping them related.","ja":"字下げした位置から引き、同じセクションの中の項目を、つながりを保ったまま区切ります。"}}],"usage":[{"en":"A divider only supports spacing and headings. The layout should still make sense without the line.","ja":"ディバイダーは余白や見出しを補うものにすぎません。線がなくても意味が通じる配置にします。"},{"en":"Leave enough space around it so separate items do not look like one. The Digital Agency Design System asks for at least 8 px in lists and 16 px between sections; Fluent asks for at least 12 px above and below.","ja":"別々の項目が1つに見えないよう、周りに十分な余白をとります。デジタル庁デザインシステムはリストで8px 以上、セクションの間で16px 以上、Fluent は上下に12px 以上を求めています。"},{"en":"Use `<hr>` for a change of topic within a section. Sections and headings already mark their own boundaries, so the line between sections, like any purely visual line, is a CSS border.","ja":"セクションの中の話題の切り替わりには `<hr>` を使います。セクションと見出しはそれだけで区切りが伝わるので、セクションの間の線は、見た目だけの線と同じく CSS の border にします。"}],"sources":[{"label":"MDN: <hr>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr","checkedAt":"2026-10-20"},{"label":"HTML Standard: The hr element","url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-element","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「ディバイダー」をもとに作成","url":"https://design.digital.go.jp/dads/components/divider/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「ディバイダー（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/divider/usage/","checkedAt":"2026-10-21"},{"label":"Fluent 2 Design System: Divider","url":"https://fluent2.microsoft.design/components/web/react/core/divider/usage","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/divider/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/divider/"}},{"id":"drawer","category":"overlay","names":{"en":"Drawer","ja":"ドロワー"},"aliases":[{"name":"Offcanvas","source":"Bootstrap","url":"https://getbootstrap.com/docs/5.3/components/offcanvas/"},{"name":"Sheet","source":"React Aria","url":"https://react-aria.adobe.com/Sheet"},{"name":"Side sheets","source":"Material Design 3","url":"https://m3.material.io/components/side-sheets/overview"}],"summary":{"en":"A panel that slides in from the edge of the screen, over the page.","ja":"画面の端からページの上にすべり出てくるパネルです。"},"appearance":{"en":"A tall panel along the left or right edge (sometimes the top or bottom). In its modal form, the rest of the page is dimmed behind it.","ja":"左右どちらか（上下のこともある）の端に沿った縦長のパネルです。モーダルの形では、後ろのページは暗くなります。"},"behavior":[{"en":"Opened from a button, often a menu or filter icon.","ja":"メニューや絞り込みのアイコンなどのボタンから開きます。"},{"en":"In its modal form, the page behind cannot be used while it is open. The Digital Agency Design System makes every drawer modal, while Bootstrap and Material Design 3 also have forms that leave the page usable. Esc or the close button closes it and focus returns to the button.","ja":"モーダルの形では、開いている間は後ろのページを操作できません。デジタル庁デザインシステムのドロワーは必ずモーダルですが、Bootstrap と Material Design 3 にはページを操作できる形もあります。Esc か閉じるボタンで閉じ、フォーカスは開いたボタンに戻ります。"},{"en":"Used for navigation menus, filters, or a shopping cart.","ja":"ナビゲーションメニュー、絞り込み、カートなどに使います。"},{"en":"In this demo, the drawer is a native modal `<dialog>`. To make the movement easy to see, it opens from the right edge of the demo frame and dims only the frame. On a real page, it opens from the edge of the screen and dims the whole page.","ja":"このデモでは、ドロワーをネイティブのモーダル `<dialog>` で作っています。動きが分かりやすいよう、デモの枠の右端から出して、枠の中だけを暗くします。実際のページでは、画面の端から出て、ページ全体を暗くします。"},{"en":"In this demo, clicking the dimmed part of the frame or anywhere outside the frame also closes the drawer.","ja":"このデモでは、枠の中の暗い部分や枠の外をクリックしても閉じます。"},{"en":"In this demo, the choices take effect only when “Apply” is pressed, and the button that opens the drawer then shows how many filters are on. Closing it any other way drops the choices made since it opened.","ja":"このデモでは、選んだ条件は「適用」を押したときに反映され、開くボタンに件数が出ます。ほかの方法で閉じると、開いてから選んだ内容は取り消されます。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"Opens the drawer from the button.","ja":"ボタンからドロワーを開きます。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the controls inside the drawer.","ja":"ドロワー内の操作できる要素の間を移動します。"}},{"key":"Esc","action":{"en":"Closes the drawer without applying and returns focus to the button.","ja":"適用せずにドロワーを閉じ、ボタンにフォーカスを戻します。"}}],"variations":[{"name":{"en":"Left or right","ja":"左・右"},"description":{"en":"Slides in from the left or right edge over part of the page. This demo opens from the right.","ja":"ページの左端か右端から、ページの一部に重ねて出ます。このデモは右から開きます。"}},{"name":{"en":"Full screen","ja":"全面"},"description":{"en":"Covers the whole screen instead of sliding in over part of it.","ja":"ページの一部ではなく、画面全体を覆って出ます。"}}],"usage":[{"en":"Open it from a trigger such as a menu button, cover the page with an overlay, and include a close button.","ja":"メニューボタンなどから開き、背後にオーバーレイを敷き、閉じるボタンを付けます。"}],"misuse":[{"pattern":{"en":"Hiding the main navigation in a drawer on desktop screens","ja":"デスクトップの画面でも、主なナビゲーションをドロワーの中だけに隠す"},"harm":{"en":"People find the site’s content less often, take longer to complete tasks, and find the site harder to use than when the navigation is visible; the drop is largest on desktop.","ja":"ナビゲーションが見えている場合より、利用者がコンテンツを見つけにくくなり、作業に時間がかかり、使いにくいと感じます。この差はデスクトップで特に大きくなります。"},"instead":{"en":"On desktop, show the top-level links across the top or down the side of the page. On phones, show up to four top-level links directly; if there are more, put the rest in the drawer and add links to important pages within the page.","ja":"デスクトップでは、最上位のリンクをページの上部か横に並べて見せます。スマートフォンでは最上位のリンクが4つまでなら直接見せ、それより多いときは残りをドロワーに入れ、重要なページへのリンクをページ内にも置きます。"}}],"related":[{"id":"modal","diff":{"en":"A drawer slides in from an edge and is often tall; a modal dialog appears in the middle of the screen.","ja":"ドロワーは端からすべり出る縦長のパネルで、モーダルは画面の中央に出ます。"}},{"id":"hamburger-menu","diff":{"en":"A drawer is the panel that slides in from the edge; a hamburger menu button is the button that often opens it.","ja":"ドロワーは端からすべり出るパネルで、ハンバーガーメニューボタンはそれを開くことが多いボタンです。"}},{"id":"mobile-menu","diff":{"en":"A drawer is the panel that slides in from the edge; a mobile menu is the navigation placed inside it.","ja":"ドロワーは端からすべり出るパネルで、モバイルメニューはその中に入れるナビゲーションです。"}},{"id":"mega-menu","diff":{"en":"A drawer slides in from the edge of the screen and covers the page; a mega menu drops down under the horizontal menu on wide screens.","ja":"ドロワーは画面の端からすべり出てページを覆い、メガメニューは広い画面で水平メニューの下に開きます。"}},{"id":"side-navigation","diff":{"en":"A drawer is a panel that slides in over the page; side navigation is a list of links placed beside the content.","ja":"ドロワーはページの上にすべり出るパネルで、サイドナビゲーションは内容の横に置くリンクの一覧です。"}},{"id":"bottom-sheet","diff":{"en":"A drawer slides in from an edge, most often a side; a bottom sheet is anchored to the bottom edge, mainly on phones, and for apps Material Design 3 has a standard kind that leaves the main UI usable beside it.","ja":"ドロワーは端からすべり出るパネルで、多くは側面の端から出ます。ボトムシートは画面の下端に固定され、おもにスマートフォンで使います。Material Design 3 は、アプリ向けに、主な部分を並べて操作できる標準の種類を挙げています。"}}],"sources":[{"label":"Bootstrap: Offcanvas","url":"https://getbootstrap.com/docs/5.3/components/offcanvas/","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Dialog (Modal) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ドロワー」をもとに作成","url":"https://design.digital.go.jp/dads/components/drawer/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ドロワー（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/drawer/usage/","checkedAt":"2026-10-21"},{"label":"Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt UX Metrics","url":"https://www.nngroup.com/articles/hamburger-menus/","checkedAt":"2026-10-21"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/drawer/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/drawer/"}},{"id":"emergency-banner","category":"feedback","names":{"en":"Emergency banner","ja":"緊急時バナー"},"aliases":[{"name":"緊急時バナー","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/emergency-banner/"}],"summary":{"en":"A banner that takes over the top of a site to warn about an urgent event that affects people’s lives or property.","ja":"人の命や財産に関わる緊急の出来事を知らせるため、サイトの上部を占めて表示するバナーです。"},"appearance":{"en":"A box with a thick border in the error color at the top of the page, above other notices and sometimes above the header itself. It holds a large title that names the danger, the time it was updated, a short description, and sometimes one link button in the center.","ja":"ページの上部、ほかのお知らせよりも上（ヘッダーよりも上のこともある）にある、エラーの色の太い枠線で囲んだ箱です。危険の内容を表す大きなタイトル、更新日時、短い説明が入り、中央にリンクのボタンが1つ付くこともあります。"},"behavior":[{"en":"It interrupts what the site would normally say and fills the first screen, so that everyone notices it.","ja":"サイトが本来伝える内容を中断してでも最初の画面を占め、だれもが気づけるようにします。"},{"en":"The user cannot close or hide it.","ja":"利用者が閉じたり隠したりすることはできません。"},{"en":"It is an `<article>` with a heading, so screen reader users can find it in the list of headings. It is already on the page when it loads, so it has no `role=\"alert\"`; it is read first because it comes first.","ja":"見出しを持つ `<article>` なので、スクリーンリーダーの利用者は見出しの一覧から見つけられます。ページを開いた時点で表示されているため `role=\"alert\"` は付けず、ページの先頭にあることで最初に読まれます。"},{"en":"The update time is a `<time>` element with a `datetime` attribute, so the date can also be read by machines.","ja":"更新日時は `datetime` 属性付きの `<time>` 要素にし、機械でも日時を読み取れるようにします。"},{"en":"Only the button is clickable; the rest of the banner is not a link.","ja":"押せるのはボタンだけで、バナーのほかの部分はリンクにしません。"},{"en":"In this demo, the button shows where it would go instead of leaving the page. If the link opens the details in a new tab, the Digital Agency Design System example marks this with an icon that has alternative text.","ja":"このデモでは、ボタンを押してもページを移らず、行き先を表示します。リンク先を新しいタブで開く場合、デジタル庁デザインシステムの実装例は、そのことを代替テキスト付きのアイコンで示します。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus to the link button.","ja":"リンクのボタンにフォーカスを移します。"}},{"key":"Enter","action":{"en":"Follows the link.","ja":"リンク先へ移動します。"}}],"usage":[{"en":"Use it only for urgent, important information that affects people’s lives or property, such as an evacuation order. For other notices, such as opening hours over the holidays, use an alert instead. GOV.UK shows one at the top of every page for a national or local emergency, or a notable death.","ja":"避難の呼びかけのように、人の命や財産に関わる緊急で重要な情報だけに使います。年末年始の営業時間のようなそれ以外のお知らせには、アラートを使います。GOV.UK は国や地域の緊急事態や著名人の死去のときに、全ページの上部に表示します。"},{"en":"Make the title name the actual danger. The banner itself already says it is an emergency, so a title such as “Emergency notice” tells nothing.","ja":"タイトルには具体的な警告の内容を書きます。このバナーを使った時点で緊急のお知らせであることは示されているので、「緊急のお知らせ」のようなタイトルでは何も伝わりません。"},{"en":"Give it a style that differs a little from the rest of the site, so it catches the eye.","ja":"サイトのほかの部分とは少し違う、違和感のあるスタイルにして目を引くようにします。"},{"en":"Give it at most one link, and put the details on the linked page.","ja":"リンクは1つまでにし、詳しい説明はリンク先のページに書きます。"}],"misuse":[{"pattern":{"en":"Leaving the banner up for a long time","ja":"緊急時バナーを長い間出したままにする"},"harm":{"en":"Even an urgent warning, kept on screen, wears people out (alert fatigue). It stops drawing attention and comes to be ignored.","ja":"緊急の警告でも出し続けると、見る人が慣れて疲れてしまい（アラート疲れ）、注意を引く効果が薄れて無視されるようになります。"},"instead":{"en":"Remove it once the urgency has passed. For a message that has to stay up for a long time, use an alert.","ja":"緊急でなくなったら外します。長く載せておく必要のあるお知らせには、アラートを使います。"}},{"pattern":{"en":"Writing a long description in the banner","ja":"バナーの説明に長い文章を書く"},"harm":{"en":"It is hard to get detailed information across accurately with flat text in a banner.","ja":"バナーの平たい文字だけでは、詳しい情報を正しく伝えるのが難しいです。"},"instead":{"en":"Keep the description short (the Digital Agency Design System suggests about 100 Japanese characters), structured with headings or a list if needed, and link to a page with the details.","ja":"説明は短くし（デジタル庁デザインシステムは全角100文字程度までとしている）、必要なら見出しや箇条書きで整理して、詳細はリンク先のページに書きます。"}}],"related":[{"id":"alert","diff":{"en":"An emergency banner warns about urgent danger and cannot be closed; an alert carries ordinary important messages and can stay up for a long time.","ja":"緊急時バナーは差し迫った危険を知らせて閉じられず、アラートはふだんの重要なお知らせを伝え、長く載せておけます。"}},{"id":"callout","diff":{"en":"An emergency banner takes over the top of the page to warn about an urgent danger; a callout sits next to the content it adds to.","ja":"緊急時バナーはページの上部を占めて差し迫った危険を知らせ、注釈ブロックは補足する内容のそばに置きます。"}},{"id":"cookie-banner","diff":{"en":"An emergency banner warns about urgent danger and cannot be closed; a cookie banner asks the visitor to accept or reject optional cookies and can be hidden once answered.","ja":"緊急時バナーは差し迫った危険を知らせて閉じられず、Cookie バナーは任意の Cookie を受け入れるか拒否するかを尋ね、答えたあとは隠せます。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「緊急時バナー」をもとに作成","url":"https://design.digital.go.jp/dads/components/emergency-banner/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「緊急時バナー（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/emergency-banner/usage/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: emergency-banner","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/emergency-banner","checkedAt":"2026-10-22"},{"label":"GOV.UK Publishing Components: Emergency banner","url":"https://components.publishing.service.gov.uk/component-guide/emergency_banner","checkedAt":"2026-10-22"},{"label":"MDN: ARIA: alert role","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role","checkedAt":"2026-10-22"},{"label":"MDN: <time>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/emergency-banner/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/emergency-banner/"}},{"id":"empty-state","category":"feedback","names":{"en":"Empty state","ja":"空の状態"},"aliases":[{"name":"Empty states","source":"Carbon Design System","url":"https://carbondesignsystem.com/patterns/empty-states-pattern/"},{"name":"Empty","source":"Ant Design","url":"https://ant.design/components/empty"},{"name":"Empty state","source":"Atlassian Design System","url":"https://atlassian.design/components/empty-state/usage"},{"name":"Blankslate","source":"Primer","url":"https://primer.style/product/components/blankslate"}],"summary":{"en":"A message shown in place of a list or table that has nothing to show, saying why and what to do next.","ja":"表示する内容がない一覧や表の代わりに出し、なぜ空なのかと次に何をすればよいかを伝える表示です。"},"appearance":{"en":"A short heading, a sentence or two, and often a button, in the space where the content would be. A simple picture often sits above them.","ja":"内容が入るはずの場所に、短い見出しと1〜2文の説明が並び、多くの場合はボタンもあります。上に簡単な絵が付くことも多いです。"},"behavior":[{"en":"It replaces the empty list or table entirely, with no leftover headers, so screen readers do not read an empty table before the message.","ja":"空の一覧や表を、見出しの行なども残さず丸ごと置き換えます。こうすると、スクリーンリーダーが案内より先に空の表を読み上げずに済みます。"},{"en":"The picture is decoration, so it is hidden from screen readers (`alt=\"\"` for an image). The heading and text carry the meaning.","ja":"絵は飾りなので、スクリーンリーダーからは隠します（画像なら `alt=\"\"`）。意味は見出しと本文で伝えます。"},{"en":"When a filter or search finds nothing without moving focus, the result is announced through a `role=\"status\"` live region.","ja":"絞り込みや検索で何も見つからず、フォーカスも動かないときは、その結果を `role=\"status\"` のライブリージョンで知らせます。"},{"en":"In this demo, there are no projects at first, so the empty state explains what will appear and offers a button to create some. After that, a filter that matches nothing shows a second empty state with a Clear search button. Either button then moves focus to the filter field, because the button itself disappears.","ja":"このデモでは、最初はプロジェクトがないので、何が並ぶかを伝え、作成するボタンを出します。作成したあと、絞り込みで何も一致しなければ、「検索をクリア」ボタンの付いた別の空の状態を出します。どちらのボタンも押すと消えるので、フォーカスを絞り込みの欄へ移します。"}],"keyboard":[{"key":"—","action":{"en":"None. The demo’s buttons use Enter / Space.","ja":"なし。デモのボタンは Enter / Space で押せます。"}}],"variations":[{"name":{"en":"Nothing yet","ja":"まだ何もない"},"description":{"en":"On first use or after everything was deleted. Says what will appear here and how to add the first item.","ja":"初めて使うときや、すべて消したあとです。ここに何が並ぶかと、最初の1件の追加のしかたを伝えます。"}},{"name":{"en":"No results","ja":"一致なし"},"description":{"en":"After a search or filter that matched nothing. Says so and suggests changing the search terms or filters.","ja":"検索や絞り込みで何も一致しなかったときです。そのことを伝え、検索語や条件を変えるよう促します。"}},{"name":{"en":"All done","ja":"すべて完了"},"description":{"en":"When there is nothing left to do, such as no alerts or a cleared inbox. Often needs no button.","ja":"通知がない、受信箱が空になった、のように、やることが残っていないときです。ボタンが要らないことも多いです。"}},{"name":{"en":"Cannot show","ja":"表示できない"},"description":{"en":"When data exists but cannot be shown, such as without permission. Says why and how to get access.","ja":"権限がないなど、データはあるのに表示できないときです。理由と、見られるようにする方法を伝えます。"}}],"usage":[{"en":"Be specific about what would appear here, and keep it short. Avoid jargon that new users may not know yet.","ja":"ここに何が並ぶのかを具体的に、短く書きます。使い始めたばかりの人が知らない用語は避けます。"},{"en":"Offer one main next step. When many empty states can appear on one screen, use less prominent buttons so the screen is not full of primary buttons.","ja":"次にする操作は1つに絞ります。1つの画面に空の状態がいくつも出るときは、目立ちにくいボタンにして、画面が主ボタンだらけにならないようにします。"},{"en":"Match the tone to the situation. Do not joke when something went wrong.","ja":"場面に合った口調にします。問題が起きたときは冗談を言いません。"}],"misuse":[{"pattern":{"en":"Showing “No results” while the data is still loading","ja":"まだ読み込み中なのに「データがありません」と出す"},"harm":{"en":"People who see the message and then watch content appear stop trusting the app. Impatient people believe there is nothing, move on before it loads, and never finish what they came to do.","ja":"「ない」と出たあとに内容が現れるのを見た人は、アプリを信用しなくなります。待てない人は、本当に何もないと思い込んで内容が届く前に先へ進み、やろうとしていたことを終えられません。"},"instead":{"en":"Show a loading indicator while loading, and show the empty state only after loading has finished with nothing to show.","ja":"読み込み中は読み込み中の表示を出し、読み込みが終わって内容がないと分かってから空の状態を出します。"}},{"pattern":{"en":"Leaving the area completely blank","ja":"何も表示せず、空白のままにする"},"harm":{"en":"People who filter or search cannot tell whether the system is still working, failed, or found nothing, and run the same search again and again. New users miss the chance to learn what the area is for and how to start.","ja":"絞り込みや検索をした人は、まだ処理中なのか、失敗したのか、何も見つからなかったのかが分からず、同じ検索を何度もやり直します。使い始めたばかりの人は、その場所が何のためのもので、どう始めればよいかを知る機会を逃します。"},"instead":{"en":"Say clearly that there is nothing to show, explain what would appear here, and give a button or link for the next step.","ja":"表示するものがないことをはっきり伝え、ここに何が並ぶかを説明し、次の操作へのボタンやリンクを置きます。"}}],"related":[{"id":"skeleton","diff":{"en":"An empty state appears after loading has finished with nothing to show; a skeleton fills the space while content is still loading.","ja":"空の状態は、読み込みが終わって表示するものがないときに出します。スケルトンは、まだ読み込んでいる間に場所を埋めます。"}},{"id":"alert","diff":{"en":"An empty state stands in for missing content and points to the next step; an alert is a message that reports something important and is announced right away.","ja":"空の状態は、ない内容の代わりに置き、次の操作を示します。アラートは、大事なことを知らせ、すぐに読み上げられる通知です。"}},{"id":"search-field","diff":{"en":"An empty state is what appears in place of the results when a search finds nothing; a search field is where the search terms are typed.","ja":"空の状態は、検索で何も見つからなかったときに結果の代わりに出る表示です。検索ボックスは、検索語を入力する欄です。"}}],"sources":[{"label":"Carbon Design System: Empty states","url":"https://carbondesignsystem.com/patterns/empty-states-pattern/","checkedAt":"2026-10-22"},{"label":"Atlassian Design System: Empty state","url":"https://atlassian.design/components/empty-state/usage","checkedAt":"2026-10-22"},{"label":"Ant Design: Empty","url":"https://ant.design/components/empty","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Designing Empty States in Complex Applications: 3 Guidelines","url":"https://www.nngroup.com/articles/empty-state-interface-design/","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 4.1.3: Status Messages (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/empty-state/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/empty-state/"}},{"id":"feed","category":"data","names":{"en":"Feed","ja":"フィード"},"aliases":[],"summary":{"en":"A stream of articles that loads more as the reader scrolls, read one article at a time.","ja":"読み進めると続きが読み込まれる、記事の連なりです。記事を1つずつ読んでいきます。"},"appearance":{"en":"A column of posts, each with a title and a few lines of text. New posts appear at the bottom as the reader nears the end, often after a short loading message.","ja":"タイトルと数行の文を持つ投稿が縦に並びます。終わりに近づくと、短い「読み込み中」の表示のあとに、新しい投稿が下に足されます。"},"behavior":[{"en":"The container has `role=\"feed\"` and each post is an `article` that can take focus. Each article is named by its title (`aria-labelledby`), described by its main text (`aria-describedby`), and has its position in `aria-posinset` and the number of articles in `aria-setsize`.","ja":"入れ物に `role=\"feed\"` を付け、投稿をそれぞれフォーカスできる `article` にします。記事はタイトルを名前に（`aria-labelledby`）、本文を説明に（`aria-describedby`）し、位置を `aria-posinset`、記事の数を `aria-setsize` で伝えます。"},{"en":"A feed is a structure, not a widget, so screen readers stay in their reading mode inside it.","ja":"フィードは操作部品ではなく構造なので、スクリーンリーダーはその中でも読むためのモードのまま使えます。"},{"en":"More articles are loaded when the reader scrolls near the end or moves focus to the last article. While they are being added, the feed has `aria-busy=\"true\"`, so screen readers wait until the change is finished.","ja":"終わり近くまでスクロールするか、最後の記事にフォーカスを移すと、続きの記事を読み込みます。記事を足している間はフィードに `aria-busy=\"true\"` を付け、変更が終わるまでスクリーンリーダーに待ってもらいます。"},{"en":"In this demo, loading waits a moment, in place of fetching from a server, and adds three posts at a time. It stops after nine posts and says “No more posts”. `aria-setsize` is the number of posts loaded so far.","ja":"このデモでは、サーバーから取得する代わりに少し待ってから、3件ずつ投稿を足します。9件で読み込みを止め、「これ以上の投稿はありません」と表示します。`aria-setsize` は、その時点で読み込んだ投稿の数にしています。"},{"en":"In this demo, Ctrl + End and Ctrl + Home move to the nearest element that can take focus after or before the feed, even outside the demo.","ja":"このデモでは、Ctrl + End と Ctrl + Home で、フィードの後ろ・前にある、いちばん近いフォーカスできる要素へ移ります。デモの外の要素にも移ります。"}],"keyboard":[{"key":"Page Up / Page Down","action":{"en":"Moves focus to the previous / next article. Reaching the last article loads more.","ja":"前・次の記事へフォーカスを移します。最後の記事まで来ると、続きを読み込みます。"}},{"key":"Ctrl + Home / Ctrl + End","action":{"en":"Moves focus out of the feed, to the nearest element that can take focus before / after it.","ja":"フィードの外の、前・後ろにあるいちばん近いフォーカスできる要素へ移ります。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves to the next / previous article, because every article is in the Tab order.","ja":"記事はすべて Tab キーの順に入っているので、次・前の記事へ移ります。"}}],"usage":[{"en":"Feeds have no established keyboard convention, so tell people which keys move between articles and out of the feed, for example next to the feed or in help.","ja":"フィードのキー操作には決まった慣習がないので、記事の間やフィードの外へ移るキーを、フィードの近くやヘルプで伝えます。"},{"en":"A feed suits content that keeps coming and is browsed without looking for anything in particular, such as news or social posts.","ja":"フィードは、ニュースや SNS の投稿のように次々と届き、特定のものを探さずに眺める内容に向いています。"}],"misuse":[{"pattern":{"en":"Loading articles without end above a footer that holds contact details or other information","ja":"連絡先などの情報を載せたフッターの上で、記事を際限なく読み込み続ける"},"harm":{"en":"The stream of new articles keeps people from ever reaching the footer, so information such as contact details or return policies is out of reach. Keyboard-only users have to Tab through the articles one by one, which makes reaching the end a long task.","ja":"新しい記事が次々と足されるので、フッターにたどり着けず、連絡先や返品の条件などの情報を見られません。キーボードだけで操作する人は記事を1つずつ Tab キーで進むしかなく、終わりまで行くのに長くかかります。"},"instead":{"en":"Stop loading automatically after a set number of articles and add a “Load more” button, so the footer can be reached. Also support Ctrl + End to move past the feed.","ja":"決まった数の記事を読み込んだら自動の読み込みを止め、「さらに読み込む」ボタンを置いて、フッターに届くようにします。Ctrl + End でフィードの後ろへ移れるようにもします。"}},{"pattern":{"en":"Showing search results or products to compare as a feed","ja":"検索結果や、見比べる商品の一覧をフィードで見せる"},"harm":{"en":"People looking for a particular item find it hard to get back to one they saw earlier, since “on page 3” is easier to remember than a spot on a very long page. The scroll bar also stops showing how much is left.","ja":"特定のものを探している人は、前に見た項目へ戻りにくくなります。「3ページ目にあった」は覚えやすいですが、とても長いページの中の位置は覚えにくいです。スクロールバーからも、残りがどれだけあるか分からなくなります。"},"instead":{"en":"Split the results into pages, and offer sorting and filtering to narrow them down.","ja":"結果をページに分け、並べ替えと絞り込みで探せるようにします。"}},{"pattern":{"en":"Starting the feed over from the top when people come back from an article with the Back button","ja":"記事を開いてから「戻る」で帰ってきた人に、フィードを最初から見せる"},"harm":{"en":"People who opened an article and went back land at the top and have to scroll past everything they have already seen.","ja":"記事を開いて戻った人が先頭に戻され、もう見た記事をすべてスクロールし直すことになります。"},"instead":{"en":"Keep the loaded articles and the reading position, and return people to the article they opened.","ja":"読み込んだ記事と読んでいた位置を残し、開いた記事のところへ戻します。"}}],"related":[{"id":"list","diff":{"en":"A feed keeps loading more articles as people read and moves by article with Page Up and Page Down; a list shows a fixed set of items.","ja":"フィードは読み進めると記事を読み込み続け、Page Up と Page Down で記事を移ります。リストは決まった数の項目を並べます。"}},{"id":"pagination","diff":{"en":"A feed adds the next articles in place as people read; pagination splits the items into pages that people choose to move between.","ja":"フィードは読み進めるとその場に次の記事を足し、ページネーションは項目をページに分けて、利用者が選んで移ります。"}},{"id":"timeline","diff":{"en":"A feed is a section of articles that loads more as people scroll and is marked with `role=\"feed\"`; a timeline lays out events in time order along a line.","ja":"フィードはスクロールに合わせて記事を読み込み続ける部分で、`role=\"feed\"` を付けます。タイムラインは出来事を時間順に線に沿って並べます。"}}],"sources":[{"label":"WAI-ARIA APG: Feed Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/feed/","checkedAt":"2026-10-22"},{"label":"WAI-ARIA APG: Infinite Scrolling Feed Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/feed/examples/feed/","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Infinite Scrolling: When to Use It, When to Avoid It","url":"https://www.nngroup.com/articles/infinite-scrolling-tips/","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Infinite Scrolling Is Not for Every Website","url":"https://www.nngroup.com/articles/infinite-scrolling/","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/feed/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/feed/"}},{"id":"file-upload","category":"input","names":{"en":"File upload","ja":"ファイルアップロード（ドロップエリア）"},"aliases":[{"name":"File uploader","source":"Carbon Design System","url":"https://carbondesignsystem.com/building-blocks/core/components/file-uploader"},{"name":"Upload","source":"Ant Design","url":"https://ant.design/components/upload"},{"name":"DropZone","source":"React Aria","url":"https://react-aria.adobe.com/DropZone"},{"name":"ファイルアップロード／ドロップエリア","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/file-upload/"},{"name":"File input","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/file-input/"}],"summary":{"en":"Lets the user choose files from their device, by a button or by dragging them in.","ja":"端末にあるファイルを、ボタンで選ぶかドラッグして入れることで指定する部品です。"},"appearance":{"en":"A “Choose files” button, often inside a dashed box where files can be dropped. Chosen files are listed below with their names and sizes.","ja":"「ファイルを選択」ボタンがあり、ファイルを落とせる点線の枠に入っていることが多いです。選んだファイルの名前と大きさが下に並びます。"},"behavior":[{"en":"The button opens the operating system’s file picker.","ja":"ボタンを押すと OS のファイル選択画面が開きます。"},{"en":"Dropping files on the dashed box also chooses them. This demo uses the native `<input type=\"file\">` and handles drops on the surrounding box.","ja":"点線の枠にファイルを落としても選べます。このデモはネイティブの `<input type=\"file\">` を使い、周りの枠へのドロップも受け付けています。"},{"en":"In this demo, every file is checked for its type (PDF, PNG or JPEG) and size (up to 10 MB), whether it was chosen with the button or dropped. A file that fails stays in the list with an error message under its name, and an error message for the whole field appears under the number of chosen files.","ja":"このデモでは、ボタンで選んだファイルもドロップしたファイルも、形式（PDF・PNG・JPEG）と大きさ（10MBまで）を確かめます。条件に合わないファイルは一覧に残し、ファイル名の下にエラー文を出します。選んだ件数の下には、全体のエラー文を出します。"},{"en":"Each chosen file can be removed from the list. Removing moves focus back to the file button.","ja":"選んだファイルは1件ずつ解除できます。解除するとフォーカスはファイル選択ボタンに戻ります。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"Opens the file picker (on the file button), or removes a file (on its remove button).","ja":"ファイル選択ボタンでは選択画面を開き、解除ボタンではそのファイルを外します。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the buttons.","ja":"ボタンの間を移動します。"}}],"usage":[{"en":"Show the chosen files as a numbered list with the name, the size and a remove button, and say “No file selected” when there are none.","ja":"選んだファイルは番号付きリストにし、各行にファイル名・大きさ・解除ボタンを置きます。何も選んでいないときは「未選択」と表示します。"},{"en":"The `accept` attribute only narrows what the file picker shows, and does not validate files. Check the type and size in the page, and on the server too.","ja":"`accept` 属性はファイル選択画面での絞り込みにすぎず、ファイルの検証はしません。ページの中で形式と大きさを確かめ、サーバー側でも確かめます。"},{"en":"The GOV.UK Design System says to ask for an upload only if it is critical to delivering the service. It says to let people reuse a file they uploaded earlier in the same journey, and to write a specific error message for each problem, such as no file selected, the wrong file type or a file that is too large.","ja":"GOV.UK は、サービスの提供に欠かせないときだけファイルのアップロードを求めるよう勧めています。同じ一連の手続きの中で前にアップロードしたファイルを使い回せるようにし、ファイルが選ばれていない、種類が違う、大きすぎるといった問題ごとに、具体的なエラーメッセージを書くよう求めています。"},{"en":"The U.S. Web Design System says to ask for files only when they are required, to accept several file formats, and to prefer one file per input because some people do not know how to select several. It explains restrictions such as file types and size in hint text. Its file input does not upload in the background: files are sent only when the form is submitted.","ja":"U.S. Web Design System は、ファイルを求めるのは必須のときだけにし、複数のファイル形式を受け付け、1つの入力欄につきファイルは1つにするよう勧めています。複数のファイルの選び方が分からない人がいるためです。ファイルの種類や大きさといった制限は、ヒントのテキストで説明します。このファイル入力は裏でアップロードを進めず、フォームを送信したときに初めてファイルを送ります。"}],"misuse":[{"pattern":{"en":"Offering only a drop area for choosing files","ja":"ファイルの選択をドロップエリアだけにする"},"harm":{"en":"People who cannot drag precisely, and people who use a trackball, head pointer, eye-gaze system or speech-controlled pointer, find dragging hard and error-prone.","ja":"正確にドラッグできない人や、トラックボール、ヘッドポインター、視線入力、音声で動かすポインターを使う人には、ドラッグが難しく、誤りやすいです。"},"instead":{"en":"Always provide a file button (`<input type=\"file\">`) next to the drop area, so files can be chosen with a click or the keyboard.","ja":"ドロップエリアのそばにファイル選択ボタン（`<input type=\"file\">`）を必ず置き、クリックやキーボードでも選べるようにします。"}}],"related":[{"id":"button","diff":{"en":"A file upload is built around a button, but the button opens a file picker and keeps the chosen files as a form value.","ja":"ファイルアップロードの中心はボタンですが、押すとファイル選択画面が開き、選んだファイルをフォームの値として持ちます。"}}],"sources":[{"label":"MDN: <input type=\"file\">","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file","checkedAt":"2026-10-20"},{"label":"Open UI: File","url":"https://open-ui.org/components/file.research/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ファイルアップロード／ドロップエリア（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/file-upload/usage/","checkedAt":"2026-10-20"},{"label":"WCAG 2.2: Understanding SC 2.5.7 Dragging Movements","url":"https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: File upload","url":"https://design-system.service.gov.uk/components/file-upload/","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: File input","url":"https://designsystem.digital.gov/components/file-input/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/file-upload/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/file-upload/"}},{"id":"floating-action-button","category":"action","names":{"en":"Floating action button","ja":"フローティングアクションボタン"},"aliases":[{"name":"FAB","source":"Material Design 3","url":"https://m3.material.io/components/floating-action-button/overview"},{"name":"FloatButton","source":"Ant Design","url":"https://ant.design/components/float-button"}],"summary":{"en":"A button that floats in front of a screen’s content and stays in place while it scrolls, for the screen’s main action.","ja":"画面の内容の手前に浮かび、スクロールしても同じ位置にとどまる、その画面の主な操作のためのボタンです。"},"appearance":{"en":"A button with a single clear icon, such as a plus, over the content, usually in the lower right corner of the screen. Material Design 3 describes a square container and MUI typically a circle; either way it needs enough contrast against the surface under it. In this demo, a plus button floats over a small notes screen, and the list of notes scrolls beneath it.","ja":"「＋」のような分かりやすいアイコン1つを付けたボタンで、内容の上、多くは画面の右下の隅に重なっています。Material Design 3 は四角い容器、MUI は多くの場合円形で説明していますが、どちらでも下の面とのコントラストが十分に要ります。このデモでは、小さなメモの画面の上に「＋」のボタンが浮かび、その下でメモの一覧がスクロールします。"},"behavior":[{"en":"Pressing it runs the screen’s main action once, or opens a new screen to carry it out, such as creating something.","ja":"押すと、その画面の主な操作を1回実行するか、操作のための新しい画面を開きます。たとえば何かを作る操作です。"},{"en":"It stays in place while the content behind it scrolls. Material Design 3 also says it should disappear and reappear when the screen changes, such as when switching between tabs, to show that it does not belong to any one tab.","ja":"後ろの内容がスクロールしても、同じ位置にとどまります。Material Design 3 は、タブの切り替えのように画面が変わるときには、いったん消えて現れ直すものとも書いています。特定のタブに属さないことを示すためです。"},{"en":"Because it floats over the content, it can cover part of whatever has keyboard focus. Material Design 3 allows it to cover a focusable element partly as long as the focus indicator stays clearly visible, and WCAG 2.4.11 is not met only when the focused element is entirely hidden.","ja":"内容の上に浮かぶので、キーボードのフォーカスがある部分を覆ってしまうことがあります。Material Design 3 は、フォーカスの表示がはっきり見えていれば、操作できる要素を一部覆うことを認めています。WCAG 2.4.11 を満たさないのは、フォーカスのある要素が完全に隠れたときです。"},{"en":"In this demo, the button is placed with `position: absolute` inside the screen, not fixed to the page, so it stays within the demo frame. It comes before the list in the page order, so Tab reaches it first even though it sits at the lower right. Material Design 3 asks for the button to be prioritized in the focus order; the cost is that the Tab order and the visual order differ.","ja":"このデモでは、ボタンをページに固定せず、画面の中で `position: absolute` を使って重ねているので、デモの枠から出ません。ページ内の順序ではリストより前にあるため、見た目は右下でも、Tab キーはまずボタンに届きます。Material Design 3 はボタンをフォーカスの順序の中で優先するよう求めていますが、引き換えに、Tab の順序と見た目の順序が違います。"},{"en":"In this demo, the list has empty space and scroll padding below its last row. In Chrome, moving focus to a row scrolls it clear of the button, so no row sits under the button while it has focus. Firefox scrolls only when a row would leave the list, so a focused row can sit slightly under the button, and it also stops Tab on the scrolling list itself. Without them, a focused row near the bottom ends up partly under the button, though never entirely hidden. The button covers the end of some unfocused rows’ text, which is more noticeable at a narrow width with large text. In this demo, there is no tooltip. Pressing the button shows the result in the line under the screen.","ja":"このデモでは、リストの最後の行の下に空きと scroll padding を取っています。Chrome では、行にフォーカスを移すと、その行がボタンの下から出る位置までスクロールし、フォーカスのある行がボタンの下に入りません。Firefox は行がリストの外へ出るときだけスクロールするので、フォーカスのある行が少しボタンの下に入ることがあり、Tab はスクロールするリスト自体にも止まります。これがないと、下のほうでフォーカスの移った行は一部がボタンの下に入りますが、完全には隠れません。フォーカスのない行は、幅が狭く文字が大きいと、行の末尾の文字がボタンに隠れることがあります。このデモではツールチップを付けていません。ボタンを押すと、画面の下の行に結果が出ます。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus to the button. Material Design 3 asks for the button to be prioritized in the focus order.","ja":"ボタンにフォーカスを移します。Material Design 3 は、ボタンをフォーカスの順序の中で優先するよう求めています。"}},{"key":"Enter / Space","action":{"en":"Presses the button.","ja":"ボタンを押します。"}}],"variations":[{"name":{"en":"FAB (icon only)","ja":"FAB（アイコンのみ）"},"description":{"en":"Only an icon, so its name comes from an accessible name such as “Compose a new message”. Material Design 3 recommends showing a tooltip with the label when it is hovered or focused on the web.","ja":"アイコンだけのものです。名前は「新しいメッセージを作成」のようなアクセシブルな名前で伝えます。Material Design 3 は、ウェブではホバーやフォーカスで、ラベルを書いたツールチップを出すよう勧めています。"}},{"name":{"en":"Extended FAB (icon and label)","ja":"拡張 FAB（アイコンとラベル）"},"description":{"en":"An icon with a text label. Material Design 3 uses it when the label text is necessary, and lets it collapse into an icon-only FAB on scroll and expand again at the bottom of the view; MUI makes it a variant, and Ant Design allows its text only on a square button.","ja":"アイコンに文字のラベルを添えたものです。Material Design 3 はラベルの文字が必要なときに使い、スクロールでアイコンだけの FAB に縮み、末尾まで来ると広がることもあるとしています。MUI は variant の1つとして用意し、Ant Design は文字を付けられるのを四角いボタンのときだけにしています。"}}],"usage":[{"en":"Both Material Design 3 and MUI reserve it for the one main action of a screen, and MUI says to use it only when it is the most suitable way to show that action. Material Design 3 says not every screen needs one, for example when images already stand for the main actions, and lists multiple FABs on one screen as a “don’t”; MUI recommends one per screen. When many kinds of actions relate to it, a FAB menu is the alternative.","ja":"Material Design 3 も MUI も、1つの画面の主な操作1つのために使うとしています。MUI は、その操作を見せるのに最もふさわしい方法であるときだけ使うよう書いています。Material Design 3 は、画像がすでに主な操作を表している場合のように、すべての画面に要るわけではないとしています。また、1つの画面に複数の FAB を置くことを「してはいけない」例に挙げ、MUI も1画面に1つを勧めています。関わる操作が何種類もあるときは FAB メニューにします。"},{"en":"Material Design 3 suggests actions such as create, favorite, share and start a process, and says cards and similar components should not each have their own FAB. Because a FAB promotes an important, constructive action, it also lists actions a FAB should not carry: archive or trash, alerts or errors, limited tasks such as cutting text, and controls better suited to a toolbar. Ant Design’s FloatButton is broader: it is for site-wide functions and buttons visible wherever people browse.","ja":"Material Design 3 は、作る、お気に入りに入れる、共有する、処理を始める、といった操作を挙げ、カードなどの部品ごとに FAB を置かないとしています。FAB は重要で前向きな操作を押し出すものなので、アーカイブや削除、アラートやエラー、文字を切り取るような限られた作業、ツールバーのほうが合う操作は、載せないものとして挙げています。Ant Design の FloatButton はもっと広く、サイト全体の機能や、どこを見ていても見えるボタンのためのものとされています。"},{"en":"Material Design 3 and MUI are guidance for apps and component libraries, not rules for the web. Of the sources here, only WCAG 2.4.11 is a web requirement, at Level AA: a focused component must not be entirely hidden by author-created content such as sticky content. Its Understanding document names scroll padding as one way to keep a sticky banner from overlapping what has focus.","ja":"Material Design 3 と MUI はアプリや部品ライブラリの指針で、ウェブの決まりではありません。ここに挙げた資料のうちウェブの要件なのは WCAG 2.4.11（レベル AA）だけで、フォーカスのある部品が、固定された内容のような制作者の作った内容に完全には隠れないことを求めます。その解説の文書は、固定されたバナーがフォーカスのある部分と重ならないようにする方法の1つとして、scroll padding を挙げています。"},{"en":"Material Design 3 says to name the button for the action it performs, such as “Compose a new message”; to keep the icon at least 3:1 against its container; and not to disable it, but to leave it out when the action is unavailable. For compact and medium windows it suggests the lower right corner, and for wide windows the upper left, such as in a navigation rail, though it says to test that placement with people.","ja":"Material Design 3 は、ボタンの名前を「新しいメッセージを作成」のように、行う操作を表すものにし、アイコンと背景の色の比を3:1以上にし、無効にはせず、操作が使えないときは出さないよう書いています。置く場所は、狭い画面と中くらいの画面では右下の隅、広い画面ではナビゲーションレールのように左上を勧めていますが、その位置は人に試してもらって確かめるよう添えています。"},{"en":"Material Design 3 has three sizes: FAB, medium FAB (the most recommended) and large FAB; the small FAB is no longer recommended. When many kinds of actions relate to the button, it can open into a FAB menu.","ja":"Material Design 3 の大きさは、FAB、中サイズの FAB（最も推奨）、大サイズの FAB の3つで、小さな FAB はもう推奨されていません。ボタンに関わる操作が何種類もあるときは、FAB メニューへ開くこともできます。"}],"misuse":[{"pattern":{"en":"Letting the floating button cover what has keyboard focus","ja":"浮かぶボタンで、キーボードのフォーカスがある部分を覆う"},"harm":{"en":"A button fixed over the content always hides part of what is under it, which the Digital Agency Design System says, of its scroll top button, gets in the way of reading for people who zoom in. If it entirely hides the focused element, people on a keyboard may not know how to proceed or may think the system has stopped responding, and WCAG 2.4.11 is not met.","ja":"内容の上に固定したボタンは、下の内容の一部を常に隠します。デジタル庁デザインシステムは、スクロールトップボタンについて、それが拡大して見ている人の閲覧を妨げると書いています。フォーカスのある要素を完全に隠すと、キーボードを使う人はどう進めばよいか分からなくなったり、システムが反応しなくなったと思ったりすることがあり、WCAG 2.4.11 を満たしません。"},"instead":{"en":"Leave empty space under the scrolling content, or use scroll padding, so a focused item scrolls clear of the button. Material Design 3 allows a partial overlap only while the focus indicator stays clearly visible.","ja":"スクロールする内容の下に空きを取るか scroll padding を使い、フォーカスの移った項目がボタンの下から出るようにします。Material Design 3 は、フォーカスの表示がはっきり見えているあいだに限り、一部が重なるのを認めています。"}}],"related":[{"id":"button","diff":{"en":"A floating action button is a button for a screen’s main action that floats in front of the content and stays put as it scrolls; a button runs any action in its place in the layout.","ja":"フローティングアクションボタンは画面の主な操作のためのボタンで、内容の手前に浮かんでスクロールしても動きません。ボタンはレイアウトの中の決まった場所で、さまざまな操作を実行します。"}},{"id":"back-to-top","diff":{"en":"A floating action button stands for the main action of a screen, such as creating something; a back to top button has one job, returning to the top.","ja":"フローティングアクションボタンは何かを作るなど、画面の主な操作を受け持ちます。スクロールトップボタンは先頭へ戻ることだけを受け持ちます。"}},{"id":"bottom-navigation","diff":{"en":"A floating action button runs one main action and floats over the content; bottom navigation moves between a few top-level destinations in a bar along the bottom of the screen.","ja":"フローティングアクションボタンは主な操作を1つ実行して内容の上に浮かびます。ボトムナビゲーションは画面の下のバーで、いくつかの最上位の行き先の間を移ります。"}}],"sources":[{"label":"Material Design 3: FAB (Overview)","url":"https://m3.material.io/components/floating-action-button/overview","checkedAt":"2026-11-03"},{"label":"Material Design 3: FAB (Guidelines)","url":"https://m3.material.io/components/floating-action-button/guidelines","checkedAt":"2026-11-03"},{"label":"Material Design 3: FAB (Accessibility)","url":"https://m3.material.io/components/floating-action-button/accessibility","checkedAt":"2026-11-03"},{"label":"MUI: Floating Action Button","url":"https://mui.com/material-ui/react-floating-action-button/","checkedAt":"2026-11-03"},{"label":"Ant Design: FloatButton","url":"https://ant.design/components/float-button","checkedAt":"2026-11-03"},{"label":"Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html","checkedAt":"2026-11-03"},{"label":"デジタル庁デザインシステムウェブサイト「スクロールトップボタン」をもとに作成","url":"https://design.digital.go.jp/dads/components/scroll-top-button/","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/floating-action-button/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/floating-action-button/"}},{"id":"footer","category":"navigation","names":{"en":"Footer","ja":"フッター"},"aliases":[{"name":"GOV.UK footer","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/footer/"},{"name":"Footer","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/footer/"}],"summary":{"en":"The area at the bottom of a page for information that applies to the whole site, such as the copyright notice and links to its policies and contact details.","ja":"ページの下端に置く領域で、著作権の表示や、サイトの方針、連絡先へのリンクなど、サイト全体に関わる情報を収めます。"},"appearance":{"en":"A band across the bottom of every page. It has a copyright line, usually with a row of links such as Privacy and Accessibility. A larger footer repeats the site’s navigation in columns and may add contact details or a newsletter sign-up.","ja":"すべてのページの下端にある帯です。著作権の行があり、ふつうはプライバシーやアクセシビリティなどのリンクの並びが添えられます。大きなフッターでは、サイトのナビゲーションを列で繰り返し、連絡先やニュースレターの登録を加えることもあります。"},"behavior":[{"en":"It serves visitors who reach the bottom of a page without finding what they wanted, so its links should point to content that may answer their remaining questions.","ja":"ページの下端まで来ても探しているものが見つからなかった訪問者の役に立つ場所で、リンクは、残った疑問に答えそうな内容へ向けます。"},{"en":"A `<footer>` that is not inside `<article>`, `<aside>`, `<main>`, `<nav>` or `<section>`, or an element with one of those roles, is exposed as the contentinfo landmark, so screen reader users can jump to it. Inside one of those, it is only the footer of that part, such as an article’s author details and copyright, and is not a landmark.","ja":"`<article>`、`<aside>`、`<main>`、`<nav>`、`<section>`、またはそれらのロールを持つ要素の中にない `<footer>` は contentinfo のランドマークとして公開されるので、スクリーンリーダーの利用者はそこへ直接移れます。これらの中にある場合は、記事の筆者の情報や著作権など、その部分だけのフッターで、ランドマークにはなりません。"},{"en":"In the U.S. Web Design System’s big footer, the navigation columns collapse into accordions on small screens, and Tab still moves from link to link.","ja":"U.S. Web Design System の大きなフッターでは、小さな画面でナビゲーションの列がアコーディオンにたたまれますが、Tab キーは今までどおりリンクからリンクへ移ります。"},{"en":"In this demo, the footer is in normal flow and does not stay fixed. Because it sits inside this page’s `<main>`, it does not become a contentinfo landmark here; at the bottom of a real page it would. This site’s own footer is the contentinfo on this page. The `<nav>` inside it keeps its label and is still a navigation landmark.","ja":"このデモでは、フッターは通常の流れに置き、固定しません。このページの `<main>` の中にあるため、ここでは contentinfo のランドマークにならず、実際のページの下端に置いたときにはなります。このページの contentinfo はサイト自身のフッターです。中の `<nav>` は名前を持ったまま、navigation のランドマークです。"},{"en":"In this demo, the links do not navigate. Choosing one shows below the box where a real site would go.","ja":"このデモでは、リンクは移動しません。リンクを選ぶと、実際のサイトならどこへ移動するかを枠の下に表示します。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus to the next or previous link in the footer.","ja":"フッターの次のリンク、前のリンクへフォーカスを移します。"}},{"key":"Enter","action":{"en":"Follows the link that has focus.","ja":"フォーカスのあるリンクをたどります。"}}],"variations":[{"name":{"en":"Big","ja":"大"},"description":{"en":"A multi-column footer that repeats the site’s navigation, and can offer a newsletter sign-up. The U.S. Web Design System suggests it when the footer has more than five links.","ja":"サイトのナビゲーションを列にして繰り返す、複数の列のフッターで、ニュースレターの登録も置けます。U.S. Web Design System は、リンクが5つを超えるときに勧めています。"}},{"name":{"en":"Medium","ja":"中"},"description":{"en":"A few links for disclaimers or terms of service, plus social media icons and contact information.","ja":"免責事項や利用規約などへの少数のリンクに、ソーシャルメディアのアイコンと連絡先を加えたものです。"}},{"name":{"en":"Slim","ja":"スリム"},"description":{"en":"A compact footer with only a few links and nothing else.","ja":"少数のリンクだけを置く、小さなフッターです。"}},{"name":{"en":"With secondary navigation","ja":"補助ナビゲーション付き"},"description":{"en":"The GOV.UK footer can add titled lists of links to move around the wider GOV.UK site. It suits a GOV.UK service where leaving is acceptable, but probably not a linear, form-type service.","ja":"GOV.UK のフッターには、GOV.UK の広いサイトの中を移るための、見出し付きのリンクの一覧を加えられます。サイトの外へ出てもよい GOV.UK のサービス向きで、一本道のフォーム形式のサービスにはおそらく向きません。"}}],"usage":[{"en":"Put it at the bottom of every page, with a copyright notice that says who owns the copyright and, where it applies, how the content may be reused.","ja":"すべてのページの下端に置き、だれが著作権を持つかと、該当するときは内容をどう再利用できるかを示す、著作権の表示を入れます。"},{"en":"Keep it to links to popular content. Legal links are sometimes required, but try to keep “disclaimer bloat” to a minimum. The footer does not need to mirror the header’s grouping.","ja":"リンクは、よく見られる内容へのものに絞ります。法的な内容へのリンクが必要なことはありますが、免責事項を増やしすぎないようにします。フッターのまとまりは、ヘッダーに合わせる必要はありません。"},{"en":"GOV.UK suggests the link texts “Privacy”, “Accessibility”, “Cookies” and “Terms and conditions”. Keep help links in the same place on every page, to meet WCAG 2.2 success criterion 3.2.6 Consistent Help.","ja":"GOV.UK は、リンクの文言に「Privacy」「Accessibility」「Cookies」「Terms and conditions」を挙げています。ヘルプへのリンクは、WCAG 2.2 の達成基準 3.2.6（一貫したヘルプ）を満たすため、どのページでも同じ位置に置きます。"},{"en":"Limit contact details to a general email address and phone number, as links people can tap to call. Leave physical addresses to a contact page. Link only to social media accounts that are updated often.","ja":"連絡先は、全体の問い合わせのメールアドレスと電話番号に絞り、押して発信できるリンクにします。所在地は連絡先のページに任せます。ソーシャルメディアは、よく更新しているアカウントだけにリンクします。"},{"en":"A page may have one contentinfo landmark, and each nested document, such as an `<iframe>`, may have its own. If a page does have more than one, give each a unique label.","ja":"contentinfo のランドマークは、1ページに1つとします。`<iframe>` のような入れ子の文書は、それぞれ1つ持てます。1ページに複数あるときは、それぞれに異なる名前を付けます。"}],"misuse":[{"pattern":{"en":"Keeping the footer fixed to the bottom of the screen with no room left for it as focus moves down the page","ja":"フッターを画面の下端に固定し、フォーカスが下へ進むときにその分の余白を残さない"},"harm":{"en":"A fixed footer can cover the item that has keyboard focus. Then people who use the keyboard cannot see where focus is, and may think the page has stopped responding.","ja":"固定したフッターが、キーボードのフォーカスがある項目を覆うことがあります。キーボードで操作する人はフォーカスの位置が見えず、ページが反応しなくなったと思うことがあります。"},"instead":{"en":"Leave the footer in normal flow at the end of the page. If it must stay fixed, make sure a focused item is never hidden under it, for example with CSS scroll-padding (WCAG technique C43).","ja":"フッターはページの終わりの通常の流れに置きます。固定する場合は、フォーカスのある項目がその下に隠れないようにします。たとえば CSS の scroll-padding を使います（WCAG の技法 C43）。"}}],"related":[{"id":"header","diff":{"en":"A footer holds information about the whole site, such as the copyright notice and policy links, at the bottom of every page; a header holds the site’s identity and main navigation at the top.","ja":"フッターは各ページの下端に、著作権の表示や方針へのリンクなど、サイト全体に関わる情報を収め、ヘッダーは上端に、サイトを示すものと主なナビゲーションを収めます。"}}],"sources":[{"label":"WAI-ARIA APG: Landmark Regions","url":"https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/","checkedAt":"2026-11-03"},{"label":"WAI-ARIA APG: Contentinfo Landmark","url":"https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/contentinfo.html","checkedAt":"2026-11-03"},{"label":"MDN: <footer>: The Footer element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer","checkedAt":"2026-11-03"},{"label":"GOV.UK Design System: Footer","url":"https://design-system.service.gov.uk/components/footer/","checkedAt":"2026-11-03"},{"label":"U.S. Web Design System: Footer","url":"https://designsystem.digital.gov/components/footer/","checkedAt":"2026-11-03"},{"label":"Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html","checkedAt":"2026-11-03"},{"label":"WCAG 2.2 Technique C43: Using CSS scroll-padding to un-obscure content","url":"https://www.w3.org/WAI/WCAG22/Techniques/css/C43","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/footer/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/footer/"}},{"id":"hamburger-menu","category":"action","names":{"en":"Hamburger menu button","ja":"ハンバーガーメニューボタン"},"aliases":[{"name":"ハンバーガーメニューボタン","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/hamburger-menu-button/"}],"summary":{"en":"A button with three stacked lines that opens the site’s menu, mainly on phones.","ja":"3本線のアイコンが付いた、サイトのメニューを開くボタンです。主にスマートフォンで使います。"},"appearance":{"en":"An icon of three horizontal lines with the word “Menu” beside it, at the left or right end of the page header. Once the menu is open, a button of the same shape shows an × and the word “Close”.","ja":"水平線3本のアイコンと「メニュー」の文字を並べたボタンで、ページのヘッダーの左端か右端に置きます。メニューを開くと、同じ形のボタンがバツ印と「閉じる」の文字に変わって見えます。"},"behavior":[{"en":"Pressing it opens the mobile menu, for example in a drawer that comes out from the edge of the screen.","ja":"押すと、モバイルメニューが開きます。たとえば、画面の端から出てくるドロワーに入れて開きます。"},{"en":"Pressing the Close button in the open menu closes it.","ja":"開いたメニューの中にある「閉じる」ボタンを押すと閉じます。"},{"en":"In this demo, the Menu button opens the menu as a modal `<dialog>` (the WAI-ARIA APG Dialog (Modal) pattern), and the Close button is a separate button inside it, as in the Digital Agency Design System drawer example. While the dialog is open the rest of the page, including the Menu button, is inert, so the Menu button has no `aria-expanded`. To make the movement easy to see, the menu opens inside the demo frame and dims only the frame.","ja":"このデモでは、「メニュー」ボタンでメニューをモーダルの `<dialog>` として開き（WAI-ARIA APG の Dialog (Modal) パターン）、デジタル庁デザインシステムのドロワーの実装例と同じく、「閉じる」ボタンはその中に別のボタンとして置きます。開いている間は「メニュー」ボタンを含むページのほかの部分を操作できないので、`aria-expanded` は付けません。動きが分かりやすいよう、メニューはデモの枠の中に出し、枠の中だけを暗くします。"},{"en":"In this demo, choosing a link closes the menu and shows where it would go instead of leaving the page. Clicking the dimmed background also closes the menu.","ja":"このデモでは、リンクを選ぶとメニューを閉じ、ページを移らずに行き先を表示します。暗くした背景をクリックしても閉じます。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"On the Menu button, opens the menu. On the Close button, closes it and returns focus to the Menu button.","ja":"「メニュー」ボタンではメニューを開きます。「閉じる」ボタンではメニューを閉じ、「メニュー」ボタンにフォーカスを戻します。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the Close button and the links inside the open menu.","ja":"開いたメニューの中で、「閉じる」ボタンとリンクの間を移動します。"}},{"key":"Esc","action":{"en":"Closes the menu and returns focus to the Menu button.","ja":"メニューを閉じ、「メニュー」ボタンにフォーカスを戻します。"}}],"variations":[{"name":{"en":"Desktop and mobile (label beside the icon)","ja":"デスクトップ・モバイル共通（文字をアイコンの横に置く）"},"description":{"en":"A wide button with the word “Menu” to the right of the icon, as in this demo. The Digital Agency Design System uses this type as a rule.","ja":"このデモのように、アイコンの右に「メニュー」の文字を並べた横長のボタンです。デジタル庁デザインシステムは原則としてこの型を使います。"}},{"name":{"en":"Mobile conditional (label under the icon)","ja":"モバイル条件付き（文字をアイコンの下に置く）"},"description":{"en":"A nearly square button with the word “Menu” under the icon, for headers too short of space for the side-by-side type. The word follows the page language, such as “MENU” and “CLOSE” on English pages.","ja":"アイコンの下に「メニュー」の文字を置いた、正方形に近いボタンです。ヘッダーに横長の型を置く場所がないときだけ使います。文字はページの言語に合わせ、英語のページでは「MENU」「CLOSE」にします。"}}],"usage":[{"en":"Place it at the left or right end of the header.","ja":"ヘッダーの左端か右端に置きます。"}],"misuse":[{"pattern":{"en":"Showing only the three-line icon, without the word “Menu”","ja":"3本線のアイコンだけを置き、「メニュー」の文字を付けない"},"harm":{"en":"Most people now recognize the icon, but not everyone does. People less used to digital services, or who meet the icon in an unfamiliar layout, may not understand that it opens a menu.","ja":"今では多くの人がアイコンの意味を知っていますが、全員ではありません。デジタル機器に慣れていない人や、見慣れない画面でこのアイコンに出会った人は、メニューが開くことに気づかないことがあります。"},"instead":{"en":"Put the word “Menu” beside the icon. If the header is too short of space, put the word under the icon instead of dropping it.","ja":"アイコンの横に「メニュー」の文字を置きます。ヘッダーに場所がなければ、文字を省かずにアイコンの下に置きます。"}},{"pattern":{"en":"Hiding the main navigation behind the button on desktop screens as well","ja":"デスクトップの画面でも、主なナビゲーションをこのボタンの奥に隠す"},"harm":{"en":"People find the site’s content far less often than when the navigation is visible, take longer, and find the tasks harder. The drop is largest on desktop, where many people did not even notice the button.","ja":"ナビゲーションが見えている場合より、利用者がコンテンツを見つけにくくなり、時間がかかり、難しいと感じます。この差はデスクトップで特に大きく、ボタンに気づきもしない人が多くいました。"},"instead":{"en":"On wide screens, show the top-level links across the page header, and keep the button for narrow screens.","ja":"画面が広いときは最上位のリンクをヘッダーに横に並べて見せ、このボタンは画面が狭いときに使います。"}}],"related":[{"id":"drawer","diff":{"en":"A hamburger menu button is only the trigger; the drawer is the panel it opens from the edge of the screen.","ja":"ハンバーガーメニューボタンは開くきっかけになるボタンで、ドロワーはこのボタンで画面の端から開くパネルです。"}},{"id":"menu","diff":{"en":"A hamburger menu button opens the site’s navigation links; a menu button opens a short list of actions right under itself.","ja":"ハンバーガーメニューボタンはサイトのナビゲーションのリンクを開き、メニューボタンは自分のすぐ下に操作の短い一覧を開きます。"}},{"id":"mobile-menu","diff":{"en":"A hamburger menu button is the button that opens the menu; the mobile menu is the list of links shown once it opens.","ja":"ハンバーガーメニューボタンはメニューを開くボタンで、モバイルメニューは開いたときに出るリンクの一覧です。"}},{"id":"bottom-navigation","diff":{"en":"A hamburger menu button keeps the destinations behind one button that opens the menu; bottom navigation shows them in a bar at the bottom of the screen, which the Digital Agency Design System no longer recommends.","ja":"ハンバーガーメニューボタンは行き先を1つのボタンの後ろに置いてメニューを開き、ボトムナビゲーションは行き先を画面の下のバーに見せます。デジタル庁デザインシステムは、ボトムナビゲーションを勧めていません。"}},{"id":"header","diff":{"en":"A hamburger menu button is one control that opens the menu when the links no longer fit; a header is the whole band at the top of a page that holds it.","ja":"ハンバーガーメニューボタンは、リンクが収まらないときにメニューを開く1つの部品で、ヘッダーはそれを収めるページの上端の帯全体です。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「ハンバーガーメニューボタン」をもとに作成","url":"https://design.digital.go.jp/dads/components/hamburger-menu-button/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「ハンバーガーメニューボタン（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/hamburger-menu-button/usage/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: hamburger-menu-button","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/hamburger-menu-button","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: drawer","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/drawer","checkedAt":"2026-10-21"},{"label":"Nielsen Norman Group: The Hamburger-Menu Icon Today: Is it Recognizable?","url":"https://www.nngroup.com/articles/hamburger-menu-icon-recognizability/","checkedAt":"2026-10-21"},{"label":"Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt UX Metrics","url":"https://www.nngroup.com/articles/hamburger-menus/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Dialog (Modal) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/","checkedAt":"2026-10-22"},{"label":"MDN: <dialog>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/hamburger-menu/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/hamburger-menu/"}},{"id":"header","category":"navigation","names":{"en":"Header","ja":"ヘッダー"},"aliases":[{"name":"GOV.UK header","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/header/"},{"name":"GOV.UK masthead","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/header/"},{"name":"Header","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/header/"},{"name":"ヘッダーコンテナ","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/header-container/"}],"summary":{"en":"The band across the top of a page that says which site you are on and holds the main way to move around it.","ja":"ページの上端に置く帯で、今どのサイトにいるかを示し、サイトの中を移動するための主な入り口を収めます。"},"appearance":{"en":"A full-width band at the top of every page. The site name or logo sits at the left, with a row of links to the main sections beside it. Some sites add a search box, a language selector or sign-in links. On a narrow screen the links often fold into a menu button.","ja":"すべてのページの上端にある、横幅いっぱいの帯です。左にサイト名かロゴがあり、その横に主なセクションへのリンクが並びます。検索ボックスや言語の切り替え、ログインのリンクを加えるサイトもあります。画面が狭いと、リンクはメニューのボタンにまとめられることが多くあります。"},"behavior":[{"en":"The site name or logo is a link to the home page, and the link for the section you are in is highlighted.","ja":"サイト名やロゴはホームページへのリンクで、今いるセクションのリンクは目立たせて示します。"},{"en":"A `<header>` that is not inside `<article>`, `<aside>`, `<main>`, `<nav>` or `<section>`, or an element with one of those roles, is exposed as the banner landmark, so screen reader users can jump to it. Inside one of those, it only groups the introductory content of that part, is not a landmark, and cannot be given a name with `aria-label`.","ja":"`<article>`、`<aside>`、`<main>`、`<nav>`、`<section>`、またはそれらのロールを持つ要素の中にない `<header>` は banner のランドマークとして公開されるので、スクリーンリーダーの利用者はそこへ直接移れます。これらの中にある場合は、その部分の導入にあたる内容をまとめるだけでランドマークにはならず、`aria-label` で名前を付けることもできません。"},{"en":"When the screen is narrow, the items and links are folded into a menu that a button opens and closes, as in the Digital Agency Design System header container.","ja":"画面が狭いと、項目やリンクはボタンで開閉するメニューにまとめられます。デジタル庁デザインシステムのヘッダーコンテナがその例です。"},{"en":"In this demo, the header is in normal flow and does not stay fixed. Because it sits inside this page’s `<main>`, it does not become a banner landmark here; at the top of a real page it would. This site’s own header is the banner on this page. The `<nav>` inside it keeps its label and is still a navigation landmark.","ja":"このデモでは、ヘッダーは通常の流れに置き、固定しません。このページの `<main>` の中にあるため、ここでは banner のランドマークにならず、実際のページの上端に置いたときにはなります。このページの banner はサイト自身のヘッダーです。中の `<nav>` は名前を持ったまま、navigation のランドマークです。"},{"en":"In this demo, the links do not navigate. Choosing a link marks it as the current page, changes the heading below and announces the current page in a status line. The site name goes back to Home but is not marked as current, so Home is not announced twice.","ja":"このデモでは、リンクは移動しません。リンクを選ぶと、そのリンクが現在のページになり、下の見出しが変わって、現在のページが状態表示の行で読み上げられます。サイト名はホームに戻りますが、現在地の印は付けないので、ホームが二重に読み上げられることはありません。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus to the next or previous link in the header.","ja":"ヘッダーの次のリンク、前のリンクへフォーカスを移します。"}},{"key":"Enter","action":{"en":"Follows the link that has focus.","ja":"フォーカスのあるリンクをたどります。"}}],"variations":[{"name":{"en":"Basic","ja":"基本"},"description":{"en":"The logo and a row of main links side by side, for a site with a modest number of sections. The U.S. Web Design System can add dropdown menus and a search box.","ja":"ロゴと主なリンクを横に並べたもので、セクションの数がそれほど多くないサイトに向きます。U.S. Web Design System では、ドロップダウンのメニューや検索ボックスを加えられます。"}},{"name":{"en":"Extended","ja":"拡張"},"description":{"en":"For a site with more sections than fit next to the logo, or one that wants secondary links such as Log in and Sign up. It takes more space than the basic header.","ja":"ロゴの横に収まらないほどセクションが多いサイトや、ログインや新規登録のような副次的なリンクを加えたいサイト向けです。基本より場所をとります。"}},{"name":{"en":"Logo only","ja":"ロゴだけ"},"description":{"en":"The GOV.UK header shows only the GOV.UK logo and any GOV.UK-wide links. A service’s own name and links go in the separate Service navigation component. GOV.UK also has a Generic header for government services that are not on the GOV.UK website, which likewise has only a logo and no navigation links.","ja":"GOV.UK のヘッダーには、GOV.UK のロゴと GOV.UK 全体のリンクだけを置きます。サービス自身の名前やリンクは、別の Service navigation 部品に入れます。GOV.UK には、GOV.UK のサイトにない政府のサービス向けの Generic header もあり、こちらもロゴだけで、ナビゲーションのリンクは置きません。"}}],"usage":[{"en":"Use it on every page for what identifies the site and leads to its main sections. GOV.UK requires its header at the top of every page of a service on GOV.UK.","ja":"サイトを示すものと、主なセクションへの入り口を収めて、すべてのページに置きます。GOV.UK は、GOV.UK 上のサービスのすべてのページの先頭にヘッダーを置くよう求めています。"},{"en":"Keep link labels short and plain, put the most wanted links first, and mark the current section. Base the sections on the tasks people come for, not on how the organization is arranged.","ja":"リンクのラベルは短く平易にして、よく使われるものを先に置き、今いるセクションを示します。セクションは組織の構成ではなく、利用者が済ませたい作業をもとに決めます。"},{"en":"Put a skip link before the header, so keyboard users can go straight to the main content.","ja":"ヘッダーの前にスキップリンクを置き、キーボードの利用者が本文へ直接移れるようにします。"},{"en":"Label the `<nav>` with `aria-label` when the page has more than one, and write the links as list items. Give a logo image alternative text. For a text logo, use `<em>` rather than `<h1>` except on the home page.","ja":"ページに `<nav>` が複数あるときは `aria-label` で区別し、リンクはリストの項目として書きます。ロゴが画像なら代替テキストを付けます。文字のロゴは、ホームページを除き、`<h1>` ではなく `<em>` にします。"},{"en":"A page may have one banner landmark, and each nested document, such as an `<iframe>`, may have its own. If a page does have more than one, give each a unique label.","ja":"banner のランドマークは、1ページに1つとします。`<iframe>` のような入れ子の文書は、それぞれ1つ持てます。1ページに複数あるときは、それぞれに異なる名前を付けます。"}],"misuse":[{"pattern":{"en":"Keeping the header fixed to the top of the screen with no room left for it as focus moves down the page","ja":"ヘッダーを画面の上端に固定し、フォーカスが下へ進むときにその分の余白を残さない"},"harm":{"en":"A fixed header can cover the item that has keyboard focus. Then people who use the keyboard cannot see where focus is, and may think the page has stopped responding.","ja":"固定したヘッダーが、キーボードのフォーカスがある項目を覆うことがあります。キーボードで操作する人はフォーカスの位置が見えず、ページが反応しなくなったと思うことがあります。"},"instead":{"en":"Leave the header in normal flow. If it must stay fixed, make sure a focused item is never hidden under it, for example with CSS scroll-padding (WCAG technique C43).","ja":"ヘッダーは通常の流れに置きます。固定する場合は、フォーカスのある項目がその下に隠れないようにします。たとえば CSS の scroll-padding を使います（WCAG の技法 C43）。"}},{"pattern":{"en":"Opening dropdown menus in the header only when the pointer hovers","ja":"ヘッダーのドロップダウンのメニューを、ポインターを重ねたときだけ開く"},"harm":{"en":"Hover is difficult for some people and does not work on touch screens.","ja":"ポインターを重ねる操作が難しい人がいて、タッチスクリーンでも使えません。"},"instead":{"en":"Open dropdowns on click or from the keyboard.","ja":"ドロップダウンは、クリックかキーボードで開きます。"}}],"related":[{"id":"footer","diff":{"en":"A header holds the site’s identity and main navigation at the top of every page; a footer holds information about the whole site, such as the copyright notice and policy links, at the bottom.","ja":"ヘッダーは各ページの上端にサイトを示すものと主なナビゲーションを収め、フッターは下端に、著作権の表示や方針へのリンクなど、サイト全体に関わる情報を収めます。"}},{"id":"skip-link","diff":{"en":"A header holds the site’s identity and navigation at the top of every page; a skip link comes before it and lets keyboard users jump past it to the main content.","ja":"ヘッダーは各ページの上端にサイトを示すものとナビゲーションを収め、スキップリンクはその前に置いて、キーボードの利用者がヘッダーを飛ばして本文へ移れるようにします。"}},{"id":"side-navigation","diff":{"en":"A header holds the site’s main sections in a row across the top of every page; side navigation lists the pages within one section in a column beside the content.","ja":"ヘッダーは各ページの上端に、サイトの主なセクションを横一列に収め、サイドナビゲーションは、あるセクションの中のページを内容の横の列に並べます。"}},{"id":"hamburger-menu","diff":{"en":"A header is the whole band at the top of a page; a hamburger menu button is one control inside it that opens the menu when the links no longer fit.","ja":"ヘッダーはページの上端の帯全体で、ハンバーガーメニューボタンは、その中にあって、リンクが収まらないときにメニューを開く1つの部品です。"}},{"id":"mega-menu","diff":{"en":"A header is the band at the top of a page that holds the main links; a mega menu is a wide panel that opens from one of those links to show many pages of that section.","ja":"ヘッダーは主なリンクを収めるページの上端の帯で、メガメニューは、そのリンクの1つから開いて、そのセクションの多くのページを見せる幅の広いパネルです。"}}],"sources":[{"label":"WAI-ARIA APG: Landmark Regions","url":"https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/","checkedAt":"2026-11-03"},{"label":"WAI-ARIA APG: Banner Landmark","url":"https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html","checkedAt":"2026-11-03"},{"label":"MDN: <header>: The Header element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header","checkedAt":"2026-11-03"},{"label":"GOV.UK Design System: Header","url":"https://design-system.service.gov.uk/components/header/","checkedAt":"2026-11-03"},{"label":"GOV.UK Design System: Generic header","url":"https://design-system.service.gov.uk/components/generic-header/","checkedAt":"2026-11-03"},{"label":"U.S. Web Design System: Header","url":"https://designsystem.digital.gov/components/header/","checkedAt":"2026-11-03"},{"label":"デジタル庁デザインシステムウェブサイト「ヘッダーコンテナ」をもとに作成","url":"https://design.digital.go.jp/dads/components/header-container/","checkedAt":"2026-11-03"},{"label":"Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html","checkedAt":"2026-11-03"},{"label":"WCAG 2.2 Technique C43: Using CSS scroll-padding to un-obscure content","url":"https://www.w3.org/WAI/WCAG22/Techniques/css/C43","checkedAt":"2026-11-03"},{"label":"デジタル庁デザインシステムウェブサイト「ヘッダーコンテナ（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/header-container/usage/","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/header/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/header/"}},{"id":"language-selector","category":"navigation","names":{"en":"Language selector","ja":"ランゲージセレクター"},"aliases":[{"name":"ランゲージセレクター","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/language-selector/"},{"name":"Language navigation","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/language-navigation/"}],"summary":{"en":"A control that lets people choose the language in which the site is shown.","ja":"サイトを表示する言語を、利用者が選べるようにする部品です。"},"appearance":{"en":"A button with a globe icon in a top corner of the site. Pressing it opens a list of languages, each written in its own language, with a check mark next to the current one.","ja":"サイトの上部の隅にある、地球のアイコンが付いたボタンです。押すと言語の一覧が開き、それぞれの言語名はその言語で書かれ、今の言語にはチェックの印が付きます。"},"behavior":[{"en":"The button is a `<button>` with `aria-expanded` that opens and closes the list (the APG Disclosure pattern). Each language is a link to the same page in that language, so Tab moves through them.","ja":"ボタンは一覧を開閉する `aria-expanded` 付きの `<button>` です（APG の Disclosure パターン）。言語はそれぞれ、同じページのその言語版へのリンクなので、Tab キーで順に移ります。"},{"en":"Each link has `lang` and `hreflang` for its language, so screen readers read the language name in that language. The current language has `aria-current=\"true\"` as well as the check mark and bold text.","ja":"各リンクには、その言語の `lang` と `hreflang` を付け、スクリーンリーダーが言語名をその言語で読めるようにします。今の言語には、チェックの印と太字に加えて `aria-current=\"true\"` を付けます。"},{"en":"Esc closes the list and returns focus to the button. Moving focus out of it or clicking outside it also closes the list.","ja":"Esc で一覧を閉じ、ボタンにフォーカスを戻します。外へフォーカスを移したり、外側をクリックしたりしても閉じます。"},{"en":"The language switch in the header of this site is this component. It shows the name of the current language instead of “Language”, and hides the name on narrow screens.","ja":"このサイトのヘッダーにある言語の切り替えがこの部品です。ボタンには「Language」の代わりに今の言語の名前を出し、狭い画面では名前を隠しています。"},{"en":"In this demo, choosing a language changes the small page in the box instead of moving to another page, then closes the list and returns focus to the button. Moving between the languages with ↑ / ↓ and Home / End is optional in the APG disclosure navigation example, and this demo leaves it out, like the switch in this site’s header.","ja":"このデモでは、言語を選ぶと別のページへは移らず、枠の中の小さなページの言語が変わり、一覧を閉じてボタンにフォーカスを戻します。↑ / ↓ と Home / End で言語の間を移る機能は APG の Disclosure ナビゲーションの例では任意とされており、このデモではこのサイトのヘッダーの切り替えと同じく省いています。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"On the button, opens or closes the list. Enter on a language switches to it.","ja":"ボタンでは一覧を開閉します。言語で Enter を押すと、その言語に切り替わります。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves from the button into the open list and through the languages.","ja":"ボタンから開いている一覧へ進み、言語を順に移ります。"}},{"key":"Esc","action":{"en":"Closes the list and returns focus to the button.","ja":"一覧を閉じ、ボタンにフォーカスを戻します。"}}],"variations":[{"name":{"en":"In the hamburger menu","ja":"ハンバーガーメニューの中"},"description":{"en":"On phones and in layouts that use a hamburger menu, the languages are listed as items in that menu instead.","ja":"スマートフォンや、ハンバーガーメニューを使うレイアウトでは、言語をそのメニューの項目として並べます。"}},{"name":{"en":"Links on the page","ja":"ページに並べたリンク"},"description":{"en":"When a site has only a few languages, links to each of them placed directly on the page, so people can see them right away without opening anything.","ja":"言語の数が少ないサイトで、各言語へのリンクをページに直接並べるものです。何も開かずに、すぐ見つけられます。"}}],"usage":[{"en":"Place it in the top left or top right corner on wide screens.","ja":"広い画面では、画面の左上か右上の隅に置きます。"},{"en":"Write each language name in that language, such as “français” rather than “French”.","ja":"言語名は、「フランス語」ではなく「français」のように、それぞれの言語で書きます。"},{"en":"Offer a choice of language only for a page whose key information is available in the other language. The GOV.UK Design System also says people must not lose data they have entered when they switch language, and that the component should sit in the same place throughout the service.","ja":"もう一方の言語でも主な情報をすべて提供できるページだけに、言語の選択肢を出します。GOV.UK は、言語を切り替えても入力したデータが消えないようにすること、サービス全体で同じ場所に置くことも求めています。"},{"en":"The U.S. Web Design System uses one button for two languages, and a button that opens a list of links for three or more. It says to use the component only when equivalent content is translated, and to mark each language link whose language differs from the page with the `lang` attribute.","ja":"U.S. Web Design System は、言語が2つのときはボタン1つ、3つ以上のときは、押すとリンクの一覧が開くボタンを使います。同じ内容が翻訳されているときだけ使うこと、ページとは別の言語になる言語リンクには `lang` 属性を付けることを求めています。"}],"misuse":[{"pattern":{"en":"Labeling the selector only with words in one language, such as “Select language”","ja":"言語を選ぶ部品のラベルを、「言語を選択」のような1つの言語の言葉だけにする"},"harm":{"en":"People who do not read that language cannot tell that this is where to change the language.","ja":"その言語を読めない人には、ここで言語を変えられることが分かりません。"},"instead":{"en":"Add an icon that does not depend on one language, such as a globe. The Digital Agency Design System puts a globe icon on the button and labels it “Language” in English, whatever the current language.","ja":"地球のような、特定の言語に頼らないアイコンを添えます。デジタル庁デザインシステムは、ボタンに地球のアイコンを付け、ラベルを今の言語にかかわらず英語の「Language」にしています。"}},{"pattern":{"en":"Moving to the other language as soon as an option is chosen in a `<select>`","ja":"`<select>` で選択肢を選んだとたんに、その言語のページへ移る"},"harm":{"en":"People with visual or cognitive disabilities may not notice that the page has changed, or may be thrown off by the change.","ja":"視覚や認知に障害のある人は、ページが変わったことに気づけなかったり、変化に戸惑ったりします。"},"instead":{"en":"Use links to each language, or put a button next to the `<select>` that moves to the chosen language when pressed.","ja":"各言語へのリンクにします。`<select>` を使うなら横にボタンを置き、そのボタンを押したら選んだ言語へ移るようにします。"}}],"related":[{"id":"select","diff":{"en":"A language selector lists links to each language’s version of the page; a select keeps the chosen option as a form value.","ja":"ランゲージセレクターはページの各言語版へのリンクを並べ、セレクトボックスは選んだ選択肢をフォームの値として保持します。"}},{"id":"menu","diff":{"en":"A language selector lists links to the same page in other languages; a menu lists actions to run on the current page.","ja":"ランゲージセレクターは同じページの別の言語版へのリンクを並べ、メニューは今のページで実行する操作を並べます。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「ランゲージセレクター」をもとに作成","url":"https://design.digital.go.jp/dads/components/language-selector/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「ランゲージセレクター（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/language-selector/usage/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: language-selector","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/language-selector","checkedAt":"2026-10-22"},{"label":"W3C Internationalization: Using select to link to localized content","url":"https://www.w3.org/International/questions/qa-navigation-select","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 3.2.2: On Input (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/on-input.html","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 3.1.2: Language of Parts (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/language-of-parts.html","checkedAt":"2026-10-22"},{"label":"WAI-ARIA APG: Example Disclosure Navigation Menu","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/","checkedAt":"2026-10-22"},{"label":"GOV.UK Design System: Language navigation","url":"https://design-system.service.gov.uk/components/language-navigation/","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: Language selector","url":"https://designsystem.digital.gov/components/language-selector/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/language-selector/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/language-selector/"}},{"id":"link","category":"navigation","names":{"en":"Link","ja":"リンク"},"aliases":[],"summary":{"en":"Text or an image that takes the user to another page or another place on the same page.","ja":"別のページや、同じページ内の別の場所へ移動するための文字や画像です。"},"appearance":{"en":"Text in the accent color, usually underlined. It often changes color or underline on hover, and links already visited often have a different color.","ja":"アクセントカラーの文字で、多くは下線が付きます。マウスを乗せると色や下線が変わることが多く、訪問済みのリンクは別の色になることが多いです。"},"behavior":[{"en":"Clicking it opens the destination in the same tab.","ja":"クリックすると、同じタブで移動先が開きます。"},{"en":"The browser also offers opening in a new tab, copying the address, and going back with history.","ja":"新しいタブで開く・アドレスをコピーする・履歴で戻るといった操作も、ブラウザが用意しています。"},{"en":"In this demo, the link in the sentence goes to the Button page of this site. The second link opens the Digital Agency’s page in a new tab with `target=\"_blank\"`, and its icon has `role=\"img\"` and an `aria-label` that says so. The third link opens this site’s preview image, with the file type and size in the link text.","ja":"このデモでは、文中のリンクはこのサイトのボタンのページへ移動します。2つ目のリンクは `target=\"_blank\"` でデジタル庁のページを新しいタブで開き、そのことをアイコンの `role=\"img\"` と `aria-label` で伝えます。3つ目のリンクはこのサイトの紹介画像を開き、ファイルの形式と大きさをリンクの文言に含めています。"},{"en":"In this demo, hovering thickens the underline and changes the color, and visited links turn purple. The weight and size of the text stay the same, so the surrounding text does not move.","ja":"このデモでは、マウスを乗せると下線が太くなって色が変わり、訪問済みのリンクは紫になります。文字の太さや大きさは変えないので、周りの文字は動きません。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus to the link.","ja":"リンクにフォーカスを移します。"}},{"key":"Enter","action":{"en":"Follows the link.","ja":"リンク先へ移動します。"}}],"usage":[{"en":"To move between pages, use links, for example in a horizontal menu. Do not use ARIA tabs (`role=\"tab\"`) for it, since tabs switch content in place.","ja":"ページ間の移動にはリンク（水平メニューなど）を使います。ARIA のタブ（`role=\"tab\"`）はその場で内容を切り替える部品なので、ページ間の移動には使いません。"},{"en":"Mark links that open a new tab or another site with an icon that has alternative text.","ja":"新しいタブや外部サイトで開くリンクには、代替テキスト付きのアイコンを付けます。"},{"en":"For links to files such as PDFs, put the file type and size in the link text, for example “Brochure (PDF, 100 KB)”.","ja":"PDF などのファイルへのリンクには、「紹介パンフレット（PDF:100KB）」のように形式と大きさをリンクの文言に含めます。"},{"en":"Give visited links their own color so users can see which pages they have already opened, especially on pages with many links.","ja":"訪問済みのリンクには別の色を付け、すでに開いたページが分かるようにします。リンクの多いページでは特に役立ちます。"},{"en":"WCAG 2.5.8 Target Size (Minimum) does not apply to a link inside a sentence, because its size depends on the text. A list of links gets no such exception, and Nielsen Norman Group says lists of links and stacked buttons often cause touch errors when they sit too close together.","ja":"WCAG 2.5.8「ターゲットのサイズ（最低限）」は、文の中のリンクには適用されません。大きさが文字で決まるためです。リンクを並べた一覧にはこの例外がありません。Nielsen Norman Group は、リンクの一覧や縦に積んだボタンは、間隔が狭いとタッチの誤操作がよく起きるとしています。"}],"misuse":[{"pattern":{"en":"Marking links with color alone","ja":"リンクを色だけで示す"},"harm":{"en":"People with partial sight, older people, people with color vision deficiencies, and people using monochrome displays may not be able to tell which text is a link.","ja":"弱視の人、高齢の人、色の見え方に特性のある人、白黒の画面を使う人には、どの文字がリンクなのか見分けられないことがあります。"},"instead":{"en":"Underline links so they can be recognized without color, in addition to using the link color.","ja":"リンクの色に加えて下線を付け、色が分からなくてもリンクだと分かるようにします。"}},{"pattern":{"en":"Link text such as “here” or “Details” that does not say where it goes","ja":"「こちら」「詳細」のように、行き先が分からないリンク文言"},"harm":{"en":"Screen reader users who pick from a list of the page’s links cannot tell which link to choose. People with motor impairments spend extra keystrokes on links they did not want, and people with cognitive disabilities can lose their way after landing on unwanted pages.","ja":"ページ内のリンクを一覧にして選ぶスクリーンリーダーの利用者は、どのリンクを選べばよいか分かりません。運動機能に障害のある人は不要なリンクを開いて戻る操作が増え、認知障害のある人は思わぬページへ移って迷いやすくなります。"},"instead":{"en":"Make the destination itself the link text, for example “Price list” instead of “Click here for prices”.","ja":"行き先を表す語をリンクにします。例えば「料金はこちら」ではなく「料金表」をリンクにします。"}},{"pattern":{"en":"Styling ad links to look like the site’s own navigation or articles","ja":"広告へのリンクをサイトのナビゲーションや記事へのリンクと同じ見た目にする"},"harm":{"en":"Users click the ad believing it is part of the interface or the site’s own content.","ja":"利用者は、画面の部品やサイト自身の記事だと思い込んで広告を開いてしまいます。"},"instead":{"en":"Label ads as ads in text, and give them a look that differs from the site’s own links.","ja":"広告には「広告」と文字のラベルを付け、サイト自身のリンクとは異なる見た目にします。"},"deceptive":true}],"related":[{"id":"button","diff":{"en":"A link moves to another page or place; a button runs an action on the current page.","ja":"リンクは別のページや場所へ移動し、ボタンは今のページで操作を実行します。"}},{"id":"back-to-top","diff":{"en":"A link moves to any page or place; a back to top button only returns to the top of the current page.","ja":"リンクはどのページや場所へも移動でき、スクロールトップボタンは今のページの先頭へ戻るだけです。"}},{"id":"skip-link","diff":{"en":"An ordinary link is always visible; a skip link is a link to a place on the same page that usually stays hidden until it gets focus.","ja":"ふつうのリンクは常に見えており、スキップリンクは同じページの中の場所へのリンクで、多くはフォーカスが来るまで隠れています。"}}],"sources":[{"label":"WAI-ARIA APG: Link Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/link/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「リンクテキスト」をもとに作成","url":"https://design.digital.go.jp/dads/foundations/link-text/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: link","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/link","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 2.4.4: Link Purpose (In Context) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html","checkedAt":"2026-10-21"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"MDN: <a>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Change the Color of Visited Links","url":"https://www.nngroup.com/articles/change-the-color-of-visited-links/","checkedAt":"2026-10-22"},{"label":"Deceptive Patterns: Disguised ads","url":"https://www.deceptive.design/types/disguised-ads","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「タブ」をもとに作成","url":"https://design.digital.go.jp/dads/components/tab/","checkedAt":"2026-11-02"},{"label":"GOV.UK Design System: Tabs","url":"https://design-system.service.gov.uk/components/tabs/","checkedAt":"2026-11-02"},{"label":"Understanding Success Criterion 2.5.8: Target Size (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html","checkedAt":"2026-11-04"},{"label":"Nielsen Norman Group: Touch Targets on Touchscreens","url":"https://www.nngroup.com/articles/touch-target-size/","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/link/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/link/"}},{"id":"list","category":"data","names":{"en":"List","ja":"リスト"},"aliases":[{"name":"リソースリスト","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/resource-list/"}],"summary":{"en":"Items stacked vertically, one per row, often with an icon and a second line of detail.","ja":"項目を1行に1つずつ縦に並べたものです。アイコンや補足の2行目が付くことが多いです。"},"appearance":{"en":"Rows separated by thin lines, each with an icon or avatar on the left, a main text, and a smaller gray line below it.","ja":"細い線で区切られた行が並び、各行には左のアイコンやアバター、主な文、その下の小さな灰色の文があります。"},"behavior":[{"en":"Items can also hold controls such as checkboxes or switches, or link to a detail page.","ja":"項目にチェックボックスやスイッチを置いたり、詳細ページへのリンクにしたりすることもあります。"},{"en":"In this demo, only the title of each item is a link, so other buttons can still be added to the item. If the whole row is a link, it must not contain other links or buttons.","ja":"このデモでは、各項目のタイトルだけをリンクにし、項目にほかのボタンを足せるようにしています。行全体をリンクにするなら、中にほかのリンクやボタンを置きません。"},{"en":"In this demo, the links do not go anywhere.","ja":"このデモでは、リンクを押しても移動しません。"},{"en":"A native `<ul>` or `<ol>` lets screen readers announce how many items there are.","ja":"ネイティブの `<ul>` や `<ol>` にすると、スクリーンリーダーが項目数を読み上げます。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the links and controls in the items. A list of plain text has no keys of its own.","ja":"項目の中のリンクや操作部品の間を移動します。文字だけのリストには、リスト自体のキー操作はありません。"}},{"key":"Enter","action":{"en":"Follows the focused link.","ja":"フォーカス中のリンクを開きます。"}}],"usage":[{"en":"The Digital Agency Design System calls a list of items that each have several parts, such as a title, supporting text, links or choices, a resource list. A list of titles only is a bulleted list (箇条書きリスト).","ja":"タイトル・補足の文・リンク・選択肢など、いくつかの情報を持つ項目の一覧を、デジタル庁デザインシステムではリソースリストと呼びます。タイトルだけを並べるものは箇条書きリストにあたります。"},{"en":"The Digital Agency Design System uses `<ul>` for every bulleted list, including numbered ones, and writes the numbers as text. Numbers made by `<ol>` cannot be copied and shift when items are added or removed. The GOV.UK Design System, by contrast, uses a numbered list made with `<ol>` when the order of the items matters.","ja":"デジタル庁デザインシステムは番号付きのものも含めて箇条書きリストをすべて `<ul>` で書き、項目番号は地の文字として書きます。`<ol>` の番号はコピーできず、項目を足したり消したりするとずれるためです。一方 GOV.UK Design System は、項目の順番に意味があるときは `<ol>` で番号付きリストにします。"},{"en":"For pairs of names and values, use a description list. To compare values across items, use a table.","ja":"項目名と値の組には、説明リストを使います。項目の間で値を比べるなら、テーブルを使います。"}],"related":[{"id":"feed","diff":{"en":"A list shows a fixed set of items; a feed keeps loading more articles as people read and moves by article with Page Up and Page Down.","ja":"リストは決まった数の項目を並べ、フィードは読み進めると記事を読み込み続け、Page Up と Page Down で記事を移ります。"}},{"id":"table","diff":{"en":"A list shows one item per row without columns; a table compares several values per row in columns.","ja":"リストは列を持たずに1行に1項目を並べ、テーブルは1行の複数の値を列で比べます。"}},{"id":"card","diff":{"en":"A list stacks items compactly in rows; cards give each item room for an image and actions.","ja":"リストは項目を行で詰めて並べ、カードは1件ごとに画像や操作を置く余裕があります。"}},{"id":"description-list","diff":{"en":"A list shows single items; a description list pairs each name with its value or explanation.","ja":"リストは項目を1つずつ並べ、説明リストは項目名と値や説明を組にして並べます。"}},{"id":"timeline","diff":{"en":"A list holds items of any kind in a plain column; a timeline is a list of events in time order, drawn along a line with their dates.","ja":"リストはどんな項目もふつうに縦に並べ、タイムラインは出来事を時間順に、日時とともに線に沿って描くリストです。"}}],"sources":[{"label":"MUI: Lists","url":"https://mui.com/material-ui/react-list/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「箇条書きリスト」をもとに作成","url":"https://design.digital.go.jp/dads/components/list/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「箇条書きリスト（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/list/usage/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「リソースリスト」をもとに作成","url":"https://design.digital.go.jp/dads/components/resource-list/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: resource-list","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/resource-list","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Lists","url":"https://design-system.service.gov.uk/styles/lists/","checkedAt":"2026-10-22"},{"label":"Carbon Design System: List","url":"https://carbondesignsystem.com/components/list/usage/","checkedAt":"2026-10-22"},{"label":"WCAG 2.2 Technique H48: Using ol, ul and dl for lists or groups of links","url":"https://www.w3.org/WAI/WCAG22/Techniques/html/H48","checkedAt":"2026-10-22"},{"label":"Deque University: <li> elements must be contained in a <ul> or <ol>","url":"https://dequeuniversity.com/rules/axe/4.10/listitem","checkedAt":"2026-10-22"},{"label":"MDN: <a>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/list/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/list/"}},{"id":"listbox","category":"input","names":{"en":"Listbox","ja":"リストボックス"},"aliases":[{"name":"ListBox","source":"React Aria","url":"https://react-aria.adobe.com/ListBox"},{"name":"<select size>","source":"HTML","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select"}],"summary":{"en":"A list of options that stays open, from which the user picks one (or several).","ja":"開いたままの選択肢のリストから、1つ（または複数）を選ぶ部品です。"},"appearance":{"en":"A bordered box showing several options at once, with a scroll bar when there are more. The chosen option is highlighted.","ja":"枠の中に複数の選択肢が見えていて、収まらない分はスクロールします。選んだ選択肢は色が変わります。"},"behavior":[{"en":"Clicking an option or moving to it with the arrow keys selects it.","ja":"選択肢をクリックするか、矢印キーで移ると選ばれます。"},{"en":"This demo is a native `<select>` with the `size` attribute, so it does not open or close and browsers treat it as a listbox.","ja":"このデモは `size` 属性を付けたネイティブの `<select>` なので、開閉せず、ブラウザはリストボックスとして扱います。"},{"en":"In this demo, the time zones are in order of their offset from UTC, as in OS settings. Each option starts with the city name rather than the offset, so typing a letter still jumps to it.","ja":"このデモでは、OS の設定画面のように、タイムゾーンを UTC との時差の順に並べています。選択肢は時差ではなく都市名から始めているので、文字を打って移動することもできます。"}],"keyboard":[{"key":"↑ / ↓","action":{"en":"Moves to and selects the previous or next option.","ja":"前後の選択肢へ移り、選びます。"}},{"key":"Home / End","action":{"en":"Moves to the first or last option.","ja":"最初または最後の選択肢へ移ります。"}},{"key":"A–Z","action":{"en":"Jumps to an option starting with the typed letter. It matches typed letters only, not IME input.","ja":"入力した英字で始まる選択肢へ移ります。日本語入力（IME）では働かないため、日本語版のデモの選択肢では試せません。"}}],"variations":[{"name":{"en":"Multi-select","ja":"複数選択"},"description":{"en":"Several options can be chosen. In the APG pattern, Space toggles the focused option. With a native `<select>`, add the `multiple` attribute (keys differ by browser).","ja":"複数の選択肢を選べるものです。APG のパターンでは Space でフォーカス中の選択肢の選択を切り替えます。ネイティブの `<select>` では `multiple` 属性を付けます（キー操作はブラウザによって異なります）。"}}],"usage":[{"en":"With more than five options, support Home / End. Jumping by typing is recommended for every listbox, especially with more than seven options.","ja":"選択肢が5つを超えるなら Home / End に対応させます。文字入力での移動はどのリストボックスにも勧められ、7つを超えるときは特に対応させます。"},{"en":"Selection that follows focus is only for single selection.","ja":"フォーカスの移動と同時に選ぶ作りは単一選択に限ります。"}],"misuse":[{"pattern":{"en":"Making selection follow focus when each selection starts a slow update","ja":"フォーカスの移動と同時に選び、選ぶたびに時間のかかる読み込みを始める"},"harm":{"en":"Each arrow key press makes keyboard and screen reader users wait. Reaching an option far down the list, or listening through the options, becomes slow and tedious.","ja":"矢印キーを押すたびに、キーボードやスクリーンリーダーの利用者が待たされます。離れた選択肢にたどり着くのも、選択肢を順に聞いていくのも、時間がかかって煩わしいです。"},"instead":{"en":"If selecting an option takes time, let focus move without selecting, and select with Enter or Space.","ja":"選ぶと時間がかかるなら、フォーカスの移動だけでは選ばず、Enter や Space で選ぶようにします。"}}],"related":[{"id":"select","diff":{"en":"A listbox keeps several options visible all the time; a select shows only the chosen option until opened.","ja":"リストボックスは複数の選択肢を常に見せておき、セレクトボックスは開くまで選んだ値しか見えません。"}},{"id":"radio","diff":{"en":"A listbox scrolls and is one tab stop; radio buttons show every option with its own label.","ja":"リストボックスはスクロールできて Tab では1か所として扱われ、ラジオボタンは選択肢ごとにラベル付きで全部を見せます。"}},{"id":"token-field","diff":{"en":"A listbox shows its options in one list and has no text field to type in; a token field lets people type to narrow the options and shows only the chosen values as tokens.","ja":"リストボックスは選択肢を1つの一覧で見せ、入力する欄はありません。トークン入力は入力で選択肢を絞り込み、選んだ値だけをトークンとして見せます。"}}],"sources":[{"label":"WAI-ARIA APG: Listbox Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/listbox/","checkedAt":"2026-10-20"},{"label":"MDN: <select>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/","checkedAt":"2026-10-21"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/listbox/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/listbox/"}},{"id":"mega-menu","category":"navigation","names":{"en":"Mega menu","ja":"メガメニュー"},"aliases":[{"name":"メガメニュー","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/mega-menu/"}],"summary":{"en":"A wide panel that opens from a site’s horizontal menu and shows all the pages in one section at once.","ja":"サイトの水平メニューから開く幅の広いパネルです。1つのカテゴリの中のページをまとめて見せます。"},"appearance":{"en":"A row of section names across the top of a site. Choosing one opens a wide panel under the row, with the section’s own page and a short description on one side and its pages in several columns on the other.","ja":"サイトの上部にカテゴリ名が横に並びます。1つを選ぶとその下に幅の広いパネルが開き、片側にカテゴリのページへのリンクと短い説明、もう片側にカテゴリの中のページが何列かに並びます。"},"behavior":[{"en":"Each section name is a button with `aria-expanded` that shows or hides its panel (the APG Disclosure pattern). The panel holds ordinary links, so the Tab key moves through them.","ja":"カテゴリ名はそれぞれパネルを開閉する `aria-expanded` 付きのボタン（APG の Disclosure パターン）です。パネルの中は普通のリンクなので、Tab キーで順に移ります。"},{"en":"Only one panel is open at a time; opening another closes the first.","ja":"開くパネルは常に1つで、別のパネルを開くと前のパネルは閉じます。"},{"en":"Esc closes the panel and returns focus to its button. Moving focus out of the navigation also closes the panel.","ja":"Esc でパネルを閉じ、そのボタンにフォーカスを戻します。ナビゲーションの外へフォーカスを移しても閉じます。"},{"en":"Besides links, the panel can hold descriptions and images.","ja":"パネルにはリンクのほかに説明文や画像も入れられます。"},{"en":"In this demo, the first panel starts open, and clicking outside the navigation also closes it. The panel pushes the content below it down instead of covering the page, and choosing a link shows where it would go instead of leaving the page, closes the panel and returns focus to its section name. Moving between the section names with the arrow keys, which the APG lists as optional, is left out.","ja":"このデモでは、最初のパネルを開いた状態で始め、ナビゲーションの外側をクリックしても閉じます。パネルはページに重ねず、下の内容を押し下げて開きます。リンクを選ぶと、ページを移らずに行き先を表示し、パネルを閉じてカテゴリ名へフォーカスを戻します。APG で任意とされている、矢印キーでカテゴリ名の間を移る機能は省いています。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"On a section name, opens or closes its panel. Enter on a link goes to its page.","ja":"カテゴリ名ではそのパネルを開閉します。リンクで Enter を押すと、そのページへ移ります。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves through the section names, and from the name of the open section into the links in its panel.","ja":"カテゴリ名を順に移動し、開いているカテゴリ名からはそのパネルのリンクへ進みます。"}},{"key":"Esc","action":{"en":"Closes the open panel and returns focus to its section name.","ja":"開いているパネルを閉じ、そのカテゴリ名にフォーカスを戻します。"}}],"usage":[{"en":"Label each section name with the name of the page it leads to, not vague words such as “Details” or “More”. To switch between views of one subject, such as overview, specifications, and reviews, use tabs instead.","ja":"カテゴリ名には行き先のページ名を使い、「詳細」「その他」のようなあいまいな言葉を避けます。概要・仕様・レビューのように同じ主題の内容を切り替えるなら、タブを使います。"},{"en":"Use it on desktop screens to list the pages under each section of the horizontal menu. On phones, its small options are easy to mis-tap, so use the hamburger menu button and the mobile menu instead.","ja":"デスクトップの画面で、水平メニューの各カテゴリの下にあるページを一覧にするのに使います。スマートフォンでは小さな選択肢を押し間違えやすいので、代わりにハンバーガーメニューボタンとモバイルメニューを使います。"},{"en":"The section name opens the panel and does not go to the section’s own page, so put a link to that page in the panel.","ja":"カテゴリ名はパネルを開くだけで、カテゴリのページへは移らないので、そのページへのリンクをパネルの中に入れます。"},{"en":"Build it from buttons with `aria-expanded` and links, not from `role=\"menu\"`. The menu role tells assistive technologies to expect complex keyboard behavior that site navigation does not need.","ja":"`role=\"menu\"` は使わず、`aria-expanded` のボタンとリンクで作ります。menu のロールを付けると、支援技術はサイトのナビゲーションには要らない複雑なキー操作を期待します。"}],"misuse":[{"pattern":{"en":"Opening the panel only when the pointer hovers over a section name","ja":"カテゴリ名にマウスを重ねたときだけ、パネルを開く"},"harm":{"en":"People using a keyboard or a touch screen cannot open the panel at all.","ja":"キーボードやタッチスクリーンで操作する人は、パネルを開けません。"},"instead":{"en":"Open the panel when the section name is selected, by click, tap, Enter, or Space.","ja":"カテゴリ名を選んだとき（クリック、タップ、Enter、Space）にパネルを開きます。"}},{"pattern":{"en":"Showing only some of a section’s pages in its panel","ja":"パネルにカテゴリの中のページを一部だけ並べる"},"harm":{"en":"People assume the panel lists every page in the section, so pages left out go unnoticed.","ja":"利用者はパネルにそのカテゴリの全ページが並んでいると思い込み、載っていないページがあることに気づきません。"},"instead":{"en":"List every page of that level in the panel. If they cannot all fit, use another way to navigate instead of a mega menu.","ja":"その階層のページはすべてパネルに並べます。すべてを並べられないなら、メガメニューを使わずにほかのナビゲーションにします。"}},{"pattern":{"en":"Putting many section names in the horizontal menu","ja":"水平メニューに多くのカテゴリ名を並べる"},"harm":{"en":"People have a harder time finding the page they are looking for.","ja":"利用者が目的のページを見つけにくくなります。"},"instead":{"en":"Sort out the sections and, where needed, add levels so that each section name opens its pages in the panel.","ja":"カテゴリを整理し、必要なら階層に分けて、カテゴリ名ごとにその中のページをパネルで開くようにします。"}}],"related":[{"id":"menubar","diff":{"en":"A mega menu shows a site’s pages in a wide panel and is used with buttons and the Tab key; a menubar holds an app’s commands and is moved through with the arrow keys.","ja":"メガメニューはサイトのページを幅の広いパネルで見せてボタンと Tab キーで操作し、メニューバーはアプリの操作をまとめ、矢印キーで移ります。"}},{"id":"menu","diff":{"en":"A mega menu shows many navigation links in a wide panel; a menu lists a few actions in a narrow column.","ja":"メガメニューは多くのナビゲーションのリンクを幅の広いパネルで見せ、メニューはいくつかの操作を細い列に並べます。"}},{"id":"drawer","diff":{"en":"A mega menu drops down under the horizontal menu on wide screens; a drawer slides in from the edge of the screen and covers the page.","ja":"メガメニューは広い画面で水平メニューの下に開き、ドロワーは画面の端からすべり出てページを覆います。"}},{"id":"bottom-navigation","diff":{"en":"A mega menu is a wide panel of a section’s pages that opens from a horizontal menu on a wide screen; bottom navigation is a bar of three to five destinations along the bottom of a phone screen.","ja":"メガメニューは広い画面で水平メニューから開く、カテゴリのページをまとめて見せる幅の広いパネルで、ボトムナビゲーションはスマートフォンの画面の下にある3〜5個の行き先のバーです。"}},{"id":"header","diff":{"en":"A mega menu is a wide panel that opens from one of the main links to show many pages of that section; a header is the band at the top of a page that holds those links.","ja":"メガメニューは、主なリンクの1つから開いて、そのセクションの多くのページを見せる幅の広いパネルで、ヘッダーはそのリンクを収めるページの上端の帯です。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「水平メニュー」をもとに作成","url":"https://design.digital.go.jp/dads/components/horizontal-menu/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「メガメニュー」をもとに作成","url":"https://design.digital.go.jp/dads/components/mega-menu/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Example Disclosure Navigation Menu","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/","checkedAt":"2026-10-21"},{"label":"Nielsen Norman Group: Mega Menus Work Well for Site Navigation","url":"https://www.nngroup.com/articles/mega-menus-work-well/","checkedAt":"2026-10-22"},{"label":"Inclusive Components: Menus & Menu Buttons","url":"https://inclusive-components.design/menus-menu-buttons/","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 2.1.1: Keyboard (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/mega-menu/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/mega-menu/"}},{"id":"menu","category":"action","names":{"en":"Menu","ja":"メニュー"},"aliases":[{"name":"Menu button","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/menu-buttons/usage/"},{"name":"Dropdown","source":"Ant Design","url":"https://ant.design/components/dropdown"},{"name":"メニューリストボックス","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/menu-list-box/"},{"name":"Dropdown menu","source":"Atlassian Design System","url":"https://atlassian.design/components/dropdown-menu"}],"summary":{"en":"A list of actions that pops up from a button.","ja":"ボタンから開く、操作の一覧です。"},"appearance":{"en":"A button, often with a downward arrow or a “⋯” icon. Pressing it shows a small panel of action names stacked vertically.","ja":"下向き矢印や「⋯」アイコンの付いたボタンです。押すと、操作名を縦に並べた小さなパネルが出ます。"},"behavior":[{"en":"Opening the menu moves focus to its first item.","ja":"メニューを開くと、最初の項目にフォーカスが移ります。"},{"en":"Choosing an item runs that action and closes the menu.","ja":"項目を選ぶとその操作が実行され、メニューが閉じます。"},{"en":"Pressing Esc, pressing Tab, or clicking outside closes the menu without running anything.","ja":"Esc や Tab を押すか、外側をクリックすると、何も実行せずに閉じます。"},{"en":"The `role=\"menu\"` element takes its name from the button with `aria-labelledby`, so screen readers say which menu opened.","ja":"`role=\"menu\"` の要素は `aria-labelledby` で開くボタンを指して名前を得るので、スクリーンリーダーはどのメニューが開いたかを読み上げます。"},{"en":"In this demo, a `role=\"separator\"` line sets the destructive item apart at the end of each menu. Arrow keys skip over the line.","ja":"このデモでは、`role=\"separator\"` の区切り線で、取り消しにくい操作をメニューの最後に離して置いています。矢印キーは区切り線を飛ばして移ります。"},{"en":"In this demo, the file row has an icon-only “⋯” overflow button whose name comes from `aria-label`. Its menu lines up with the button’s right edge so it stays inside the row.","ja":"このデモのファイルの行には、`aria-label` で名前を付けた「⋯」アイコンだけのオーバーフローボタンがあります。そのメニューは、行からはみ出さないようボタンの右端にそろえます。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"On the button, opens the menu. On an item, runs it and closes the menu.","ja":"ボタンではメニューを開きます。項目ではその操作を実行してメニューを閉じます。"}},{"key":"↓","action":{"en":"On the button, opens the menu at the first item. In the menu, moves to the next item; from the last item it goes back to the first.","ja":"ボタンではメニューを開いて最初の項目へ移ります。メニュー内では次の項目へ進み、最後の項目からは最初の項目へ回ります。"}},{"key":"↑","action":{"en":"On the button, opens the menu at the last item. In the menu, moves to the previous item; from the first item it goes to the last.","ja":"ボタンではメニューを開いて最後の項目へ移ります。メニュー内では前の項目へ進み、最初の項目からは最後の項目へ回ります。"}},{"key":"Home / End","action":{"en":"Moves to the first or last item.","ja":"最初または最後の項目へ移ります。"}},{"key":"Esc","action":{"en":"Closes the menu and returns focus to the button.","ja":"メニューを閉じ、ボタンにフォーカスを戻します。"}},{"key":"Tab / Shift + Tab","action":{"en":"Closes the menu and moves on to the next element. Shift + Tab goes back to the menu button.","ja":"メニューを閉じ、次の要素へ移ります。Shift + Tab ではメニューボタンへ戻ります。"}}],"variations":[{"name":{"en":"Overflow menu","ja":"オーバーフローメニュー"},"description":{"en":"Opened from an icon-only “⋯” button, often in table rows or cards to hold extra actions. The button needs a name such as “More options for report.pdf”.","ja":"「⋯」アイコンだけのボタンから開くものです。表の行やカードで、追加の操作をしまうのによく使います。ボタンには「report.pdf のその他の操作」のような名前を付けます。"}}],"usage":[{"en":"Align the panel with the left or right edge of its button.","ja":"パネルはボタンの左端か右端にそろえます。"},{"en":"Group related actions with dividers.","ja":"関係する操作を区切り線でまとめます。"}],"misuse":[{"pattern":{"en":"Opening the menu as soon as the pointer passes over it","ja":"マウスが上を通っただけでメニューを開く"},"harm":{"en":"Moving the pointer past the button on the way to something else opens a menu nobody asked for. The open menu can cover the page, so people have to close it before they can reach what they came for.","ja":"ほかの場所へマウスを動かす途中で、望んでいないメニューが開きます。開いたメニューがページの内容を覆い、目的の場所へ進む前に閉じる手間がかかります。"},"instead":{"en":"Open the menu on click or tap. If it must open on hover, wait about 0.3 to 0.5 seconds after the pointer stops before showing it.","ja":"メニューはクリックやタップで開きます。どうしてもホバーで開くなら、マウスが止まってから0.3〜0.5秒ほど待って表示します。"}}],"related":[{"id":"select","diff":{"en":"A menu runs an action when an item is chosen; a select keeps the chosen option as a form value.","ja":"メニューは項目を選ぶと操作を実行しますが、セレクトは選んだ選択肢をフォームの値として保持します。"}},{"id":"split-button","diff":{"en":"A menu button only opens the menu; a split button also runs a main action directly.","ja":"メニューボタンは押してもメニューを開くだけですが、スプリットボタンは主な操作を直接実行できます。"}},{"id":"toolbar","diff":{"en":"A menu hides actions in a list that opens on demand; a toolbar keeps a group of controls visible in a row.","ja":"メニューは操作を必要なときに開くリストにしまい、ツールバーは操作部品を1列に並べて常に見せます。"}},{"id":"hamburger-menu","diff":{"en":"A menu button opens a short list of actions right under itself; a hamburger menu button opens the site’s navigation links.","ja":"メニューボタンは自分のすぐ下に操作の短い一覧を開き、ハンバーガーメニューボタンはサイトのナビゲーションのリンクを開きます。"}},{"id":"menubar","diff":{"en":"A menu opens from a single button and closes after use; a menubar stays visible and holds several menus side by side.","ja":"メニューは1つのボタンから開いて使い終わると閉じ、メニューバーは常に表示されて複数のメニューを横に並べて持ちます。"}},{"id":"mega-menu","diff":{"en":"A menu lists a few actions in a narrow column; a mega menu shows many navigation links in a wide panel.","ja":"メニューはいくつかの操作を細い列に並べ、メガメニューは多くのナビゲーションのリンクを幅の広いパネルで見せます。"}},{"id":"language-selector","diff":{"en":"A menu lists actions to run on the current page; a language selector lists links to the same page in other languages.","ja":"メニューは今のページで実行する操作を並べ、ランゲージセレクターは同じページの別の言語版へのリンクを並べます。"}},{"id":"context-menu","diff":{"en":"A menu opens from a visible button; a context menu opens where an item is right-clicked and has no visible trigger.","ja":"メニューは見えるボタンから開き、コンテキストメニューは項目を右クリックした場所に開いて、開くための見えるボタンがありません。"}},{"id":"bottom-sheet","diff":{"en":"A menu is a list of actions that opens from a button; in mobile apps, Material Design 3 offers a modal bottom sheet as an alternative, especially for a long list of actions.","ja":"メニューはボタンから開く操作の一覧です。モバイルアプリでは、特に操作が多いときの代わりとして、Material Design 3 はモーダルのボトムシートを挙げています。"}}],"sources":[{"label":"WAI-ARIA APG: Menu Button Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Menu and Menubar Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menubar/","checkedAt":"2026-10-20"},{"label":"Carbon Design System: Menu buttons","url":"https://carbondesignsystem.com/components/menu-buttons/usage/","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Menu","url":"https://carbondesignsystem.com/components/menu/usage/","checkedAt":"2026-10-21"},{"label":"Ant Design: Dropdown","url":"https://ant.design/components/dropdown","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「メニューリストボックス」をもとに作成","url":"https://design.digital.go.jp/dads/components/menu-list-box/","checkedAt":"2026-10-20"},{"label":"Nielsen Norman Group: Timing Guidelines for Exposing Hidden Content","url":"https://www.nngroup.com/articles/timing-exposing-content/","checkedAt":"2026-10-21"},{"label":"Material Design 3: Bottom sheets (guidelines)","url":"https://m3.material.io/components/bottom-sheets/guidelines","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/menu/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/menu/"}},{"id":"menubar","category":"navigation","names":{"en":"Menubar","ja":"メニューバー"},"aliases":[],"summary":{"en":"A row of menus that always stays visible, where each item opens a list of commands.","ja":"常に表示されている横並びのメニューの列です。項目ごとに操作の一覧を開きます。"},"appearance":{"en":"A row of short words such as File, Edit, and View along the top of an app or window. Choosing one drops down a list of commands under it.","ja":"アプリやウィンドウの上部に、「ファイル」「編集」「表示」のような短い語が横に並びます。1つを選ぶと、その下に操作の一覧が出ます。"},"behavior":[{"en":"Unlike a menu button, the bar itself never closes. It has `role=\"menubar\"`, and each item is a `menuitem` with `aria-haspopup` and `aria-expanded`.","ja":"メニューボタンと違い、バーそのものは閉じません。バーには `role=\"menubar\"` を付け、各項目は `aria-haspopup` と `aria-expanded` を持つ `menuitem` にします。"},{"en":"The whole menubar is a single Tab stop, and the arrow keys move between its items (roving `tabindex`).","ja":"メニューバー全体で Tab キーが止まるのは1か所だけで、項目の間は矢印キーで移ります（ロービングタブインデックス）。"},{"en":"While a submenu is open, ← and → close it and open the submenu of the item next to it.","ja":"サブメニューを開いている間は、← と → でそれを閉じ、隣の項目のサブメニューを開きます。"},{"en":"Choosing a command runs it and closes the submenu. In this demo, focus then returns to the menubar item.","ja":"操作を選ぶとそれを実行し、サブメニューを閉じます。このデモでは、そのあとメニューバーの項目にフォーカスを戻します。"},{"en":"In this demo, the commands only show which one was chosen. Moving to an item by typing its first letter, which the APG lists as optional, is left out.","ja":"このデモでは、操作を選ぶと選んだ操作を表示するだけです。APG で任意とされている、頭文字のキーで項目へ移る機能は省いています。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"On a menubar item, opens its submenu at the first command. On a command, runs it and closes the submenu.","ja":"メニューバーの項目では、サブメニューを開いて最初の操作へ移ります。操作ではそれを実行し、サブメニューを閉じます。"}},{"key":"↑","action":{"en":"On a menubar item, opens its submenu at the last command. In a submenu, moves to the previous command; from the first it goes to the last.","ja":"メニューバーの項目では、サブメニューを開いて最後の操作へ移ります。サブメニューでは前の操作へ移り、最初からは最後へ回ります。"}},{"key":"↓","action":{"en":"On a menubar item, opens its submenu at the first command. In a submenu, moves to the next command; from the last it goes to the first.","ja":"メニューバーの項目では、サブメニューを開いて最初の操作へ移ります。サブメニューでは次の操作へ移り、最後からは最初へ回ります。"}},{"key":"← / →","action":{"en":"On the menubar, moves to the previous / next item, wrapping at either end. In a submenu, closes it and opens the submenu of the previous / next item.","ja":"メニューバーでは前・次の項目へ移り、端では反対の端へ回ります。サブメニューではそれを閉じ、前・次の項目のサブメニューを開きます。"}},{"key":"Home / End","action":{"en":"Moves to the first / last item of the menubar or the submenu.","ja":"メニューバーやサブメニューの最初・最後の項目へ移ります。"}},{"key":"Esc","action":{"en":"Closes the submenu and returns focus to its menubar item.","ja":"サブメニューを閉じ、そのメニューバーの項目にフォーカスを戻します。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves into the menubar at the item last used. From a submenu, closes it and moves out of the menubar.","ja":"メニューバーに入るときは、最後に使った項目へ移ります。サブメニューからは、それを閉じてメニューバーの外へ出ます。"}}],"variations":[{"name":{"en":"Checkbox and radio items","ja":"チェックとラジオの項目"},"description":{"en":"Submenus can hold on/off items (`menuitemcheckbox`) and pick-one items (`menuitemradio`), whose state is given by `aria-checked`.","ja":"サブメニューには、オンとオフを切り替える項目（`menuitemcheckbox`）や、1つを選ぶ項目（`menuitemradio`）も置けます。状態は `aria-checked` で示します。"}},{"name":{"en":"Vertical menubar","ja":"縦のメニューバー"},"description":{"en":"The items are stacked vertically, and the menubar gets `aria-orientation=\"vertical\"`.","ja":"項目を縦に並べるものです。メニューバーに `aria-orientation=\"vertical\"` を付けます。"}}],"usage":[{"en":"For a site’s navigation, use links and disclosure buttons instead of `role=\"menubar\"`. The menubar pattern needs complex keyboard behavior that typical site navigation does not, and few sites need it. The Digital Agency Design System’s horizontal menu is this kind of site navigation, not a menubar: items that go to a page are links, and items that open a submenu are buttons with `aria-expanded`. See the mega menu.","ja":"サイトのナビゲーションには `role=\"menubar\"` を使わず、リンクと開閉ボタン（ディスクロージャー）で作ります。メニューバーのパターンは、一般的なサイトのナビゲーションには要らない複雑なキー操作を必要とし、それが要るサイトは少ないです。デジタル庁デザインシステムの水平メニューはメニューバーではなくこの種のサイトのナビゲーションで、ページへ移る項目はリンク、サブメニューを開く項目は `aria-expanded` を持つボタンにします。メガメニューも参照してください。"},{"en":"Add “…” to the label of a command that needs more input before it runs, such as one that opens a dialog, as in “Open…”.","ja":"ダイアログを開く操作のように、実行する前に入力や選択が要る操作には、「開く…」のようにラベルの最後に「…」を付けます。"}],"related":[{"id":"menu","diff":{"en":"A menubar stays visible and holds several menus side by side; a menu opens from a single button and closes after use.","ja":"メニューバーは常に表示されて複数のメニューを横に並べて持ち、メニューは1つのボタンから開いて使い終わると閉じます。"}},{"id":"tabs","diff":{"en":"A menubar item opens a list of commands; a tab shows its own panel of content in place.","ja":"メニューバーの項目は操作の一覧を開き、タブはその場で自分のパネルの内容を見せます。"}},{"id":"mega-menu","diff":{"en":"A menubar holds an app’s commands and is moved through with the arrow keys; a mega menu shows a site’s pages in a wide panel and is used with buttons and the Tab key.","ja":"メニューバーはアプリの操作をまとめ、矢印キーで移り、メガメニューはサイトのページを幅の広いパネルで見せてボタンと Tab キーで操作します。"}}],"sources":[{"label":"WAI-ARIA APG: Menu and Menubar Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menubar/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Navigation Menubar Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Example Disclosure Navigation Menu","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「水平メニュー」をもとに作成","url":"https://design.digital.go.jp/dads/components/horizontal-menu/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: horizontal-menu","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/horizontal-menu","checkedAt":"2026-10-21"},{"label":"Apple Human Interface Guidelines: Menus","url":"https://developer.apple.com/design/human-interface-guidelines/menus","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/menubar/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/menubar/"}},{"id":"meter","category":"data","names":{"en":"Meter","ja":"メーター"},"aliases":[{"name":"Meter","source":"React Aria","url":"https://react-aria.adobe.com/Meter"},{"name":"Gauge","source":"HTML","url":"https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element"}],"summary":{"en":"A bar that shows a measurement within a known range, such as storage used or battery level.","ja":"ストレージの使用量や電池の残量など、決まった範囲の中の測定値を示す棒です。"},"appearance":{"en":"A horizontal bar filled to the current value. The color can change, for example to yellow or red, when the value is in a bad range.","ja":"現在の値まで塗られた横長の棒です。値が良くない範囲に入ると、黄や赤などに色が変わることがあります。"},"behavior":[{"en":"It is not interactive; it only shows a value.","ja":"操作する部品ではなく、値を示すだけのものです。"},{"en":"This demo uses the native `<meter>` with `low`, `high` and `optimum`, so the browser can color the bar by range. Use the buttons to change the value.","ja":"このデモはネイティブの `<meter>` に `low`・`high`・`optimum` を付けているため、ブラウザが範囲に応じて棒の色を変えられます。ボタンで値を変えられます。"},{"en":"In this demo, the bar is also described in words: the visible “40 GB of 100 GB” text is tied to the `<meter>` with `aria-describedby`, and past 70 GB it adds “Almost full” (“Full” at 100 GB). A screen reader otherwise often reads only a percentage.","ja":"このデモでは、棒の内容を言葉でも示します。見えている「40GB / 100GB」の文を `aria-describedby` で `<meter>` と結び、70GB を超えると「もうすぐいっぱいです」（100GB では「いっぱいです」）を添えます。結ばないと、スクリーンリーダーは割合だけを読み上げることが多いです。"}],"keyboard":[{"key":"—","action":{"en":"None. The demo’s buttons use Tab and Enter / Space.","ja":"なし。デモのボタンは Tab と Enter / Space で操作します。"}}],"usage":[{"en":"Do not use a meter for the progress of a task. Use a progress bar for that.","ja":"作業の進み具合には使いません。それにはプログレスバーを使います。"},{"en":"The maximum must mean something, like the size of the disk.","ja":"最大値にはディスクの容量のような意味のある値が必要です。"}],"misuse":[{"pattern":{"en":"Showing whether the value is good or bad only by the bar’s color","ja":"値の良し悪しを棒の色だけで示す"},"harm":{"en":"People with color vision deficiency, many older people and people with partial sight, and anyone on a monochrome display cannot get information that is shown only by color.","ja":"色覚に特性のある人、色が見分けにくい高齢者や弱視の人、白黒の画面を使う人には、色だけで示した情報が伝わりません。"},"instead":{"en":"Show the value as text next to the bar, and add a word for the state when it matters, such as “Almost full”.","ja":"棒の横に数値を文字で示し、必要なら「もうすぐいっぱい」のように状態も言葉で添えます。"}}],"related":[{"id":"progress-bar","diff":{"en":"A meter shows a measurement within a range; a progress bar shows how far a task has gone.","ja":"メーターは範囲の中の測定値を示し、プログレスバーは作業の進み具合を示します。"}}],"sources":[{"label":"WAI-ARIA APG: Meter Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/meter/","checkedAt":"2026-10-20"},{"label":"MDN: <meter>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter","checkedAt":"2026-10-20"},{"label":"Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html","checkedAt":"2026-10-21"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/meter/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/meter/"}},{"id":"mobile-menu","category":"navigation","names":{"en":"Mobile menu","ja":"モバイルメニュー"},"aliases":[{"name":"モバイルメニュー","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/mobile-menu/"}],"summary":{"en":"The site’s navigation links stacked in a column for small touch screens, opened from a hamburger menu button.","ja":"小さなタッチスクリーン向けに、サイトのナビゲーションのリンクを縦に並べたメニューです。ハンバーガーメニューボタンから開きます。"},"appearance":{"en":"A full-width list of tall rows, one link or group per row, inside a panel that covers part of the screen. Groups open in place or slide to a second list, and section names in bold separate the parts.","ja":"パネルの中に、1行に1つのリンクかまとまりを置いた、幅いっぱいの高い行が縦に並びます。まとまりはその場で開くか次の一覧へすべって移り、太字のセクション名が部分を区切ります。"},"behavior":[{"en":"Opened with the hamburger menu button and shown in a drawer that slides in from the left or right, with the rest of the screen dimmed.","ja":"ハンバーガーメニューボタンで開き、左か右からすべり出るドロワーに入れて表示します。メニュー以外の部分は半透明の黒で覆います。"},{"en":"Rows are tall enough to tap. A link goes to its page; a group shows the links under it.","ja":"行はタップしやすい高さになっています。リンクはそのページへ移り、まとまりはその下のリンクを見せます。"},{"en":"This demo is the accordion type: each group is a `<details>` element, so the browser opens and closes it.","ja":"このデモはアコーディオンタイプで、まとまりはそれぞれ `<details>` 要素にしています。開閉はブラウザが受け持ちます。"},{"en":"In this demo, links end with › and groups end with + or −, so the two kinds of rows look clearly different.","ja":"このデモでは、リンクの行の端に ›、まとまりの行の端に + か − を付け、2種類の行の見た目をはっきり分けています。"},{"en":"In this demo, only the menu itself is shown, without the hamburger menu button and the drawer. Choosing a link shows where it would go instead of leaving the page.","ja":"このデモでは、ハンバーガーメニューボタンとドロワーを省き、メニューの中身だけを見せます。リンクを選ぶと、ページを移らずに行き先を表示します。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"On a group, opens or closes it. Enter on a link goes to its page.","ja":"まとまりではそれを開閉します。リンクで Enter を押すと、そのページへ移ります。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves through the links and groups. Links inside a closed group are skipped.","ja":"リンクとまとまりを順に移動します。閉じているまとまりの中のリンクは飛ばします。"}}],"variations":[{"name":{"en":"Standard (sliding) type","ja":"スタンダードタイプ（スライド型）"},"description":{"en":"Choosing a group slides in a second list with a Back button at the top. The Digital Agency Design System calls it the standard type and says it suits menus with a second level or many items. Nielsen Norman Group calls it a sequential menu and generally does not recommend it for subnavigation, because the menu’s Back button is easily confused with the browser’s.","ja":"まとまりを選ぶと、上に戻るボタンを置いた第二階層の一覧がすべって出ます。デジタル庁デザインシステムはこれをスタンダードタイプと呼び、第二階層がある場合や項目が多い場合に適しているとしています。Nielsen Norman Group は sequential menu と呼び、メニューの戻るボタンとブラウザの戻るボタンを取り違えやすいため、下位のナビゲーションには基本的に勧めていません。"}},{"name":{"en":"Accordion type","ja":"アコーディオンタイプ"},"description":{"en":"Each group opens in place to show its links, as in this demo. Nielsen Norman Group finds it works well when each group holds only a few links, typically fewer than six.","ja":"このデモのように、まとまりをその場で開いて中のリンクを見せます。Nielsen Norman Group は、各まとまりのリンクが少ない場合（目安は6個未満）に向くとしています。"}},{"name":{"en":"Right or left","ja":"右タイプ・左タイプ"},"description":{"en":"The menu opens over the page from the right or left edge of the screen.","ja":"画面の右端か左端から、ページの上に重ねて開きます。"}}],"usage":[{"en":"Phone layouts often leave out related links from the content, so some pages can be reached only from the mobile menu. Include every page people need to reach.","ja":"スマートフォンの画面では本文から関連リンクが省かれることが多く、モバイルメニューからしか行けないページが出ます。利用者が行く必要のあるページをすべて含めます。"},{"en":"Keep the menu to two levels. Deeper menus make people choose category after category before they reach any content.","ja":"メニューの階層は第二階層までにします。階層が深いと、内容にたどり着くまでに分類を何度も選ばせることになります。"},{"en":"Avoid mixing icons that mark links with icons that mark groups. If both are needed, make their shapes clearly different, as in this demo.","ja":"リンクを示すアイコンとまとまりを示すアイコンを混ぜるのは、できるだけ避けます。どうしても混ぜるなら、このデモのように形をはっきり変えます。"},{"en":"Separate sections with bold section names. Put a divider between sections whose content differs a lot, and add a section icon as a supporting cue when the sections need to stand out more.","ja":"セクションは太字のセクション名で分けます。内容が大きく違うセクションの間には区切り線を入れ、セクションをさらにはっきり見せたいときは、セクションアイコンを補助として足します。"}],"misuse":[{"pattern":{"en":"Mixing the sliding type and the accordion type in one menu","ja":"1つのメニューにスライド型とアコーディオン型を混ぜる"},"harm":{"en":"People have to deal with two different ways of opening groups, which makes the menu complicated to use.","ja":"まとまりの開き方が2通りになり、利用者にとって操作が複雑になります。"},"instead":{"en":"Choose one type for the whole menu. The Digital Agency Design System says the sliding type suits menus with a second level or many items; Nielsen Norman Group prefers the accordion type when each group has only a few links.","ja":"メニュー全体でどちらか一方の型にします。デジタル庁デザインシステムは第二階層がある場合や項目が多い場合にスライド型が適しているとし、Nielsen Norman Group は各まとまりのリンクが少なければアコーディオン型を勧めます。"}},{"pattern":{"en":"Telling links and groups apart only by the direction of the same chevron, such as › for links and ⌄ for groups","ja":"リンクは ›、まとまりは ⌄ のように、同じシェブロンの向きの違いだけでリンクとまとまりを見分けさせる"},"harm":{"en":"It takes extra mental effort to see at a glance which rows go to a page and which open a group.","ja":"どの行がページへ移り、どの行がまとまりを開くのかを一目で見分けるのに頭の負担がかかります。"},"instead":{"en":"Use clearly different icons, such as › for links and + / − for groups, and use the same icon for the same behavior across the site.","ja":"リンクは ›、まとまりは + / − のように、はっきり違うアイコンを使います。サイトの中では、同じ動きには同じアイコンを使い続けます。"}}],"related":[{"id":"hamburger-menu","diff":{"en":"A mobile menu is the list of links; the hamburger menu button is the button that opens it.","ja":"モバイルメニューはリンクの一覧で、ハンバーガーメニューボタンはそれを開くボタンです。"}},{"id":"drawer","diff":{"en":"A mobile menu is the navigation inside; a drawer is the panel that holds it and slides in from the edge.","ja":"モバイルメニューは中に入るナビゲーションで、ドロワーはそれを入れて端からすべり出るパネルです。"}},{"id":"side-navigation","diff":{"en":"A mobile menu stacks the site’s navigation for small touch screens and is opened from a button; side navigation stays beside the content on a wide screen.","ja":"モバイルメニューは小さなタッチスクリーン向けにサイトのナビゲーションを縦に積んでボタンから開き、サイドナビゲーションは広い画面で内容の横に残ります。"}},{"id":"bottom-navigation","diff":{"en":"A mobile menu stacks the site’s navigation in a list that is opened from a button; bottom navigation keeps three to five destinations in a bar along the bottom of the screen, which the Digital Agency Design System no longer recommends.","ja":"モバイルメニューはサイトのナビゲーションを縦に積んでボタンから開き、ボトムナビゲーションは画面の下のバーに3〜5個の行き先を残します。デジタル庁デザインシステムは、ボトムナビゲーションを勧めていません。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「モバイルメニュー」をもとに作成","url":"https://design.digital.go.jp/dads/components/mobile-menu/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「モバイルメニュー（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/mobile-menu/usage/","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Mobile Subnavigation","url":"https://www.nngroup.com/articles/mobile-subnavigation/","checkedAt":"2026-10-22"},{"label":"Bootstrap: Offcanvas","url":"https://getbootstrap.com/docs/5.3/components/offcanvas/","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 2.5.8: Target Size (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「ボトムナビゲーション」をもとに作成","url":"https://design.digital.go.jp/dads/components/bottom-navigation/","checkedAt":"2026-11-03"},{"label":"MDN: <details> HTML details disclosure element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/mobile-menu/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/mobile-menu/"}},{"id":"modal","category":"overlay","names":{"en":"Modal (Dialog)","ja":"モーダルダイアログ"},"aliases":[{"name":"Dialog","source":"Material Design 3","url":"https://m3.material.io/components/dialogs/overview"},{"name":"Modal dialog","source":"Atlassian Design System","url":"https://atlassian.design/components/modal-dialog"},{"name":"モーダルダイアログ","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/modal-dialog/"}],"summary":{"en":"A window on top of the page that blocks the rest of the page until it is closed.","ja":"ページの上に重ねて表示し、閉じるまで背後のページを操作できなくするウィンドウです。"},"appearance":{"en":"A box in the middle of the screen over a dimmed background, usually with a title, a message, and buttons such as Cancel and OK. This demo is a short message with a receipt number and a single Close button in the center.","ja":"暗くした背景の上、画面中央に箱が出ます。タイトル、本文、「キャンセル」「OK」などのボタンを持つことが多いです。このデモは受付番号を知らせる短いメッセージで、中央に「閉じる」ボタンだけがあります。"},"behavior":[{"en":"When it opens, focus moves into the dialog.","ja":"開くと、フォーカスがダイアログの中に移ります。"},{"en":"While it is open, the page behind cannot be clicked or reached with Tab.","ja":"開いている間は、背後のページをクリックしたり Tab キーで移動したりできません。"},{"en":"When it closes, focus returns to the element that opened it.","ja":"閉じると、開くきっかけになった要素にフォーカスが戻ります。"},{"en":"In this demo, the message is complete in itself and asks for no decision, so the only button is Close, and focus moves to it when the dialog opens. For confirming a destructive action, see the alert dialog.","ja":"このデモのメッセージはダイアログの中で完結し、判断を求めないので、ボタンは「閉じる」だけで、開くとそこにフォーカスが移ります。取り消せない操作の確認は、アラートダイアログを参照してください。"},{"en":"In this demo, the dialog opens inside the demo frame and dims only the frame, so it is easy to see which demo it belongs to. On a real page, it dims the whole page.","ja":"このデモでは、どのデモの動きかが分かりやすいよう、ダイアログをデモの枠の中に出し、枠の中だけを暗くします。実際のページでは、ページ全体を暗くします。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the dialog’s controls. The page behind cannot be reached.","ja":"ダイアログ内の要素の間を移動します。背後のページには移りません。"}},{"key":"Esc","action":{"en":"Closes the dialog.","ja":"ダイアログを閉じます。"}}],"usage":[{"en":"Use it to show a short, self-contained message. To confirm a destructive action, use an alert dialog.","ja":"短く完結したメッセージに使います。取り消せない操作の確認には、アラートダイアログを使います。"},{"en":"Do not use it for navigation menus or completion notices; for navigation, use a drawer opened by a hamburger menu button.","ja":"ナビゲーションメニューや完了の通知には使いません。ナビゲーションには、ハンバーガーメニューボタンで開くドロワーを使います。"},{"en":"The Digital Agency Design System adds a separate close button only when there are no action buttons. Carbon gives even modals that have action buttons a close (×) icon that closes them without submitting anything.","ja":"デジタル庁デザインシステムは、操作ボタンがないときだけ別に閉じるボタンを置きます。Carbon は操作ボタンがあるモーダルにも、何も送信せずに閉じる × のアイコンを付けます。"},{"en":"When the dialog has only one button, the Digital Agency Design System places it in the center, as this demo does. Carbon places a single button on the right side instead.","ja":"ダイアログのボタンが1つだけのとき、デジタル庁デザインシステムはこのデモのように中央に置きます。Carbon は右側に置きます。"},{"en":"The U.S. Web Design System calls a modal a last resort and says to consider a less disruptive component every time. A modal should open because of something the person did, not on its own, except for cases such as a session about to time out. It says a multi-step process belongs on its own page, and advises against components other than buttons inside a modal and against using one to stop people before an external link.","ja":"U.S. Web Design System は、モーダルを最後の手段と位置づけ、そのつど、もっと邪魔にならない部品で済まないかを考えるよう求めています。モーダルは、利用者の操作を受けて開くもので、セッションが切れそうなときなどを除き、勝手に開きません。複数の手順にわたる流れは専用のページに置き、モーダルの中にはボタン以外の部品を置かず、外部サイトへのリンクの手前でモーダルを出して足止めしないようにします。"}],"misuse":[{"pattern":{"en":"Opening the dialog without a user action","ja":"利用者の操作なしにダイアログを開く"},"harm":{"en":"People do not know why it appeared or whether they may close it, lose their place in what they were reading because it covers the page, and may not get focus back where they were after closing it.","ja":"なぜ出たのか、閉じてよいのかがわからず戸惑います。読んでいた箇所が隠れて見失い、閉じたあと元の位置にフォーカスが戻らないこともあります。"},"instead":{"en":"Open it only when the user presses a button. Show messages the page needs to convey, such as announcements, within the page itself, for example as a notification banner.","ja":"利用者がボタンを押したときだけ開きます。告知のようにページで伝え続けたい情報は、ノティフィケーションバナーなどでページ内に表示します。"}},{"pattern":{"en":"Putting a form inside the dialog","ja":"ダイアログの中にフォームを入れる"},"harm":{"en":"While the dialog is open, people cannot read or copy information outside it that they need for their input, and checking their entries can require yet another dialog, stacking one mode on top of another.","ja":"開いている間はダイアログの外の情報を読んだりコピーしたりできず、入力に必要な情報を参照できません。入力内容の確認にさらにダイアログが要り、モードが重なることもあります。"},"instead":{"en":"Place the form directly on the page, next to the information needed to fill it in.","ja":"フォームはページ上に直接置き、入力に必要な情報と同じ画面に並べます。"}},{"pattern":{"en":"Making the “Agree” button prominent and the “Do not agree” button hard to notice","ja":"「同意する」のボタンだけを目立たせ、「同意しない」を目立たなくする"},"harm":{"en":"People are steered toward the choice that suits the provider, such as agreeing to the use of their personal information, instead of the choice they would make themselves.","ja":"個人情報の利用への同意など、提供する側に都合のよい選択へ誘導され、利用者が自分でするはずだった判断ができなくなります。"},"instead":{"en":"Give both choices the same visual weight and label each button with what it does, so people can compare them and pick one.","ja":"両方のボタンを同じ見た目の強さにし、それぞれの結果がわかるラベルを付けて、利用者が見比べて選べるようにします。"},"deceptive":true}],"related":[{"id":"command-palette","diff":{"en":"A modal can hold any content; a command palette is a modal dialog that holds only a search field and a list of commands.","ja":"モーダルはどんな内容も持つことができ、コマンドパレットは検索欄と操作の一覧だけを持つモーダルダイアログです。"}},{"id":"alert-dialog","diff":{"en":"A modal is any dialog that blocks the page; an alert dialog is the kind used for an urgent message that needs a response.","ja":"モーダルは背後のページを止めるダイアログ全般で、アラートダイアログはそのうち応答が必要な緊急のメッセージに使うものです。"}},{"id":"drawer","diff":{"en":"A modal dialog appears in the middle of the screen; a drawer slides in from an edge as a tall panel.","ja":"モーダルは画面の中央に出て、ドロワーは端から縦長のパネルとしてすべり出ます。"}},{"id":"popover","diff":{"en":"A modal blocks the page until it is closed; a popover leaves the page usable and closes on an outside click.","ja":"モーダルは閉じるまでページを操作できず、ポップオーバーは開いたままページを操作でき、外側のクリックで閉じます。"}},{"id":"bottom-sheet","diff":{"en":"A modal dialog sits in the middle of the screen and blocks the page; a bottom sheet is anchored to the bottom edge, mainly on phones, and for apps Material Design 3 has a standard kind that leaves the main UI usable beside it.","ja":"モーダルダイアログは画面の中央に出てページを操作できなくし、ボトムシートは下端に固定され、おもにスマートフォンで使います。Material Design 3 は、アプリ向けに、主な部分を並べて操作できる標準の種類を挙げています。"}},{"id":"cookie-banner","diff":{"en":"A modal blocks the page until it is closed; a cookie banner stays in the page flow and lets the visitor keep using the page.","ja":"モーダルは閉じるまでページを操作できなくしますが、Cookie バナーはページの流れの中に置かれ、訪問者はページを使い続けられます。"}}],"sources":[{"label":"Open UI: Dialog","url":"https://open-ui.org/components/dialog.research","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Dialog (Modal) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/","checkedAt":"2026-10-20"},{"label":"MDN: <dialog>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「モーダルダイアログ」をもとに作成","url":"https://design.digital.go.jp/dads/components/modal-dialog/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「ボタン（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/button/usage/","checkedAt":"2026-10-22"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Modal","url":"https://carbondesignsystem.com/components/modal/usage/","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Modal & Nonmodal Dialogs: When (& When Not) to Use Them","url":"https://www.nngroup.com/articles/modal-nonmodal-dialog/","checkedAt":"2026-10-22"},{"label":"Office of the Privacy Commissioner of Canada: Sweep Report 2024: Deceptive Design Patterns","url":"https://priv.gc.ca/en/about-the-opc/what-we-do/international-collaboration/international-privacy-sweep/2024_sweep/opc-sweep-report-2024","checkedAt":"2026-10-22"},{"label":"U.S. Web Design System: Modal","url":"https://designsystem.digital.gov/components/modal/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/modal/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/modal/"}},{"id":"number-input","category":"input","names":{"en":"Number input","ja":"数値入力（スピンボタン）"},"aliases":[{"name":"Spinbutton","source":"WAI-ARIA APG","url":"https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/"},{"name":"Number input","source":"Carbon Design System","url":"https://carbondesignsystem.com/building-blocks/core/components/number-input"},{"name":"InputNumber","source":"Ant Design","url":"https://ant.design/components/input-number"},{"name":"Stepper (the − / + buttons)","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/steppers"}],"summary":{"en":"A box for a number that can also be raised or lowered one step at a time.","ja":"数値を入力する欄で、1刻みずつ増減もできるものです。"},"appearance":{"en":"A narrow text box with small up and down arrows (or − and + buttons) at the side.","ja":"幅の狭い入力欄の横に、小さな上下の矢印（または − と + のボタン）があります。"},"behavior":[{"en":"The user can type a number or change it with the arrows.","ja":"数値を直接入力するか、矢印で増減させます。"},{"en":"This demo uses the native `<input type=\"number\">` with `min`, `max` and `step`.","ja":"このデモはネイティブの `<input type=\"number\">` に `min`・`max`・`step` を付けています。"},{"en":"In this demo, a value outside the range, a decimal or anything that is not a number turns the border red and shows an error message below the field. The message is tied to the field with `aria-describedby`, and the field gets `aria-invalid=\"true\"`.","ja":"このデモでは、範囲外の値や小数、数として読めない入力になると、枠が赤くなり、入力欄の下にエラー文が出ます。エラー文は `aria-describedby` で入力欄と結び、入力欄には `aria-invalid=\"true\"` を付けます。"},{"en":"APG also defines Home / End for the minimum and maximum, but in Chrome the native element uses them to move the text cursor.","ja":"APG では Home / End で最小値・最大値にするとしていますが、Chrome のネイティブの要素では文字のカーソル移動になります。"}],"keyboard":[{"key":"↑ / ↓","action":{"en":"Increases / decreases the value by one step.","ja":"値を1刻み増やしたり減らしたりします。"}},{"key":"0–9","action":{"en":"Types the value directly.","ja":"値を直接入力します。"}}],"usage":[{"en":"Use it for counts that go up and down in small steps, such as a quantity.","ja":"数量のように小刻みに増減する値に使います。"},{"en":"Some design systems avoid `type=\"number\"`: scrolling can change the value by accident, and Chrome silently drops letters other than “e”. A text input with `inputmode=\"numeric\"` is an alternative.","ja":"`type=\"number\"` を避けるデザインシステムもあります。スクロールで値が変わってしまうことがあり、Chrome は「e」以外の文字を何も知らせずに捨てるためです。代わりに `inputmode=\"numeric\"` を付けたテキスト入力を使う方法があります。"}],"misuse":[{"pattern":{"en":"Using a number input for codes such as postal codes or card numbers","ja":"郵便番号やカード番号のような番号に数値入力を使う"},"harm":{"en":"A number input treats the code as a quantity to step up or down. Someone entering a postal or card number can change it by accident while doing something else, such as scrolling the page, and if they type a character that is not a digit, they get no clear message about what is wrong.","ja":"数値入力は番号を増減できる数量として扱います。郵便番号やカード番号を入れている人が、ページのスクロールなど別の操作のつもりで番号を誤って変えてしまうことがあります。数字以外の文字を入れても、何が誤りかがはっきり示されません。"},"instead":{"en":"Use a text input with `inputmode=\"numeric\"` and a matching `autocomplete` value, such as `autocomplete=\"postal-code\"`.","ja":"`inputmode=\"numeric\"` を付けたテキスト入力を使い、`autocomplete=\"postal-code\"` のように内容に合う `autocomplete` を付けます。"}}],"related":[{"id":"slider","diff":{"en":"A number input is for exact numbers; a slider picks a rough position by dragging.","ja":"数値入力は正確な数値を入れるのに向き、スライダーはつまみで大まかな位置を選びます。"}},{"id":"stepper","diff":{"en":"A number input’s − / + buttons are what some systems (such as Apple) call a “stepper”; on this site, the stepper is the step indicator of a multi-page procedure.","ja":"数値入力の − / + ボタンは、Apple などが「Stepper」と呼ぶものです。このサイトの Stepper は、複数画面の手続きの段階を示すステップナビゲーションのことです。"}},{"id":"one-time-code","diff":{"en":"A number input is for a quantity that goes up and down; a one-time code is a string of digits, so it uses a text field with `inputmode=\"numeric\"`.","ja":"数値入力は増減させる量に使います。確認コードは数字の並びなので、`inputmode=\"numeric\"` を付けたテキスト入力にします。"}},{"id":"text-field","diff":{"en":"A number input is for counts that go up and down in small steps, such as a quantity; a text field with `inputmode=\"numeric\"` suits digits that are not amounts, such as a postal code.","ja":"数値入力は数量のように小刻みに増減する数のためのものですが、`inputmode=\"numeric\"` を付けたテキストフィールドは郵便番号のように量ではない数字に向いています。"}}],"sources":[{"label":"WAI-ARIA APG: Spinbutton Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/","checkedAt":"2026-10-20"},{"label":"MDN: <input type=\"number\">","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number","checkedAt":"2026-10-21"},{"label":"Open UI: Number (Input)","url":"https://open-ui.org/components/inputnumber.research/","checkedAt":"2026-10-20"},{"label":"GOV.UK Design System: Text input (Numbers)","url":"https://design-system.service.gov.uk/components/text-input/","checkedAt":"2026-10-21"},{"label":"GOV.UK: Why the GOV.UK Design System team changed the input type for numbers","url":"https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/number-input/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/number-input/"}},{"id":"one-time-code","category":"input","names":{"en":"One-time code field","ja":"確認コードの入力"},"aliases":[{"name":"Input.OTP","source":"Ant Design","url":"https://ant.design/components/input#inputotp"}],"summary":{"en":"A field for a short code sent by text message, email or an app, used once to confirm who is signing in.","ja":"SMS やメール、アプリで届いた1回限りの短いコードを入れて、ログインする人が本人かを確かめる欄です。"},"appearance":{"en":"A short text box with a label such as “Security code” and a hint saying how the code was sent. Some services draw one box for each digit instead.","ja":"「確認コード」のようなラベルと、コードをどの方法で送ったかを伝える補足の文が付いた短い入力欄です。数字1桁ごとに枠を並べる作りもあります。"},"behavior":[{"en":"`autocomplete=\"one-time-code\"` lets the browser or phone offer the code from the message, and `inputmode=\"numeric\"` brings up a number keypad. The field is a text input, not `type=\"number\"`.","ja":"`autocomplete=\"one-time-code\"` を付けると、ブラウザやスマートフォンが届いたコードを入力の候補に出せます。`inputmode=\"numeric\"` で数字のキーボードが出ます。欄は `type=\"number\"` ではなくテキスト入力にします。"},{"en":"This demo uses one field, as GOV.UK does, rather than one box per digit. In one field, a pasted or autofilled code goes in whole. Separate boxes fail WCAG when pasting the code fills only the first box.","ja":"このデモは、GOV.UK と同じく、1桁ごとの枠ではなく1つの欄にしています。1つの欄なら、貼り付けたコードも自動入力されたコードもそのまま全部入ります。1桁ごとの枠で、貼り付けても最初の枠にしか入らない作りは、WCAG を満たしません。"},{"en":"Spaces and hyphens are allowed and removed before checking, so a code can be entered the way it appears in the message. Full-width digits typed with a Japanese input method, and a long vowel mark “ー” typed as a hyphen, are accepted too.","ja":"空白やハイフンも受け付けて確かめる前に取り除くので、届いたままの形でコードを入力できます。日本語入力のまま打った全角の数字や、ハイフンのつもりで打った長音記号「ー」も受け付けます。"},{"en":"In this demo, nothing is sent, and any 6 digits are accepted. Pressing Continue with too few or too many digits shows an error below the field, links it with `aria-describedby`, and moves focus to the field. The field has no `maxlength`, so a pasted “123 456” is not cut off.","ja":"このデモでは何も送られず、6桁の数字なら何でも通ります。桁が足りないときや多すぎるときに「次へ」を押すと、欄の下にエラーを出して `aria-describedby` でつなぎ、フォーカスを欄へ移します。`maxlength` は付けていないので、貼り付けた「123 456」も途中で切れません。"}],"keyboard":[{"key":"Enter","action":{"en":"Submits the form (Continue in this demo).","ja":"フォームを送信します（このデモでは「次へ」）。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves focus into or out of the field.","ja":"フォーカスを入力欄に移したり、入力欄から外したりします。"}},{"key":"0–9","action":{"en":"Types the code.","ja":"コードを入力します。"}}],"variations":[{"name":{"en":"One box per digit","ja":"1桁ごとの枠"},"description":{"en":"A row of boxes, one for each digit, such as Ant Design’s Input.OTP. If used, pasting the whole code into the first box must fill every box.","ja":"Ant Design の Input.OTP のように、数字1桁ごとに枠を並べるものです。使うなら、最初の枠にコード全体を貼り付けるとすべての枠が埋まるようにします。"}}],"usage":[{"en":"Say above the field how the code was sent. When people are signing in, do not show the phone number it was sent to.","ja":"入力欄の上の文で、コードをどの方法で送ったかを伝えます。ログインのときは、送り先の電話番号を見せません。"},{"en":"Messages can take a few minutes to arrive. Offer a way to get a new code, and say what to do if the person cannot use their phone.","ja":"メッセージが届くまで数分かかることがあります。コードを送り直す手段を用意し、電話を使えない人がどうすればよいかも伝えます。"},{"en":"Error messages should say what is wrong with the code, such as too few digits, or that it has expired and a new one was sent.","ja":"エラーメッセージでは、「桁が足りない」「期限が切れたので新しいコードを送った」のように、コードの何が問題かを伝えます。"}],"misuse":[{"pattern":{"en":"One box per digit that takes only one character when the code is pasted","ja":"1桁ごとの枠で、コードを貼り付けても1文字しか入らない"},"harm":{"en":"People cannot paste the code and have to copy it by hand, digit by digit. Some people with cognitive disabilities, such as difficulties with memory or with numbers, cannot retype a one-time code.","ja":"コードを貼り付けられず、1桁ずつ書き写すことになります。記憶や数の扱いに困難があるなど、認知に障害のある人の中には、確認コードを打ち直せない人もいます。"},"instead":{"en":"Use one field. If the design needs separate boxes, make a paste into the first box fill all of them.","ja":"1つの欄にします。どうしても枠を分けるなら、最初の枠への貼り付けですべての枠が埋まるようにします。"}}],"related":[{"id":"text-field","diff":{"en":"A one-time code field is a text field set up for a short code: numeric keypad, autofill from the message, and spaces allowed.","ja":"確認コードの入力は、短いコード向けに整えたテキストフィールドで、数字のキーボードが出て、届いたメッセージから自動で入力でき、空白も受け付けます。"}},{"id":"number-input","diff":{"en":"A one-time code is a string of digits, not a quantity, so it uses a text field with `inputmode=\"numeric\"`; a number input is for values that go up and down.","ja":"確認コードは量ではなく数字の並びなので、`inputmode=\"numeric\"` を付けたテキスト入力にします。数値入力は増減させる値に使います。"}},{"id":"password-field","diff":{"en":"A one-time code field takes a code sent for one sign-in and shows it as typed; a password field hides a secret that people choose and keep.","ja":"確認コードの入力は、1回のログインのために届いたコードを入れ、文字は隠しません。パスワード入力は、利用者が決めて使い続ける秘密を隠して入れます。"}}],"sources":[{"label":"GOV.UK Design System: Confirm a phone number","url":"https://design-system.service.gov.uk/patterns/confirm-a-phone-number/","checkedAt":"2026-10-22"},{"label":"GOV.UK Design System: Password input","url":"https://design-system.service.gov.uk/components/password-input/","checkedAt":"2026-10-22"},{"label":"MDN: HTML attribute: autocomplete","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 3.3.8: Accessible Authentication (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html","checkedAt":"2026-10-22"},{"label":"WCAG 2.2 Techniques: F109: Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format","url":"https://www.w3.org/WAI/WCAG22/Techniques/failures/F109","checkedAt":"2026-10-22"},{"label":"Ant Design: Input","url":"https://ant.design/components/input","checkedAt":"2026-10-22"},{"label":"GOV.UK Design System: Text input","url":"https://design-system.service.gov.uk/components/text-input/","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/one-time-code/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/one-time-code/"}},{"id":"pagination","category":"navigation","names":{"en":"Pagination","ja":"ページネーション"},"aliases":[{"name":"ページナビゲーション","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/page-navigation/"}],"summary":{"en":"Controls for moving between pages of a long list, such as search results.","ja":"検索結果など長い一覧を複数のページに分け、ページ間を移動するための部品です。"},"appearance":{"en":"A row of page numbers with “Previous” and “Next” at the ends. The current page number is highlighted, and long ranges are shortened with “…”.","ja":"ページ番号が横に並び、両端に「前へ」「次へ」があります。今のページ番号は強調され、ページ数が多いときは「…」で省略されます。"},"behavior":[{"en":"Choosing a number shows that page; “Previous” and “Next” move one page at a time.","ja":"番号を選ぶとそのページを表示し、「前へ」「次へ」で1ページずつ移動します。"},{"en":"The current page is marked with `aria-current=\"page\"`, and the whole control sits in a `<nav>` landmark.","ja":"今のページは `aria-current=\"page\"` で示し、全体を `<nav>` ランドマークで囲みます。"},{"en":"The `<nav>` is labelled with what it pages through, such as “Search results”. Screen readers already announce it as navigation, so a label like “Pagination” would only repeat the role.","ja":"`<nav>` のラベルには「検索結果」のように何のページかを書きます。スクリーンリーダーはナビゲーションであることを読み上げるので、「ページネーション」のようなラベルは役割の繰り返しになります。"},{"en":"Only the first and last pages and the pages next to the current one are shown; the pages in between become “…”. The “…” is plain text, not a button.","ja":"最初と最後のページ、今のページとその前後だけを出し、間のページは「…」にします。「…」はボタンではなく、ただの文字です。"},{"en":"Websites often use links to separate URLs; this demo uses buttons because it swaps content on the same screen.","ja":"Web サイトではページごとの URL へのリンクにすることが多いです。このデモは同じ画面の中身を入れ替えるため、ボタンにしています。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the page controls.","ja":"ページ番号や「前へ」「次へ」の間を移動します。"}},{"key":"Enter / Space","action":{"en":"Goes to the focused page. Space works because this demo uses buttons; page links respond to Enter only.","ja":"フォーカス中のページへ移動します。このデモはボタンなので Space でも動きます。ページへのリンクの場合は Enter だけで動きます。"}}],"variations":[{"name":{"en":"Previous and next with a counter","ja":"前後とカウンターだけの型"},"description":{"en":"Only “Previous page” and “Next page” with the position, such as “5 / 24”, between them and no page numbers. The Digital Agency Design System uses this form, as text, outlined or arrow-only buttons. The GOV.UK Design System’s block style also shows only Previous and Next, stacked vertically, and its labels can say what the neighbouring pages are about.","ja":"ページ番号を並べず、「前のページ」「次のページ」と、その間の「5 / 24」のような現在位置だけを置くものです。デジタル庁デザインシステムはこの形を使い、ボタンにはテキスト型・アウトライン型・矢印型があります。GOV.UK Design System のブロック型も「前へ」「次へ」だけを縦に並べ、ラベルに前後のページの内容を添えられます。"}},{"name":{"en":"Table pagination","ja":"表のページ送り"},"description":{"en":"Attached below a data table, with the number of rows per page and the range being shown.","ja":"データの表の下に付け、1ページの行数や表示中の範囲も表示するものです。"}}],"usage":[{"en":"The GOV.UK Design System and the Digital Agency Design System hide “Previous” and “Next” on the first and last pages instead of disabling them. This demo keeps them focusable with `aria-disabled`.","ja":"GOV.UK Design System とデジタル庁デザインシステムでは、最初と最後のページで「前へ」「次へ」を無効にせず非表示にします。このデモは `aria-disabled` にして、フォーカスできるまま残しています。"},{"en":"The U.S. Web Design System always shows the first page and the current page, highlights the current page, and shows the previous, next and last pages when they exist. It keeps every item on one line, marks missing pages with an ellipsis that cannot be selected, and suggests showing everything on one page when the collection is shorter than three or four screens.","ja":"U.S. Web Design System は、最初のページと現在のページを必ず出して現在のページを目立たせ、前・次・最後のページがあればそれも出します。項目は1行に収め、抜けているページは選べない「…」で示します。項目が全体で画面3〜4つ分に満たないときは、ページを分けずにすべて表示することを勧めています。"}],"misuse":[{"pattern":{"en":"Loading more items automatically as the user nears the bottom, instead of splitting them into pages","ja":"ページに分けず、下端に近づくと続きを自動で読み込む"},"harm":{"en":"Keyboard-only users have to Tab through the items one by one, which makes reaching the end a long task. It is hard to find an item seen earlier, and the scroll bar no longer shows how much is left.","ja":"キーボードだけで操作する人は項目を1つずつ Tab キーで進むしかなく、終わりまで行くのに長くかかります。前に見た項目を探し直しにくく、スクロールバーからは残りの量が分からなくなります。"},"instead":{"en":"For lists where people look for a particular item, split the results into pages and show the current page among the others.","ja":"目的の項目を探す一覧では、結果をページに分け、今どのページにいるかを示します。"}}],"related":[{"id":"feed","diff":{"en":"Pagination splits the items into pages that people choose to move between; a feed adds the next articles in place as people read.","ja":"ページネーションは項目をページに分けて利用者が選んだページへ移り、フィードは読み進めるとその場に次の記事を足します。"}},{"id":"carousel","diff":{"en":"Pagination moves through pages of a long list; a carousel shows one slide of a small set in place.","ja":"ページネーションは長い一覧のページを移動し、カルーセルは少数のスライドをその場で1枚ずつ見せます。"}},{"id":"stepper","diff":{"en":"Pagination moves through pages of results; a stepper shows the user’s place in a procedure with distinct steps.","ja":"ページネーションは検索結果などのページを行き来し、ステップナビゲーションは内容の異なる手順の中での現在地を示します。"}}],"sources":[{"label":"GOV.UK Design System: Pagination","url":"https://design-system.service.gov.uk/components/pagination/","checkedAt":"2026-10-22"},{"label":"Carbon Design System: Pagination","url":"https://carbondesignsystem.com/components/pagination/usage/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ページナビゲーション」をもとに作成","url":"https://design.digital.go.jp/dads/components/page-navigation/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: page-navigation","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/page-navigation","checkedAt":"2026-10-21"},{"label":"Nielsen Norman Group: Infinite Scrolling: When to Use It, When to Avoid It","url":"https://www.nngroup.com/articles/infinite-scrolling-tips/","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Infinite Scrolling Is Not for Every Website","url":"https://www.nngroup.com/articles/infinite-scrolling/","checkedAt":"2026-10-22"},{"label":"U.S. Web Design System: Pagination","url":"https://designsystem.digital.gov/components/pagination/","checkedAt":"2026-11-02"},{"label":"WAI-ARIA APG: Link Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/link/","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/pagination/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/pagination/"}},{"id":"password-field","category":"input","names":{"en":"Password field","ja":"パスワード入力"},"aliases":[{"name":"Password input","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/password-input/"},{"name":"Password input","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/text-input/usage/#password-input"},{"name":"Input.Password","source":"Ant Design","url":"https://ant.design/components/input#inputpassword"}],"summary":{"en":"A field for a password that hides what is typed, with a button to show it.","ja":"入力した文字を伏せ字で隠し、ボタンで表示もできるパスワードの欄です。"},"appearance":{"en":"A text box with a label above it, where each character typed appears as a dot. A “Show” button sits next to or inside the box.","ja":"上にラベルのある入力欄で、入力した文字は1文字ずつ黒丸で表示されます。欄の横か中に「表示」ボタンがあります。"},"behavior":[{"en":"The password is hidden at first, because people may not be somewhere private. Pressing Show changes the field to plain text so they can check what they typed, and the button becomes Hide.","ja":"人目のある場所で使うこともあるので、最初は隠しておきます。「表示」を押すと普通の文字で表示され、入力を確かめられます。ボタンは「隠す」に変わります。"},{"en":"The button’s text changes between Show and Hide, so it does not use `aria-pressed`: the APG Button pattern uses `aria-pressed` only when the label stays the same. The button names its field with `aria-label`, such as “Show password”, and a polite live region says whether the password is now visible.","ja":"ボタンの文言が「表示」と「隠す」で入れ替わるので、`aria-pressed` は付けません。APG の Button パターンでは、`aria-pressed` はラベルを変えないときに使います。ボタンには「パスワードを表示」のように欄の名前を含めた `aria-label` を付け、表示したかどうかを `aria-live=\"polite\"` の領域で知らせます。"},{"en":"Use `autocomplete=\"current-password\"` when signing in, and `autocomplete=\"new-password\"` when creating or changing a password. With `new-password`, the browser does not fill in a saved password and can suggest a strong one.","ja":"ログインでは `autocomplete=\"current-password\"`、パスワードを作るときや変えるときは `autocomplete=\"new-password\"` を付けます。`new-password` なら、ブラウザは保存済みのパスワードを入れず、強いパスワードを提案できます。"},{"en":"`spellcheck=\"false\"` and `autocapitalize=\"off\"` stop the browser from checking or changing the text. Some spellcheck tools send what is typed to a server.","ja":"`spellcheck=\"false\"` と `autocapitalize=\"off\"` で、ブラウザが文字を校正したり大文字に変えたりしないようにします。校正の機能には、入力をサーバーへ送るものがあります。"},{"en":"Browsers, password managers and screen readers can add their own Show buttons, or reveal the password by other means, so the button text may not always match what is on screen.","ja":"ブラウザやパスワードマネージャー、スクリーンリーダーが独自の表示ボタンを足したり、別の方法で表示を切り替えたりするので、ボタンの文言と実際の表示が食い違うことがあります。"},{"en":"In this demo, the field is for creating a password, so it uses `new-password`. Pressing Save hides the password again before saving, as GOV.UK’s component does. With fewer than 8 characters, an error appears below the field. The password is not sent or kept anywhere.","ja":"このデモはパスワードを作る欄なので `new-password` を付けています。「保存」を押すと、GOV.UK の部品と同じように、表示していたパスワードを隠してから保存します。8文字未満なら欄の下にエラーを出します。パスワードはどこにも送らず、残しません。"}],"keyboard":[{"key":"Enter","action":{"en":"In the field, submits the form (Save in this demo). On the Show / Hide button, shows or hides the password.","ja":"入力欄では、フォームを送信します（このデモでは「保存」）。「表示」「隠す」ボタンでは、パスワードの表示と非表示を切り替えます。"}},{"key":"Space","action":{"en":"On the Show / Hide button, shows or hides the password.","ja":"「表示」「隠す」ボタンで、パスワードの表示と非表示を切り替えます。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the field and the Show / Hide button.","ja":"入力欄と「表示」「隠す」ボタンの間を移動します。"}}],"usage":[{"en":"A Show button lets people check what they typed, so there is no need for a second “Confirm password” field.","ja":"「表示」ボタンで入力を確かめられるので、確認のための2つ目のパスワード欄は要りません。"},{"en":"When there are several password fields, give each Show button a different name, such as “Show password” and “Show new password”.","ja":"パスワードの欄が複数あるときは、「パスワードを表示」「新しいパスワードを表示」のように、表示ボタンごとに違う名前を付けます。"},{"en":"Set a minimum length of at least 8 characters and no maximum. State any rules about characters before people type.","ja":"最小の長さは8文字以上にし、最大の長さは決めません。使える文字に決まりがあれば、入力の前に示します。"},{"en":"When sign-in fails, do not say whether the username or the password was wrong, and clear the password field. Saying which was wrong helps attackers.","ja":"ログインに失敗したときは、ユーザー名とパスワードのどちらが違ったかを伝えず、パスワードの欄を空にします。どちらが違ったかを伝えると、不正にログインしようとする人の手がかりになります。"},{"en":"Use this field only for passwords. For codes sent by text message or for other secret answers, use a text field.","ja":"この欄はパスワードにだけ使います。SMS で届く確認コードや、ほかの秘密の答えには、テキストフィールドを使います。"}],"misuse":[{"pattern":{"en":"Blocking paste into the password field","ja":"パスワードの欄への貼り付けを禁止する"},"harm":{"en":"People cannot paste from a password manager and have to type the password from memory or copy it character by character. This is hard for people with cognitive disabilities, such as difficulties with memory or reading.","ja":"パスワードマネージャーから貼り付けられず、パスワードを思い出して入力するか、1文字ずつ書き写すことになります。記憶や読むことに困難があるなど、認知に障害のある人には難しいです。"},"instead":{"en":"Allow paste, and set the right `autocomplete` value so browsers and password managers can fill the field.","ja":"貼り付けを許し、ブラウザやパスワードマネージャーが入力できるよう、適切な `autocomplete` の値を付けます。"}},{"pattern":{"en":"Limiting the length with `maxlength`","ja":"`maxlength` で長さを打ち切る"},"harm":{"en":"A password pasted or filled in by a password manager is cut off, and nothing tells people that it was.","ja":"貼り付けたパスワードや、パスワードマネージャーが入れたパスワードが途中で切れても、利用者には何の知らせもありません。"},"instead":{"en":"Do not set a maximum. If one is truly needed, let people type past it and say so in an error message.","ja":"最大の長さは決めません。どうしても要るなら、超えても入力できるようにし、超えたことをエラーメッセージで伝えます。"}}],"related":[{"id":"text-field","diff":{"en":"A password field hides what is typed and has a button to show it; a text field always shows the text.","ja":"パスワード入力は入力した文字を隠し、表示するボタンが付きます。テキストフィールドは文字を常に見せます。"}},{"id":"one-time-code","diff":{"en":"A password field takes a secret that people choose and keep; a one-time code field takes a short code sent to them for one sign-in, and shows it as typed.","ja":"パスワード入力は利用者が決めて使い続ける秘密を入れます。確認コードの入力は、1回のログインのために届いた短いコードを入れ、文字は隠しません。"}}],"sources":[{"label":"GOV.UK Design System: Password input","url":"https://design-system.service.gov.uk/components/password-input/","checkedAt":"2026-10-22"},{"label":"GOV.UK Frontend: password-input.mjs","url":"https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/password-input/password-input.mjs","checkedAt":"2026-10-22"},{"label":"GOV.UK Design System: Ask users for passwords","url":"https://design-system.service.gov.uk/patterns/passwords/","checkedAt":"2026-10-22"},{"label":"WAI-ARIA APG: Button Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/button/","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 3.3.8: Accessible Authentication (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html","checkedAt":"2026-10-22"},{"label":"WCAG 2.2 Techniques: F109: Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format","url":"https://www.w3.org/WAI/WCAG22/Techniques/failures/F109","checkedAt":"2026-10-22"},{"label":"MDN: HTML attribute: autocomplete","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete","checkedAt":"2026-10-22"},{"label":"Carbon Design System: Text input","url":"https://carbondesignsystem.com/components/text-input/usage/","checkedAt":"2026-10-22"},{"label":"Ant Design: Input","url":"https://ant.design/components/input","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/password-field/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/password-field/"}},{"id":"popover","category":"overlay","names":{"en":"Popover","ja":"ポップオーバー"},"aliases":[{"name":"Toggletip","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/toggletip/usage/"}],"summary":{"en":"A small panel that opens next to a button and closes when the user clicks elsewhere.","ja":"ボタンの近くに開き、外側をクリックすると閉じる小さなパネルです。"},"appearance":{"en":"A small card with a border and shadow, placed right next to the button that opened it. It can hold a title, text, and buttons.","ja":"枠線と影のある小さなカードが、開いたボタンのすぐ隣に出ます。見出し・文章・ボタンを入れられます。"},"behavior":[{"en":"Opens and closes when the button is pressed.","ja":"ボタンを押すと開き、もう一度押すと閉じます。"},{"en":"Clicking outside or pressing Esc closes it (“light dismiss”).","ja":"外側をクリックするか Esc を押すと閉じます（ライトディスミス）。"},{"en":"Unlike a modal, the rest of the page stays usable while it is open.","ja":"モーダルと違い、開いている間もページの他の部分を操作できます。"},{"en":"This demo uses the HTML `popover` attribute; where CSS anchor positioning is not supported, it opens in the middle of the screen.","ja":"このデモは HTML の `popover` 属性を使っています。CSS のアンカー配置に対応していないブラウザでは、画面の中央に出ます。"},{"en":"In this demo, it explains the shipping fee in an order summary, and holds a link to more details and a Close button.","ja":"このデモでは、注文内容の送料の決まり方を説明し、中に詳しい説明へのリンクと「閉じる」ボタンを置いています。"},{"en":"With the native `popover` attribute, moving focus out of it does not close it; it stays open until the button, an outside click or Esc closes it.","ja":"ネイティブの `popover` 属性では、フォーカスが外へ出ても閉じません。ボタン、外側のクリック、Esc のどれかで閉じるまで開いたままです。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"Opens or closes the popover.","ja":"ポップオーバーを開閉します。"}},{"key":"Tab / Shift + Tab","action":{"en":"From the button, moves into the popover’s contents, then on to the rest of the page. The popover stays open after focus leaves it.","ja":"ボタンから、ポップオーバーの中身へ、さらにページの続きへ移動します。フォーカスが外へ出てもポップオーバーは開いたままです。"}},{"key":"Esc","action":{"en":"Closes the popover and returns focus to the button.","ja":"ポップオーバーを閉じ、ボタンにフォーカスを戻します。"}}],"usage":[{"en":"Carbon tells its two kinds apart by how they open. A tooltip appears on hover or focus and holds brief information that is not interactive. Its toggletip, built on a popover, opens on click or Enter and stays open until dismissed, so it can hold buttons and other controls.","ja":"Carbon は開き方で 2 つを分けています。ツールチップはホバーかフォーカスで出て、操作できない短い情報を載せます。ポップオーバーをもとにしたトグルチップは、クリックか Enter で開いて閉じるまで残るので、ボタンなどの操作部品を置けます。"},{"en":"Do not use one for critical information or for input required to finish a task. Carbon uses a modal for those.","ja":"重要な情報や、作業を終えるのに必須の入力には使いません。Carbon はそうした場合にモーダルを使います。"}],"related":[{"id":"tooltip","diff":{"en":"A popover opens on click and can contain buttons; a tooltip shows on hover or focus and holds only text (Material Design 3’s rich tooltip, which can have buttons and links, is the exception).","ja":"ポップオーバーはクリックで開いてボタンも入れられ、ツールチップはホバーやフォーカスで出て文字だけを持ちます（ボタンやリンクも持てる Material Design 3 のリッチツールチップは例外です）。"}},{"id":"modal","diff":{"en":"A popover leaves the page usable and closes on an outside click; a modal blocks the page until it is closed.","ja":"ポップオーバーは開いたままページを操作でき、外側のクリックで閉じます。モーダルは閉じるまでページを操作できません。"}},{"id":"context-menu","diff":{"en":"A popover is a panel of any content next to its button; a context menu lists actions for an item and opens where it is right-clicked.","ja":"ポップオーバーは、ボタンの隣に好きな内容を出すパネルです。コンテキストメニューは項目に対する操作を並べ、右クリックした場所に開きます。"}},{"id":"bottom-sheet","diff":{"en":"A popover opens next to the button that opened it and leaves the page usable; a bottom sheet is anchored to the bottom edge of the screen, and a modal one dims the page.","ja":"ポップオーバーは開いたボタンの隣に出てページを操作でき、ボトムシートは画面の下端に固定され、モーダルのものはページを暗くします。"}}],"sources":[{"label":"MDN: popover","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover","checkedAt":"2026-10-20"},{"label":"Open UI: Popover API (Explainer)","url":"https://open-ui.org/components/popover.research.explainer/","checkedAt":"2026-10-20"},{"label":"Carbon Design System: Toggletip","url":"https://carbondesignsystem.com/components/toggletip/usage/","checkedAt":"2026-10-21"},{"label":"Material Design 3: Tooltips (guidelines)","url":"https://m3.material.io/components/tooltips/guidelines","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/popover/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/popover/"}},{"id":"progress-bar","category":"feedback","names":{"en":"Progress bar","ja":"プログレスバー"},"aliases":[{"name":"プログレスインジケーター","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/progress-indicator/"},{"name":"Progress indicators","source":"Material Design 3","url":"https://m3.material.io/components/progress-indicators/guidelines"}],"summary":{"en":"A bar that fills up to show how much of a task, such as an upload, is done.","ja":"アップロードなどの作業がどこまで進んだかを、伸びていく棒で示す部品です。"},"appearance":{"en":"A thin horizontal track that fills with color from left to right, often with a percentage or label nearby.","ja":"細い横長の溝が左から右へ色で埋まっていきます。近くに割合やラベルが表示されることが多いです。"},"behavior":[{"en":"The filled part grows as the task progresses and reaches the end when it finishes.","ja":"作業が進むと塗られた部分が伸び、終わると端まで届きます。"},{"en":"When the remaining time is not yet known, it shows an indeterminate bar that moves without a value, and switches to the percentage once it is known.","ja":"残りの時間がまだ分からないうちは、値を持たずに動く不確定の表示にし、分かった時点で割合の表示に切り替えます。"},{"en":"It is not interactive; the user only watches it. The label next to it says what is being done. In this demo, it changes to the result when the task finishes or is canceled; Carbon instead keeps the label as it is and shows the result with the bar’s color and an icon, with helper text explaining an error.","ja":"操作する部品ではなく、見るだけのものです。近くのラベルで何の作業かを示します。このデモでは、終わったときや中止したときにラベルを結果を表す文に変えますが、Carbon はラベルを変えず、棒の色とアイコンで結果を示し、エラーの内容は補助テキストで伝えます。"},{"en":"For a long task, tell assistive technology the percentage at intervals rather than at every change. The Digital Agency Design System HTML implementation announces it every 5 seconds by default.","ja":"長い処理では、途中の割合を変わるたびではなく、間隔をあけて支援技術に伝えます。デジタル庁デザインシステムの HTML 実装では、既定で5秒ごとに知らせます。"},{"en":"This demo uses the native `<progress>` element with a `<label>`; leaving out `value` makes it indeterminate. The task is short, so only the start, completion and cancellation are announced, through a `role=\"status\"` live region.","ja":"このデモはネイティブの `<progress>` 要素と `<label>` を使い、`value` を省いて不確定の表示にしています。作業が短いため、開始・完了・中止だけを `role=\"status\"` のライブリージョンで知らせます。"},{"en":"In this demo, the start button cannot be pressed while the upload is running, and Cancel stops it where it is. Both are marked with `aria-disabled` rather than `disabled`, so focus stays on the button.","ja":"このデモでは、アップロード中は開始ボタンを押せず、キャンセルを押すとその位置で止まります。どちらも `disabled` ではなく `aria-disabled` で押せないことを示し、フォーカスがボタンから外れないようにしています。"}],"keyboard":[{"key":"—","action":{"en":"None. The demo’s start and cancel buttons use Enter / Space.","ja":"なし。デモの開始ボタンとキャンセルボタンは Enter / Space で押せます。"}}],"variations":[{"name":{"en":"Determinate","ja":"確定"},"description":{"en":"Shows how much of the task is done, often with a percentage nearby.","ja":"作業がどこまで済んだかを示すものです。近くに割合を添えることが多いです。"}},{"name":{"en":"Indeterminate","ja":"不確定"},"description":{"en":"Shows that work is ongoing without knowing how long it will take, often as a moving stripe. Made by leaving out the `value` attribute.","ja":"終わるまでの時間が分からないときに、動く帯などで作業中であることだけを示すものです。`value` 属性を省くとこの状態になります。"}}],"usage":[{"en":"Do not use it to show progress through the steps of a form. Use a stepper for that.","ja":"フォームの手順の進み具合を示すのには使いません。それにはステップナビゲーションを使います。"},{"en":"Material Design 3 uses a progress indicator for waits over 5 seconds, and one indicator for a whole group of items rather than one for each. A determinate indicator must reflect the real progress, and an indeterminate one can change to a determinate one as more becomes known.","ja":"Material Design 3 は、5秒を超える待ち時間にプログレスインジケーターを使い、項目ごとではなく、まとまり全体に1つだけ出します。進捗が分かるものは実際の進み具合を正確に表す必要があります。進捗が分からないものは、情報が増えたら進捗が分かるものに切り替えられます。"}],"related":[{"id":"spinner","diff":{"en":"A progress bar shows how far along a task is; a spinner only shows that something is happening.","ja":"プログレスバーは作業の進み具合を示し、スピナーは処理中であることだけを示します。"}},{"id":"meter","diff":{"en":"A progress bar shows how far a task has gone; a meter shows a measurement within a known range, such as disk usage.","ja":"プログレスバーは作業の進み具合を示し、メーターはディスク使用量のように決まった範囲の中の測定値を示します。"}},{"id":"stepper","diff":{"en":"A progress bar shows progress within one task; a stepper shows which step of a multi-page procedure the user is on.","ja":"プログレスバーは1つの作業の進み具合を示し、ステップナビゲーションは複数画面にまたがる手続きのどの段階にいるかを示します。"}}],"sources":[{"label":"MDN: <progress>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress","checkedAt":"2026-10-20"},{"label":"MUI: Progress","url":"https://mui.com/material-ui/react-progress/","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Progress bar","url":"https://carbondesignsystem.com/components/progress-bar/usage/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「プログレスインジケーター」をもとに作成","url":"https://design.digital.go.jp/dads/components/progress-indicator/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: progress-indicator","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/progress-indicator","checkedAt":"2026-10-21"},{"label":"Material Design 3: Progress indicators","url":"https://m3.material.io/components/progress-indicators/guidelines","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/progress-bar/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/progress-bar/"}},{"id":"radio","category":"input","names":{"en":"Radio","ja":"ラジオボタン"},"aliases":[{"name":"Radio button","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/radio-button/usage/"}],"summary":{"en":"A group of round buttons where exactly one option can be chosen.","ja":"丸いボタンのグループから、選択肢を1つだけ選ぶ部品です。"},"appearance":{"en":"Small circles next to labels, stacked or in a row. The chosen one has a filled dot in the middle.","ja":"ラベルの横に小さな丸が縦や横に並びます。選んだものだけ、丸の中に点が入ります。"},"behavior":[{"en":"Choosing an option clears the previous choice in the same group.","ja":"選択肢を選ぶと、同じグループで前に選んでいたものは外れます。"},{"en":"Once one is chosen, the group cannot go back to having none chosen.","ja":"一度選ぶと、どれも選ばれていない状態には戻せません。"},{"en":"In this demo, nothing is chosen at first. Tab then moves to the first option, and Space chooses it.","ja":"このデモでは、最初はどれも選ばれていません。このとき Tab では最初の選択肢へ移り、Space で選びます。"},{"en":"Tab moves into the group as one stop; arrow keys move between the options and choose them at the same time.","ja":"Tab ではグループ全体が1か所として扱われ、グループの中では矢印キーで選択肢を移ると同時に選びます。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves into the group and out of it. Focus goes to the chosen option; if none is chosen, Tab goes to the first option. With Shift + Tab, some browsers go to the last option.","ja":"グループへ入ったり、グループから出たりします。選ばれている選択肢へ入り、どれも選ばれていなければ、Tab キーでは最初の選択肢へ入ります。Shift + Tab では、最後の選択肢へ入るブラウザもあります。"}},{"key":"↓ / →","action":{"en":"Chooses the next option, wrapping to the first.","ja":"次の選択肢を選びます。最後からは最初に戻ります。"}},{"key":"↑ / ←","action":{"en":"Chooses the previous option, wrapping to the last.","ja":"前の選択肢を選びます。最初からは最後に戻ります。"}},{"key":"Space","action":{"en":"Chooses the focused option.","ja":"フォーカス中の選択肢を選びます。"}}],"usage":[{"en":"Radio buttons suit five or fewer options, because every option is visible without opening anything. With more than five options, a select usually fits better. With only two options, a select is a poor fit.","ja":"選択肢が5つ以下ならラジオボタンが向いています。何も開かなくてもすべての選択肢が見えるためです。選択肢が5つを超えるなら、たいていはセレクトボックスのほうが向いています。2択にはセレクトボックスは向いていません。"},{"en":"A selected radio button cannot be cleared, so add a choice such as “None of these” to optional questions.","ja":"一度選ぶと選択を外せないため、任意の質問には「あてはまるものはない」などの選択肢を加えます。"},{"en":"Put the circle to the left of its label.","ja":"丸はラベルの左に置きます。"},{"en":"If you build radio buttons with `role=\"radio\"` instead of native ones, you have to add the keys yourself. APG has Tab move into and out of the group, and the arrow keys move to and check another option.","ja":"ネイティブのラジオボタンではなく `role=\"radio\"` で作るなら、キー操作は自分で足します。APG では、Tab キーでグループへ出入りし、矢印キーで別の選択肢へ移って選びます。"},{"en":"Tie the label to the circle with `<label>`. MDN explains that a label gives a larger hit area, which helps anyone trying to activate the input, including people on touch screens.","ja":"ラベルは `<label>` で丸に結び付けます。MDN によると、ラベルの分だけ押せる範囲が広がり、タッチ画面を使う人を含めて、入力欄を操作しやすくなります。"}],"misuse":[{"pattern":{"en":"Selecting an option in advance","ja":"選択肢をあらかじめ選んでおく"},"harm":{"en":"People become more likely to miss that they still had a question to answer, and to submit the wrong answer.","ja":"答えていない質問があることに気づきにくくなり、誤った回答のまま送信しやすくなります。"},"instead":{"en":"Show the group with nothing selected. For an optional question, add a choice such as “None of these” instead of preselecting one.","ja":"最初はどれも選ばれていない状態で表示します。任意の質問なら、初期選択の代わりに「あてはまるものはない」などの選択肢を加えます。"}}],"related":[{"id":"checkbox","diff":{"en":"Radio buttons allow exactly one choice; checkboxes allow any number.","ja":"ラジオボタンは1つだけ選び、チェックボックスはいくつでも選べます。"}},{"id":"select","diff":{"en":"Radio buttons show every option at once; a select hides them in a list to save space.","ja":"ラジオボタンはすべての選択肢を常に見せ、セレクトはリストにしまって場所を取りません。"}},{"id":"listbox","diff":{"en":"Radio buttons show every option with its own label; a listbox scrolls and is one tab stop.","ja":"ラジオボタンは選択肢ごとのラベルを付けてすべてを見せ、リストボックスはスクロールでき、Tab では1か所として扱われます。"}},{"id":"segmented-control","diff":{"en":"Radio buttons list choices with round markers and can hold longer labels; a segmented control shows a few short choices as joined buttons in one row.","ja":"ラジオボタンは丸い印を付けて選択肢を並べ、長いラベルも置けます。セグメンテッドコントロールは数個の短い選択肢をつながったボタンとして1列に並べます。"}},{"id":"rating","diff":{"en":"Radio buttons list choices with their own labels; a rating is a radio group drawn as a row of stars for an ordered score.","ja":"ラジオボタンは選択肢をそれぞれのラベル付きで並べます。評価は、順に並んだ点数を選ぶラジオボタンのグループを、星の列として見せたものです。"}}],"sources":[{"label":"WAI-ARIA APG: Radio Group Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/radio/","checkedAt":"2026-10-20"},{"label":"Carbon Design System: Radio button","url":"https://carbondesignsystem.com/components/radio-button/usage/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ラジオボタン」をもとに作成","url":"https://design.digital.go.jp/dads/components/radio/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「セレクトボックス（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/select/usage/","checkedAt":"2026-11-02"},{"label":"GOV.UK Design System: Radios","url":"https://design-system.service.gov.uk/components/radios/","checkedAt":"2026-10-21"},{"label":"MDN: <label>: The Label element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/radio/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/radio/"}},{"id":"range-slider","category":"input","names":{"en":"Range slider","ja":"範囲スライダー"},"aliases":[{"name":"Range slider","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/slider/usage/"},{"name":"Range slider","source":"MUI","url":"https://mui.com/material-ui/react-slider/"},{"name":"Slider (Multi-Thumb)","source":"WAI-ARIA APG","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/"}],"summary":{"en":"A slider with two knobs on one track that picks the lowest and highest values of a range.","ja":"1本の溝に2つのつまみがあり、範囲の下限と上限を選ぶスライダーです。"},"appearance":{"en":"A horizontal line with two round knobs. The part of the line between the knobs is filled with the accent color, and the chosen range is often written above it.","ja":"横線の上に丸いつまみが2つあります。つまみの間の線はアクセントカラーで塗られ、選んだ範囲が上に書かれることが多いです。"},"behavior":[{"en":"Each knob is a separate `slider` that is in the Tab order and has the keys of a single slider. The Tab order stays the same wherever the knobs are.","ja":"つまみはそれぞれ独立した `slider` で、Tab キーの順に入り、1つのスライダーと同じキー操作を持ちます。つまみがどこにあっても、Tab キーの順は変わりません。"},{"en":"The knobs cannot pass each other. The lower knob’s `aria-valuemax` is the upper knob’s value, the upper knob’s `aria-valuemin` is the lower knob’s value, and both are updated whenever a knob moves.","ja":"つまみは互いを追い越せません。下のつまみの `aria-valuemax` は上のつまみの値、上のつまみの `aria-valuemin` は下のつまみの値にし、つまみが動くたびに更新します。"},{"en":"Each knob has its own name, such as “Minimum price”, and `aria-valuetext` adds the unit to the number that is read out.","ja":"つまみには「最低価格」のようにそれぞれ名前を付け、`aria-valuetext` で読み上げる数値に単位を添えます。"},{"en":"In this demo, clicking or tapping the track moves the nearer knob to that point, and keeping the pointer down drags it. Page Up and Page Down move 10 steps, as in the APG example.","ja":"このデモでは、溝をクリックやタップすると近いほうのつまみがそこへ動き、押したまま動かすとドラッグになります。APG の例と同じく、Page Up と Page Down は10刻み動かします。"},{"en":"In this demo, the range written above the track and the numbers at its ends are hidden from screen readers with `aria-hidden`, because each knob already announces its value.","ja":"このデモでは、値はつまみがそれぞれ読み上げるので、溝の上に書いた範囲と両端の数字は `aria-hidden` で読み上げから外しています。"}],"keyboard":[{"key":"→ / ↑","action":{"en":"Increases the focused knob by one step.","ja":"フォーカスしたつまみの値を1刻み増やします。"}},{"key":"← / ↓","action":{"en":"Decreases the focused knob by one step.","ja":"フォーカスしたつまみの値を1刻み減らします。"}},{"key":"Page Up / Page Down","action":{"en":"Increases / decreases the focused knob by 10 steps.","ja":"フォーカスしたつまみの値を10刻みで増やしたり減らしたりします。"}},{"key":"Home / End","action":{"en":"Moves the focused knob to its lowest / highest allowed value. For the lower knob the highest is the upper knob’s value, and for the upper knob the lowest is the lower knob’s value.","ja":"フォーカスしたつまみを、動ける範囲の最小・最大の値にします。下のつまみの最大は上のつまみの値、上のつまみの最小は下のつまみの値になります。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the two knobs, lower first.","ja":"2つのつまみの間を移ります。下のつまみが先です。"}}],"usage":[{"en":"Use it to pick a range of numbers, such as a price range in search filters. For a range of dates, use a date picker.","ja":"検索の絞り込みの価格帯のように、数値の範囲を選ぶときに使います。日付の範囲には、日付ピッカーを使います。"},{"en":"The Carbon Design System pairs the range slider with two number inputs, so the exact minimum and maximum can also be typed.","ja":"Carbon Design System は、範囲スライダーに2つの数値入力を添え、正確な最小値と最大値を入力することもできるようにしています。"},{"en":"Some touch-based assistive technologies cannot operate sliders yet, so test on touch devices before relying on one.","ja":"タッチ操作の支援技術には、まだスライダーを操作できないものがあります。使う前にタッチ端末で確かめます。"}],"misuse":[{"pattern":{"en":"Letting the two knobs move only by dragging","ja":"2つのつまみをドラッグでしか動かせない作りにする"},"harm":{"en":"People who cannot drag precisely, and people who use a trackball, head pointer, eye-gaze system or speech-controlled pointer, find dragging hard and error-prone.","ja":"正確にドラッグできない人や、トラックボール、ヘッドポインター、視線入力、音声で動かすポインターを使う人には、ドラッグが難しく、誤りやすいです。"},"instead":{"en":"Let a click or tap on the track move the nearer knob, and let each knob move with the arrow keys. Number inputs next to the slider also let people set exact values without dragging.","ja":"溝をクリックやタップすると近いほうのつまみが動くようにし、それぞれのつまみを矢印キーでも動かせるようにします。スライダーの横に数値入力を置けば、ドラッグせずに正確な値も入れられます。"}}],"related":[{"id":"slider","diff":{"en":"A range slider has two knobs that pick the lowest and highest values; a slider has one knob that picks a single value.","ja":"範囲スライダーは2つのつまみで下限と上限を選び、スライダーは1つのつまみで1つの値を選びます。"}}],"sources":[{"label":"WAI-ARIA APG: Slider (Multi-Thumb) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/","checkedAt":"2026-10-22"},{"label":"WAI-ARIA APG: Horizontal Multi-Thumb Slider Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/","checkedAt":"2026-10-22"},{"label":"WAI-ARIA APG: Slider Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider/","checkedAt":"2026-10-22"},{"label":"Carbon Design System: Slider","url":"https://carbondesignsystem.com/components/slider/usage/","checkedAt":"2026-10-22"},{"label":"MUI: Slider","url":"https://mui.com/material-ui/react-slider/","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 2.5.7: Dragging Movements (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/range-slider/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/range-slider/"}},{"id":"rating","category":"input","names":{"en":"Rating","ja":"評価（星）"},"aliases":[{"name":"Rating","source":"MUI","url":"https://mui.com/material-ui/react-rating/"},{"name":"Rate","source":"Ant Design","url":"https://ant.design/components/rate"},{"name":"Rating","source":"Fluent UI React v9","url":"https://storybooks.fluentui.dev/react/?path=/docs/components-rating--docs"}],"summary":{"en":"A row of stars for giving something a score, such as 4 out of 5.","ja":"星の数で、5段階中の4のように点数を付ける部品です。"},"appearance":{"en":"Five stars in a row. The stars up to the chosen score are filled, and the rest are outlines. The score is often also written next to them.","ja":"星が5つ横に並びます。選んだ点数までの星が塗られ、残りは輪郭だけになります。横に点数が文字でも書かれることが多いです。"},"behavior":[{"en":"Clicking a star chooses that score. Moving the pointer over the stars previews the score before clicking.","ja":"星をクリックするとその点数になります。マウスを星の上に動かすと、クリックする前にその点数を見せます。"},{"en":"It is a radio group with the inputs visually hidden: each star is a native radio button with a label such as “3 stars”. Tab moves into the group as one stop, and the arrow keys choose a score, as with any radio group.","ja":"入力を見えなくしたラジオボタンのグループで作ります。星はそれぞれ「星3つ」のようなラベルを持つネイティブのラジオボタンです。ふつうのラジオボタンと同じく、Tab ではグループ全体が1か所として扱われ、矢印キーで点数を選びます。"},{"en":"A radio button cannot be cleared once chosen, so there is also a hidden “No rating” option for 0 stars, chosen at first. When focus is on it, the whole row of stars gets a focus ring.","ja":"ラジオボタンは一度選ぶと外せないので、0にあたる見えない「評価なし」の選択肢も置き、最初はそれを選んでおきます。そこにフォーカスがあるときは、星の並び全体にフォーカスの枠を出します。"},{"en":"Chosen stars differ in shape (★ and ☆) as well as color, and the score is written below in words.","ja":"選んだ星は、色だけでなく形（★と☆）でも区別し、点数は下に文字でも書きます。"},{"en":"In this demo, the arrow keys wrap from 5 stars to “No rating”, as native radio buttons do.","ja":"このデモでは、ネイティブのラジオボタンと同じく、矢印キーで星5つから「評価なし」へ回ります。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves into the group (to the chosen score) and out of it.","ja":"グループ（選ばれている点数）へ入ったり、グループから出たりします。"}},{"key":"↑ / ←","action":{"en":"Chooses one star fewer. From “No rating” it goes to 5 stars.","ja":"星を1つ減らします。「評価なし」からは星5つになります。"}},{"key":"↓ / →","action":{"en":"Chooses one more star. From 5 stars it goes back to “No rating”.","ja":"星を1つ増やします。星5つからは「評価なし」に戻ります。"}}],"variations":[{"name":{"en":"Half stars","ja":"半分の星"},"description":{"en":"Allows scores such as 3.5, by choosing the left or right half of a star.","ja":"星の左半分か右半分を選んで、3.5のような点数も付けられるものです。"}},{"name":{"en":"Read-only rating","ja":"表示だけの評価"},"description":{"en":"Shows a score, such as an average of reviews, that cannot be changed. It is one image for screen readers, named in words such as “4 out of 5 stars”, and is not focusable.","ja":"レビューの平均のように、変えられない点数を見せるものです。スクリーンリーダーには「5段階中の4」のような名前を付けた1つの画像として伝え、フォーカスは当たりません。"}}],"usage":[{"en":"Give each star a label in words, such as “1 star”, so screen readers say the score and not just “star”.","ja":"星にはそれぞれ「星1つ」のような文字のラベルを付け、スクリーンリーダーが「星」だけでなく点数を読み上げるようにします。"},{"en":"Do not show the chosen score by color alone. Change the shape of the stars or write the score as text too.","ja":"選んだ点数を色だけで示しません。星の形を変えるか、点数を文字でも書きます。"}],"related":[{"id":"radio","diff":{"en":"A rating is a radio group drawn as stars, where the choices are ordered scores; radio buttons list choices with their own labels.","ja":"評価は、選択肢が順に並んだ点数になっているラジオボタンのグループを星の形で見せたものです。ラジオボタンは選択肢をそれぞれのラベル付きで並べます。"}},{"id":"slider","diff":{"en":"A rating chooses one of a few scores, such as 1 to 5 stars, each a separate option; a slider chooses any value along a track by moving a knob.","ja":"評価は、星1〜5のような数個の点数から1つを選び、点数はそれぞれ別の選択肢になります。スライダーは、つまみを溝に沿って動かして、範囲内の値を選びます。"}}],"sources":[{"label":"W3C WAI Tutorials: Custom Controls","url":"https://www.w3.org/WAI/tutorials/forms/custom-controls/","checkedAt":"2026-10-22"},{"label":"WAI-ARIA APG: Rating Radio Group Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio-rating/","checkedAt":"2026-10-22"},{"label":"MUI: Rating","url":"https://mui.com/material-ui/react-rating/","checkedAt":"2026-10-22"},{"label":"Ant Design: Rate","url":"https://ant.design/components/rate","checkedAt":"2026-10-22"},{"label":"Fluent UI React v9: Rating","url":"https://storybooks.fluentui.dev/react/?path=/docs/components-rating--docs","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/rating/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/rating/"}},{"id":"search-field","category":"input","names":{"en":"Search field","ja":"検索ボックス"},"aliases":[{"name":"Search","source":"Carbon Design System","url":"https://carbondesignsystem.com/building-blocks/core/components/search"},{"name":"SearchField","source":"React Aria","url":"https://react-aria.adobe.com/SearchField"},{"name":"検索ボックス","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/search-box/"},{"name":"Search","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/search/"}],"summary":{"en":"A text box with a search button for finding content across a site.","ja":"サイト内の情報を探すための、検索ボタン付きの入力欄です。"},"appearance":{"en":"A text box, often with a magnifying glass icon, next to a “Search” button. Some browsers show a × button to clear the text.","ja":"虫眼鏡のアイコンが付くことの多い入力欄の横に「検索」ボタンがあります。ブラウザによっては入力を消す × ボタンが出ます。"},"behavior":[{"en":"Pressing Enter or the button runs the search.","ja":"Enter またはボタンで検索を実行します。"},{"en":"This demo wraps the form in a `<search>` element, which marks it as a search landmark so screen reader users can jump to it.","ja":"このデモはフォームを `<search>` 要素で囲んでいます。フォームは検索のランドマークになり、スクリーンリーダーの利用者がそこへ直接移動できます。"},{"en":"It uses `<input type=\"search\">`, so in Chrome, Esc clears the text.","ja":"`<input type=\"search\">` を使っているので、Chrome では Esc で入力を消せます。"},{"en":"In this demo, the magnifying glass at the start of the box is decorative. The label already names the field, so the icon is hidden from screen readers with `aria-hidden`.","ja":"このデモでは、入力欄の先頭の虫眼鏡は飾りとして置いています。欄の名前はラベルが伝えるので、アイコンは `aria-hidden` で読み上げから外しています。"}],"keyboard":[{"key":"Enter","action":{"en":"Runs the search.","ja":"検索を実行します。"}},{"key":"Esc","action":{"en":"Clears the text (depends on the browser).","ja":"入力を消します（ブラウザによる）。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the box and the search button.","ja":"入力欄と検索ボタンの間を移動します。"}}],"variations":[{"name":{"en":"With scope","ja":"検索範囲の指定付き"},"description":{"en":"A menu next to the box narrows what to search, such as news or documents only.","ja":"入力欄の横のメニューで、お知らせだけ・資料だけのように検索する範囲を絞ります。"}},{"name":{"en":"With advanced search","ja":"詳細検索付き"},"description":{"en":"A disclosure titled “Advanced search” below the box holds more conditions, such as the kind of content and the sort order. While it is closed, the current conditions can be shown as text.","ja":"入力欄の下の「詳細検索」のディスクロージャーに、探す種類や並び順などの条件をまとめたものです。閉じている間も、今の条件を文で示せます。"}},{"name":{"en":"With popular searches","ja":"よくある検索付き"},"description":{"en":"A row of buttons for frequently searched words, labeled “Popular searches”, below the box. Pressing one searches for that word.","ja":"入力欄の下に「よくある検索」として、よく探される語のボタンを並べたものです。押すとその語で検索します。"}}],"usage":[{"en":"Use it for searching across a whole site. To filter rows of a table, use table controls instead.","ja":"サイト全体を横断する検索に使います。表の行を絞り込むのには使わず、表の操作部品を使います。"},{"en":"The U.S. Web Design System says to make the field at least 27 characters wide so that several search terms stay visible, and to fill it with the original search terms on the results page. The button should be a submit button, and the word “search” must be inside it for screen readers, even when only a magnifying glass icon is shown.","ja":"U.S. Web Design System は、複数の検索語が見えるよう入力欄を27文字分以上の幅にし、検索結果のページでは入力した検索語を欄に入れておくよう求めています。ボタンは送信ボタンにし、虫眼鏡のアイコンだけを見せる場合も、スクリーンリーダーのために「search」という語をボタンの中に入れておきます。"}],"misuse":[{"pattern":{"en":"Naming the field only with placeholder text such as “Search”","ja":"「検索」などのプレースホルダーだけで欄の名前を示す"},"harm":{"en":"Screen readers do not treat placeholder text as a label, and not all of them announce it, so screen reader users may not learn what the field is for. The text also disappears once typing starts.","ja":"スクリーンリーダーはプレースホルダーをラベルとして扱わず、読み上げないものもあるため、スクリーンリーダーの利用者には何の欄か伝わらないことがあります。入力を始めるとプレースホルダーの文字も消えます。"},"instead":{"en":"Give the field a name with `<label>`, such as “Search this site”. If the design has no room for a visible label, keep the `<label>` and hide it visually instead of relying on placeholder text.","ja":"`<label>` で「サイト内検索」などの名前を付けます。見た目にラベルを出せないデザインでも、`<label>` は残して見た目だけ隠し、プレースホルダーには頼りません。"}}],"related":[{"id":"command-palette","diff":{"en":"A search field sends the typed words and shows the results on a page; a command palette narrows a list as you type and goes straight to the chosen item.","ja":"検索ボックスは入力した語を送って結果をページに出し、コマンドパレットは入力に合わせて一覧を絞り込み、選んだものへ直接移ります。"}},{"id":"text-field","diff":{"en":"A search field is a text field for search terms, usually with a search button and a search landmark.","ja":"検索ボックスは検索語を入れるためのテキストフィールドで、検索ボタンや検索のランドマークが付くことが多いです。"}},{"id":"combobox","diff":{"en":"A search field sends the typed words as they are; a combobox suggests values to pick from while typing.","ja":"検索ボックスは入力した語をそのまま送り、コンボボックスは入力中に選べる候補を出します。"}},{"id":"empty-state","diff":{"en":"A search field is where the search terms are typed; an empty state is what appears in place of the results when the search finds nothing.","ja":"検索ボックスは検索語を入力する欄で、空の状態は検索で何も見つからなかったときに結果の代わりに出る表示です。"}}],"sources":[{"label":"MDN: <search>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search","checkedAt":"2026-10-20"},{"label":"MDN: <input type=\"search\">","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/search","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「検索ボックス」をもとに作成","url":"https://design.digital.go.jp/dads/components/search-box/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: search-box","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/search-box","checkedAt":"2026-10-21"},{"label":"W3C WAI Tutorials: Form Instructions","url":"https://www.w3.org/WAI/tutorials/forms/instructions/","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Text input","url":"https://design-system.service.gov.uk/components/text-input/","checkedAt":"2026-10-21"},{"label":"U.S. Web Design System: Search","url":"https://designsystem.digital.gov/components/search/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/search-field/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/search-field/"}},{"id":"segmented-control","category":"input","names":{"en":"Segmented control","ja":"セグメンテッドコントロール"},"aliases":[{"name":"Segmented","source":"Ant Design","url":"https://ant.design/components/segmented"},{"name":"Content switcher","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/content-switcher/usage/"},{"name":"Segmented button","source":"Material Design 3","url":"https://m3.material.io/components/segmented-buttons/guidelines"}],"summary":{"en":"A row of joined buttons of equal width where exactly one is selected, used to switch between closely related options or views.","ja":"同じ幅のボタンをつなげて横に並べ、そのうち1つだけを選ぶ部品です。近い関係にある選択肢や表示を切り替えます。"},"appearance":{"en":"A single bar divided into a few segments with short labels, such as Day, Week, Month, and Year. The selected segment is filled in, and the content under the bar follows it.","ja":"1本のバーを数個の区画に分け、「日」「週」「月」「年」のような短いラベルを付けたものです。選んでいる区画は塗りつぶされ、バーの下の内容がそれに合わせて変わります。"},"behavior":[{"en":"Exactly one segment is selected at all times, and choosing another moves the selection to it. The first segment is usually selected at the start.","ja":"選ばれている区画は常に1つで、別の区画を選ぶと選択がそちらへ移ります。ふつうは最初から先頭の区画が選ばれています。"},{"en":"The whole control is a single Tab stop, and the arrow keys move the selection between segments.","ja":"部品全体で Tab キーが止まるのは1か所だけで、区画の間は矢印キーで選択を移します。"},{"en":"This demo is a group of native radio buttons in a `<fieldset>`, styled as segments. The browser keeps exactly one selected and handles the arrow keys and the Tab stop. The `<legend>` gives the group its name and is visually hidden.","ja":"このデモは `<fieldset>` の中のネイティブのラジオボタンを区画の見た目にしたものです。常に1つだけが選ばれた状態を保つこと、矢印キーの操作、Tab キーで止まる場所は、ブラウザが受け持ちます。グループの名前は `<legend>` で付け、見た目には隠しています。"},{"en":"In this demo, the selected period changes the step count shown under the control.","ja":"このデモでは、選んだ期間に合わせて、部品の下に出る歩数が変わります。"}],"keyboard":[{"key":"↑ / ↓","action":{"en":"Same as ← / →.","ja":"← / → と同じです。"}},{"key":"← / →","action":{"en":"Moves to the previous / next segment and selects it. From the last segment, → moves to the first; from the first, ← moves to the last.","ja":"前・次の区画へ移って選びます。最後の区画で → を押すと最初へ、最初の区画で ← を押すと最後へ回ります。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves into the control at the selected segment, and then out of it.","ja":"部品に入るときは選んでいる区画へ移り、次に押すと部品の外へ出ます。"}}],"variations":[{"name":{"en":"Icon only","ja":"アイコンだけ"},"description":{"en":"Each segment shows only an icon, such as list and grid views, when space is short or the icons are clear. Every segment still needs a name, given with `aria-label` or visually hidden text.","ja":"場所が狭いときや、一覧表示と格子表示のようにアイコンで意味が分かるとき、区画にアイコンだけを置くものです。区画にはそれぞれ `aria-label` や見た目に隠した文字で名前を付けます。"}},{"name":{"en":"Full width","ja":"幅いっぱい"},"description":{"en":"Stretches to the width of its container, as in this demo.","ja":"このデモのように、入れ物の幅いっぱいに広げるものです。"}},{"name":{"en":"Built as tabs","ja":"タブとして作る型"},"description":{"en":"When the segments switch views of the content under them, Carbon Design System builds it as a `tablist` of `role=\"tab\"` buttons and lets the team choose whether the arrow keys switch the view right away or only move focus.","ja":"区画で下の内容の表示を切り替えるとき、Carbon Design System は `role=\"tab\"` のボタンを並べた `tablist` として作ります。矢印キーで表示をすぐ切り替えるか、フォーカスだけを移すかは作る側が選びます。"}},{"name":{"en":"Multiple choice","ja":"複数選択"},"description":{"en":"On macOS, a segmented control can also let people turn on several segments at once, such as bold, italic, and underline.","ja":"macOS では、太字・斜体・下線のように、複数の区画を同時にオンにできるものもあります。"}}],"usage":[{"en":"Label segments with short nouns or noun phrases, such as Day or List, not with actions.","ja":"区画のラベルは「日」「一覧」のような短い名詞にし、操作を表す言葉にしません。"},{"en":"Keep the segments the same width.","ja":"区画の幅はそろえます。"},{"en":"For switching between completely separate parts of an app or a page, use tabs instead.","ja":"アプリやページのまったく別の部分を切り替えるなら、タブを使います。"},{"en":"Material Design 3 recommends 2 to 5 segments and suggests another component, such as chips, for more choices. It keeps labels short and on one line, and does not mix icon-only segments with text segments. It also has a multi-select kind, in which anywhere from none to all of the segments can be on, which matches the Multiple choice variation on this page. Its latest update no longer recommends segmented buttons and points to a connected button group instead.","ja":"Material Design 3 は、セグメントを2〜5個にし、選択肢がそれより多いときはチップなど別の部品を使うよう勧めています。ラベルは短く1行に収め、アイコンだけのセグメントと文字のセグメントは混ぜません。オフからすべてまで選べる複数選択の種類もあり、このページのバリエーションの「複数選択」に当たります。最新の更新ではセグメンテッドボタンの利用を勧めておらず、代わりにコネクテッドボタングループを案内しています。"}],"misuse":[{"pattern":{"en":"Putting many segments in one control","ja":"1つの部品に多くの区画を並べる"},"harm":{"en":"Too many segments are hard to take in and take a long time to move through.","ja":"区画が多すぎると、ひと目で把握しにくく、目当ての区画まで移るのにも時間がかかります。"},"instead":{"en":"Keep it to about five segments on a phone and five to seven on a wide screen. For more options, Material Design 3 suggests another component, such as chips.","ja":"スマートフォンでは5つ程度、広い画面でも5〜7つ程度までにします。選択肢がそれより多いなら、Material Design 3 はチップなど別の部品を挙げています。"}},{"pattern":{"en":"Mixing text segments and icon segments in one control","ja":"1つの部品に文字の区画とアイコンの区画を混ぜる"},"harm":{"en":"The control looks disjointed and confusing.","ja":"部品がまとまりなく見え、分かりにくくなります。"},"instead":{"en":"Use only text or only icons in each control.","ja":"1つの部品の中では、文字だけかアイコンだけにそろえます。"}}],"related":[{"id":"tabs","diff":{"en":"A segmented control switches between closely related options or views of the same content; tabs switch between separate panels, each with its own content.","ja":"セグメンテッドコントロールは近い関係にある選択肢や同じ内容の表示を切り替え、タブはそれぞれ別の内容を持つパネルを切り替えます。"}},{"id":"radio","diff":{"en":"A segmented control shows a few short choices as joined buttons in one row; radio buttons list choices with round markers and can hold longer labels.","ja":"セグメンテッドコントロールは数個の短い選択肢をつながったボタンとして1列に並べ、ラジオボタンは丸い印を付けて選択肢を並べ、長いラベルも置けます。"}},{"id":"toggle-button","diff":{"en":"A segmented control picks one of several segments; a toggle button turns a single option on or off.","ja":"セグメンテッドコントロールは複数の区画から1つを選び、トグルボタンは1つの機能をオンかオフにします。"}},{"id":"button-group","diff":{"en":"A segmented control shows which of its segments is chosen; a button group has each button run its own action and marks none as chosen.","ja":"セグメンテッドコントロールは、区画のうちどれが選ばれているかを示します。ボタングループはそれぞれのボタンが自分の操作を実行し、選ばれた状態を示しません。"}}],"sources":[{"label":"Apple Human Interface Guidelines: Segmented controls","url":"https://developer.apple.com/design/human-interface-guidelines/segmented-controls","checkedAt":"2026-10-21"},{"label":"Ant Design: Segmented","url":"https://ant.design/components/segmented","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Content switcher","url":"https://carbondesignsystem.com/components/content-switcher/usage/","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Content switcher accessibility","url":"https://carbondesignsystem.com/components/content-switcher/accessibility/","checkedAt":"2026-10-21"},{"label":"Material Design 3: Segmented button","url":"https://m3.material.io/components/segmented-buttons/guidelines","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/segmented-control/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/segmented-control/"}},{"id":"select","category":"input","names":{"en":"Select","ja":"セレクトボックス"},"aliases":[{"name":"Pop-up button","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons"},{"name":"Dropdown","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/dropdown/usage/"},{"name":"セレクトボックス","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/select/"}],"summary":{"en":"Lets the user pick one option from a list that opens on demand.","ja":"開いたリストから選択肢を1つ選ぶ部品です。"},"appearance":{"en":"A box showing the current value with a downward arrow on the right. Opening it shows a list of options.","ja":"現在の値を表示した箱の右端に下向きの矢印があります。開くと選択肢のリストが出ます。"},"behavior":[{"en":"Clicking the box opens the list; choosing an option closes it and updates the value.","ja":"箱をクリックするとリストが開き、選択肢を選ぶと閉じて値が変わります。"},{"en":"Only options from the list can be chosen; the user cannot type a free value.","ja":"選べるのはリストにある値だけで、自由入力はできません。"},{"en":"This demo uses the native `<select>` element, so the list looks different on each OS and browser.","ja":"このデモはネイティブの `<select>` 要素を使っているため、リストの見た目は OS やブラウザで異なります。"},{"en":"In this demo, the options are in alphabetical order in English and in gojūon (Japanese syllabary) order in Japanese, so people can guess where an option is.","ja":"このデモでは、選択肢を英語版はアルファベット順、日本語版は五十音順に並べ、どこにあるか見当を付けやすくしています。"}],"keyboard":[{"key":"↑ / ↓","action":{"en":"Changes the option (opens the list on some platforms).","ja":"選択肢を切り替えます（環境によってはリストを開きます）。"}},{"key":"Enter / Space","action":{"en":"Opens the list, or confirms the highlighted option.","ja":"リストを開きます。開いているときは選択中の項目を確定します。"}},{"key":"A–Z","action":{"en":"Jumps to an option starting with the typed letter. It matches typed letters only, not IME input, so it cannot be tried on the options in the Japanese demo.","ja":"入力した英字で始まる選択肢へ移ります。日本語入力（IME）では働かないため、日本語版のデモの選択肢では試せません。"}},{"key":"Esc","action":{"en":"Closes the list without changing.","ja":"変更せずにリストを閉じます。"}}],"usage":[{"en":"With five or fewer options, use radio buttons instead. Never use a select for two options.","ja":"選択肢が5つ以下ならラジオボタンを使います。2択にはセレクトを使いません。"},{"en":"The GOV.UK Design System says to use a select only as a last resort in public-facing services, because research shows that some users find selects very difficult to use. Before using one, try asking questions that let you show fewer options, which may remove the need for a select.","ja":"GOV.UK は、一般向けのサービスではセレクトを最後の手段としてだけ使うよう求めています。調査で、セレクトをとても使いにくいと感じる利用者がいることが分かっているためです。使う前に、質問を重ねて選択肢の数を減らせないかを試します。そうすれば、セレクトが要らなくなることもあります。"},{"en":"The U.S. Web Design System recommends a select for about 7 to 15 options when space is limited, radio buttons for fewer, and a combo box for more. It says not to submit the form or do anything else when an option is chosen, since people often change their choice several times and screen readers select each option as they read it.","ja":"U.S. Web Design System は、スペースが限られていて選択肢が7〜15個ほどのときにセレクトを使い、それより少なければラジオボタン、多ければコンボボックスを使うよう勧めています。選択肢を選んだだけでフォームの送信などをしないようにも求めています。利用者は選び直すことが多く、スクリーンリーダーは読み上げながら選択肢を順に選ぶためです。"}],"misuse":[{"pattern":{"en":"Giving a select a misleading label and hiding the option to decline among the other options","ja":"セレクトに紛らわしいラベルを付け、断るための選択肢をほかの選択肢の間に紛れ込ませる"},"harm":{"en":"People scan a label instead of reading every word, and choose what it seems to ask for. In one known case, a list that asked people to select their country of residence actually decided travel insurance, and the option to decline insurance sat between two country names. People who simply picked their country bought insurance without meaning to.","ja":"人はラベルを一語ずつ読まずに流し読みし、求められているように見えるものを選びます。実際にあった例では、居住国を選ぶよう促す一覧が実は旅行保険の申し込みを決めるもので、保険を断る選択肢は2つの国名の間に置かれていました。国を選んだだけの人が、意図せず保険を買うことになりました。"},"instead":{"en":"Ask each decision as its own question with its own label. For a yes-or-no choice such as adding insurance, use radio buttons so both options are visible side by side.","ja":"決めることごとに、ラベルの付いた別の質問にします。保険を付けるかどうかのような2択は、両方の選択肢が並んで見えるラジオボタンにします。"},"deceptive":true}],"related":[{"id":"radio","diff":{"en":"A select hides the options in a list to save space; radio buttons show every option at once.","ja":"セレクトは選択肢をリストにしまって場所を取らず、ラジオボタンはすべての選択肢を常に見せます。"}},{"id":"menu","diff":{"en":"A select keeps the chosen option as a form value; a menu runs an action when an item is chosen.","ja":"セレクトは選んだ選択肢をフォームの値として保持し、メニューは項目を選ぶと操作を実行します。"}},{"id":"combobox","diff":{"en":"A select only allows options from the list; a combobox also lets the user type a value outside it.","ja":"セレクトはリストの選択肢からしか選べませんが、コンボボックスは文字を入力でき、リストにない値も使えます。"}},{"id":"listbox","diff":{"en":"A select shows only the chosen option until opened; a listbox keeps several options visible all the time.","ja":"セレクトボックスは開くまで選んだ値しか見えず、リストボックスは複数の選択肢を常に見せておきます。"}},{"id":"language-selector","diff":{"en":"A select keeps the chosen option as a form value; a language selector lists links to each language’s version of the page.","ja":"セレクトボックスは選んだ選択肢をフォームの値として保持し、ランゲージセレクターはページの各言語版へのリンクを並べます。"}},{"id":"token-field","diff":{"en":"A select shows the chosen option in a closed box until it is opened; a token field lets people type to choose several values and shows each as a removable token.","ja":"セレクトボックスは開くまで、選んだ値を閉じた箱の中にしか見せません。トークン入力は入力で複数の値を選び、それぞれを外せるトークンとして見せます。"}},{"id":"time-picker","diff":{"en":"A select chooses from options its author wrote one by one; a time picker takes a time of day within a range and a step.","ja":"セレクトボックスは作り手が1つずつ書いた選択肢から選び、タイムピッカーは範囲と刻みの中の時刻を受け取ります。"}}],"sources":[{"label":"Open UI: Select","url":"https://open-ui.org/components/select.research","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Select-Only Combobox Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/","checkedAt":"2026-10-20"},{"label":"MDN: <select>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「セレクトボックス」をもとに作成","url":"https://design.digital.go.jp/dads/components/select/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「セレクトボックス（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/select/usage/","checkedAt":"2026-11-02"},{"label":"Deceptive Patterns: Trick wording","url":"https://www.deceptive.design/types/trick-wording","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Select","url":"https://design-system.service.gov.uk/components/select/","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: Select","url":"https://designsystem.digital.gov/components/select/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/select/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/select/"}},{"id":"side-navigation","category":"navigation","names":{"en":"Side navigation","ja":"サイドナビゲーション"},"aliases":[{"name":"Sidebar","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/sidebars"},{"name":"Side nav","source":"Atlassian Design System","url":"https://atlassian.design/components/navigation-system/layout/examples"},{"name":"Nav","source":"Fluent UI React v9","url":"https://react.fluentui.dev/?path=/docs/components-nav--docs"},{"name":"NavList","source":"Primer","url":"https://primer.style/product/components/nav-list/"}],"summary":{"en":"A vertical, often nested list of links to the pages of a site or a section, placed beside the content, with the current page marked.","ja":"サイトや、サイトのあるまとまりのページへのリンクを縦に並べた、入れ子にもできる一覧です。内容の横に置き、今のページを示します。"},"appearance":{"en":"A column of links at the left or right of the content. Lower levels are indented under their parent, and the current page is set apart with a bar, bold text or a filled background. A parent with many children can have a button that opens and closes its sublinks.","ja":"内容の左か右に置く、リンクの縦の列です。下の階層は親の項目の下に字下げして並び、今のページは線や太字、塗りつぶした背景で区別します。子の項目が多い親には、下のリンクを開閉するボタンを付けることがあります。"},"behavior":[{"en":"Each item is a link to a page of the site or section. Following it loads that page, and the navigation stays in the same place so people can move on to the next page.","ja":"項目はそれぞれ、サイトやそのまとまりのページへのリンクです。たどるとそのページが開き、ナビゲーションは同じ場所に残るので、続けて次のページへ移れます。"},{"en":"It is a `<nav>` given a name with `aria-label`, so screen reader users can find it among the landmarks. The levels are nested `<ul>` lists, and the nesting tells assistive technology about the hierarchy.","ja":"`aria-label` で名前を付けた `<nav>` なので、スクリーンリーダーの利用者はランドマークの一覧から見つけられます。階層は入れ子の `<ul>` で作り、入れ子によって階層が支援技術に伝わります。"},{"en":"The link to the current page has `aria-current=\"page\"` as well as a visible mark. Only one element in a set is marked with `aria-current`.","ja":"今のページのリンクには、見た目の印に加えて `aria-current=\"page\"` を付けます。`aria-current` を付けるのは、1つの集まりの中で1つの要素だけです。"},{"en":"When a parent has many children, a `<button>` with `aria-expanded` opens and closes its sublinks, following the Disclosure pattern. The Disclosure Navigation example of the WAI-ARIA Authoring Practices Guide does not use the `menu` role, because ordinary site navigation does not need what that role promises.","ja":"親の項目に子が多いときは、`aria-expanded` を付けた `<button>` で、Disclosure パターンに沿って下のリンクを開閉します。WAI-ARIA Authoring Practices Guide の Disclosure Navigation の例は `menu` ロールを使いません。ふつうのサイトのナビゲーションには、そのロールが約束する動きが要らないためです。"},{"en":"On small screens it is often collapsed and opened over the content on request.","ja":"小さな画面では、たたんでおき、求めに応じて内容の上に重ねて開くことがよくあります。"},{"en":"In this demo, choosing a link does not leave the page. It marks the link as the current page and changes the content beside it. The section with a button starts open.","ja":"このデモでは、リンクを選んでもページは移りません。そのリンクを今のページとして示し、横の内容を切り替えます。ボタンの付いた項目は、開いた状態で始まります。"},{"en":"In this demo, when a section is closed and the current page is inside it, the button is bold and its name gets “(contains the current page)” added in visually hidden text, so screen reader users also learn where the current page is.","ja":"このデモでは、項目が閉じていて今のページがその中にあるとき、ボタンを太字にし、見えない文字でボタンの名前に「（今のページを含む）」を足します。スクリーンリーダーの利用者にも、今のページの場所が伝わります。"},{"en":"In this demo, a section closes only when its button is pressed again. In the Disclosure Navigation example a dropdown also closes on Esc and when focus leaves the navigation. That example says the Esc behavior is needed to meet WCAG 1.4.13.","ja":"このデモでは、項目はボタンをもう一度押したときだけ閉じます。Disclosure Navigation の例では、Esc キーを押したときと、フォーカスがナビゲーションの外へ出たときにも開いたドロップダウンが閉じます。この例は、Esc キーで閉じることは WCAG 1.4.13 を満たすために必要だとしています。"},{"en":"In this demo, the arrow keys, Home and End do nothing special. The Disclosure Navigation example offers them as optional additions that supplement Tab, not replace it.","ja":"このデモでは、矢印キーと Home / End キーに特別な動作はありません。Disclosure Navigation の例は、これらを Tab キーの代わりではなく、Tab キーを補う任意の追加として示しています。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves through the links and buttons in order. Sublinks inside a closed section are skipped.","ja":"リンクとボタンを順に移動します。閉じている項目の中のリンクは飛ばします。"}},{"key":"Enter / Space","action":{"en":"On a button, opens or closes its sublinks. Enter on a link goes to its page.","ja":"ボタンでは下のリンクを開閉します。リンクで Enter を押すと、そのページへ移ります。"}}],"variations":[{"name":{"en":"Always shown beside the content","ja":"内容の横に常に表示"},"description":{"en":"A column at the side of the page that shows the pages of a site or a section. The U.S. Web Design System uses it as the sub-navigation of a section of a site, with one to three levels.","ja":"サイトやそのあるまとまりのページを、ページの横の列に並べるものです。U.S. Web Design System は、サイトのあるまとまりの中のナビゲーションとして、1〜3階層で使います。"}},{"name":{"en":"Collapsible","ja":"開閉できるもの"},"description":{"en":"The column can be collapsed or expanded to give the content more room. Atlassian’s side nav also resizes, collapses on viewports narrower than 1024px, and then opens over the content. Apple suggests letting people hide the sidebar, but not hiding it by default, so that it stays easy to find.","ja":"内容に広い場所を譲るため、列をたたんだり広げたりできるものです。Atlassian のサイドナビは幅も変えられ、1024px より狭い画面ではたたんでおいて、開くと内容の上に重なります。Apple は、サイドバーを隠せるようにすることを勧める一方で、見つけやすいよう、はじめから隠しておくことは避けるよう勧めています。"}},{"name":{"en":"Navigation rail","ja":"ナビゲーションレール"},"description":{"en":"Material Design 3 offers a vertical column of icons with short labels along the leading edge, for medium to extra large windows. The collapsed rail holds three to seven navigation items, and the expanded rail can reveal secondary destinations. In the Material 3 Expressive update the collapsed rail replaced the baseline navigation rail, which is no longer recommended, and the expanded rail replaced the navigation drawer.","ja":"Material Design 3 にある、アイコンと短いラベルを縦に並べた、画面の端の列です。中くらいから特大までの画面向けで、たたんだレールは3〜7個の項目を並べ、広げたレールは二次的な行き先も見せられます。Material 3 Expressive の更新で、たたんだレールが従来のナビゲーションレールに、広げたレールがナビゲーションドロワーに代わりました。従来のナビゲーションレールは勧められなくなっています。"}},{"name":{"en":"Navigation drawer","ja":"ナビゲーションドロワー"},"description":{"en":"Material Design 3 has two kinds: a standard one that stays beside the content on wide windows, and a modal one used on compact and medium windows. The modal kind slides over the page, which is a drawer rather than side navigation. In the Material 3 Expressive update, Material Design 3 stopped recommending the navigation drawer and points to the expanded navigation rail.","ja":"Material Design 3 には2種類あります。広い画面で内容の横に残す標準のものと、小さめや中くらいの画面で使うモーダルのものです。モーダルのものはページの上にすべり出るので、サイドナビゲーションではなくドロワーにあたります。Material 3 Expressive の更新で、Material Design 3 はナビゲーションドロワーを勧めなくなり、広げたナビゲーションレールを使うよう案内しています。"}}],"usage":[{"en":"Use it to show the hierarchy of the pages of a site or a section in one to three levels. The U.S. Web Design System uses it for the sub-navigation within a section of a site. Keep the link text short; it can be a shortened form of the page title.","ja":"サイトやそのあるまとまりのページの階層を、1〜3階層で見せるために使います。U.S. Web Design System は、サイトのあるまとまりの中のナビゲーションとして使います。リンクの文言は短くし、ページのタイトルを縮めた形にしてかまいません。"},{"en":"Show the current page, so people can tell where they are in the hierarchy. Do not rely on color alone; add a bar, bold text or similar, and `aria-current=\"page\"`.","ja":"階層の中で今どこにいるのか分かるよう、今のページを示します。色だけで示さず、線や太字などと `aria-current=\"page\"` を足します。"},{"en":"Keep the levels few. Apple advises showing no more than two levels, Fluent’s Nav allows up to two, the U.S. Web Design System up to three and Primer’s NavList up to four. Carbon’s UI shell left panel supports no more than two, and suggests tabs within the page for further content.","ja":"階層は少なく保ちます。Apple は2階層までを勧め、Fluent の Nav は2階層まで、U.S. Web Design System は3階層まで、Primer の NavList は4階層まで使えます。Carbon の UI shell left panel は2階層までで、それより下の内容にはページ内のタブを勧めています。"},{"en":"Carbon suggests a left panel when there are more than five secondary items or when people are expected to switch between them often. The U.S. Web Design System says that a site with fewer than five pages does not need a navigational hierarchy.","ja":"Carbon は、二次ナビゲーションの項目が5つより多いときや、利用者が項目をたびたび切り替えると見込まれるときに、左のパネルを使うよう勧めています。U.S. Web Design System は、ページが5つに満たないサイトにはナビゲーションの階層は要らないとしています。"},{"en":"If the page already has both a horizontal and a vertical navigation bar, the U.S. Web Design System suggests looking for ways to simplify the navigation system.","ja":"ページにすでに水平と垂直の両方のナビゲーションバーがあるときは、U.S. Web Design System はナビゲーションの仕組みを単純にできないか考えるよう勧めています。"},{"en":"Do not mix icons that mark links with icons that mark sections that open. If both are needed, use clearly different shapes, not the same chevron turned in another direction, and use the same icon for the same behavior across the site. This follows the Digital Agency Design System’s guidance for its menu list, which it uses as a local menu in the content area.","ja":"リンクを示すアイコンと、開くまとまりを示すアイコンを混ぜるのは避けます。どちらも要るときは、同じシェブロンの向きを変えただけにせず、はっきり違う形にし、サイトの中では同じ動きには同じアイコンを使います。これは、デジタル庁デザインシステムが、内容の領域に置くローカルメニューとして使うメニューリストについて示している指針に沿っています。"},{"en":"Give the navigation an accessible name. Primer asks that a NavList always has one, even when its visible heading is hidden.","ja":"ナビゲーションにはアクセシブルな名前を付けます。Primer は、見える見出しを出さないときでも、NavList に必ず名前を付けるよう求めています。"}],"misuse":[{"pattern":{"en":"Making a parent item both a link to its own page and the button that opens its sublinks","ja":"親の項目を、自分のページへのリンクと、下のリンクを開くボタンの両方にする"},"harm":{"en":"Voice control and screen reader users cannot perform two different actions through the same semantic button, even if a separate click event is attached to the nested item.","ja":"音声操作やスクリーンリーダーの利用者は、同じボタンから2つの異なる操作を行えません。入れ子の項目に別のクリックイベントを付けていても同じです。"},"instead":{"en":"Make the parent only a button that opens and closes, as in Primer’s NavList, where only the top-level items toggle and are not links. Put a link to the parent’s own page among the sublinks if people need it.","ja":"親の項目は開閉するだけのボタンにします。Primer の NavList も、最上位の項目は開閉するだけでリンクにしません。利用者にそのページが要るときは、親自身のページへのリンクを下のリンクの中に入れます。"}},{"pattern":{"en":"Showing the current page by color alone","ja":"今のページを色だけで示す"},"harm":{"en":"Not everyone sees colors, or sees them the same way, and people using limited-color or monochrome displays cannot get information that is shown only in color.","ja":"色が見えない人や、色の見え方が違う人がいます。色数の限られた画面や白黒の画面を使っている人は、色だけで示された情報を得られません。"},"instead":{"en":"Add a shape or text cue, such as a bar beside the link or bold text, and set `aria-current=\"page\"` so assistive technology says it too.","ja":"リンクの横の線や太字など、形や文字の手がかりを足し、支援技術にも伝わるよう `aria-current=\"page\"` を付けます。"}},{"pattern":{"en":"Letting the navigation grow very long or very deep","ja":"ナビゲーションを、とても長くしたり深くしたりする"},"harm":{"en":"If the hierarchy is too long, people may miss items at the bottom; if it is too deep, they may miss items that take too many clicks to reach.","ja":"階層が長すぎると下のほうの項目を見落とし、深すぎると、たどり着くまでのクリックが多い項目を見落とします。"},"instead":{"en":"Keep to a few levels and test with people to find the right balance between breadth and depth.","ja":"階層は少なくし、利用者で試して、幅と深さのちょうどよい釣り合いを探します。"}}],"related":[{"id":"table-of-contents","diff":{"en":"Side navigation links to other pages of a section; a table of contents links to the sections within the current page.","ja":"サイドナビゲーションはあるまとまりの別のページへのリンクを並べ、目次は今のページの中の節へのリンクを並べます。"}},{"id":"tree-view","diff":{"en":"Side navigation is a list of links that is read as navigation; a tree view is a widget with its own arrow-key behavior for opening and choosing items, and Primer says it is not an accessible replacement for navigation.","ja":"サイドナビゲーションはナビゲーションとして読まれるリンクの一覧で、ツリービューは項目の開閉と選択に専用の矢印キー操作を持つ部品であり、Primer は、ツリービューがナビゲーションのアクセシブルな代わりになることはないとしています。"}},{"id":"mobile-menu","diff":{"en":"Side navigation stays beside the content on a wide screen; a mobile menu stacks the site’s navigation for small touch screens and is opened from a button.","ja":"サイドナビゲーションは広い画面で内容の横に残り、モバイルメニューは小さなタッチスクリーン向けにサイトのナビゲーションを縦に積んで、ボタンから開きます。"}},{"id":"drawer","diff":{"en":"Side navigation is a list of links placed beside the content; a drawer is a panel that slides in over the page.","ja":"サイドナビゲーションは内容の横に置くリンクの一覧で、ドロワーはページの上にすべり出るパネルです。"}},{"id":"tabs","diff":{"en":"Side navigation links to separate pages, with the current page marked; tabs switch between panels inside one page.","ja":"サイドナビゲーションは別々のページへのリンクで今のページを示し、タブは1つのページの中のパネルを切り替えます。"}},{"id":"bottom-navigation","diff":{"en":"Side navigation lists the pages of a site or a section in a column beside the content; bottom navigation puts three to five top-level destinations in a bar along the bottom of a phone screen.","ja":"サイドナビゲーションはサイトやそのあるまとまりのページを内容の横の列に並べ、ボトムナビゲーションはスマートフォンの画面の下のバーに3〜5個の最上位の行き先を並べます。"}},{"id":"header","diff":{"en":"Side navigation lists the pages within one section in a column beside the content; a header holds the site’s main sections in a row across the top of every page.","ja":"サイドナビゲーションは、あるセクションの中のページを内容の横の列に並べ、ヘッダーは各ページの上端に、サイトの主なセクションを横一列に収めます。"}}],"sources":[{"label":"U.S. Web Design System: Side navigation","url":"https://designsystem.digital.gov/components/side-navigation/","checkedAt":"2026-11-02"},{"label":"デジタル庁デザインシステムウェブサイト「メニューリスト」をもとに作成","url":"https://design.digital.go.jp/dads/components/menu-list/","checkedAt":"2026-11-02"},{"label":"デジタル庁デザインシステムウェブサイト「メニューリスト（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/menu-list/usage/","checkedAt":"2026-11-02"},{"label":"Apple Human Interface Guidelines: Sidebars","url":"https://developer.apple.com/design/human-interface-guidelines/sidebars","checkedAt":"2026-11-02"},{"label":"Material Design 3: Navigation rail","url":"https://m3.material.io/components/navigation-rail/overview","checkedAt":"2026-11-02"},{"label":"Material Design 3: Navigation rail (guidelines)","url":"https://m3.material.io/components/navigation-rail/guidelines","checkedAt":"2026-11-02"},{"label":"Material Design 3: Navigation drawer","url":"https://m3.material.io/components/navigation-drawer/overview","checkedAt":"2026-11-02"},{"label":"Carbon Design System: UI shell left panel","url":"https://carbondesignsystem.com/components/UI-shell-left-panel/usage/","checkedAt":"2026-11-02"},{"label":"Atlassian Design System: Navigation system, Layout","url":"https://atlassian.design/components/navigation-system/layout/examples","checkedAt":"2026-11-02"},{"label":"Fluent UI React v9: Nav","url":"https://react.fluentui.dev/?path=/docs/components-nav--docs","checkedAt":"2026-11-02"},{"label":"Primer: NavList","url":"https://primer.style/product/components/nav-list/","checkedAt":"2026-11-02"},{"label":"Primer: NavList accessibility","url":"https://primer.style/product/components/nav-list/accessibility/","checkedAt":"2026-11-02"},{"label":"WAI-ARIA APG: Disclosure Navigation Menu Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/","checkedAt":"2026-11-02"},{"label":"MDN: aria-current","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current","checkedAt":"2026-11-02"},{"label":"Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/side-navigation/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/side-navigation/"}},{"id":"skeleton","category":"feedback","names":{"en":"Skeleton","ja":"スケルトン"},"aliases":[{"name":"Placeholders","source":"Bootstrap","url":"https://getbootstrap.com/docs/5.3/components/placeholders/"}],"summary":{"en":"Gray placeholder shapes that show the layout of content while it loads.","ja":"読み込み中の内容のレイアウトを、灰色の図形で先に見せる仮の表示です。"},"appearance":{"en":"Light gray circles and bars where images and lines of text will appear, often with a soft shimmer moving across them.","ja":"画像や文字が入る場所に薄い灰色の丸や棒が並び、光が横に流れるような動きが付くことが多いです。"},"behavior":[{"en":"Replaced by the real content when loading finishes.","ja":"読み込みが終わると、本物の内容に置き換わります。"},{"en":"Because the layout appears right away, the page feels faster.","ja":"レイアウトがすぐに出るので待ち時間が短く感じられます。"},{"en":"The gray shapes are hidden from assistive technology, and the area is marked `aria-busy` while loading.","ja":"灰色の図形は支援技術から隠し、読み込み中の領域には `aria-busy` を付けます。"},{"en":"The shapes say nothing to screen reader users, so the start and end of loading are announced in words through a `role=\"status\"` live region placed outside the busy area.","ja":"図形はスクリーンリーダーの利用者に何も伝えないため、読み込みの始まりと終わりは、読み込み中の領域の外に置いた `role=\"status\"` のライブリージョンを使って言葉で知らせます。"},{"en":"In this demo, the image placeholder keeps the same size as the image that replaces it, so the lines below do not move.","ja":"このデモでは、画像が入る場所の仮の図形を、置き換わる画像と同じ大きさにして、下の行がずれないようにしています。"}],"keyboard":[{"key":"—","action":{"en":"None. The demo’s reload button uses Enter / Space.","ja":"なし。デモの再読み込みボタンは Enter / Space で押せます。"}}],"usage":[{"en":"Sources differ on skeletons. The Digital Agency Design System does not use skeletons: while a screen is loading, it shows a progress indicator instead, even when several pieces of data are awaited. Carbon prefers skeleton states to loading indicators for full-screen loads. Nielsen Norman Group also recommends skeleton screens when the whole page is loading and the wait is under 10 seconds.","ja":"スケルトンの扱いは資料によって分かれます。デジタル庁デザインシステムはスケルトンを使いません。画面の読み込み中は、複数のデータを待つ場合もプログレスインジケーターで処理中であることを示します。Carbon は画面全体の読み込みにはローディングインジケーターよりスケルトンを勧めます。Nielsen Norman Group も、ページ全体の読み込みで待ち時間が10秒未満ならスケルトンを勧めています。"}],"related":[{"id":"spinner","diff":{"en":"A skeleton previews the layout of the content; a spinner is one shape that only shows something is loading.","ja":"スケルトンは内容のレイアウトを先に見せ、スピナーは読み込み中であることだけを1つの図形で示します。"}},{"id":"empty-state","diff":{"en":"A skeleton fills the space while content is still loading; an empty state appears after loading has finished with nothing to show.","ja":"スケルトンはまだ読み込んでいる間に場所を埋め、空の状態は読み込みが終わって表示するものがないときに出ます。"}}],"sources":[{"label":"MUI: Skeleton","url":"https://mui.com/material-ui/react-skeleton/","checkedAt":"2026-10-20"},{"label":"Carbon Design System: Loading","url":"https://carbondesignsystem.com/components/loading/usage/","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Skeleton Screens 101","url":"https://www.nngroup.com/articles/skeleton-screens/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「プログレスインジケーター」をもとに作成","url":"https://design.digital.go.jp/dads/components/progress-indicator/","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/skeleton/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/skeleton/"}},{"id":"skip-link","category":"navigation","names":{"en":"Skip link","ja":"スキップリンク"},"aliases":[{"name":"Skip link","source":"GOV.UK Design System","url":"https://design-system.service.gov.uk/components/skip-link/"}],"summary":{"en":"A link at the very start of a page that lets keyboard users jump past the header and navigation to the main content.","ja":"ページの最初に置くリンクです。キーボードの利用者がヘッダーやナビゲーションを飛ばして、本文へ移れるようにします。"},"appearance":{"en":"Usually nothing is visible. When the first Tab reaches it, a link such as “Skip to main content” appears in the top left corner of the page.","ja":"ふだんは何も見えません。最初の Tab キーでフォーカスが来ると、「本文へ移動」のようなリンクがページの左上に現れます。"},"behavior":[{"en":"It is the first thing Tab reaches on the page. Following it moves focus to the main content, so the next Tab continues from there instead of going through every link in the header.","ja":"ページの中で、Tab キーで最初にフォーカスが来ます。リンクをたどると本文へフォーカスが移り、次に Tab キーを押すと、ヘッダーのリンクを順に通らずに本文から先へ進みます。"},{"en":"It is hidden by moving it off screen, not with `display: none` or the `hidden` attribute, so it stays in the keyboard order and is shown when it gets focus.","ja":"`display: none` や `hidden` 属性ではなく画面の外へ動かして隠すので、キーボードの順番に残り、フォーカスが来たときに表示されます。"},{"en":"In this demo, the target has `tabindex=\"-1\"`, so it can take focus from the link even though it is not a control.","ja":"このデモでは移り先に `tabindex=\"-1\"` を付け、操作する要素でなくてもリンクからフォーカスを受けられるようにしています。"},{"en":"The “Skip to content” link at the top of this page is this component. Press Tab right after the page loads to see it.","ja":"このページの先頭にある「本文へ移動」がこの部品です。ページを開いてすぐに Tab キーを押すと現れます。"},{"en":"In this demo, the skip link belongs to the small page in the box and moves focus to that page’s main content, not to the main content of this site. In the thumbnail on the list page, it is shown as it looks with focus.","ja":"このデモでは、スキップリンクは枠の中の小さなページのもので、このサイトの本文ではなく、そのページの本文へフォーカスを移します。一覧ページのサムネイルでは、フォーカスが来たときの見た目で表示しています。"}],"keyboard":[{"key":"Tab","action":{"en":"The first press shows the skip link and moves focus to it.","ja":"最初に押すと、スキップリンクが現れてフォーカスが移ります。"}},{"key":"Enter","action":{"en":"Moves focus to the main content.","ja":"本文へフォーカスを移します。"}}],"variations":[{"name":{"en":"Always visible","ja":"常に表示"},"description":{"en":"A skip link that is always shown as ordinary text at the top of the page. It is the easiest to build and sighted keyboard users can see it, but some designers avoid it because it can look out of place to people who do not need it.","ja":"ページの上部に、ふつうの文字のリンクとして常に表示しておくものです。いちばん簡単に作れ、画面を見ながらキーボードを使う人にも見えますが、必要のない人には目障りだとして避けるデザイナーもいます。"}}],"usage":[{"en":"Put it on pages that repeat blocks such as a header or navigation. Screen reader users then do not have to hear the same header on every page, and keyboard users reach the content with far fewer keystrokes.","ja":"ヘッダーやナビゲーションのように、ページごとに繰り返す部分があるページに置きます。スクリーンリーダーの利用者はページごとに同じヘッダーを聞かずに済み、キーボードの利用者ははるかに少ないキー操作で本文にたどり着けます。"},{"en":"Word it by where it goes, such as “Skip to main content”, rather than by what it skips.","ja":"何を飛ばすかではなく、「本文へ移動」のように行き先を表す文言にします。"},{"en":"One link is usually enough. Each extra skip link adds clutter.","ja":"たいていは1つで足ります。増やすほど、リンクがごちゃごちゃします。"},{"en":"Do not put it inside a `<nav>` or inside the header. Place it right after the opening `<body>` tag, or right after a cookie banner if there is one.","ja":"`<nav>` やヘッダーの中には入れません。`<body>` の開始タグの直後、Cookie のバナーがあればその直後に置きます。"}],"misuse":[{"pattern":{"en":"Hiding the skip link with `display: none` or the `hidden` attribute","ja":"スキップリンクを `display: none` や `hidden` 属性で隠す"},"harm":{"en":"The link is removed from keyboard navigation, so no one can use it.","ja":"リンクがキーボードの操作の順番から外れ、だれも使えなくなります。"},"instead":{"en":"Move it off screen with CSS, and bring it back on screen when it gets focus.","ja":"CSS で画面の外へ動かし、フォーカスが来たら画面の中に戻します。"}},{"pattern":{"en":"Placing the skip link after other links, such as the logo or the menu","ja":"ロゴやメニューなど、ほかのリンクより後ろにスキップリンクを置く"},"harm":{"en":"Screen reader and keyboard users may not realize that there is a skip link.","ja":"スクリーンリーダーやキーボードの利用者が、スキップリンクがあることに気づかないことがあります。"},"instead":{"en":"Make it the first thing on the page that Tab reaches and screen readers read.","ja":"ページの中で、Tab キーで最初にフォーカスが来て、スクリーンリーダーが最初に読む要素にします。"}}],"related":[{"id":"link","diff":{"en":"A skip link is a link to a place on the same page that usually stays hidden until it gets focus; an ordinary link is always visible.","ja":"スキップリンクは同じページの中の場所へのリンクで、多くはフォーカスが来るまで隠れており、ふつうのリンクは常に見えています。"}},{"id":"back-to-top","diff":{"en":"A skip link at the very top jumps past the header to the main content; a back to top button returns to the top after reading.","ja":"スキップリンクはページの先頭からヘッダーを飛ばして本文へ移り、スクロールトップボタンは読み進めたあとに先頭へ戻ります。"}},{"id":"header","diff":{"en":"A skip link comes first on the page and lets keyboard users jump past the header to the main content; a header holds the site’s identity and navigation at the top of every page.","ja":"スキップリンクはページの最初に置いて、キーボードの利用者がヘッダーを飛ばして本文へ移れるようにし、ヘッダーは各ページの上端にサイトを示すものとナビゲーションを収めます。"}}],"sources":[{"label":"Understanding Success Criterion 2.4.1: Bypass Blocks (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html","checkedAt":"2026-10-22"},{"label":"WebAIM: Skip Navigation Links","url":"https://webaim.org/techniques/skipnav/","checkedAt":"2026-10-22"},{"label":"GOV.UK Design System: Skip link","url":"https://design-system.service.gov.uk/components/skip-link/","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/skip-link/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/skip-link/"}},{"id":"slider","category":"input","names":{"en":"Slider","ja":"スライダー"},"aliases":[{"name":"Range","source":"HTML","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range"}],"summary":{"en":"Picks a number within a range by dragging a knob along a track.","ja":"つまみを溝に沿って動かし、範囲内の数値を選ぶ部品です。"},"appearance":{"en":"A horizontal line with a round knob. The part of the line before the knob is often filled with the accent color. The minimum and maximum values are often shown at the two ends.","ja":"横線の上に丸いつまみがあります。つまみより手前の線はアクセントカラーで塗られることが多いです。両端に最小値と最大値が書かれることもよくあります。"},"behavior":[{"en":"Dragging the knob or clicking the track changes the value.","ja":"つまみをドラッグするか、溝をクリックすると値が変わります。"},{"en":"Best when the exact number matters less than the rough position, such as volume or brightness.","ja":"音量や明るさのように、正確な数値より大まかな位置が大事なときに向いています。"},{"en":"The value moves in fixed steps; this demo uses steps of 5.","ja":"値は決まった刻みで変わります。このデモは5刻みです。"},{"en":"In this demo, 0 and 100 under the ends of the track show the range. Screen readers already announce the range from the slider role, so these numbers are hidden from them with `aria-hidden`.","ja":"このデモでは、溝の両端の下に0と100を出して範囲を示します。範囲はスクリーンリーダーが slider の役割から読み上げるので、この数字は `aria-hidden` で読み上げから外しています。"}],"keyboard":[{"key":"→ / ↑","action":{"en":"Increases the value by one step.","ja":"値を1刻み増やします。"}},{"key":"← / ↓","action":{"en":"Decreases the value by one step.","ja":"値を1刻み減らします。"}},{"key":"Home / End","action":{"en":"Sets the minimum / maximum value.","ja":"最小値・最大値にします。"}},{"key":"Page Up / Page Down","action":{"en":"Changes the value by a larger amount (depends on the browser).","ja":"値を大きめに増減します（ブラウザによる）。"}}],"usage":[{"en":"Show the minimum and maximum next to the ends of the track, so people can tell the range without trying the slider.","ja":"最小値と最大値を溝の両端に示し、動かしてみなくても範囲が分かるようにします。"},{"en":"Use a slider when the range or a relative value matters more than the exact number, as with a volume control. For a precise number, the U.S. Web Design System says to use a regular text input.","ja":"スライダーは、音量のように、正確な数より範囲や相対的な大きさが大事なときに使います。正確な数を入れるなら、U.S. Web Design System は通常のテキスト入力を使うように求めています。"}],"misuse":[{"pattern":{"en":"Letting the value change only by dragging the thumb","ja":"つまみのドラッグでしか値を変えられない作りにする"},"harm":{"en":"People who cannot drag precisely, and people who use a trackball, head pointer, eye-gaze system or speech-controlled pointer, find dragging hard and error-prone.","ja":"正確にドラッグできない人や、トラックボール、ヘッドポインター、視線入力、音声で動かすポインターを使う人には、ドラッグが難しく、誤りやすいです。"},"instead":{"en":"Let people also set the value by clicking or tapping the track and with the arrow keys. A native `<input type=\"range\">` already supports both.","ja":"溝のクリックやタップ、矢印キーでも値を変えられるようにします。ネイティブの `<input type=\"range\">` はどちらにも対応しています。"}}],"related":[{"id":"window-splitter","diff":{"en":"A slider picks a value that is used somewhere else; a window splitter is moved to resize the two panes on either side of it.","ja":"スライダーはほかの場所で使う値を選び、ウィンドウスプリッターは動かして両側のペインの大きさを変えます。"}},{"id":"range-slider","diff":{"en":"A slider has one knob that picks a single value; a range slider has two knobs that pick the lowest and highest values.","ja":"スライダーは1つのつまみで1つの値を選び、範囲スライダーは2つのつまみで下限と上限を選びます。"}},{"id":"number-input","diff":{"en":"A slider picks a rough position by dragging; a number input is better when the exact number matters.","ja":"スライダーはつまみで大まかな位置を選び、数値入力は正確な数値が大事なときに向いています。"}},{"id":"rating","diff":{"en":"A slider chooses any value along a track by moving a knob; a rating chooses one of a few scores, such as 1 to 5 stars, each a separate option.","ja":"スライダーはつまみを溝に沿って動かして範囲内の値を選び、評価は星1〜5のような数個の点数から、選択肢を1つ選びます。"}}],"sources":[{"label":"WAI-ARIA APG: Slider Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider/","checkedAt":"2026-10-20"},{"label":"MDN: <input type=\"range\">","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range","checkedAt":"2026-10-20"},{"label":"Carbon Design System: Slider","url":"https://carbondesignsystem.com/components/slider/usage/","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 2.5.7: Dragging Movements (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html","checkedAt":"2026-10-21"},{"label":"U.S. Web Design System: Range slider","url":"https://designsystem.digital.gov/components/range-slider/","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/slider/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/slider/"}},{"id":"spinner","category":"feedback","names":{"en":"Spinner","ja":"スピナー"},"aliases":[{"name":"Loading","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/loading/usage/"},{"name":"プログレスインジケーター","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/progress-indicator/"},{"name":"Loading indicator","source":"Material Design 3","url":"https://m3.material.io/components/loading-indicator/guidelines"}],"summary":{"en":"A small rotating shape that shows something is loading, without saying how long it will take.","ja":"読み込み中であることを示す、回転する小さな図形です。終わるまでの時間は示しません。"},"appearance":{"en":"A ring with one colored section, or a circle of dots, that keeps spinning.","ja":"一部だけ色の付いた輪や、点を丸く並べたものが回り続けます。"},"behavior":[{"en":"Shown while waiting for data and removed when loading finishes.","ja":"データを待っている間だけ表示し、読み込みが終わると消します。"},{"en":"The spinning shape is decorative; a text such as “Loading…” in a `status` region tells screen reader users what is happening.","ja":"回る図形は飾りで、何が起きているかは `status` の領域に入れた「読み込み中…」などの文でスクリーンリーダー利用者に伝えます。"},{"en":"In this demo, the box stands for a whole screen. The spinner fills it while the page loads, and the comments appear once loading finishes.","ja":"このデモでは、枠を1つの画面に見立てています。ページの読み込み中は枠全体にスピナーを出し、読み込みが終わるとコメントを表示します。"},{"en":"With the reduce-motion setting, which the page reads through `prefers-reduced-motion`, this demo stops the spinning. The Digital Agency Design System example does the same. The “Loading…” text still tells the user what is happening.","ja":"「視差効果を減らす」などの設定が有効なとき、このデモは `prefers-reduced-motion` でそれを読み取り、回転を止めます。デジタル庁デザインシステムの実装例も同じです。処理中であることは「読み込み中…」の文で伝わります。"}],"keyboard":[{"key":"—","action":{"en":"None. The demo’s button that opens the comments page uses Enter / Space.","ja":"なし。デモのコメントのページを開くボタンは Enter / Space で押せます。"}}],"usage":[{"en":"Systems differ on loading inside part of the screen. Because a part that keeps moving draws the eye away from the rest of the page, the Digital Agency Design System keeps animated indicators for whole-screen loading and uses a static indicator, such as its hourglass type, for a small area. Carbon shows its small loading indicator next to the related action for loading inside one element.","ja":"画面の一部の読み込みの扱いは資料によって分かれます。動き続ける部分に目を奪われ、画面のほかの部分に集中できなくなるため、デジタル庁デザインシステムは動く表示を画面全体の読み込みに限り、一部の領域には砂時計タイプのような動かない表示を使います。Carbon は1つの要素の中の読み込みに、小さな読み込み表示を操作の横に出します。"},{"en":"Continuous movement is especially distracting for some people with cognitive disabilities or attention deficits.","ja":"認知障害や注意の障害がある人には、動き続けるものが特に妨げになります。"},{"en":"Material Design 3 uses no indicator for a wait under 200 ms, a loading indicator for 200 ms to 5 s, and a progress indicator for anything longer. It centers the indicator in the page or container, or in the empty space where new content will appear, and does not switch a loading indicator into a determinate progress indicator partway through.","ja":"Material Design 3 は、待ち時間が200ミリ秒に満たなければインジケーターを出さず、200ミリ秒から5秒まではローディングインジケーター、それより長ければプログレスインジケーターを使います。インジケーターはページやコンテナの中央か、新しい内容が入る空きに置きます。途中でローディングインジケーターを進捗の分かるプログレスインジケーターに切り替えないよう求めています。"}],"related":[{"id":"progress-bar","diff":{"en":"A spinner only shows that something is happening; a progress bar shows how far along it is.","ja":"スピナーは処理中であることだけを示し、プログレスバーは進み具合を示します。"}},{"id":"skeleton","diff":{"en":"A spinner is one shape for any wait; a skeleton previews the layout of the content that is loading.","ja":"スピナーはどの待ち時間にも使う1つの図形で、スケルトンは読み込み中の内容のレイアウトを先に見せます。"}}],"sources":[{"label":"Carbon Design System: Loading","url":"https://carbondesignsystem.com/components/loading/usage/","checkedAt":"2026-10-22"},{"label":"MDN: ARIA: status role","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role","checkedAt":"2026-10-22"},{"label":"MDN: prefers-reduced-motion","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 2.2.2: Pause, Stop, Hide (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「プログレスインジケーター」をもとに作成","url":"https://design.digital.go.jp/dads/components/progress-indicator/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: progress-indicator","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/progress-indicator","checkedAt":"2026-10-21"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"Material Design 3: Loading indicator","url":"https://m3.material.io/components/loading-indicator/guidelines","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/spinner/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/spinner/"}},{"id":"split-button","category":"action","names":{"en":"Split button","ja":"スプリットボタン"},"aliases":[{"name":"Combo button","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/menu-buttons/usage/"}],"summary":{"en":"A button for the most common action, joined to a small arrow button that opens related actions.","ja":"よく使う操作のボタンと、関連する操作のメニューを開く小さな矢印ボタンをつなげた部品です。"},"appearance":{"en":"One button divided in two: a labeled main part and a narrow part with a downward arrow, separated by a thin line.","ja":"1つのボタンが細い線で2つに分かれ、ラベルのある本体と、下向き矢印だけの細い部分からなります。"},"behavior":[{"en":"Pressing the main part runs the default action right away.","ja":"本体を押すと、既定の操作がすぐに実行されます。"},{"en":"Pressing the arrow opens a menu of other actions; choosing one runs it and closes the menu.","ja":"矢印を押すと他の操作のメニューが開き、1つを選ぶとその操作を実行してメニューが閉じます。"},{"en":"The menu points to the arrow button with `aria-labelledby`, so it is named after the button’s label (in this demo, “More save options”).","ja":"メニューは `aria-labelledby` で矢印のボタンを指し、ボタンのラベル（このデモでは「その他の保存方法」）を名前にします。"},{"en":"The two parts are separate buttons, each reached with Tab.","ja":"2つの部分は別々のボタンで、それぞれ Tab でフォーカスできます。"},{"en":"In this demo, the menu lines up with the right edge of the arrow button, which is also the right edge of the whole split button.","ja":"このデモでは、メニューを矢印のボタンの右端、つまりスプリットボタン全体の右端にそろえて出します。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the main button and the arrow button.","ja":"本体のボタンと矢印のボタンの間を移動します。"}},{"key":"Enter / Space","action":{"en":"On the main button, runs the default action. On the arrow, opens the menu and focuses the first item.","ja":"本体では既定の操作を実行します。矢印ではメニューを開き、最初の項目にフォーカスします。"}},{"key":"↑ / ↓","action":{"en":"On the arrow, opens the menu: ↓ focuses the first item, ↑ the last. In the menu, moves between items.","ja":"矢印ではメニューを開き、↓ なら最初の項目、↑ なら最後の項目にフォーカスします。メニュー内では項目の間を移動します。"}},{"key":"Home / End","action":{"en":"In the menu, moves to the first / last item.","ja":"メニュー内で最初・最後の項目へ移ります。"}},{"key":"Esc","action":{"en":"Closes the menu and returns focus to the arrow button.","ja":"メニューを閉じ、矢印のボタンにフォーカスを戻します。"}}],"variations":[{"name":{"en":"Runs the chosen action","ja":"選んだ操作をすぐ実行する"},"description":{"en":"Choosing a menu item runs that action at once, and the main button keeps its own action. This demo works this way.","ja":"メニューの項目を選ぶとその操作をすぐ実行し、本体のボタンの操作は変わりません。このデモはこの型です。"}},{"name":{"en":"Changes the main action","ja":"本体の操作を切り替える"},"description":{"en":"Choosing a menu item only makes it the main button’s action and label; pressing the main button then runs it.","ja":"メニューの項目を選ぶと、本体のボタンの操作とラベルがそれに替わるだけで、実行は本体を押したときに行います。"}}],"usage":[{"en":"Material Design 3 keeps the main button’s label to one or two words, with an icon that matches the action. The button that opens the menu always shows the expand and collapse icon, which rotates when the menu is open, and the menu is aligned with that button where there is room.","ja":"Material Design 3 は、メインのボタンのラベルを1〜2語にし、操作に合うアイコンを添えます。メニューを開くボタンには常に展開・折りたたみを表すアイコンを使い、メニューが開くとこのアイコンが回転します。メニューは、余裕があれば、メニューを開くボタンに揃えて開きます。"},{"en":"Carbon uses a combo button when screen space is limited and one of the actions has particular importance, usually in the page header. When all the actions are equally important, it uses a menu button.","ja":"Carbon は、画面の余裕が少なく、操作の 1 つが特に重要なときにコンボボタンを使います。多くはページのヘッダーに置きます。すべての操作の重要度が同じなら、メニューボタンを使います。"}],"related":[{"id":"menu","diff":{"en":"A split button runs its main action with one press and keeps the rest in a menu; a menu button only opens the menu.","ja":"スプリットボタンは主な操作を1回で実行でき、残りをメニューにしまいます。メニューボタンは押してもメニューを開くだけです。"}},{"id":"button","diff":{"en":"A split button adds a menu of related actions beside the main button; a button offers one action.","ja":"スプリットボタンは、主な操作のボタンの横に関連する操作のメニューが付き、ボタンは操作が1つだけです。"}},{"id":"button-group","diff":{"en":"A split button is one main action joined to an arrow button that opens a menu of related actions; a button group is a set of separate buttons, each running its own action.","ja":"スプリットボタンは主な操作に、関連する操作のメニューを開く矢印のボタンをつなげたものです。ボタングループは別々のボタンを並べ、それぞれが自分の操作を実行します。"}}],"sources":[{"label":"Carbon Design System: Menu buttons (Combo button)","url":"https://carbondesignsystem.com/components/menu-buttons/usage/","checkedAt":"2026-10-21"},{"label":"MUI: Button Group (Split button)","url":"https://mui.com/material-ui/react-button-group/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Menu Button Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/","checkedAt":"2026-10-20"},{"label":"Material Design 3: Split buttons","url":"https://m3.material.io/components/split-button/guidelines","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/split-button/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/split-button/"}},{"id":"stepper","category":"navigation","names":{"en":"Stepper","ja":"ステップナビゲーション"},"aliases":[{"name":"Progress indicator","source":"Carbon Design System","url":"https://carbondesignsystem.com/building-blocks/core/components/progress-indicator"},{"name":"Steps","source":"Ant Design","url":"https://ant.design/components/steps"},{"name":"ステップナビゲーション","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/step-navigation/"},{"name":"Step indicator","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/step-indicator/"}],"summary":{"en":"Shows the steps of a multi-page procedure, such as an application, and which step the user is on.","ja":"申請など複数画面にまたがる手続きの段階と、今どの段階にいるかを示す部品です。"},"appearance":{"en":"Numbered circles in a row (or column) with a name under each. Finished steps show a check mark, skipped steps a dashed circle with “Skipped”, and the current one is highlighted.","ja":"番号の付いた丸が横（または縦）に並び、それぞれに名前が付きます。終わった段階にはチェックが、スキップした段階には点線の丸と「スキップ」が付き、現在の段階は強調されます。"},"behavior":[{"en":"The display changes as the user moves through the procedure with buttons such as “Next”.","ja":"「次へ」などのボタンで手続きを進めると、表示が切り替わります。"},{"en":"The current step is marked with `aria-current=\"step\"`, and finished steps have hidden text saying so. Hidden text before the steps, as in the Digital Agency Design System example, tells screen reader users the overall progress, such as “4 steps in total; reached step 2”.","ja":"現在の段階には `aria-current=\"step\"` を付け、終わった段階には読み上げ用の「完了」を添えます。段階の並びの前には、デジタル庁デザインシステムの実装例と同じく、「全4ステップ中、2ステップ目まで到達済み」のように全体の進み具合を伝える読み上げ用の文を置きます。"},{"en":"In this demo, every step already reached is a button, so you can go back to a finished step and return. The current step and steps not yet reached are plain text. Pressing a step button moves focus to the heading of that step, because the button turns into plain text.","ja":"このデモでは、一度たどり着いた段階はボタンになり、終わった段階へ戻ってまた先へ進めます。現在の段階とまだたどり着いていない段階はただの文字です。段階のボタンを押すと、そのボタンは文字に変わるので、移った段階の見出しへフォーカスを移します。"},{"en":"In this demo, “Documents” is optional and there is nothing to attach, so moving past it marks it as skipped. The state is shown in words, not only by the dashed circle.","ja":"このデモでは「添付書類」は任意で、添付する操作もないため、先へ進むとスキップ扱いになります。状態は点線の丸だけでなく文字でも示します。"},{"en":"In this demo, the last step’s button says “Submit” instead of “Next”. After submitting, focus moves to the confirmation message.","ja":"このデモでは、最後の段階のボタンは「次へ」ではなく「申請する」になります。申請すると、受付の文へフォーカスが移ります。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves through the step buttons and the Back and Next buttons.","ja":"段階のボタンと「戻る」「次へ」の間を移ります。"}},{"key":"Enter / Space","action":{"en":"On a step button, goes to that step and moves focus to its heading. Also presses Back, Next and Submit.","ja":"段階のボタンでは、その段階へ移り、見出しへフォーカスを移します。「戻る」「次へ」「申請する」もこのキーで押します。"}}],"variations":[{"name":{"en":"Vertical","ja":"縦並び"},"description":{"en":"Steps stacked vertically, useful when the names are long or on narrow screens. Carbon recommends the vertical layout whenever possible, for easier reading.","ja":"段階を縦に並べたものです。名前が長いときや、幅の狭い画面に向きます。Carbon は読みやすさのため、できるだけ縦に並べるよう勧めています。"}},{"name":{"en":"Clickable steps","ja":"段階へ移動できるもの"},"description":{"en":"Finished steps are links or buttons so the user can go back to them, as in this demo. Carbon’s interactive progress indicator lets the user move to each step, while Nielsen Norman Group advises not letting users pick a step before finishing the ones before it. With links, the Digital Agency Design System wraps the steps in a `<nav>` with an `aria-label`.","ja":"このデモのように、終わった段階をリンクやボタンにして戻れるようにしたものです。Carbon の操作できるプログレスインジケーターはどの段階へも移れますが、Nielsen Norman Group は前の段階を終えるまで先の段階を選べないようにすることを勧めています。リンクにする場合、デジタル庁デザインシステムは全体を `aria-label` 付きの `<nav>` で囲みます。"}}],"usage":[{"en":"Split the task into logical steps so the user can see the whole procedure before starting.","ja":"作業を意味のまとまりで段階に分け、始める前に手続きの全体が分かるようにします。"},{"en":"Show the state of each step, such as done, current or with errors. The Digital Agency Design System also marks skipped steps, with a dashed circle.","ja":"各段階の状態（完了・現在・エラーなど）を表示します。デジタル庁デザインシステムではスキップした段階も点線の丸で示します。"},{"en":"For a short wait such as loading, use a progress bar. For moving between pages in a sequence, use pagination.","ja":"読み込み待ちのような一時的な状態にはプログレスバーを、順番に並んだページの行き来にはページネーションを使います。"},{"en":"The U.S. Web Design System uses a step indicator for a linear process of three or more high-level steps, alongside separate back and next buttons rather than as navigation of its own. It says not to use one for fewer than three sections, for steps that can be done in any order, or when the number of steps may change with the person’s answers.","ja":"U.S. Web Design System は、3つ以上の大きな段階が順に進む手続きにステップインジケーターを使い、戻る・次へのボタンとは別に置きます。それ自体を移動手段にはしません。段階が3つに満たない場合、順番が決まっていない場合、回答によって段階の数が変わりうる場合には使わないよう求めています。"}],"misuse":[{"pattern":{"en":"Asking in a later step for information the user already entered in an earlier step","ja":"前の段階で入力した内容を、後の段階でもう一度入力させる"},"harm":{"en":"People with cognitive, learning or memory disabilities have to recall earlier answers. They may make mistakes or give up on the process.","ja":"認知障害や学習障害、記憶に困難のある人は、前に入力した内容を思い出さなければなりません。入力を誤ったり、手続きをあきらめたりすることがあります。"},"instead":{"en":"Fill in what the user already entered, or let them choose it, for example with a “Same as shipping address” checkbox.","ja":"入力済みの内容をあらかじめ入れておくか、選べるようにします。例えば「お届け先と同じ」のチェックボックスを置きます。"}},{"pattern":{"en":"Making cancellation or account deletion take many more steps than signing up","ja":"申し込みは少ない段階で済むのに、解約や退会には多くの段階を踏ませる"},"harm":{"en":"Users who want to leave are kept away from it. Some give up and keep paying for a service they no longer need.","ja":"やめたい利用者が、その操作から遠ざけられます。あきらめて、もう要らないサービスの料金を払い続ける人も出ます。"},"instead":{"en":"Let users cancel in about as many steps as it took to sign up, and show the way to cancel where they can find it.","ja":"申し込みと同じくらいの段階数で解約できるようにし、解約の入り口を見つけやすい場所に置きます。"},"deceptive":true}],"related":[{"id":"tabs","diff":{"en":"A stepper shows steps completed in a fixed order; tabs can be opened in any order.","ja":"ステップナビゲーションは決まった順に進む段階を示し、タブはどの順番でも開けます。"}},{"id":"progress-bar","diff":{"en":"A stepper shows the user’s place in a multi-page procedure; a progress bar shows progress within one task.","ja":"ステップナビゲーションは複数画面の手続きの中での現在地を示し、プログレスバーは1つの作業の進み具合を示します。"}},{"id":"pagination","diff":{"en":"A stepper shows distinct steps of a procedure; pagination moves through pages of the same kind of content.","ja":"ステップナビゲーションは内容の異なる手順を示し、ページネーションは同じ種類の内容のページを行き来します。"}},{"id":"number-input","diff":{"en":"A stepper here is a step indicator, not what Apple calls a “stepper”, the − / + control of a number input.","ja":"ステップナビゲーションは段階の表示で、Apple が「Stepper」と呼ぶ数値入力の − / + の部品とは別のものです。"}},{"id":"timeline","diff":{"en":"A stepper shows the steps of a procedure and which one the user is on; a timeline lays out events by when they happen.","ja":"ステップナビゲーションは手続きの段階と今いる段階を示し、タイムラインは出来事をいつ起きたかで並べます。"}}],"sources":[{"label":"Carbon Design System: Progress indicator","url":"https://carbondesignsystem.com/building-blocks/core/components/progress-indicator","checkedAt":"2026-10-20"},{"label":"Ant Design: Steps","url":"https://ant.design/components/steps","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「ステップナビゲーション」をもとに作成","url":"https://design.digital.go.jp/dads/components/step-navigation/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: step-navigation","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/step-navigation","checkedAt":"2026-10-22"},{"label":"Apple Human Interface Guidelines: Steppers","url":"https://developer.apple.com/design/human-interface-guidelines/steppers","checkedAt":"2026-10-21"},{"label":"MDN: aria-current","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Wizards: Definition and Design Recommendations","url":"https://www.nngroup.com/articles/wizards/","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 3.3.7: Redundant Entry (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Hard to cancel","url":"https://www.deceptive.design/types/hard-to-cancel","checkedAt":"2026-10-21"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"U.S. Web Design System: Step indicator","url":"https://designsystem.digital.gov/components/step-indicator/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/stepper/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/stepper/"}},{"id":"switch","category":"input","names":{"en":"Switch","ja":"スイッチ"},"aliases":[{"name":"Toggle","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/toggle/usage/"},{"name":"Toggle switch","source":"Open UI","url":"https://open-ui.org/components/switch.explainer"}],"summary":{"en":"Turns a single setting on or off, with the change taking effect right away.","ja":"1つの設定をオン・オフする部品です。切り替えるとすぐに反映されます。"},"appearance":{"en":"A pill-shaped track with a round knob. The knob slides to one end and the track changes color when it is on.","ja":"角の丸い横長の溝に、丸いつまみが乗った形です。オンにするとつまみが端へ移り、溝の色が変わります。"},"behavior":[{"en":"Clicking anywhere on the switch or its label flips the state.","ja":"スイッチ本体かラベルをクリックすると状態が反転します。"},{"en":"There are only two states, on and off; unlike a checkbox, there is no mixed state.","ja":"状態はオンとオフの2つだけで、チェックボックスのような中間状態はありません。"},{"en":"The label names the setting and does not change when the state changes.","ja":"ラベルは設定の名前を表し、状態が変わってもラベルの文言は変えません。"},{"en":"This demo is a native checkbox with `role=\"switch\"`, styled to look like a switch.","ja":"このデモはネイティブのチェックボックスに `role=\"switch\"` を付け、スイッチの見た目にしています。"},{"en":"In this demo, the switch sets whether the task list shows completed tasks. Turning it on shows them in the list right away, with no save button.","ja":"このデモでは、スイッチでタスクの一覧に完了したタスクを出すかどうかを決めます。オンにすると、保存ボタンを押さなくても、すぐ一覧に表示されます。"}],"keyboard":[{"key":"Space","action":{"en":"Turns the switch on or off.","ja":"オン・オフを切り替えます。"}}],"variations":[{"name":{"en":"Two options (mode switch)","ja":"2択型（モードスイッチ）"},"description":{"en":"Switches between two named options, such as list view and calendar view, or Celsius and Fahrenheit, with a label on each side. In the Digital Agency Design System example, each label is a `<button role=\"switch\">`, and pressing either one flips the state.","ja":"リスト表示とカレンダー表示、摂氏と華氏のような名前のある2つの選択肢を、左右にラベルを置いて切り替えるものです。デジタル庁デザインシステムの例では左右のラベルがそれぞれ `<button role=\"switch\">` で、どちらを押しても状態が入れ替わります。"}}],"usage":[{"en":"Use it only for settings that take effect immediately and whose result can be seen on the spot. If a save or submit step is needed, or the result cannot be seen right away, use a checkbox or radio buttons.","ja":"すぐに反映され、結果をその場で目で確かめられる設定にだけ使います。保存や送信が必要なときや、結果がすぐには見えないときは、チェックボックスかラジオボタンを使います。"},{"en":"Apple Human Interface Guidelines use a toggle only to choose between two opposing states, and not to pick from a list of items. They say not to show the state by color alone. On iOS and iPadOS, the switch style belongs only in a list row; outside a list, they use a button that behaves like a toggle.","ja":"Apple Human Interface Guidelines は、トグルを対になる2つの状態から選ぶ場面だけに使い、一覧から項目を選ぶ場面には使いません。状態の違いを色だけで示さないようにも求めています。iOS と iPadOS では、スイッチの形はリストの行の中だけに使い、リストの外ではトグルとして働くボタンを使います。"}],"misuse":[{"pattern":{"en":"Turning marketing or sharing settings on in advance","ja":"メール配信や情報の共有などの設定を最初からオンにしておく"},"harm":{"en":"People tend to go with an option that has already been chosen for them. Anyone who scrolls past without noticing the setting goes on unaware of what it means, and leaves it on without ever having chosen it.","ja":"人はあらかじめ選ばれている選択肢をそのまま受け入れやすいものです。気づかずに先へ進んだ人は、その意味を知らないまま、自分で選んでいない設定をオンのまま使い続けることになります。"},"instead":{"en":"Start these settings off and let people turn them on themselves. Say in the label what turning it on does.","ja":"こうした設定は最初はオフにし、利用者が自分でオンにできるようにします。オンにすると何が起きるかはラベルに書きます。"},"deceptive":true}],"related":[{"id":"checkbox","diff":{"en":"A switch takes effect right away; a checkbox is often confirmed later with a submit button.","ja":"スイッチは切り替えるとすぐに反映され、チェックボックスは送信ボタンで後から確定することが多いです。"}},{"id":"toggle-button","diff":{"en":"A switch looks like a sliding knob and is used for settings; a toggle button looks like a button and is often used in toolbars.","ja":"スイッチはつまみが動く形で設定項目に使い、トグルボタンはボタンの形でツールバーなどに使います。"}}],"sources":[{"label":"WAI-ARIA APG: Switch Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/switch/","checkedAt":"2026-10-20"},{"label":"Open UI: Switch Element (Explainer)","url":"https://open-ui.org/components/switch.explainer","checkedAt":"2026-10-20"},{"label":"Carbon Design System: Toggle","url":"https://carbondesignsystem.com/components/toggle/usage/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「スイッチ」をもとに作成","url":"https://design.digital.go.jp/dads/components/switch/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: switch","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/switch","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Preselection","url":"https://www.deceptive.design/types/preselection","checkedAt":"2026-10-21"},{"label":"Nielsen Norman Group: Toggle-Switch Guidelines","url":"https://www.nngroup.com/articles/toggle-switch-guidelines/","checkedAt":"2026-10-22"},{"label":"Apple Human Interface Guidelines: Toggles","url":"https://developer.apple.com/design/human-interface-guidelines/toggles","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/switch/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/switch/"}},{"id":"table","category":"data","names":{"en":"Table","ja":"テーブル"},"aliases":[{"name":"Data table","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/data-table/usage/"},{"name":"テーブル／データテーブル","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/table/"}],"summary":{"en":"Data arranged in rows and columns, with headings that explain each column.","ja":"データを行と列に並べ、列ごとに見出しを付けた表です。"},"appearance":{"en":"A grid of cells with a bold header row at the top, separated by lines. Numbers are usually right-aligned.","ja":"太字の見出し行が上にあり、線で区切られたセルが並びます。数値は右揃えにすることが多いです。"},"behavior":[{"en":"The cells themselves are not interactive; screen readers announce the matching column and row headings while moving through cells.","ja":"セル自体は操作できません。スクリーンリーダーはセルを移動するとき、対応する列と行の見出しを読み上げます。"},{"en":"A sortable column has a button in its heading, and `aria-sort` tells which way it is sorted. Only one column is sorted at a time, so `aria-sort` moves to the newly sorted column and is removed from the previous one.","ja":"並べ替えできる列は見出しにボタンを置き、`aria-sort` で並び順を伝えます。並べ替えるのは一度に1列だけなので、`aria-sort` は新しく並べ替えた列へ移し、前の列からは外します。"},{"en":"That the buttons sort the table is said once, in visually hidden text in the `<caption>`, rather than repeated on every button.","ja":"ボタンで並べ替えられることは、ボタンごとに繰り返さず、`<caption>` の中の見えない文字で1回だけ伝えます。"},{"en":"In this demo, both Price and Storage can be sorted. A sortable heading is underlined and has two triangles; the one for the current order is filled, and both are outlined while the column is not sorted, so the states differ in shape as well as color.","ja":"このデモでは、月額と容量の両方で並べ替えられます。並べ替えできる見出しには下線と上下の三角があり、今の並び順の三角だけを塗ります。並べ替えていない列は両方とも線だけにし、色だけでなく形でも状態を見分けられるようにしています。"},{"en":"Native `<table>`, `<caption>`, and `<th scope>` give the structure without extra ARIA.","ja":"ネイティブの `<table>`・`<caption>`・`<th scope>` を使えば、ARIA を足さずに構造が伝わります。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves only between controls inside the table, such as the sort buttons.","ja":"表の中の操作できる要素（並べ替えボタンなど）の間だけを移動します。"}},{"key":"Enter / Space","action":{"en":"On a sort button, sorts by that column in ascending order, or switches between ascending and descending if it is already sorted.","ja":"並べ替えボタンで、その列を昇順に並べます。すでにその列で並べているときは、昇順と降順を切り替えます。"}}],"variations":[{"name":{"en":"Data grid","ja":"データグリッド"},"description":{"en":"An interactive table where arrow keys move between cells, used when cells can be edited or selected. This site describes it as its own component, the data grid.","ja":"セルを編集・選択できる表で、矢印キーでセル間を移動するものです。このサイトでは別の部品「グリッド」として説明しています。"}}],"usage":[{"en":"Sort by the column the user clicks. Both the heading text and the sort icon should be clickable.","ja":"押された列を基準に並べ替えます。見出しの文字と並べ替えのアイコンの両方を押せる範囲にします。"},{"en":"For pairs of names and values, use a description list.","ja":"項目名と値の組には、説明リストを使います。"},{"en":"The GOV.UK Design System says never to use a table to lay out a page; use a grid instead. It describes a table with a `<caption>` written like a heading, uses the `scope` attribute on header cells so assistive technology can tell row headers from column headers, and aligns columns of numbers to the right.","ja":"GOV.UK は、ページのレイアウトにテーブルを使わず、グリッドを使うよう求めています。テーブルには見出しのように書いた `<caption>` で説明を付け、見出しセルには `scope` 属性を付けて、支援技術が行見出しと列見出しを区別できるようにします。数値の列は右に揃えます。"},{"en":"The U.S. Web Design System says a table is for data with a consistent structure, not for page layout or for long text in cells. It advises keeping the columns few, using one unit and format within a column, and adding sorting only to long tables whose data can be ordered, and never to tables with merged cells.","ja":"U.S. Web Design System は、テーブルを使うのは構造がそろったデータで、ページのレイアウトや、セルの中の長い文章には使わないとしています。列の数は少なくし、1つの列の中では単位と書式をそろえます。並べ替えは、データに順序を付けられる長いテーブルにだけ付け、セルを結合したテーブルには付けません。"},{"en":"Decide what a wide table does on a narrow screen. The U.S. Web Design System offers a scrollable table for dense data, in a container with `tabindex=\"0\"`, and a stacked table that collapses at narrow widths for readability.","ja":"横に広い表を狭い画面でどう見せるかを決めます。U.S. Web Design System は、データの多い表には `tabindex=\"0\"` を付けた入れ物で横にスクロールする形を、読みやすさのためには狭い幅で縦に積む形を用意しています。"}],"misuse":[{"pattern":{"en":"Using a table to lay out the page","ja":"ページのレイアウトにテーブルを使う"},"harm":{"en":"Screen readers read a table in source order, which can differ from the visual order, so people using a screen reader or a keyboard may meet the content in a confusing order. Markup such as `<th>` or `<caption>` can make a screen reader present it as a data table. When people with low vision enlarge text in fixed-size cells, it can overflow and need horizontal scrolling.","ja":"スクリーンリーダーはソースの順に読むため、見た目の順とずれることがあり、スクリーンリーダーやキーボードを使う人には内容が分かりにくい順で伝わります。`<th>` や `<caption>` があると、データの表として読み上げられることがあります。弱視の人が文字を拡大すると、大きさを固定したセルから内容がはみ出し、横スクロールが必要になることがあります。"},"instead":{"en":"Lay out the page with CSS (grid or flexbox) and keep `<table>` for data compared across rows and columns.","ja":"レイアウトは CSS（grid や flexbox）で組み、`<table>` は行と列で比べるデータにだけ使います。"}}],"related":[{"id":"data-grid","diff":{"en":"A table is for reading, and only the controls inside it are in the Tab order; a data grid lets people move between cells with the arrow keys and operate them.","ja":"テーブルは読むための表で、中の操作できる要素だけが Tab キーの順に入ります。グリッドは矢印キーでセルを移って操作できます。"}},{"id":"list","diff":{"en":"A table compares several values per row in columns; a list shows one item per row without columns.","ja":"テーブルは1行の複数の値を列で比べ、リストは列を持たずに1行に1項目を並べます。"}},{"id":"description-list","diff":{"en":"A table compares values across rows and columns; a description list shows name–value pairs for one subject.","ja":"テーブルは行と列で値を比べ、説明リストは1つの対象について項目名と値の組を並べます。"}}],"sources":[{"label":"WAI-ARIA APG: Table Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/table/","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Sortable Table Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Grid Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/grid/","checkedAt":"2026-10-20"},{"label":"Carbon Design System: Data table","url":"https://carbondesignsystem.com/components/data-table/usage/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「テーブル／データテーブル」をもとに作成","url":"https://design.digital.go.jp/dads/components/table/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「テーブル／データテーブル（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/table/usage/","checkedAt":"2026-10-21"},{"label":"WebAIM: Creating Accessible Tables","url":"https://webaim.org/techniques/tables/","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Table","url":"https://design-system.service.gov.uk/components/table/","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: Table","url":"https://designsystem.digital.gov/components/table/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/table/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/table/"}},{"id":"table-of-contents","category":"navigation","names":{"en":"Table of contents","ja":"目次"},"aliases":[{"name":"目次","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/toc/"},{"name":"In-page navigation","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/in-page-navigation/"}],"summary":{"en":"A list of links to the headings of a long page, showing how the page is organized and jumping to a section.","ja":"長いページの見出しへのリンクを並べたものです。ページの構成を示し、目当ての節へ移れるようにします。"},"appearance":{"en":"A titled list of the page’s headings, at the start of the page or in a column beside the text. Lower levels are indented as nested lists. Some mark the section being read in bold or in the accent color.","ja":"タイトルの付いた、ページの見出しの一覧です。ページの冒頭か、本文の横の列に置きます。下の階層は入れ子のリストで字下げします。今読んでいる節を太字やアクセントカラーで示すものもあります。"},"behavior":[{"en":"Each item is a link to a heading on the same page. Following it moves to that section, and the next Tab continues from there.","ja":"項目はそれぞれ、同じページの見出しへのリンクです。たどるとその節へ移り、次に Tab キーを押すとそこから先へ進みます。"},{"en":"It is a `<nav>` named by its title with `aria-labelledby`, so screen reader users can find it among the landmarks.","ja":"タイトルを `aria-labelledby` で名前にした `<nav>` なので、スクリーンリーダーの利用者はランドマークの一覧から見つけられます。"},{"en":"When it marks the section being read, the link has `aria-current=\"location\"` as well as a visible mark such as bold text.","ja":"今読んでいる節を示すときは、太字などの見た目の印に加えて、そのリンクに `aria-current=\"location\"` を付けます。"},{"en":"The table of contents on the right of this page (under the demo on phones) is this component. It marks the section being read.","ja":"このページの右側（スマートフォンではデモの下）にある「このページの内容」がこの部品です。今読んでいる節を示します。"},{"en":"In this demo, the article scrolls inside its own box so the page stays still. A link scrolls the box to its heading and moves focus there, and the section at the top of the box, or the last one once the box reaches its end, is marked as current.","ja":"このデモでは、ページを動かさないよう、記事を専用の枠の中でスクロールさせます。リンクを押すと枠がその見出しまでスクロールしてフォーカスが移り、枠の上端にある節（枠の終わりまで来たら最後の節）を今の節として示します。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the links.","ja":"リンク間を移動します。"}},{"key":"Enter","action":{"en":"Moves to the section of the focused link.","ja":"フォーカス中のリンクの節へ移ります。"}}],"variations":[{"name":{"en":"Nested","ja":"入れ子"},"description":{"en":"Lists the lower heading levels under their parents as nested lists. The parent items can also be links.","ja":"下の階層の見出しを、親の項目の下に入れ子のリストで並べるものです。親の項目もリンクにできます。"}},{"name":{"en":"Sticky beside the text","ja":"本文の横に固定"},"description":{"en":"Stays in view in a column beside the text while the page scrolls, and marks the section being read, like the table of contents on this page.","ja":"このページの目次のように、ページをスクロールしても本文の横の列に見えたまま残り、今読んでいる節を示すものです。"}}],"usage":[{"en":"Use it on long pages, to show the structure before people start reading and to let them jump to a section.","ja":"長いページで、読み始める前に全体の構成を示し、目当ての節へすぐ移れるようにするために使います。"},{"en":"Keep the title, such as “Contents”, so people can tell that the list is a table of contents.","ja":"目次だと分かるよう、「このページの目次」のようなタイトルを残します。"},{"en":"If there are several on one page, give each title its own `id` so the `aria-labelledby` values do not clash.","ja":"1つのページに複数置くときは、`aria-labelledby` が重ならないよう、タイトルにそれぞれ別の `id` を付けます。"},{"en":"The U.S. Web Design System suggests in-page navigation for a page with three or more sections, or content more than three screens long, and not for a short page or one without a heading structure. Its link text matches the section headings, and the page’s `h1` is left out of the list.","ja":"U.S. Web Design System は、節が3つ以上ある、または内容が画面3つ分より長いページにページ内ナビゲーションを使い、短いページや見出しの構造がないページには使わないとしています。リンクの文言は各節の見出しと同じにし、ページの `h1` は一覧に入れません。"}],"misuse":[{"pattern":{"en":"Wording the items differently from the headings they link to","ja":"項目を、リンク先の見出しと違う文言にする"},"harm":{"en":"When the label in the table of contents does not match the heading, people cannot find the place they were looking for.","ja":"目次の項目と見出しの文言が一致していないと、利用者は目当ての場所を見つけられなくなります。"},"instead":{"en":"Use the text of each heading as it is.","ja":"見出しの文言をそのまま項目にします。"}},{"pattern":{"en":"Listing every heading level of a deeply structured page","ja":"見出しの階層が深いページで、すべての階層の見出しを並べる"},"harm":{"en":"The list grows so long that it becomes harder to read, not easier.","ja":"項目が多くなりすぎて、かえって見づらくなります。"},"instead":{"en":"When the heading structure is deep, include only the levels people need.","ja":"見出しの階層が深いときは、目次に含める階層を必要なものに絞ります。"}}],"related":[{"id":"breadcrumb","diff":{"en":"A table of contents lists the sections within one page; a breadcrumb shows where the page sits among the pages of the site.","ja":"目次は1つのページの中の節を並べ、パンくずリストはサイトのページの階層の中で今のページの位置を示します。"}},{"id":"tabs","diff":{"en":"A table of contents links to sections that are all on the page at once; tabs show one panel at a time and hide the others.","ja":"目次はすべてが同時にページにある節へのリンクで、タブはパネルを1つずつ見せてほかを隠します。"}},{"id":"side-navigation","diff":{"en":"A table of contents links to the sections within the current page; side navigation links to the other pages of a section.","ja":"目次は今のページの中の節へのリンクを並べ、サイドナビゲーションはあるまとまりの別のページへのリンクを並べます。"}}],"sources":[{"label":"デジタル庁デザインシステムウェブサイト「目次」をもとに作成","url":"https://design.digital.go.jp/dads/components/toc/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: toc","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/toc","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Table of Contents: The Ultimate Design Guide","url":"https://www.nngroup.com/articles/table-of-contents/","checkedAt":"2026-10-22"},{"label":"MDN: <nav>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav","checkedAt":"2026-10-22"},{"label":"MDN: aria-current","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current","checkedAt":"2026-10-22"},{"label":"U.S. Web Design System: In-page navigation","url":"https://designsystem.digital.gov/components/in-page-navigation/","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/table-of-contents/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/table-of-contents/"}},{"id":"tabs","category":"navigation","names":{"en":"Tabs","ja":"タブ"},"aliases":[{"name":"Tab view","source":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/tab-views"},{"name":"TabList","source":"Fluent UI React v9","url":"https://storybooks.fluentui.dev/react/?path=/docs/components-tablist--docs"}],"summary":{"en":"Switches between panels of related content, showing one panel at a time.","ja":"関連する内容を複数のパネルに分け、1つずつ切り替えて表示する部品です。"},"appearance":{"en":"A row of labels above a content area. The selected label is highlighted, often with an underline, and only its panel is visible.","ja":"コンテンツ領域の上にラベルが横に並びます。選択中のラベルは下線などで強調され、そのパネルだけが表示されます。"},"behavior":[{"en":"Clicking a tab shows its panel and hides the others.","ja":"タブをクリックすると、そのパネルが表示され、他のパネルは隠れます。"},{"en":"Only the selected tab is in the Tab order; arrow keys move between tabs.","ja":"Tab キーで止まるのは選択中のタブだけで、タブ間の移動は矢印キーで行います。"},{"en":"In this demo, moving focus with the arrow keys also selects the tab (automatic activation).","ja":"このデモでは、矢印キーでフォーカスを移すと同時にタブが選択されます（自動アクティベーション）。"},{"en":"In this demo, hidden panels stay in the page, so a switch turned on under “Notifications” is still on after you visit another tab.","ja":"このデモでは、隠したパネルもページに残すので、「通知」で入れたスイッチはほかのタブを見たあとも入ったままです。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus into the tab list (to the selected tab), then to the panel. Shift + Tab goes back the same way.","ja":"まずタブリストの選択中のタブへ、次にパネルへフォーカスを移します。Shift + Tab では同じ順に戻ります。"}},{"key":"← / →","action":{"en":"Moves to the previous / next tab and selects it. From the last tab, → moves to the first; from the first, ← moves to the last.","ja":"前・次のタブへ移って選択します。最後のタブで → を押すと最初へ、最初のタブで ← を押すと最後へ回ります。"}},{"key":"Home / End","action":{"en":"Moves to the first / last tab and selects it.","ja":"最初・最後のタブへ移って選択します。"}}],"variations":[{"name":{"en":"Tab-key navigation","ja":"Tab キーナビゲーション"},"description":{"en":"Each tab is a link to its panel, without the ARIA tab roles, and the Tab key moves through the tabs like any links. The Digital Agency Design System uses this for information and government service sites.","ja":"各タブはパネルへのリンクで、ARIA のタブのロールを使わず、Tab キーで普通のリンクと同じように移ります。デジタル庁デザインシステムは、情報提供サイトや行政サービスのサイトにこの型を使います。"}},{"name":{"en":"Arrow-key navigation","ja":"矢印キーナビゲーション"},"description":{"en":"Follows the APG Tabs pattern with `role=\"tab\"`, as in this demo. The Digital Agency Design System uses this for web applications and admin screens.","ja":"このデモのように `role=\"tab\"` を使い、APG の Tabs パターンに従う型です。デジタル庁デザインシステムは、ウェブアプリケーションや管理画面にこの型を使います。"}},{"name":{"en":"Link list","ja":"リンクリスト"},"description":{"en":"Each tab is a separate page, and the tab for the current page has `aria-current=\"page\"`. In the Digital Agency Design System example, that tab also has no `href`. Nielsen Norman Group calls these navigation tabs and warns against mixing them with in-page tabs in one tab control.","ja":"タブごとに別のページになっているものです。今のページのタブには `aria-current=\"page\"` を付けます。デジタル庁デザインシステムの実装例では、このタブの `href` も省きます。Nielsen Norman Group はこれをナビゲーションタブと呼び、ページ内で切り替えるタブと1つのタブの並びに混ぜないよう勧めています。"}},{"name":{"en":"Manual activation","ja":"手動アクティベーション"},"description":{"en":"The arrow keys only move focus, and Enter or Space shows the focused tab’s panel. Use it when showing a panel takes time, such as loading its content.","ja":"矢印キーではフォーカスだけが移り、Enter か Space でそのタブのパネルを表示します。内容の読み込みなど、パネルの表示に時間がかかるときに使います。"}},{"name":{"en":"Vertical tabs","ja":"縦並びのタブ"},"description":{"en":"The tabs are stacked on the left or right of the panel. The tab list gets `aria-orientation=\"vertical\"`, and ↑ / ↓ move between tabs.","ja":"パネルの左か右にタブを縦に並べるものです。タブリストに `aria-orientation=\"vertical\"` を付け、↑ / ↓ でタブ間を移ります。"}}],"usage":[{"en":"Do not use ARIA tabs (`role=\"tab\"`) for site navigation, step-by-step flows, filtering, or content users need to compare side by side. For tabs that move between pages, use a row of links styled as tabs (the link list).","ja":"ARIA のタブ（`role=\"tab\"`）は、サイト内の移動、手順の進行、絞り込み、並べて比べたい内容には使いません。ページを移るタブにしたいときは、見た目だけをタブにしたリンクの並び（リンクリスト）にします。"},{"en":"The GOV.UK Design System says tabs hide content and not everyone notices them. It says not to use them when people need to read everything in order or compare what is in different tabs. It says to test the content without tabs first: less content, separate pages, one page with headings, or a table of contents.","ja":"GOV.UK Design System は、タブは内容を隠すので、気づかない人もいるとしています。順に全部読む必要があるときや、タブの間で見比べる必要があるときは使わないように求めています。先にタブなしで試すように言い、内容を減らす、ページを分ける、見出しで区切って 1 ページに置く、目次を付けるという案を挙げています。"},{"en":"Among tabs, accordions and details, GOV.UK suggests tabs when people view one section at a time or switch between sections quickly, because tabs do not push other sections down the page. An accordion fits many pieces of content, and details fits one or two short, less important pieces.","ja":"タブ、アコーディオン、details のうち、GOV.UK は、一度に 1 つの区分だけを見るときや区分をすばやく切り替えるときにはタブを勧めています。タブなら、ほかの区分を下へ押し下げないためです。内容の数が多いならアコーディオン、短くて重要度の低いものが 1 つか 2 つなら details が向いています。"},{"en":"Avoid tabs that wrap onto a second line. GOV.UK says too many tabs or long labels make it harder to see the connection between the selected tab and its content.","ja":"タブが 2 行に折り返さないようにします。GOV.UK によると、タブが多すぎたりラベルが長すぎたりすると、選んだタブと内容のつながりが分かりにくくなります。"}],"misuse":[{"pattern":{"en":"Switching panels on focus alone when a panel takes time to appear","ja":"表示に時間がかかるパネルを、フォーカスを移しただけで切り替える"},"harm":{"en":"Focus moves slowly from tab to tab, which makes it much harder for keyboard users to move through the tab list.","ja":"タブ間のフォーカスの移動が遅くなり、キーボードで操作する人がタブの並びを効率よく移動しにくくなります。"},"instead":{"en":"Switch the panel only when the user presses Enter or Space (manual activation), or load the panel content in advance.","ja":"Enter や Space を押したときだけパネルを切り替える（手動アクティベーション）か、パネルの内容を先に読み込んでおきます。"}}],"related":[{"id":"carousel","diff":{"en":"Tabs let the user jump to any panel by its name; a carousel picks slides by number or steps through them with previous and next buttons.","ja":"タブは名前の付いたパネルへ直接切り替え、カルーセルは番号でスライドを選ぶか前後のボタンで順に切り替えます。"}},{"id":"accordion","diff":{"en":"Tabs show one panel at a time side by side; an accordion stacks sections vertically and can open several at once.","ja":"タブは横に並べて1枚ずつ表示し、アコーディオンは縦に積んで複数を同時に開けます。"}},{"id":"stepper","diff":{"en":"Tabs can be opened in any order; a stepper shows steps that are completed in a fixed order.","ja":"タブはどの順番でも開けますが、ステップナビゲーションの段階は決まった順に進めます。"}},{"id":"menubar","diff":{"en":"A tab shows its own panel of content in place; a menubar item opens a list of commands.","ja":"タブはその場で自分のパネルの内容を見せ、メニューバーの項目は操作の一覧を開きます。"}},{"id":"segmented-control","diff":{"en":"Tabs switch between separate panels, each with its own content; a segmented control switches between closely related options or views of the same content.","ja":"タブはそれぞれ別の内容を持つパネルを切り替え、セグメンテッドコントロールは近い関係にある選択肢や同じ内容の表示を切り替えます。"}},{"id":"table-of-contents","diff":{"en":"Tabs show one panel at a time and hide the others; a table of contents links to sections that are all on the page at once.","ja":"タブはパネルを1つずつ見せてほかを隠し、目次はすべてが同時にページにある節へのリンクを並べます。"}},{"id":"side-navigation","diff":{"en":"Tabs switch between panels inside one page; side navigation links to separate pages, with the current page marked.","ja":"タブは1つのページの中のパネルを切り替え、サイドナビゲーションは別々のページへのリンクで今のページを示します。"}},{"id":"bottom-navigation","diff":{"en":"Tabs switch between panels of related content inside one page; bottom navigation moves between three to five top-level destinations along the bottom of a phone screen, with the current one marked.","ja":"タブは1つのページの中の関連する内容のパネルを切り替え、ボトムナビゲーションはスマートフォンの画面の下で、3〜5個の最上位の行き先の間を移り、今の行き先を示します。"}}],"sources":[{"label":"Open UI: Tabs","url":"https://open-ui.org/components/tabs.research","checkedAt":"2026-10-20"},{"label":"WAI-ARIA APG: Tabs Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/tabs/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステムウェブサイト「タブ」をもとに作成","url":"https://design.digital.go.jp/dads/components/tab/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステム HTML 実装例: tab","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/tab","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Tabs","url":"https://design-system.service.gov.uk/components/tabs/","checkedAt":"2026-10-22"},{"label":"MDN: aria-current","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current","checkedAt":"2026-10-22"},{"label":"Nielsen Norman Group: Tabs, Used Right","url":"https://www.nngroup.com/articles/tabs-used-right/","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/tabs/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/tabs/"}},{"id":"tag","category":"data","names":{"en":"Tag","ja":"タグ"},"aliases":[{"name":"Chip","source":"MUI","url":"https://mui.com/material-ui/react-chip/"},{"name":"チップタグ","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/chip-tag/"},{"name":"チップラベル","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/chip-label/"},{"name":"Chips","source":"Material Design 3","url":"https://m3.material.io/components/chips/overview"}],"summary":{"en":"A short keyword label used to categorize content or show an applied filter.","ja":"内容の分類や、適用中の絞り込みを示す短いキーワードのラベルです。"},"appearance":{"en":"A small rounded label with a short word. Selectable tags look like pill-shaped buttons and change color with a check mark when chosen. Removable tags have a small “×” at the end.","ja":"短い単語の入った小さな角丸のラベルです。選べるタグは丸いボタンの形で、選ぶと色が変わりチェックの印が付きます。外せるタグは末尾に小さな「×」があります。"},"behavior":[{"en":"Display-only tags only label content with a status or category, such as “Open”, and are not interactive.","ja":"表示だけのタグは、「受付中」のような状態や分類を示すだけで、操作できません。"},{"en":"Selectable tags are toggle buttons with `aria-pressed`, so screen readers announce whether each one is chosen.","ja":"選べるタグは `aria-pressed` を持つトグルボタンにするので、選ばれているかどうかをスクリーンリーダーが読み上げます。"},{"en":"Removable tags can be dismissed, for example to clear a filter. Each “×” is a button named after its tag, such as “Remove Red”.","ja":"外せるタグは絞り込みの解除などに使います。「×」はそれぞれボタンで、「赤を外す」のようにタグ名を含む名前を付けます。"},{"en":"After removing a tag, this demo moves focus to the next tag’s button (or the previous one if it was the last) so keyboard users do not lose their place. When no tags remain, focus goes to the list itself.","ja":"このデモではタグを外したあと、キーボード利用者が迷わないよう、次のタグ（最後のタグだったときは前のタグ）のボタンにフォーカスを移します。タグがなくなったときは一覧へ移します。"},{"en":"In this demo, a chosen tag shows a check mark as well as a color change, so the choice is not shown by color alone.","ja":"このデモでは、選んだタグに色の変化だけでなくチェックの印も付け、選択を色だけで示さないようにしています。"},{"en":"In this demo, the display-only, selectable and removable kinds are shown together so that you can compare them.","ja":"このデモでは、見比べられるように、表示だけのタグ、選べるタグ、外せるタグを並べています。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the selectable tags and the remove buttons. Display-only tags are skipped.","ja":"選べるタグと外すボタンの間を移動します。表示だけのタグには止まりません。"}},{"key":"Enter / Space","action":{"en":"On a selectable tag, chooses it or clears the choice. On a remove button, removes the tag and moves focus to the next one (or the previous one if it was the last, or the list when none remain).","ja":"選べるタグでは、選ぶか選択を外します。外すボタンでは、タグを外し、次のタグ（最後のタグだったときは前のタグ、残っていないときは一覧）へフォーカスを移します。"}}],"variations":[{"name":{"en":"Display-only tag","ja":"表示だけのタグ"},"description":{"en":"Shows a status or category that the content already has. The Digital Agency Design System calls it a chip label, and Carbon a read-only tag.","ja":"内容がすでに持っている状態や分類を示すものです。デジタル庁デザインシステムではチップラベル、Carbon では read-only tag と呼びます。"}},{"name":{"en":"Selectable tag","ja":"選択できるタグ"},"description":{"en":"Can be turned on or off, often to filter content on the page. Carbon calls it a selectable tag.","ja":"オン・オフを切り替えられるものです。ページ内の内容の絞り込みに使うことが多いです。Carbon では selectable tag と呼びます。"}},{"name":{"en":"Removable tag","ja":"外せるタグ"},"description":{"en":"Shows a value the user chose or entered, with a “×” to remove it. The Digital Agency Design System calls it a chip tag, and Carbon a dismissible tag.","ja":"利用者が選んだ値や入力した値を示し、「×」で外せるものです。デジタル庁デザインシステムではチップタグ、Carbon では dismissible tag と呼びます。"}}],"usage":[{"en":"A removable chip shows a value the user chose or entered, such as a filter or a recipient. Do not use it for removals that cannot be undone, or for a tag that must always stay.","ja":"× で外せるチップは、絞り込みの条件や宛先など、利用者が選んだ値や入力した値に使います。取り消せない削除や、常に残しておくべきタグには使いません。"},{"en":"A display-only chip shows a status or category. Always write the meaning as text, not by color alone. Colors can help tell categories apart, but too many make them harder to distinguish.","ja":"表示だけのチップは状態や分類に使います。意味は色だけで示さず、必ず文字で書きます。色は分類の見分けに役立ちますが、使いすぎるとかえって見分けにくくなります。"},{"en":"In the GOV.UK Design System, a tag only shows a status and is never made a link or a button. It names statuses with adjectives such as “Completed”, not verbs, so that no one expects a click to do something. The selectable and removable tags on this page are other kinds, so this advice applies to the display-only tag.","ja":"GOV.UK のタグは状態を示すだけのもので、リンクやボタンにはしません。名前は「完了済み」のように状態を表す語にし、動詞は使いません。動詞だと、押すと何か起きると思わせるためです。このページの選べるタグと外せるタグは別の種類なので、この助言は表示だけのタグに当てはまります。"},{"en":"The U.S. Web Design System warns that people often mistake tags for buttons. A tag that is not interactive should have no hover, focus or active style, and it advises against mixing interactive and static tags on a site, because once a pattern is set people expect it every time.","ja":"U.S. Web Design System は、タグをボタンと取り違える人が多いと注意しています。操作できないタグには、ホバー・フォーカス・押下時の見た目を付けません。タグの動きが決まると利用者はいつも同じだと期待するため、サイトの中で操作できるタグと操作できないタグを混在させないよう勧めています。"},{"en":"For interactive tags, Material Design 3 has chips, which it sorts into four kinds. Its filter chip, which stands for a filter on a collection, matches the selectable tag, and its input chip, a piece of information the person entered, matches the removable tag. It says chips are not buttons: actions that move a task forward are buttons, and a chip label is 20 characters or fewer.","ja":"Material Design 3 では、操作できるタグに当たるものをチップといい、4種類に分けています。コレクションの絞り込みを表すフィルターチップは選べるタグに、利用者が入力した情報を表すインプットチップは外せるタグに当たります。チップはボタンではなく、作業を先へ進める操作はボタンにするとしています。チップのラベルは20文字以内にします。"},{"en":"The remove button on a chip is a target of its own, so it needs the 24 × 24 CSS px or the spacing that WCAG 2.5.8 asks for. Nielsen Norman Group gives a dismiss button only 2 mm wide as an example of a target too small to tap.","ja":"チップの削除ボタンは、それ自体が独立したターゲットです。WCAG 2.5.8 が求める 24 × 24 CSS px か、十分な間隔が要ります。Nielsen Norman Group は、幅 2 mm しかない閉じるボタンを、小さすぎてタップしにくい例に挙げています。"}],"misuse":[{"pattern":{"en":"Telling statuses or categories apart only by the tag’s color","ja":"状態や分類の違いをタグの色だけで示す"},"harm":{"en":"People with color vision deficiency, many older people and people with partial sight, and anyone on a monochrome display cannot get information that is shown only by color.","ja":"色覚に特性のある人、色が見分けにくい高齢者や弱視の人、白黒の画面を使う人には、色だけで示した情報が伝わりません。"},"instead":{"en":"Write the status or category as a word in the tag, and add an icon if it helps.","ja":"タグの中に状態や分類を言葉で書き、必要ならアイコンも添えます。"}},{"pattern":{"en":"Labeling items “Only a few left” or “Popular” when that is not true","ja":"事実でないのに「残りわずか」「人気」のタグを付ける"},"harm":{"en":"Users believe stock is about to run out or that many others want the item, so they decide in a hurry without comparing options and misjudge its value.","ja":"利用者は在庫がなくなりそうだ、ほかの人も欲しがっていると思い込み、選択肢を比べないまま急いで決めてしまい、商品の価値を見誤ります。"},"instead":{"en":"Show stock or popularity tags only when they come from real data, such as the actual stock count.","ja":"在庫や人気のタグは、実際の在庫数など本当のデータにもとづくときだけ表示します。"},"deceptive":true}],"related":[{"id":"badge","diff":{"en":"A tag stands on its own as a label for content; a badge is attached to another element to show a count or status.","ja":"タグは単独で内容のラベルとして置き、バッジは別の要素に付けて件数や状態を示します。"}},{"id":"token-field","diff":{"en":"A tag is the label itself and takes no input; a token field is an input that makes removable tokens from what people choose.","ja":"タグはラベルそのもので、入力は受け付けません。トークン入力は、選んだものから外せるトークンを作る入力欄です。"}}],"sources":[{"label":"Carbon Design System: Tag","url":"https://carbondesignsystem.com/components/tag/usage/","checkedAt":"2026-10-22"},{"label":"MUI: Chip","url":"https://mui.com/material-ui/react-chip/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「チップタグ」をもとに作成","url":"https://design.digital.go.jp/dads/components/chip-tag/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「チップラベル」をもとに作成","url":"https://design.digital.go.jp/dads/components/chip-label/","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Fake scarcity","url":"https://www.deceptive.design/types/fake-scarcity","checkedAt":"2026-10-21"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Button Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/button/","checkedAt":"2026-10-22"},{"label":"Inclusive Components: A Todo List","url":"https://inclusive-components.design/a-todo-list/","checkedAt":"2026-10-22"},{"label":"GOV.UK Design System: Tag","url":"https://design-system.service.gov.uk/components/tag/","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: Tag","url":"https://designsystem.digital.gov/components/tag/","checkedAt":"2026-11-02"},{"label":"Material Design 3: Chips","url":"https://m3.material.io/components/chips/guidelines","checkedAt":"2026-11-02"},{"label":"Understanding Success Criterion 2.5.8: Target Size (Minimum) (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html","checkedAt":"2026-11-04"},{"label":"Nielsen Norman Group: Touch Targets on Touchscreens","url":"https://www.nngroup.com/articles/touch-target-size/","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/tag/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/tag/"}},{"id":"text-field","category":"input","names":{"en":"Text field","ja":"テキストフィールド（インプットテキスト）"},"aliases":[{"name":"Text input","source":"Carbon Design System","url":"https://carbondesignsystem.com/components/text-input/usage/"},{"name":"Input","source":"Ant Design","url":"https://ant.design/components/input"},{"name":"インプットテキスト","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/input-text/"},{"name":"Text input","source":"U.S. Web Design System","url":"https://designsystem.digital.gov/components/text-input/"}],"summary":{"en":"A box where the user types a short piece of free text, such as a name.","ja":"名前など、短い文字列を自由に入力する欄です。"},"appearance":{"en":"A rectangle with a border or an underline, with a label above it. A required field has a mark such as “(required)” next to the label. Hint text often sits between the label and the field, and error text appears below the field.","ja":"枠線または下線のある長方形で、上にラベルがあります。入力が必須の欄はラベルの横に「※必須」などの表示があります。ラベルと欄の間に補足の文が、欄の下にエラーの文が出ることが多いです。"},"behavior":[{"en":"Clicking or tabbing into it shows a text cursor, and typing enters text.","ja":"クリックまたは Tab でフォーカスするとカーソルが出て、文字を入力できます。"},{"en":"The label stays visible; `placeholder` text disappears when typing starts, so it should not replace the label.","ja":"ラベルは常に見えるようにします。`placeholder` は入力を始めると消えるため、ラベルの代わりにはしません。"},{"en":"Hint text is linked with `aria-describedby` so screen readers read it with the label.","ja":"補足の文は `aria-describedby` でつなぎ、スクリーンリーダーがラベルと一緒に読み上げるようにします。"},{"en":"In this demo, the field has no `maxlength`, so text past 20 characters is not cut off. Pressing Save with the field empty or too long shows an error below the field, links it with `aria-describedby`, sets `aria-invalid`, and moves focus to the field. After the first save, the error updates as you type and disappears once the value is fixed.","ja":"このデモでは `maxlength` を付けていないので、20文字を超えても入力は切れません。空のまま、または長すぎるまま「保存」を押すと、欄の下にエラーの文を出して `aria-describedby` でつなぎ、`aria-invalid` を付けて、フォーカスを欄へ移します。一度保存したあとは、入力に合わせてエラーが変わり、直すと消えます。"}],"keyboard":[{"key":"Enter","action":{"en":"Submits the form (Save in this demo).","ja":"フォームを送信します（このデモでは「保存」）。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves focus into or out of the field.","ja":"フォーカスを入力欄に移したり、入力欄から外したりします。"}},{"key":"← / → / Home / End","action":{"en":"Moves the text cursor.","ja":"文字のカーソルを移動します。"}}],"usage":[{"en":"Match the width of the field to the expected length of the input.","ja":"入力欄の幅は、想定する入力の長さに合わせます。"},{"en":"Mark required fields in words next to the label, such as “(required)”, not with color alone.","ja":"入力が必須の欄は、ラベルの横に「※必須」のような文字で示し、色だけに頼りません。"},{"en":"Error messages should say what is wrong and how to fix it. Show them when the form is submitted, not while typing or when focus leaves the field.","ja":"エラーメッセージには、何が問題でどう直せばよいかを書きます。エラーは送信したときに出し、入力中やフォーカスが外れたときには出しません。"},{"en":"Do not cut off input with `maxlength`. Let people type past the limit, and say in the error how many characters they entered.","ja":"`maxlength` で入力を打ち切りません。上限を超えても入力させ、エラーで入力した文字数を伝えます。"},{"en":"The U.S. Web Design System says to avoid placeholder text, which vanishes once people type and often has too little contrast, and not to split one number, such as a phone number, across several fields. It also says to choose between disabled and read-only on purpose: a native disabled field cannot be reached with Tab and its value is not submitted, while a read-only field stays focusable and its value is submitted.","ja":"U.S. Web Design System は、入力し始めると消え、コントラストも足りないことが多いプレースホルダーを避けること、電話番号のように1つの番号を複数の欄に分けないことを求めています。無効（disabled）と読み取り専用（read-only）は意図して選びます。無効の欄は Tab キーで届かず、値も送信されません。読み取り専用の欄はフォーカスでき、値も送信されます。"},{"en":"Bring up the right on-screen keyboard. The GOV.UK Design System sets `inputmode=\"numeric\"` for whole numbers and `inputmode=\"decimal\"` for numbers with decimal places. Because some devices cannot enter negative values on the on-screen keypad, it leaves out `inputmode` when negative numbers are allowed.","ja":"内容に合う画面キーボードを出します。GOV.UK Design System は、整数には `inputmode=\"numeric\"`、小数を含む数には `inputmode=\"decimal\"` を指定します。画面のテンキーでマイナスを入力できない端末があるので、負の数を受け付けるときは `inputmode` を付けません。"}],"misuse":[{"pattern":{"en":"Using placeholder text in place of a label or hint","ja":"プレースホルダーをラベルや補足説明の代わりにする"},"harm":{"en":"Placeholder text disappears once typing starts, which is a problem for people with memory difficulties and for anyone reviewing their answers. Not all screen readers announce it, and the default browser styling for it often fails contrast requirements.","ja":"プレースホルダーは入力を始めると消えるため、記憶に困難のある人や、入力内容を見直す人が困ります。読み上げないスクリーンリーダーもあり、ブラウザ既定の表示色はコントラストの基準を満たさないことが多いです。"},"instead":{"en":"Put a visible label outside the field, and write hints and examples as text outside it too, so they stay on screen while typing.","ja":"入力欄の外に常に見えるラベルを置き、補足説明や入力例も欄の外にテキストで書いて、入力中も見えるようにします。"}}],"related":[{"id":"combobox","diff":{"en":"A text field has no suggestions; a combobox adds a list of suggestions to choose from.","ja":"テキストフィールドには候補がなく、コンボボックスは選べる候補のリストが付きます。"}},{"id":"textarea","diff":{"en":"A text field takes one short line; a text area takes several lines of free text.","ja":"テキストフィールドは短い1行を入力し、テキストエリアは複数行の文章を入力します。"}},{"id":"search-field","diff":{"en":"A text field takes any short text; a search field is one made for search terms, usually with a search button and a search landmark.","ja":"テキストフィールドは短い文字列全般に使います。検索ボックスは検索語のための形で、検索ボタンや検索のランドマークが付くことが多いです。"}},{"id":"password-field","diff":{"en":"A text field always shows what is typed; a password field hides it and has a button to show it.","ja":"テキストフィールドは入力した文字を常に見せます。パスワード入力は文字を隠し、表示するボタンが付きます。"}},{"id":"one-time-code","diff":{"en":"A text field takes any short text; a one-time code field is one set up for a code sent to the user, with a number keypad and autofill from the message.","ja":"テキストフィールドは短い文字列全般に使います。確認コードの入力は、届いたコードのために整えた形で、数字のキーボードと、届いたメッセージからの自動入力が付きます。"}},{"id":"time-picker","diff":{"en":"A text field takes any text, and the U.S. Web Design System prefers it for exact past times such as a time of birth; a time picker takes only times of day, typically in set increments such as 30 minutes.","ja":"テキストフィールドは自由な文字列を入れられ、U.S. Web Design System は出生時刻のような過去の正確な時刻にこちらを勧めていますが、タイムピッカーは30分刻みなど決まった刻みの時刻だけを受け取ります。"}},{"id":"color-picker","diff":{"en":"A text field takes any text, and React Aria’s ColorField is a text field for typing a hex or channel value; a color picker chooses a color from a swatch, a spectrum or presets, and the native input always holds a valid color.","ja":"テキストフィールドは自由な文字列を入れられ、React Aria の ColorField は16進数やチャンネルの値を入力するための入力欄ですが、カラーピッカーは色を色見本やスペクトル、一覧から選び、ネイティブの入力は必ず有効な色を持ちます。"}},{"id":"date-picker","diff":{"en":"A text field alone suits dates people already know, such as a birthday; a date picker adds a calendar for dates they schedule or choose by the day of the week.","ja":"テキストフィールドだけなら誕生日のように分かっている日付に向いていますが、日付ピッカーは、予定を入れる日や曜日で選ぶ日のためにカレンダーを添えます。"}},{"id":"number-input","diff":{"en":"A text field with `inputmode=\"numeric\"` suits digits that are not amounts, such as a postal code; a number input is for counts that go up and down in small steps, such as a quantity.","ja":"テキストフィールドに `inputmode=\"numeric\"` を付けると郵便番号のように量ではない数字に向いていますが、数値入力は数量のように小刻みに増減する数のためのものです。"}}],"sources":[{"label":"Carbon Design System: Text input","url":"https://carbondesignsystem.com/components/text-input/usage/","checkedAt":"2026-10-20"},{"label":"Ant Design: Input","url":"https://ant.design/components/input","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「インプットテキスト」をもとに作成","url":"https://design.digital.go.jp/dads/components/input-text/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「インプットテキスト（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/input-text/usage/","checkedAt":"2026-10-21"},{"label":"デジタル庁デザインシステム HTML 実装例: input-text","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Character count","url":"https://design-system.service.gov.uk/components/character-count/","checkedAt":"2026-10-21"},{"label":"GOV.UK Design System: Text input","url":"https://design-system.service.gov.uk/components/text-input/","checkedAt":"2026-10-21"},{"label":"W3C WAI Tutorials: Form Instructions","url":"https://www.w3.org/WAI/tutorials/forms/instructions/","checkedAt":"2026-10-21"},{"label":"Nielsen Norman Group: Placeholders in Form Fields Are Harmful","url":"https://www.nngroup.com/articles/form-design-placeholders/","checkedAt":"2026-10-21"},{"label":"U.S. Web Design System: Text input","url":"https://designsystem.digital.gov/components/text-input/","checkedAt":"2026-11-02"},{"label":"MDN: inputmode","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode","checkedAt":"2026-11-04"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/text-field/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/text-field/"}},{"id":"textarea","category":"input","names":{"en":"Textarea","ja":"テキストエリア"},"aliases":[{"name":"Text area","source":"Carbon Design System","url":"https://carbondesignsystem.com/building-blocks/core/components/text-input"},{"name":"テキストエリア","source":"デジタル庁デザインシステム","url":"https://design.digital.go.jp/dads/components/textarea/"}],"summary":{"en":"A tall box for typing several lines of free text, such as comments or a description.","ja":"コメントや説明など、複数行の文章を自由に入力する縦長の欄です。"},"appearance":{"en":"A bordered rectangle several lines tall, with a label above it. A character count often appears below, and the bottom-right corner may have a resize handle.","ja":"数行分の高さがある枠付きの長方形で、上にラベルがあります。下に文字数が出ることが多く、右下の角に大きさを変えるつまみが付くこともあります。"},"behavior":[{"en":"Enter starts a new line instead of submitting the form.","ja":"Enter を押してもフォームは送信されず、改行になります。"},{"en":"The text scrolls inside the box when it gets longer than the visible lines.","ja":"見えている行数より長くなると、欄の中でスクロールします。"},{"en":"This demo shows the remaining characters and lets you type past the limit, showing how many characters are over instead of cutting the text off with `maxlength`.","ja":"このデモは残りの文字数を表示します。上限を超えても `maxlength` で打ち切らずに入力でき、何文字超えているかを示します。"},{"en":"In this demo, pressing Send while the text is over the limit shows an error with the number of characters entered, links it with `aria-describedby`, sets `aria-invalid`, and moves focus to the box. After the first send, the error updates as you type and disappears once the text fits.","ja":"このデモでは、上限を超えたまま「送信」を押すと、入力した文字数を書いたエラーを出して `aria-describedby` でつなぎ、`aria-invalid` を付けて、フォーカスを欄へ移します。一度送信したあとは、入力に合わせてエラーが変わり、上限内に収まると消えます。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus into or out of the box.","ja":"フォーカスを入力欄に移したり、入力欄から外したりします。"}},{"key":"Enter","action":{"en":"Inserts a line break.","ja":"改行します。"}},{"key":"← / → / ↑ / ↓","action":{"en":"Moves the text cursor.","ja":"文字のカーソルを移動します。"}}],"usage":[{"en":"Free text takes effort to write. Narrow the question first, for example by splitting it into simpler questions or by asking only people who chose “Other”.","ja":"自由記述は書くのに大きな手間がかかります。簡単な質問に分ける、「その他」を選んだ人にだけ尋ねるなどして、先に質問の範囲を絞ります。"},{"en":"Tell people the character limit before they start typing. The Digital Agency Design System puts it in the label and shows a counter for limits of more than about 20 characters. GOV.UK states the limit in a count message below the box, and uses a character count only when there is a good reason to limit the text.","ja":"文字数の上限は入力を始める前に伝えます。デジタル庁デザインシステムは上限をラベルに書き、上限がおよそ20文字を超えるなら文字数のカウンターを表示します。GOV.UK は欄の下の文字数の表示で上限を伝え、文字数を制限する十分な理由があるときだけ文字数のカウンターを使います。"},{"en":"When the text is too long, the Digital Agency Design System gives the number of characters entered in the error, such as “You entered 201 characters”, so people can tell how much to cut. GOV.UK gives the limit in the error, such as “Job description must be 350 characters or less”, and the count message below the box says that too many characters have been entered.","ja":"上限を超えたとき、デジタル庁デザインシステムは「（入力文字数201文字）」のように入力した文字数をエラーに書き、どれだけ削ればよいか分かるようにします。GOV.UK は「職務内容は350文字以内で入力してください」のように上限をエラーに書き、欄の下の表示で文字数が多すぎることを知らせます。"},{"en":"Set the height to match the expected length of the answer.","ja":"高さは想定する回答の長さに合わせます。"}],"misuse":[{"pattern":{"en":"Revealing the character limit only through an error","ja":"文字数の上限をエラーで初めて知らせる"},"harm":{"en":"The person writing cannot tell how many characters are allowed until an error appears, and some error messages do not give the limit even then.","ja":"書いている人はエラーが出るまで何文字まで入力できるか分かりません。エラーが出ても、何文字まで許されるのか分からないこともあります。"},"instead":{"en":"Tell people the limit before they type, in the label or in a count message below the box. When the text is too long, say so in an error that gives the limit or the number of characters entered.","ja":"上限はラベルや欄の下の文字数の表示で、入力する前に伝えます。超えたときは、上限か入力済みの文字数を書いたエラーで知らせます。"}}],"related":[{"id":"text-field","diff":{"en":"A text area takes several lines of free text; a text field takes one short line.","ja":"テキストエリアは複数行の文章を入力し、テキストフィールドは短い1行を入力します。"}}],"sources":[{"label":"MDN: <textarea>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea","checkedAt":"2026-10-20"},{"label":"GOV.UK Design System: Textarea","url":"https://design-system.service.gov.uk/components/textarea/","checkedAt":"2026-10-22"},{"label":"GOV.UK Design System: Character count","url":"https://design-system.service.gov.uk/components/character-count/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステムウェブサイト「テキストエリア」をもとに作成","url":"https://design.digital.go.jp/dads/components/textarea/","checkedAt":"2026-10-20"},{"label":"デジタル庁デザインシステムウェブサイト「テキストエリア（使い方）」をもとに作成","url":"https://design.digital.go.jp/dads/components/textarea/usage/","checkedAt":"2026-10-22"},{"label":"デジタル庁デザインシステム HTML 実装例: textarea","url":"https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/textarea","checkedAt":"2026-10-21"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/textarea/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/textarea/"}},{"id":"time-picker","category":"input","names":{"en":"Time picker","ja":"タイムピッカー"},"aliases":[],"summary":{"en":"A control for choosing a time of day, by typing the hour and minute or by picking from a list or a clock.","ja":"時刻を選ぶ部品です。時と分を入力するか、一覧や時計から選びます。"},"appearance":{"en":"A field showing a time such as 1:30 PM or 13:30, split into parts for the hour and minute (and AM/PM in a 12-hour display). Time pickers often add a button or icon that opens a list of times or a clock. This demo is a reservation time field, with a hint between the label and the field and an error message below it.","ja":"「1:30 PM」や「13:30」のような時刻が表示された入力欄で、時と分（12時間表示ではAM/PMも）の部分に分かれています。時刻の一覧や時計を開くボタンやアイコンが付くことも多いです。このデモは予約時刻の欄で、ラベルと欄の間に補足の文、欄の下にエラーの文が出ます。"},"behavior":[{"en":"It takes a time of day, an hour and a minute (and a second if needed), with no date. People can type it or pick it; Ant Design describes its TimePicker as for selecting or entering a time.","ja":"日付を含まない時刻（時と分、必要なら秒）を受け取ります。直接入力することも、選ぶこともできます。Ant Design は TimePicker を、時刻を選ぶか入力するための部品としています。"},{"en":"This demo uses the native `<input type=\"time\">`. Its value is always a 24-hour `HH:mm` string such as `13:30`, whatever the field shows.","ja":"このデモはネイティブの `<input type=\"time\">` を使っています。欄の表示にかかわらず、値は常に `13:30` のような24時間表記の `HH:mm` になります。"},{"en":"How the field looks depends on the browser. MDN says the interface follows the browser and operating system, and that the 12-hour or 24-hour format is likely chosen from the user’s locale. In Chrome, the 12-hour or 24-hour display follows the browser’s own language, not the page’s `lang`, and a clock button at the right edge of the field opens a popup with an hour column and a minute column.","ja":"欄の見た目はブラウザによって変わります。MDN は、画面の作りはブラウザと OS によって決まり、12時間か24時間かはたいてい利用者のロケールから選ばれるとしています。Chrome では、12時間か24時間かはページの `lang` ではなくブラウザ自身の言語に従い、欄の右端の時計のボタンで、時の列と分の列のポップアップが開きます。"},{"en":"In this demo, `min=\"09:00\"`, `max=\"18:00\"` and `step=\"1800\"` limit the time to 9:00 AM to 6:00 PM in 30-minute steps. `step` is in seconds (the default is 60) and counts from `min`; a value that is not a multiple of 60 adds seconds to the field.","ja":"このデモでは `min=\"09:00\"`、`max=\"18:00\"`、`step=\"1800\"` で、9:00から18:00までの30分刻みに限っています。`step` の単位は秒（既定は60）で、`min` から数えます。60の倍数でない値にすると、欄に秒が加わります。"},{"en":"The browser does not always stop people leaving the range or the steps. In Chrome, ↑ on the hour goes past `max` (from 5:30 PM to 6:30 PM), and a typed 9:10 AM is kept as it is rather than rounded to the step, although MDN says a browser may round it. Both are marked invalid, so the demo has to say so itself.","ja":"ブラウザは、範囲や刻みから外れることを必ずしも止めません。Chrome では、時の ↑ が `max` を越えて進み（午後5:30から午後6:30へ）、入力した午前9:10は刻みに丸められずそのまま残ります（MDN は、ブラウザが丸めることもあるとしています）。どちらも無効な値として扱われるので、デモ側で知らせる必要があります。"},{"en":"In this demo, a time outside the range or off the 30-minute steps turns the border red and shows an error message below the field. The message is tied to the field with `aria-describedby`, and the field gets `aria-invalid=\"true\"`. The error goes away as soon as the time is fixed or the field is cleared.","ja":"このデモでは、範囲外や30分刻みでない時刻になると、枠が赤くなり、欄の下にエラー文が出ます。エラー文は `aria-describedby` で欄と結び、欄には `aria-invalid=\"true\"` を付けます。時刻を直すか欄を空にすると、エラーはすぐ消えます。"},{"en":"In this demo, the hint states the range and the steps in text, with an example, because MDN says the browser shows its own error for a time outside `min` and `max` when the form is submitted. A status line under the field shows the value as `Value: 13:30`, and stays empty while the time is incomplete or invalid.","ja":"このデモでは、補足の文で範囲と刻みを文字で伝え、入力例も添えています。MDN によると、`min` と `max` から外れたときのブラウザ独自のエラーは、フォームを送信したときに出るためです。欄の下の状態表示には `値: 13:30` のように値が出て、時刻が入力の途中のときや無効なときは空になります。"}],"keyboard":[{"key":"↑ / ↓","action":{"en":"Changes the focused part: the hour by 1, the minute by `step` (30 minutes here, without changing the hour), and AM/PM between the two, without stopping at `min` or `max` (in Chrome).","ja":"フォーカス中の部分を増減します。時は1ずつ、分は `step` ずつ（ここでは30分。時は変わりません）、AM/PM は交互に切り替わります。`min` や `max` では止まりません（Chrome の場合）。"}},{"key":"← / →","action":{"en":"Moves between the hour, minute and AM/PM parts, and stays at the ends (in Chrome).","ja":"時・分・AM/PM の部分の間を移動します。端では動きません（Chrome の場合）。"}},{"key":"0–9","action":{"en":"Types the number for the focused part, then moves to the next part once it is complete. Over a time that is already set, each digit takes effect at once, so typing 1 over 9:30 AM gives 1:30 AM and the error shows until the next digit (in Chrome).","ja":"フォーカス中の部分に数字を入力し、入力し終えると次の部分に移ります。すでに時刻が入っているときは、数字を1つ打つたびに値が変わるので、午前9:30に1と打つと午前1:30になり、次の数字を打つまでエラーが出ます（Chrome の場合）。"}},{"key":"A / P","action":{"en":"In a 12-hour display, sets the AM/PM part to AM or PM (in Chrome).","ja":"12時間表示では、AM/PM の部分を AM か PM にします（Chrome の場合）。"}},{"key":"Backspace / Delete","action":{"en":"Clears the focused part only, which leaves the time incomplete and the value empty (in Chrome).","ja":"フォーカス中の部分だけを消します。時刻は入力の途中になり、値は空になります（Chrome の場合）。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves between the hour, minute and AM/PM parts (no AM/PM part in a 24-hour display), then to the clock button, then out of the field (in Chrome).","ja":"時・分・AM/PM の部分（24時間表示では AM/PM はありません）、時計のボタンの順に移動し、端からは欄の外へ出ます（Chrome の場合）。"}}],"variations":[{"name":{"en":"Segmented field","ja":"部分に分けた入力欄"},"description":{"en":"One field with separate editable parts for the hour, minute and AM/PM. React Aria’s TimeField is only this, edited with the keyboard, and in Chrome the native `<input type=\"time\">` has the same parts.","ja":"時・分・AM/PM を、それぞれ編集できる部分に分けた1つの欄です。React Aria の TimeField はこの形だけで、キーボードで編集します。Chrome のネイティブの `<input type=\"time\">` も同じ部分に分かれています。"}},{"name":{"en":"List of times","ja":"時刻の一覧"},"description":{"en":"A text box with a list of times at set steps. The U.S. Web Design System’s time picker is a combo box whose options run from `data-min-time` to `data-max-time` every `data-step` minutes (30 by default), and typing filters them. Atlassian’s time field opens a menu of times (its example is 30 minutes apart), and keeps typing available.","ja":"一定の刻みの時刻を並べた一覧が付いた入力欄です。U.S. Web Design System のタイムピッカーはコンボボックスで、`data-min-time` から `data-max-time` までを `data-step` 分ごと（既定は30分）の選択肢にし、入力で絞り込めます。Atlassian の時刻の欄は時刻のメニューを開き（例は30分ごと）、入力もできます。"}},{"name":{"en":"Clock face","ja":"時計の盤面"},"description":{"en":"A clock or a list of digital-clock times in a popup or dialog. Material Design 3’s time picker is a modal dialog with a dial and a keyboard icon that switches to typed hour and minute boxes. MUI shows a digital clock in a popover on desktop and a clock in a modal on touch devices.","ja":"ポップアップやダイアログに、時計の盤面かデジタル時計の形の一覧を出すものです。Material Design 3 のタイムピッカーはモーダルのダイアログで、ダイヤルと、時と分を入力する欄に切り替えるキーボードのアイコンがあります。MUI はデスクトップではポップオーバーにデジタル時計を、タッチ端末ではモーダルに時計の盤面を出します。"}},{"name":{"en":"Wheels (native apps)","ja":"ホイール（ネイティブアプリ）"},"description":{"en":"Apple’s date picker has a time mode that shows hours, minutes and an optional AM/PM. Its wheels style is a set of scrolling wheels that also accepts typing on a keyboard. This is guidance for iOS and iPadOS apps, not for the web.","ja":"Apple の日付ピッカーには、時・分・任意の AM/PM を表示する時刻のモードがあります。ホイールのスタイルは、スクロールするホイールを並べたもので、キーボードでの入力にも対応します。これは iOS と iPadOS のアプリ向けの案内で、ウェブ向けではありません。"}}],"usage":[{"en":"The U.S. Web Design System uses its time picker to schedule a time from common, consistent increments, such as 30-minute blocks for a meeting. For an exact time in the past, such as a time of birth, it prefers a plain text input.","ja":"U.S. Web Design System は、会議を30分単位で決めるように、よく使う一定の刻みの中から時刻を決めるときにタイムピッカーを使います。出生時刻のような過去の正確な時刻には、ふつうのテキスト入力のほうが向くとしています。"},{"en":"Say in the hint how to enter the time and what format is expected. The U.S. Web Design System reports 9 of its 11 WCAG 2.1 AA tests for the time picker as passed, none failed, and 2 conditional on your own implementation, one of them being clear instructions on how to select a time and the expected format (3.3.2). It rewrote the hint in 2024 for that criterion.","ja":"補足の文で、時刻の入れ方と、どの形式で入れるかを伝えます。U.S. Web Design System はタイムピッカーの WCAG 2.1 AA の11のテストのうち、9つが合格、失敗は0、2つは利用する側の実装しだいの条件付きとしています。条件付きの1つが、時刻の選び方と求める形式が分かる説明（3.3.2）です。同システムはこの基準のために、2024年に補足の文を書き換えました。"},{"en":"Choose a step that fits the task. Apple’s guidance for its native date pickers says a minute list has 60 values by default and suggests a coarser interval that divides 60 evenly, such as quarter hours. The U.S. Web Design System’s list defaults to 30 minutes, and Atlassian’s example shows 30-minute increments.","ja":"刻みは用途に合わせて選びます。Apple のネイティブの日付ピッカー向けの案内では、分の一覧は既定で60個の値になるので、15分刻みのように、60を割り切れる粗い刻みにすることを勧めています。U.S. Web Design System の一覧は既定が30分刻みで、Atlassian の例も30分刻みで時刻を並べています。"},{"en":"Material Design 3 describes its time picker as a modal dialog, and lists Flutter, Jetpack Compose and Android Views as available and Web as unavailable. It says to offer typing as well as the dial, and to make the typed input the default when a dial is not needed.","ja":"Material Design 3 は、タイムピッカーをモーダルのダイアログとして説明し、Flutter、Jetpack Compose、Android Views では利用可能、Web では利用不可としています。ダイヤルだけでなく入力もできるようにし、ダイヤルが要らないときは入力を既定にするよう案内しています。"},{"en":"MUI’s time picker shows the desktop version when the device matches `@media (pointer: fine)` and the mobile version otherwise. Both keep a field for editing with the keyboard.","ja":"MUI のタイムピッカーは、端末が `@media (pointer: fine)` に合えばデスクトップ版を、合わなければモバイル版を出します。どちらもキーボードで編集する欄を備えています。"}],"misuse":[{"pattern":{"en":"A time that can be set only with a dial, wheels or a list, with no typing","ja":"ダイヤルやホイール、一覧からしか時刻を決められず、入力できない"},"harm":{"en":"Material Design 3 says manual entry makes the picker easier for people using a keyboard rather than a touchscreen, and Atlassian says some people prefer typing to selecting, especially keyboard users.","ja":"Material Design 3 は、手で入力できるとタッチ画面ではなくキーボードを使う人が使いやすくなるとしています。Atlassian も、選ぶより入力を好む人、特にキーボードを使う人がいるとしています。"},"instead":{"en":"Let people type the time as well as pick it, for example with a text input for the hour and minute, or the native `<input type=\"time\">`, which accepts typed digits.","ja":"選べるだけでなく、時刻を入力もできるようにします。時と分を入れるテキスト入力や、数字を入力できるネイティブの `<input type=\"time\">` を使います。"}}],"related":[{"id":"date-picker","diff":{"en":"A time picker chooses a time of day, in hours and minutes with no date; a date picker chooses a day, usually from a calendar.","ja":"タイムピッカーは日付を含まない時刻を時と分で選び、日付ピッカーは日付をカレンダーなどで選びます。"}},{"id":"select","diff":{"en":"A time picker takes a time of day within a range and a step; a select chooses from options its author wrote one by one.","ja":"タイムピッカーは範囲と刻みの中の時刻を受け取り、セレクトボックスは作り手が1つずつ書いた選択肢から選びます。"}},{"id":"combobox","diff":{"en":"A time picker is made for times of day, and the U.S. Web Design System builds one as a combo box of times at set steps; a combobox suggests whatever list its author provides.","ja":"タイムピッカーは時刻のための部品で、U.S. Web Design System は一定の刻みの時刻を並べたコンボボックスとして作っていますが、コンボボックスは作り手が用意したどんな候補の一覧も出せます。"}},{"id":"text-field","diff":{"en":"A time picker takes only times of day, typically in set increments such as 30 minutes; a text field takes any text, and the U.S. Web Design System prefers it for exact past times such as a time of birth.","ja":"タイムピッカーは30分刻みなど決まった刻みの時刻だけを受け取り、テキストフィールドは自由な文字列を入れられ、U.S. Web Design System は出生時刻のような過去の正確な時刻にこちらを勧めています。"}},{"id":"color-picker","diff":{"en":"A time picker chooses a time of day, in hours and minutes with no date; a color picker chooses a color, usually from a swatch, a spectrum or presets.","ja":"タイムピッカーは日付を含まない時刻を時と分で選び、カラーピッカーは色を色見本やスペクトル、一覧から選びます。"}}],"sources":[{"label":"MDN: <input type=\"time\">","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: Time picker","url":"https://designsystem.digital.gov/components/time-picker/","checkedAt":"2026-11-02"},{"label":"U.S. Web Design System: Time picker accessibility tests","url":"https://designsystem.digital.gov/components/time-picker/accessibility-tests/","checkedAt":"2026-11-02"},{"label":"Material Design 3: Time pickers (Overview)","url":"https://m3.material.io/components/time-pickers/overview","checkedAt":"2026-11-02"},{"label":"Material Design 3: Time pickers (Guidelines)","url":"https://m3.material.io/components/time-pickers/guidelines","checkedAt":"2026-11-02"},{"label":"Material Design 3: Time pickers (Accessibility)","url":"https://m3.material.io/components/time-pickers/accessibility","checkedAt":"2026-11-02"},{"label":"Ant Design: TimePicker","url":"https://ant.design/components/time-picker/","checkedAt":"2026-11-02"},{"label":"MUI X: Time Picker","url":"https://mui.com/x/react-date-pickers/time-picker/","checkedAt":"2026-11-02"},{"label":"React Aria: TimeField","url":"https://react-aria.adobe.com/TimeField","checkedAt":"2026-11-02"},{"label":"Atlassian Design System: Date time picker (Examples)","url":"https://atlassian.design/components/datetime-picker/examples","checkedAt":"2026-11-02"},{"label":"Atlassian Design System: Date time picker (Usage)","url":"https://atlassian.design/components/datetime-picker/usage","checkedAt":"2026-11-02"},{"label":"Apple Human Interface Guidelines: Pickers","url":"https://developer.apple.com/design/human-interface-guidelines/pickers","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/time-picker/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/time-picker/"}},{"id":"timeline","category":"data","names":{"en":"Timeline","ja":"タイムライン"},"aliases":[{"name":"Timeline","source":"Ant Design","url":"https://ant.design/components/timeline"},{"name":"Timeline","source":"MUI","url":"https://mui.com/material-ui/react-timeline/"},{"name":"Timeline","source":"Primer","url":"https://primer.style/product/components/timeline/"}],"summary":{"en":"Lays out events in time order along a line, each with its date, so people can see what happened, or is planned, and when.","ja":"出来事を時間順に線に沿って並べ、それぞれに日時を添えて、いつ何があったか、何が予定されているかを見せる部品です。"},"appearance":{"en":"A line runs down the page, and each event hangs off it as a marker with its date, a short title and a line of detail. The markers may differ in color or shape by kind of event, and the state is also written out in words.","ja":"縦の線に沿って出来事が並び、それぞれが丸などの印と、日時、短いタイトル、1行ほどの説明を持ちます。印は出来事の種類で色や形を変えることがあり、状態は文字でも書きます。"},"behavior":[{"en":"The events are set in time order, oldest first or newest first, and each says when it happened or is planned. Ant Design describes the use as a series of information ordered by time, ascending or descending, and MUI as a list of events in chronological order.","ja":"出来事を古い順か新しい順の時間順に並べ、それぞれがいつ起きたか、またはいつ起きる予定かを示します。Ant Design は時間の順（昇順か降順）に並べる一連の情報に使うと説明し、MUI は出来事を時系列で並べたリストと説明しています。"},{"en":"Marking the events up as an ordered list, an `<ol>` with an `<li>` for each event, fits, since MDN says an `<ol>` is for a list whose order is meaningful. Primer’s own Timeline is built from non-semantic `<div>` elements, and its accessibility notes say a semantic list would let screen readers announce how many items there are and where each one begins and ends.","ja":"出来事は、順番に意味がある並びを表す `<ol>` に、出来事ごとの `<li>` を入れて書くのが合っています。Primer の Timeline 自身は意味を持たない `<div>` で作られていて、アクセシビリティの注意書きには、意味のあるリストに替えれば、項目の数とそれぞれの始まりと終わりをスクリーンリーダーが伝えられるとあります。"},{"en":"Each date goes in a `<time>` element whose `datetime` attribute holds a machine-readable value such as `2026-11-01`. The text people read can be written in any style, such as “Nov 1, 2026”.","ja":"日付は `<time>` 要素に入れ、`datetime` 属性に `2026-11-01` のような機械が読める値を書きます。人が読む文字は「2026年11月1日」のように、ふつうの書き方でかまいません。"},{"en":"The line joining the events is decoration. Primer says the lines joining its items are decorative and not needed to understand the structure, and its decorative Timeline.Break is not conveyed to assistive technologies. A marker that carries no information of its own can be hidden from them with `aria-hidden=\"true\"`.","ja":"出来事をつなぐ線は飾りです。Primer は項目をつなぐ線を、構造を理解するのに要らない飾りとしていて、飾りの Timeline.Break は支援技術に伝わりません。それ自体に情報のない印は、`aria-hidden=\"true\"` で読み上げから外せます。"},{"en":"In this demo, the heading says “Order history” and a line under it says “Oldest first”, so the order does not have to be worked out from the dates. The list is a native `<ol>` named by the heading, with an `<li>` for each event.","ja":"このデモでは、見出しが「注文の履歴」で、その下に「古い順」と書いてあるので、順番を日付から読み取る必要はありません。リストはネイティブの `<ol>` で、見出しを名前にし、出来事ごとに `<li>` を置いています。"},{"en":"In this demo, each event also names its state in words (“Done”, “Needs attention” or “Scheduled”), and all the markers look the same, so nothing depends on color. The markers are hidden from assistive technologies and the line is drawn with CSS, so a screen reader reads only the list, the date, the title, the state and the detail.","ja":"このデモでは、出来事ごとに状態を「完了」「要対応」「予定」と文字でも書くので、印はどれも同じ見た目で、色に頼る情報はありません。印は支援技術から外し、線は CSS で描くので、スクリーンリーダーが読むのはリスト、日付、タイトル、状態、説明だけです。"}],"keyboard":[{"key":"—","action":{"en":"None. A timeline takes no focus and has no keys of its own. Links or buttons inside an item are reached with Tab / Shift + Tab like anywhere else, and Primer says items must not trap focus.","ja":"なし。タイムライン自体はフォーカスを受けず、専用のキーもありません。項目の中のリンクやボタンは、ほかの場所と同じく Tab / Shift + Tab で移ります。Primer は、項目がフォーカスを閉じ込めてはいけないとしています。"}}],"variations":[{"name":{"en":"Alternating","ja":"左右に交互に並べるもの"},"description":{"en":"Events switch between the two sides of the line. Ant Design (`mode=\"alternate\"`) and MUI (an alternating timeline) both offer it.","ja":"出来事を線の左右に交互に置いたものです。Ant Design（`mode=\"alternate\"`）と MUI（alternating timeline）のどちらにもあります。"}},{"name":{"en":"Date on the opposite side","ja":"日時を反対側に置くもの"},"description":{"en":"The date or time sits on the other side of the line from the description. Ant Design sets it with an item’s `title`, and MUI calls it opposite content.","ja":"日時を、線をはさんで説明の反対側に置いたものです。Ant Design では項目の `title` で、MUI では opposite content で指定します。"}},{"name":{"en":"Horizontal","ja":"横並び"},"description":{"en":"Events run from left to right. Ant Design offers it with `orientation=\"horizontal\"`. Primer asks that the text stay readable when resized or zoomed without horizontal scrolling, so check a horizontal timeline at narrow widths and high zoom.","ja":"出来事を左から右へ並べたものです。Ant Design では `orientation=\"horizontal\"` で指定します。Primer は、文字を拡大しても横スクロールなしで読めることを求めているので、横並びは狭い幅や大きな拡大でも確かめます。"}}],"usage":[{"en":"Use a timeline when a series of information is ordered by time and a line should connect it visually, as Ant Design puts it.","ja":"時間の順に並ぶ一連の情報を、線でつないで見せたいときに使います。Ant Design もこの使い方を挙げています。"},{"en":"Primer asks for a chronological or logical order so people can picture the sequence of events. Stating the order in words near the list, as this demo does, saves them working it out from the dates.","ja":"Primer は、出来事の並びを思い描けるよう、時間順か筋の通った順に並べることを求めています。このデモのように、順番をリストの近くで文字にして書くと、日付から読み取らずに済みます。"},{"en":"Keep each item short. Primer advises against packing too much into one item and says to break long descriptions into smaller pieces.","ja":"1つの項目は短くします。Primer は、1つの項目に詰め込みすぎず、長い説明は読みやすい大きさに分けることを勧めています。"},{"en":"When markers differ by color or icon to show the kind or state of an event, describe it in text too (Primer). Primer also says an icon used as a badge should have a text alternative when it conveys essential information about the type, and that the alternative helps screen reader users spot relevant items without listening to every item in full, even when the type is described in the surrounding text. A plain dot that carries no information can be hidden.","ja":"出来事の種類や状態を印の色やアイコンで分けるときは、文字でも説明します（Primer）。Primer はさらに、バッジに使うアイコンが種類についての大事な情報を伝えるなら代替テキストを付けるよう求めています。種類が周りの文字にも書いてあっても、代替テキストがあれば、スクリーンリーダーの利用者は項目を全部聞かずに目当ての項目を見つけられるとしています。情報を持たない丸だけの印は、読み上げから外してかまいません。"},{"en":"MDN says `<time>` should not be used for dates before the Gregorian calendar was introduced, because those dates are hard to calculate.","ja":"MDN は、グレゴリオ暦ができる前の日付は計算が難しいので、`<time>` に使わないよう書いています。"}],"misuse":[{"pattern":{"en":"Showing an event’s state only by the color of its marker","ja":"出来事の状態を、印の色だけで示す"},"harm":{"en":"People with color deficiencies or limited color vision, and people on monochrome displays, cannot tell the states apart, because information given only by color is lost to them.","ja":"色の見分けにくい人や、色をあまり見分けられない人、白黒の画面で見る人は、色だけで示された状態を区別できません。"},"instead":{"en":"Write the state in each item, such as “Done” or “Needs attention”, and keep color as an extra (Primer).","ja":"項目ごとに「完了」「要対応」のように状態を文字で書き、色は補いにとどめます（Primer）。"}},{"pattern":{"en":"Building the timeline from plain divs instead of a list","ja":"タイムラインをリストではなく、ただの div で作る"},"harm":{"en":"Screen readers cannot announce how many items there are or where each one begins and ends.","ja":"スクリーンリーダーが、項目の数やそれぞれの始まりと終わりを伝えられません。"},"instead":{"en":"Use an `<ol>` with an `<li>` for each event.","ja":"`<ol>` に、出来事ごとの `<li>` を入れます。"}}],"related":[{"id":"feed","diff":{"en":"A timeline lays out events in time order along a line; a feed is a section of articles that loads more as people scroll and is marked with `role=\"feed\"`.","ja":"タイムラインは出来事を時間順に線に沿って並べ、フィードはスクロールに合わせて記事を読み込み続ける部分で、`role=\"feed\"` を付けます。"}},{"id":"stepper","diff":{"en":"A timeline lays out events by when they happen; a stepper shows the steps of a procedure and which one the user is on.","ja":"タイムラインは出来事をいつ起きたかで並べ、ステップナビゲーションは手続きの段階と、今いる段階を示します。"}},{"id":"list","diff":{"en":"A timeline is a list of events in time order, drawn along a line with their dates; a list holds items of any kind in a plain column.","ja":"タイムラインは出来事を時間順に、日時とともに線に沿って描くリストで、リストはどんな項目もふつうに縦に並べます。"}}],"sources":[{"label":"Ant Design: Timeline","url":"https://ant.design/components/timeline","checkedAt":"2026-11-03"},{"label":"MUI: Timeline","url":"https://mui.com/material-ui/react-timeline/","checkedAt":"2026-11-03"},{"label":"Primer: Timeline","url":"https://primer.style/product/components/timeline/","checkedAt":"2026-11-03"},{"label":"Primer: Timeline accessibility","url":"https://primer.style/product/components/timeline/accessibility/","checkedAt":"2026-11-03"},{"label":"MDN: <ol>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol","checkedAt":"2026-11-03"},{"label":"MDN: <time>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time","checkedAt":"2026-11-03"},{"label":"WAI-ARIA APG: Feed Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/feed/","checkedAt":"2026-11-03"},{"label":"Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/timeline/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/timeline/"}},{"id":"toast","category":"feedback","names":{"en":"Toast","ja":"トースト"},"aliases":[{"name":"Snackbar","source":"MUI","url":"https://mui.com/material-ui/react-snackbar/"},{"name":"Snackbar","source":"Material Design 3","url":"https://m3.material.io/components/snackbar/overview"},{"name":"Flag","source":"Atlassian Design System","url":"https://atlassian.design/components/flag"},{"name":"Message","source":"Ant Design","url":"https://ant.design/components/message"}],"summary":{"en":"A brief message that pops up at the edge of the screen after an action; one with only a message disappears on its own.","ja":"操作の結果を画面の端に短く表示するメッセージです。文字だけのものは、しばらくすると自動で消えます。"},"appearance":{"en":"A small dark or colored box floating near the bottom or top of the screen, with one line of text and sometimes a close or undo button.","ja":"画面の下か上の近くに浮かぶ小さな暗い色の箱で、1行の文と、閉じる・元に戻すボタンが付くこともあります。"},"behavior":[{"en":"Appears after an action, such as “Message archived”, without moving focus.","ja":"「アーカイブしました」のように操作のあとに表示され、フォーカスは動かしません。"},{"en":"It is announced through a live region (`role=\"status\"`) that is already on the page before the message is added. The buttons are kept outside the live region so that only the message is read.","ja":"メッセージを入れる前からページにあるライブリージョン（`role=\"status\"`）で読み上げます。ボタンまで読み上げないよう、ボタンはライブリージョンの外に置きます。"},{"en":"Repeating the same message is not read again, so the message element is created anew each time the toast is shown.","ja":"同じ文を入れ直しても読み上げられないため、表示するたびにメッセージの要素を作り直します。"},{"en":"A toast without buttons disappears after a few seconds. A toast with buttons, such as Undo, stays until the user closes it, because keyboard users may not reach the buttons in time.","ja":"ボタンのないトーストは数秒で消えます。「元に戻す」などのボタンを含むトーストは、キーボード利用者が間に合わないことがあるため、利用者が閉じるまで残します。"},{"en":"In this demo, a toast that disappears on its own stops its timer while the pointer is over it, so people can finish reading. A message-only toast has nothing to focus, so anything people may need to reach with the keyboard belongs in a toast with buttons.","ja":"このデモでは、自動で消えるトーストは、ポインターを乗せている間はタイマーを止め、読み終えるまで残します。メッセージだけのトーストにはフォーカスできるものがないので、キーボードで操作したいものはボタン付きのトーストに入れます。"},{"en":"In this demo, Copy link shows a message-only toast that disappears after 5 seconds. Moving the pointer off the toast starts the 5 seconds again. The demo does not actually write to the clipboard; the share link on the page is marked as copied, so the result can still be checked after the toast is gone.","ja":"このデモでは、「リンクをコピー」でメッセージだけのトーストが出て、5秒で消えます。ポインターをトーストから離すと、5秒を数え直します。実際にはクリップボードに書き込まず、ページの共有リンクに「コピー済み」と出すので、トーストが消えたあとも結果を確かめられます。"},{"en":"In this demo, Archive message shows a toast with Undo and Close that stays until it is dismissed. Undo puts the message back in the inbox. Undo and Close return focus to the Archive message button when focus was in the toast. When the inbox is empty, that button is marked `aria-disabled` rather than `disabled`, so focus stays on it.","ja":"このデモでは、「メッセージをアーカイブ」で「元に戻す」と「閉じる」の付いたトーストが出て、消すまで残ります。「元に戻す」でメッセージが受信トレイに戻ります。「元に戻す」と「閉じる」を押したとき、フォーカスがトーストの中にあれば「メッセージをアーカイブ」のボタンへ戻ります。受信トレイが空になると、そのボタンは `disabled` ではなく `aria-disabled` で押せないことを示し、フォーカスが外れないようにしています。"},{"en":"Important information, such as form errors, belongs in an alert rather than a toast.","ja":"フォームのエラーなど重要な情報は、トーストではなくアラートで伝えます。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"Runs the action that shows the toast, or uses the focused button in the toast.","ja":"トーストを出す操作を実行します。トーストの中のボタンにフォーカスがあれば、そのボタンを押します。"}},{"key":"Tab / Shift + Tab","action":{"en":"Moves to the Undo and Close buttons in the toast, in page order.","ja":"ページの並び順で、トーストの中の「元に戻す」と「閉じる」のボタンへ移動します。"}},{"key":"Esc","action":{"en":"Dismisses the toast.","ja":"トーストを消します。"}}],"variations":[{"name":{"en":"Message only","ja":"メッセージだけ"},"description":{"en":"Shows one line of text and disappears on its own after a few seconds. In this demo, the timer stops while the pointer is over it.","ja":"1行の文だけを表示し、数秒で自動で消えるものです。このデモでは、ポインターを乗せている間はタイマーを止めます。"}},{"name":{"en":"With an action","ja":"操作付き"},"description":{"en":"Adds a button such as Undo, and a Close button. It does not disappear on its own.","ja":"「元に戻す」などのボタンと閉じるボタンを添えたものです。自動では消しません。"}}],"usage":[{"en":"Material Design 3 allows only one snackbar at a time, with at most one action such as “Undo”, and no icon or inline link; for a message that needs more, it uses a different component such as a dialog. On the web it also says a snackbar that disappears on its own is hard to use for people with low vision or who need more time, so give the snackbar an action to keep it on screen, or show the same information next to the control that triggered it.","ja":"Material Design 3 では、スナックバーは同時に1つだけ表示し、操作は「元に戻す」のようなものを最大1つにします。アイコンや文中のリンクは付けず、それ以上の内容が必要なときはダイアログなど別の部品を使います。ウェブでは、自動で消えるスナックバーは弱視の人や読むのに時間がかかる人には使いにくいため、操作を付けて表示を残すか、同じ内容をスナックバーを出した操作の近くにも示すよう求めています。"}],"misuse":[{"pattern":{"en":"Putting information that cannot be found elsewhere only in a toast that disappears","ja":"ほかで確かめられない情報を、消えるトーストだけで伝える"},"harm":{"en":"A notice in a corner of the screen is easy to miss. People who need more time to find and read content, such as screen reader users and people with low vision or cognitive disabilities, may lose it before they finish reading.","ja":"画面の隅の通知は見過ごされやすいものです。スクリーンリーダーの利用者や、弱視や認知に障害のある人など、内容を見つけて読むのに時間がかかる人は、読み終える前に見失うことがあります。"},"instead":{"en":"Use a toast only for results the user can also check elsewhere, such as an archived message that appears in the archive. Otherwise use an alert in the page, or keep the toast until the user closes it.","ja":"トーストは、アーカイブしたメッセージがアーカイブ一覧に並ぶように、ほかでも確かめられる結果だけに使います。そうでないものは、ページの中のアラートで伝えるか、利用者が閉じるまで残します。"}},{"pattern":{"en":"Popping up made-up activity such as “Someone in Tokyo just bought this”","ja":"「東京の方がたった今購入しました」のような作り物の通知を出す"},"harm":{"en":"Users come to believe a product is more popular or trusted than it is, and buy or sign up without weighing it for themselves.","ja":"利用者は商品が実際より人気があり信頼されていると思い込み、自分で比べて考えないまま購入や申し込みに進みます。"},"instead":{"en":"Show purchase or viewing counts only when they come from real records, and use toasts to report the result of the user’s own action.","ja":"購入数や閲覧数は、実際の記録に基づくときだけ示します。トーストは利用者自身の操作の結果を知らせるのに使います。"},"deceptive":true}],"related":[{"id":"alert","diff":{"en":"A toast floats over the page, and one with only a message disappears on its own; an alert sits in the page content and stays until it is no longer needed or the user closes it.","ja":"トーストはページの上に浮かび、文字だけのものは自動で消えますが、アラートはページの中に置かれ、不要になるか利用者が閉じるまで残ります。"}},{"id":"alert-dialog","diff":{"en":"A toast reports a result after the action has run and can offer Undo; an alert dialog stops people and asks before an action that cannot be undone.","ja":"トーストは操作のあとに結果を伝え、「元に戻す」を添えることもできますが、アラートダイアログは取り消せない操作の前に止めて確認します。"}}],"sources":[{"label":"Bootstrap: Toasts","url":"https://getbootstrap.com/docs/5.3/components/toasts/","checkedAt":"2026-10-20"},{"label":"MUI: Snackbar","url":"https://mui.com/material-ui/react-snackbar/","checkedAt":"2026-10-21"},{"label":"MUI: Snackbar API","url":"https://mui.com/material-ui/api/snackbar/","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Notification","url":"https://carbondesignsystem.com/components/notification/usage/","checkedAt":"2026-10-20"},{"label":"Understanding Success Criterion 2.2.1: Timing Adjustable (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html","checkedAt":"2026-10-21"},{"label":"Deceptive Patterns: Fake social proof","url":"https://www.deceptive.design/types/fake-social-proof","checkedAt":"2026-10-21"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"},{"label":"Material Design 3: Snackbar","url":"https://m3.material.io/components/snackbar/guidelines","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/toast/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/toast/"}},{"id":"toggle-button","category":"action","names":{"en":"Toggle button","ja":"トグルボタン"},"aliases":[],"summary":{"en":"A button that stays pressed or unpressed, showing whether an option is on.","ja":"押された状態と押されていない状態を保ち、機能がオンかどうかを示すボタンです。"},"appearance":{"en":"Looks like an ordinary button, but its background or border changes while it is pressed. Often an icon button in a toolbar, such as Bold or Mute.","ja":"普通のボタンと同じ形ですが、押されている間は背景や枠線の色が変わります。太字やミュートのように、ツールバーのアイコンボタンとして使われることが多いです。"},"behavior":[{"en":"Each press flips between pressed and not pressed.","ja":"押すたびに、押された状態と押されていない状態が入れ替わります。"},{"en":"The label stays the same; the pressed state is shown by the style and announced through `aria-pressed`.","ja":"ラベルは変えず、押されているかどうかは見た目と `aria-pressed` で伝えます。"},{"en":"Several toggle buttons can be grouped, for example Bold, Italic, and Underline.","ja":"太字・斜体・下線のように、複数を並べてグループにすることもあります。"}],"keyboard":[{"key":"Enter / Space","action":{"en":"Presses or releases the button.","ja":"ボタンを押すか、戻します。"}}],"usage":[{"en":"APG defines a toggle button as a two-state button that is on or off. When only one of several can be chosen, libraries differ: MUI’s exclusive toggle buttons keep `aria-pressed`, while React Aria’s single-selection group turns them into `role=\"radio\"` with `aria-checked`. This site’s segmented control demo uses native radio buttons.","ja":"APG は、トグルボタンをオンかオフの2つの状態を持つボタンと定めています。複数から1つだけ選ぶ形の作り方はライブラリによって違います。MUI の排他選択は `aria-pressed` のままで、React Aria の単一選択のグループは `role=\"radio\"` と `aria-checked` に変えます。このサイトのセグメンテッドコントロールのデモは、ネイティブのラジオボタンを使っています。"}],"misuse":[{"pattern":{"en":"Toggling `aria-pressed` while also changing the label, such as Play to Pause","ja":"`aria-pressed` を切り替えながら、ラベルも変える（「再生」を「一時停止」にするなど）"},"harm":{"en":"A button whose label has just changed to Pause is also marked as pressed, so the label and the state contradict each other and confuse people.","ja":"ラベルが「一時停止」に変わったボタンが「押されている」状態にもなり、ラベルと状態が食い違って混乱を招きます。"},"instead":{"en":"Change only one of them. For Bold or Mute, keep the label fixed and show the state with `aria-pressed`. For Play and Pause, where people using voice input say the label they see, change the label and make it an ordinary button without `aria-pressed`.","ja":"変えるのはどちらか一方だけにします。太字やミュートはラベルを変えずに状態を `aria-pressed` で伝えます。再生と一時停止のように、音声入力を使う人が見えているラベルを口にする場面では、ラベルを変え、`aria-pressed` のない普通のボタンにします。"}}],"related":[{"id":"switch","diff":{"en":"A toggle button looks like a button and is often used in toolbars; a switch looks like a sliding knob and is used for settings.","ja":"トグルボタンはボタンの形でツールバーなどに使い、スイッチはつまみが動く形で設定項目に使います。"}},{"id":"button","diff":{"en":"A toggle button keeps an on or off state; a button runs its action once per press.","ja":"トグルボタンはオン・オフの状態を保ち、ボタンは押すたびに操作を1回実行します。"}},{"id":"toolbar","diff":{"en":"A toggle button is one on/off button; a toolbar groups several buttons and moves between them with arrow keys.","ja":"トグルボタンはオンとオフを切り替える1つのボタンで、ツールバーは複数のボタンをまとめて矢印キーで行き来させます。"}},{"id":"segmented-control","diff":{"en":"A toggle button turns a single option on or off; a segmented control picks one of several segments.","ja":"トグルボタンは1つの機能をオンかオフにし、セグメンテッドコントロールは複数の区画から1つを選びます。"}},{"id":"disclosure","diff":{"en":"A toggle button turns a setting or mode on or off and shows it with `aria-pressed`; a disclosure shows or hides content, and its button uses `aria-expanded`.","ja":"トグルボタンは設定やモードをオンかオフにして `aria-pressed` で伝え、ディスクロージャーは内容を表示・非表示にして、そのボタンは `aria-expanded` で伝えます。"}}],"sources":[{"label":"WAI-ARIA APG: Button Pattern (Toggle button)","url":"https://www.w3.org/WAI/ARIA/apg/patterns/button/","checkedAt":"2026-10-21"},{"label":"MUI: Toggle Button","url":"https://mui.com/material-ui/react-toggle-button/","checkedAt":"2026-10-20"},{"label":"Inclusive Components: Toggle Buttons","url":"https://inclusive-components.design/toggle-button/","checkedAt":"2026-10-21"},{"label":"React Aria: useToggleButtonGroup (source code)","url":"https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/button/useToggleButtonGroup.ts","checkedAt":"2026-11-03"},{"label":"WAI-ARIA APG: Disclosure (Show/Hide) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/","checkedAt":"2026-11-03"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/toggle-button/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/toggle-button/"}},{"id":"token-field","category":"input","names":{"en":"Token field","ja":"トークン入力"},"aliases":[{"name":"Tag picker","source":"Fluent UI React v9","url":"https://fluent2.microsoft.design/components/web/react/core/tagpicker/usage"},{"name":"TextInputWithTokens","source":"Primer","url":"https://primer.style/product/components/text-input-with-tokens/"}],"summary":{"en":"A text field where each chosen value becomes a removable token, usually with suggestions as you type.","ja":"選んだ値が、外せるトークンとして並んでいく入力欄です。たいていは、入力に合わせて候補が出ます。"},"appearance":{"en":"Looks like a text field with small rounded labels (tokens) inside it, each with a “×” button, and the text cursor after the last one. More tokens wrap onto new lines and make the field taller. Typing shows a list of suggestions below. This demo is an ingredients field that starts with one token, Garlic.","ja":"入力欄の中に、角丸の小さなラベル（トークン）が並び、それぞれに「×」のボタンが付いています。文字を入れるカーソルは最後のトークンの後ろにあります。トークンが増えると次の行に折り返し、欄が高くなります。文字を入力すると、下に候補のリストが出ます。このデモは食材の欄で、最初から「ニンニク」のトークンが1つあります。"},"behavior":[{"en":"Choosing a suggestion turns it into a token, empties the text field and leaves it ready for the next value. The WAI-ARIA Authoring Practices describe this as a default action for an editable combobox: add the accepted value to a list of message recipients and clear the combobox so another can be added.","ja":"候補を選ぶとトークンになり、文字を入れる欄は空に戻って、次の値をすぐ入力できます。WAI-ARIA オーサリング プラクティスは、編集できるコンボボックスの既定の動作として、受け入れた値をメッセージの宛先の一覧に加えてコンボボックスを空にし、続けて追加できるようにする例を挙げています。"},{"en":"Typing narrows the suggestions. Carbon’s filterable multiselect shows the options that start with the typed characters.","ja":"入力すると候補が絞り込まれます。Carbon の絞り込めるマルチセレクトは、入力した文字で始まる選択肢を出します。"},{"en":"Each token can be removed with its own button. Backspace removes the last token in both Fluent’s tag picker and Primer’s TextInputWithTokens; Fluent says this should be communicated to the user to avoid confusion, and Primer also puts the removed token’s text back into the input.","ja":"トークンは、それぞれのボタンで外せます。Fluent のタグピッカーと Primer の TextInputWithTokens はどちらも、Backspace で最後のトークンを外します。Fluent は、この動作を利用者に伝えて混乱を避けるよう案内しています。Primer は、外したトークンの文字を入力欄に戻します。"},{"en":"By default the tokens wrap and the field grows. Primer also offers a single line that scrolls sideways, a maximum height that scrolls vertically, and a version that shows only some of the tokens until the input is focused.","ja":"既定ではトークンは折り返し、欄が高くなります。Primer には、1行のまま横にスクロールする形、最大の高さを決めて縦にスクロールする形、入力欄にフォーカスがあるときだけすべてのトークンを見せ、ふだんは一部だけを見せる形もあります。"},{"en":"While text is still being composed with an input method (such as for Japanese), the arrow keys, Enter, Esc and Backspace go to the input method and do not move through suggestions, choose one or remove a token.","ja":"日本語入力などで変換している間は、矢印キー・Enter・Esc・Backspace は変換の操作に使われ、候補の移動や決定、トークンの削除には使われません。"},{"en":"In this demo, each token is an item of a named list with a real `<button>` whose name includes the value, such as “Remove Garlic”. The buttons are in the Tab order before the text field, so they can be reached without arrow keys.","ja":"このデモでは、トークンは名前の付いたリストの項目で、それぞれに本物の `<button>` があります。ボタンの名前には「ニンニクを外す」のように値を含めます。ボタンは文字を入れる欄より前の Tab の順に並ぶので、矢印キーを使わずに届きます。"},{"en":"In this demo, a chosen value leaves the list of suggestions, and the list closes after each choice. ↓ opens it again. Fluent’s tag picker also closes its dropdown after a click on an item, while Carbon’s multiselect keeps its menu open.","ja":"このデモでは、選んだ値は候補のリストから外れ、選ぶたびにリストが閉じます。↓ でもう一度開きます。Fluent のタグピッカーも項目をクリックするとドロップダウンを閉じますが、Carbon のマルチセレクトはメニューを開いたままにします。"},{"en":"In this demo, focus stays in the text field after a choice, and moves to the text field after a token is removed with its button or with Backspace, so typing can continue. It does not move to a neighbouring token.","ja":"このデモでは、候補を選んだあともフォーカスは文字を入れる欄に残り、ボタンか Backspace でトークンを外したあとも文字を入れる欄に移るので、続けて入力できます。隣のトークンには移りません。"},{"en":"In this demo, Backspace in the empty field removes the last token and nothing else: it does not put the token’s text back, and holding the key removes only one token, so deleting typed text never carries on into the tokens.","ja":"このデモでは、欄が空のときの Backspace は最後のトークンを外すだけで、トークンの文字は戻しません。キーを押し続けても外れるのは1つだけなので、入力した文字を消していく操作がそのままトークンにまで及ぶことはありません。"},{"en":"In this demo, a `role=\"status\"` live region says what was added or removed and how many are chosen, and a line under the field, linked to it with `aria-describedby`, tells people about Backspace. When nothing matches the typed text, the same region says so and the list stays closed.","ja":"このデモでは、`role=\"status\"` のライブリージョンが、追加または削除した値と選択中の数を伝えます。欄の下の1行は `aria-describedby` で結び付けてあり、Backspace の動作を知らせます。入力した文字に合う候補がないときは、同じ領域がそう伝え、リストは開きません。"},{"en":"In this demo, only values in the list can become tokens; typed text that matches nothing is not turned into one. Other token fields accept typed text: Fluent’s tag picker lets people enter their own choice, Apple’s token field for native apps turns typed text into a token when a comma is typed (the app can add shortcuts such as Return), and React Aria’s tag field example turns comma-, space- or newline-separated text into tokens.","ja":"このデモでは、リストにある値だけがトークンになります。何にも合わない入力は、トークンにしません。入力した文字をトークンにするトークン入力もあります。Fluent のタグピッカーは自分の選択肢を入力でき、Apple のネイティブアプリ向けのトークンフィールドはカンマを打つと入力した文字をトークンにし（アプリは Return などの操作を足せます）、React Aria の tag field の例は、カンマ・空白・改行で区切った文字をトークンにします。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves between the remove buttons of the tokens, in order, and the text field. The suggestions are not a tab stop.","ja":"トークンの「外す」ボタンと文字を入れる欄の間を、順に移動します。候補のリストは Tab では止まりません。"}},{"key":"↓","action":{"en":"Opens the suggestions and highlights the first one, or highlights the next one.","ja":"候補を開いて最初の候補を選びます。開いているときは次の候補を選びます。"}},{"key":"↑","action":{"en":"Opens the suggestions and highlights the last one, or highlights the previous one.","ja":"候補を開いて最後の候補を選びます。開いているときは前の候補を選びます。"}},{"key":"Alt + ↓","action":{"en":"Opens the suggestions without highlighting one.","ja":"候補を選ばずにリストだけを開きます。"}},{"key":"Enter","action":{"en":"Adds the highlighted suggestion as a token, empties the field and closes the list. With none highlighted, it only closes the list.","ja":"選んでいる候補をトークンとして加え、入力欄を空にしてリストを閉じます。候補を選んでいないときは、リストを閉じるだけです。"}},{"key":"Esc","action":{"en":"Closes the list. If it is already closed, clears the typed text. The tokens stay.","ja":"リストを閉じます。閉じているときは、入力した文字を消します。トークンは残ります。"}},{"key":"Backspace","action":{"en":"In the empty field, removes the last token. When the field has text, deletes a character as usual. Holding the key removes only one token.","ja":"欄が空のときは、最後のトークンを外します。文字があるときは、ふつうに1文字を消します。押し続けても外れるトークンは1つだけです。"}},{"key":"Enter / Space","action":{"en":"On a remove button, removes that token and moves focus to the text field.","ja":"「外す」ボタンでは、そのトークンを外し、文字を入れる欄にフォーカスを移します。"}},{"key":"← / → / Home / End","action":{"en":"Moves the text cursor and removes the highlight from the suggestions.","ja":"入力欄の中でカーソルを動かし、候補の選択を外します。"}}],"variations":[{"name":{"en":"Tokens beside a text field","ja":"テキスト入力と並べるトークン"},"description":{"en":"Fluent’s tag picker combines a text input with a dropdown, shows the selections as tags in the input, and wraps them by default. Primer’s TextInputWithTokens is described as an input for a value that is a list, for items that can be added or removed but not edited inline, usually paired with autocomplete. This demo is this kind.","ja":"Fluent のタグピッカーは、テキスト入力とドロップダウンを組み合わせ、選んだものをタグとして入力欄に並べ、既定では折り返します。Primer の TextInputWithTokens は、値が一覧になる入力欄とされ、入力欄の中で編集はできず、追加と削除ができる項目のためのもので、たいていはオートコンプリートと組み合わせます。このデモはこの形です。"}},{"name":{"en":"Tokens made from typed text","ja":"入力した文字からできるトークン"},"description":{"en":"Apple’s token field, AppKit’s NSTokenField in native apps, turns the text people type into tokens that can be selected, dragged to reorder, or moved into another field; Mail’s address fields are the example. A token can carry a context menu, and suggestions can appear as people type.","ja":"Apple のトークンフィールド（ネイティブアプリの AppKit の NSTokenField）は、入力した文字を、選んだり、ドラッグして並べ替えたり、別の欄へ移したりできるトークンにします。例は「メール」の宛先の欄です。トークンにはコンテキストメニューを付けられ、入力に合わせて候補を出すこともできます。"}},{"name":{"en":"Tokens among running text","ja":"文章の中に混ざるトークン"},"description":{"en":"React Aria’s TokenField, which is marked alpha, holds a sequence of text and token segments. Its examples tokenize #hashtags and @usernames in a message, complete @mentions and slash commands, and build structured search queries, besides tag inputs and multi-select comboboxes.","ja":"React Aria の TokenField（alpha 版とされています）は、文字とトークンが連なった値を扱います。例として、メッセージの中の #ハッシュタグ や @ユーザー名 をトークンにするもの、@メンションやスラッシュコマンドを補うもの、構造のある検索条件を作るものがあり、タグ入力や複数選択のコンボボックスもその一つです。"}},{"name":{"en":"A count instead of tokens","ja":"トークンの代わりの件数"},"description":{"en":"Carbon’s multiselect puts a checkbox in front of each option, keeps the menu open while people choose, and shows one tag in the field with the number of selected options and an “x” that clears them all.","ja":"Carbon のマルチセレクトは、選択肢ごとにチェックボックスを置き、選んでいる間もメニューを開いたままにします。欄には、選んだ件数と、すべてを外す「x」の付いたタグが1つ出ます。"}},{"name":{"en":"A clear-all action","ja":"すべてを外す操作"},"description":{"en":"Fluent’s tag picker has a secondary action slot for extra functionality, with “Clear all” as its example.","ja":"Fluent のタグピッカーには、補助の操作を置く場所があり、例として「すべて消去」を挙げています。"}}],"usage":[{"en":"Use it when people choose several values and typing helps them find each one, such as the recipients of a message. Carbon’s filterable multiselect narrows a long list of options by typing. Carbon lists checkboxes for choosing several options from a list.","ja":"複数の値を選ぶもので、入力すると探しやすくなるときに使います。たとえば、メッセージの宛先です。Carbon の絞り込めるマルチセレクトは、入力で長い選択肢の一覧を絞り込みます。Carbon は、一覧から複数を選ぶものとして、チェックボックスを挙げています。"},{"en":"Check the status and the platform of each source. Apple’s page is guidance for native apps: its example is Mail, it links AppKit’s NSTokenField, and it says token fields are not supported in iOS, iPadOS, tvOS, visionOS or watchOS. Its drag-to-reorder, context menu and comma conversion do not carry over to the web by themselves. Primer’s TextInputWithTokens is deprecated, and its accessibility page says not to use it until the issues are resolved. React Aria’s TokenField is marked alpha.","ja":"資料ごとに、状態と対象の環境を確かめます。Apple のページはネイティブアプリ向けの指針です。例は「メール」で、AppKit の NSTokenField にリンクし、トークンフィールドは iOS、iPadOS、tvOS、visionOS、watchOS では使えないとしています。そのため、ドラッグでの並べ替え、コンテキストメニュー、カンマでの変換は、そのままウェブに当てはまるわけではありません。Primer の TextInputWithTokens は非推奨で、アクセシビリティのページは、問題が解決するまで使わないよう案内しています。React Aria の TokenField は alpha 版とされています。"},{"en":"Make the tokens easy to find and operate. Primer’s accessibility page faults its component for tokens that can be reached only with arrow keys at the start of the input and for giving screen reader users no sign that tokens exist. A real button on each token, a named list of them and a status message avoid both.","ja":"トークンを見つけやすく、操作しやすくします。Primer のアクセシビリティのページは、入力欄の先頭で矢印キーを使わないと届かないことと、トークンがあることがスクリーンリーダーの利用者に伝わらないことを、問題として挙げています。トークンごとの本物のボタン、名前の付いたリスト、状況を伝えるメッセージを置けば、どちらも避けられます。"},{"en":"Give the input an accessible name. Fluent says to set `aria-label` on its TagPickerInput so screen readers know what the input is for; this demo uses a visible label.","ja":"入力欄に、アクセシブルな名前を付けます。Fluent は、入力欄の目的をスクリーンリーダーに伝えるため、TagPickerInput に `aria-label` を付けるよう案内しています。このデモは、見えるラベルを使っています。"},{"en":"Say what was added or removed without moving focus. WCAG 4.1.3 asks for status messages that assistive technology can announce without taking focus, and the `status` role is a live region with an implicit `aria-live` of polite. A result such as “Added Basil” or “No results returned” is the kind of message it covers.","ja":"追加や削除は、フォーカスを動かさずに伝えます。WCAG 4.1.3 は、フォーカスを奪わずに支援技術が読み上げられる状況メッセージを求めています。`status` ロールは、`aria-live` が暗黙で polite のライブリージョンです。「バジルを追加しました」や「結果がありません」のようなメッセージが、その対象にあたります。"},{"en":"Keep the buttons out of the popup. The WAI-ARIA Authoring Practices say a listbox does not provide an accessible way to present interactive elements such as buttons, so the remove buttons sit on the tokens beside the input, not among the options. The popup can be a listbox, and the Combobox Pattern covers the input and popup.","ja":"ボタンはポップアップの中に入れません。WAI-ARIA オーサリング プラクティスは、リストボックスではボタンのような操作できる要素を、アクセシブルに見せる方法がないとしています。そのため「外す」ボタンは、選択肢の中ではなく、入力欄のそばのトークンに置きます。ポップアップはリストボックスにでき、入力欄とポップアップはコンボボックスのパターンが扱います。"},{"en":"For tokens without an input, see React Aria’s TagGroup: a focusable list of labels with keyboard navigation, selection and removal.","ja":"入力欄のないトークンは、React Aria の TagGroup を参照します。キーボードで移動でき、選択と削除ができる、フォーカスできるラベルの一覧です。"}],"misuse":[{"pattern":{"en":"Letting the tokens be reached only with arrow keys from the start of the input","ja":"トークンに、入力欄の先頭から矢印キーでしか届かないようにする"},"harm":{"en":"Primer’s accessibility page says this is not intuitive for keyboard, voice control and screen reader users, and that screen reader users get no sign that tokens are present and so are unlikely to find them.","ja":"Primer のアクセシビリティのページは、キーボード、音声コントロール、スクリーンリーダーの利用者にとって直感的でないと述べています。スクリーンリーダーの利用者には、トークンがあることが伝わらず、見つけにくくなります。"},"instead":{"en":"Give each token a real button in the Tab order, put the tokens in a named list, and announce additions and removals in a status message.","ja":"トークンごとに本物のボタンを Tab の順に置き、トークンを名前の付いたリストに入れ、追加と削除は状況メッセージで伝えます。"}},{"pattern":{"en":"Removing the last token with Backspace without telling anyone","ja":"Backspace で最後のトークンを外すことを、だれにも知らせない"},"harm":{"en":"Fluent says pressing Backspace removes the last tag in its tag picker and that this behavior should be communicated to the user to avoid confusion.","ja":"Fluent は、タグピッカーでは Backspace で最後のタグが外れるとし、混乱を避けるため、この動作を利用者に伝えるよう案内しています。"},"instead":{"en":"Say it in text next to the field, and announce each removal in a status message.","ja":"欄のそばの文でそう伝え、外すたびに状況メッセージで知らせます。"}}],"related":[{"id":"combobox","diff":{"en":"A token field keeps several chosen values as removable tokens and empties the input after each choice; a combobox puts a single value into the field.","ja":"トークン入力は選んだ複数の値を外せるトークンとして残し、選ぶたびに入力欄を空にします。コンボボックスは1つの値を入力欄に入れます。"}},{"id":"listbox","diff":{"en":"A token field lets people type to narrow the options and shows only the chosen values as tokens; a listbox shows its options in one list and has no text field to type in.","ja":"トークン入力は入力で選択肢を絞り込み、選んだ値だけをトークンとして見せます。リストボックスは選択肢を1つの一覧で見せ、入力する欄はありません。"}},{"id":"tag","diff":{"en":"A token field is an input that makes removable tokens from what people choose; a tag is the label itself and takes no input.","ja":"トークン入力は、選んだものから外せるトークンを作る入力欄です。タグはラベルそのもので、入力は受け付けません。"}},{"id":"checkbox","diff":{"en":"A token field picks several values from a long or open-ended list by typing; checkboxes show every option at once.","ja":"トークン入力は長い一覧や決まっていない候補から入力で複数の値を選び、チェックボックスはすべての選択肢を一度に見せます。"}},{"id":"select","diff":{"en":"A token field lets people type to choose several values and shows each as a removable token; a select shows the chosen option in a closed box until it is opened.","ja":"トークン入力は入力で複数の値を選び、それぞれを外せるトークンとして見せます。セレクトボックスは開くまで、選んだ値を閉じた箱の中にしか見せません。"}}],"sources":[{"label":"Fluent 2: Tag picker","url":"https://fluent2.microsoft.design/components/web/react/core/tagpicker/usage","checkedAt":"2026-11-02"},{"label":"Primer: TextInputWithTokens","url":"https://primer.style/product/components/text-input-with-tokens/","checkedAt":"2026-11-02"},{"label":"Primer: TextInputWithTokens (guidelines)","url":"https://primer.style/product/components/text-input-with-tokens/guidelines/","checkedAt":"2026-11-02"},{"label":"Primer: TextInputWithTokens (accessibility)","url":"https://primer.style/product/components/text-input-with-tokens/accessibility/","checkedAt":"2026-11-02"},{"label":"Apple Human Interface Guidelines: Token fields","url":"https://developer.apple.com/design/human-interface-guidelines/token-fields","checkedAt":"2026-11-02"},{"label":"React Aria: TokenField","url":"https://react-aria.adobe.com/TokenField","checkedAt":"2026-11-02"},{"label":"React Aria: TagGroup","url":"https://react-aria.adobe.com/TagGroup","checkedAt":"2026-11-02"},{"label":"Carbon Design System: Dropdown (usage)","url":"https://carbondesignsystem.com/components/dropdown/usage/","checkedAt":"2026-11-02"},{"label":"WAI-ARIA APG: Combobox Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/","checkedAt":"2026-11-02"},{"label":"WAI-ARIA APG: Editable Combobox With List Autocomplete Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/","checkedAt":"2026-11-02"},{"label":"WAI-ARIA APG: Listbox Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/listbox/","checkedAt":"2026-11-02"},{"label":"Understanding Success Criterion 4.1.3: Status Messages (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html","checkedAt":"2026-11-02"},{"label":"MDN: ARIA status role","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/token-field/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/token-field/"}},{"id":"toolbar","category":"action","names":{"en":"Toolbar","ja":"ツールバー"},"aliases":[{"name":"Toolbar","source":"React Aria","url":"https://react-aria.adobe.com/Toolbar"},{"name":"<toolbar> (proposal)","source":"Open UI","url":"https://open-ui.org/components/toolbar.explainer/"}],"summary":{"en":"A row of related controls, such as text formatting buttons, grouped together.","ja":"文字の書式ボタンのように、関係する操作部品を1列にまとめたものです。"},"appearance":{"en":"A strip of small icon buttons, sometimes with dividers between groups. Pressed buttons stay highlighted. In this demo, a divider separates the text style buttons from the alignment buttons, and on a narrow screen the strip wraps onto two rows.","ja":"小さなアイコンのボタンが帯状に並び、グループの間に区切り線が入ることもあります。押した状態のボタンは色が変わったままになります。このデモでは、文字の飾りのボタンと揃え方のボタンの間に区切り線があり、狭い画面では2段に折り返します。"},"behavior":[{"en":"The whole toolbar is a single Tab stop. Inside it, the arrow keys move between buttons.","ja":"ツールバー全体で Tab の止まる場所は1か所だけで、中のボタンの間は矢印キーで移ります。"},{"en":"When the user tabs back in, focus returns to the last focused button (roving `tabindex`).","ja":"Tab でツールバーに入り直すと、最後にフォーカスしていたボタンにフォーカスが戻ります（ロービング `tabindex`）。"},{"en":"In this demo, Bold, Italic and Underline are toggle buttons that use `aria-pressed`, so any number of them can be on.","ja":"このデモの「太字」「斜体」「下線」は `aria-pressed` を使ったトグルボタンで、いくつでも同時にオンにできます。"},{"en":"In this demo, the alignment buttons are a `radiogroup` of `role=\"radio\"` buttons with `aria-checked`, so exactly one is chosen. Moving focus onto one does not choose it.","ja":"このデモの揃え方のボタンは `role=\"radio\"` と `aria-checked` を持つボタンの `radiogroup` で、常にどれか1つだけが選ばれています。フォーカスを移しただけでは選ばれません。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Moves focus into or out of the toolbar.","ja":"フォーカスをツールバーに移したり、ツールバーから外したりします。"}},{"key":"Enter / Space","action":{"en":"Turns the focused style button on or off, or chooses the focused alignment.","ja":"フォーカス中の飾りのボタンをオン・オフします。揃え方のボタンでは、その揃え方を選びます。"}},{"key":"← / →","action":{"en":"Moves to the previous or next button, across the divider (wraps around).","ja":"区切り線をまたいで前後のボタンへ移り、端では反対の端へ回ります。"}},{"key":"Home / End","action":{"en":"Moves to the first or last button.","ja":"最初または最後のボタンへ移ります。"}}],"usage":[{"en":"Group controls as a toolbar only when there are three or more of them.","ja":"ツールバーとしてまとめるのは、操作部品が3つ以上あるときだけにします。"},{"en":"Give the toolbar a name so its purpose is announced: `aria-labelledby` if it has a visible label, otherwise `aria-label`.","ja":"ツールバーに名前を付け、何のための操作群か読み上げられるようにします。見えるラベルがあれば `aria-labelledby`、なければ `aria-label` を使います。"}],"misuse":[{"pattern":{"en":"Placing a Delete button right next to frequently used buttons","ja":"「削除」ボタンを、よく使うボタンのすぐ隣に置く"},"harm":{"en":"People mistake it for the neighboring button and press Delete by accident, which can lose their data.","ja":"隣のボタンと取り違えて「削除」を誤って押し、データを失うことがあります。"},"instead":{"en":"Put space or a divider between Delete and the other buttons, or move it to a separate group at the end of the toolbar.","ja":"「削除」とほかのボタンの間に余白や区切り線を入れるか、ツールバーの端の別のグループに分けて置きます。"}}],"related":[{"id":"menu","diff":{"en":"A toolbar keeps a group of controls visible in a row; a menu hides actions in a list that opens on demand.","ja":"ツールバーは操作部品を1列に並べて常に見せ、メニューは操作を開いたリストにしまいます。"}},{"id":"toggle-button","diff":{"en":"A toolbar groups several buttons and moves between them with arrow keys; a toggle button is a single on/off button that can sit inside one.","ja":"ツールバーは複数のボタンをまとめて矢印キーで行き来させます。トグルボタンはオンとオフを切り替える1つのボタンで、ツールバーの中に置くこともあります。"}},{"id":"button-group","diff":{"en":"A toolbar is a single Tab stop with the arrow keys moving between its controls; a button group is a few related buttons that each take a Tab stop.","ja":"ツールバーは Tab の止まる場所が1か所で、中の操作部品の間を矢印キーで移ります。ボタングループは関連するボタンを数個並べ、Tab はボタンごとに止まります。"}}],"sources":[{"label":"WAI-ARIA APG: Toolbar Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Toolbar Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/","checkedAt":"2026-10-21"},{"label":"Open UI: Toolbar Element (Explainer)","url":"https://open-ui.org/components/toolbar.explainer/","checkedAt":"2026-10-20"},{"label":"デジタル庁「ユーザビリティ導入ガイドブック」（DS-671.1）","url":"https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/91365885/20251016_introduction_to_usability.pdf","checkedAt":"2026-10-21"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/toolbar/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/toolbar/"}},{"id":"tooltip","category":"overlay","names":{"en":"Tooltip","ja":"ツールチップ"},"aliases":[],"summary":{"en":"A short note that appears near an element while it is hovered or focused.","ja":"要素にマウスを乗せたりフォーカスしたりしている間だけ、近くに出る短い説明です。"},"appearance":{"en":"A small dark label, often with a little arrow, just above or below the element it describes.","ja":"説明する要素のすぐ上か下に出る、小さな暗い色のラベルです。小さな矢印が付くことが多いです。"},"behavior":[{"en":"Appears after a short delay on hover or keyboard focus. It stays while the pointer is over the element or the tooltip, or while the element has focus, and disappears once neither is true.","ja":"マウスを乗せるかキーボードでフォーカスすると少し遅れて表示されます。ポインターが要素かツールチップの上にある間と、要素にフォーカスがある間は表示し続け、どちらも終わると消えます。"},{"en":"In this demo, the gap between the button and the tooltip also counts as part of the button, so the pointer can move onto the tooltip without it disappearing.","ja":"このデモでは、ボタンとツールチップの間の隙間もボタンの一部として扱い、ポインターをツールチップへ動かしても消えないようにしています。"},{"en":"It never receives focus, so it should not contain links or buttons.","ja":"ツールチップ自体はフォーカスを受けないため、リンクやボタンを入れてはいけません。"},{"en":"The element points to the tooltip with `aria-describedby`, so screen readers read it as a description.","ja":"要素から `aria-describedby` でツールチップを参照し、スクリーンリーダーに説明として読ませます。"},{"en":"The APG Tooltip pattern is still marked as work in progress.","ja":"APG の Tooltip パターンはまだ作業中と明記されています。"}],"keyboard":[{"key":"Tab / Shift + Tab","action":{"en":"Focusing the element shows the tooltip.","ja":"要素にフォーカスするとツールチップが出ます。"}},{"key":"Esc","action":{"en":"Hides the tooltip without moving focus or the pointer.","ja":"フォーカスやポインターを動かさずに、ツールチップを消します。"}}],"usage":[{"en":"Keep a tooltip to a short note and never put information in it that people need to finish a task. The U.S. Web Design System says to use one only on elements that look interactive, such as buttons and links, because a hidden tooltip cannot be found, and to treat it as a last resort when space is tight.","ja":"ツールチップには短い補足だけを入れ、作業を終えるのに必要な情報は入れません。U.S. Web Design System は、隠れたツールチップは見つけられないので、ボタンやリンクのように操作できそうに見える要素にだけ付けること、場所が足りないときの最後の手段として使うことを求めています。"},{"en":"Material Design 3 uses a plain tooltip to label an element that has no text, such as an icon-only button, and does not add one to an element that already has a text label. It uses a rich tooltip for longer text such as a definition, shows only one tooltip at a time, and says to use a dialog, not a tooltip, for critical information.","ja":"Material Design 3 は、アイコンだけのボタンのように文字のない要素に、プレーンツールチップでラベルを付けます。すでに文字のラベルがある要素には付けません。定義のような長めの説明にはリッチツールチップを使い、ツールチップは同時に1つだけ表示します。重要な情報はツールチップに隠さず、ダイアログで伝えるとしています。"}],"misuse":[{"pattern":{"en":"Putting information needed to finish a task only in a tooltip","ja":"作業を終えるのに必要な情報を、ツールチップにだけ書く"},"harm":{"en":"Tooltips usually do not appear on touchscreens, mouse-only ones cannot be reached by keyboard, and they are hard to notice, so people may never find the information. They also have to remember it after it disappears.","ja":"タッチ画面ではふつう表示されず、マウスでしか出ないものはキーボードで使う人に届きません。目印がなく気づきにくいため、情報に行き着けないこともあります。また、消えたあとは内容を覚えておく必要があります。"},"instead":{"en":"Show information such as input requirements on the page itself, and label icons with visible text. Use a tooltip only for supplementary hints.","ja":"入力の条件など作業に必要な情報はページに直接書き、アイコンには見える文字のラベルを付けます。ツールチップは補足のヒントにだけ使います。"}},{"pattern":{"en":"Making a tooltip that cannot be dismissed, vanishes when the pointer moves onto it, or disappears on a timer","ja":"消す手段がない、ポインターを乗せると消える、時間で消えるツールチップにする"},"harm":{"en":"People using screen magnification cannot see what the tooltip covers, people with a large pointer cannot read text hidden under it, and people with low vision or cognitive disabilities may lose the text before they finish reading.","ja":"画面を拡大して使う人は、ツールチップが覆った部分を見られません。大きなポインターを使う人は、ポインターの下に隠れた文字を読めません。弱視や認知障害のある人は、読み終える前に文字が消えてしまうことがあります。"},"instead":{"en":"Let Esc hide the tooltip without moving the pointer or focus, keep it open while the pointer is over the tooltip itself, and keep it visible until the pointer or focus leaves.","ja":"ポインターやフォーカスを動かさずに Esc で消せるようにします。ツールチップ自体にポインターを乗せても消さず、ポインターやフォーカスが離れるまで表示し続けます。"}}],"related":[{"id":"popover","diff":{"en":"A tooltip shows on hover or focus and holds only text (Material Design 3’s rich tooltip, which can have buttons and links, is the exception); a popover opens on click and can contain buttons and links.","ja":"ツールチップはホバーやフォーカスで出て文字だけを持ち（ボタンやリンクも持てる Material Design 3 のリッチツールチップは例外です）、ポップオーバーはクリックで開いてボタンやリンクも入れられます。"}}],"sources":[{"label":"WAI-ARIA APG: Tooltip Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/","checkedAt":"2026-10-20"},{"label":"Nielsen Norman Group: Tooltip Guidelines","url":"https://www.nngroup.com/articles/tooltip-guidelines/","checkedAt":"2026-10-21"},{"label":"Understanding Success Criterion 1.4.13: Content on Hover or Focus (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html","checkedAt":"2026-10-21"},{"label":"U.S. Web Design System: Tooltip","url":"https://designsystem.digital.gov/components/tooltip/","checkedAt":"2026-11-02"},{"label":"Material Design 3: Tooltips","url":"https://m3.material.io/components/tooltips/guidelines","checkedAt":"2026-11-02"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/tooltip/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/tooltip/"}},{"id":"tree-view","category":"navigation","names":{"en":"Tree view","ja":"ツリービュー"},"aliases":[{"name":"Tree view","source":"Carbon Design System","url":"https://carbondesignsystem.com/building-blocks/core/components/tree-view"},{"name":"Tree","source":"Ant Design","url":"https://ant.design/components/tree"}],"summary":{"en":"A nested list, like folders in a file manager, whose branches can be opened and closed.","ja":"ファイル管理のフォルダのように入れ子になったリストで、枝ごとに開閉できる部品です。"},"appearance":{"en":"Items indented by level, with a triangle or folder icon on items that have children. Opening one shows its children indented below it. The open file is marked with a bar on its left and bold text.","ja":"階層ごとに字下げされた項目が並び、子を持つ項目には三角やフォルダのアイコンが付きます。開くと子の項目が一段下げて表示されます。開いているファイルは左の縦線と太字で示されます。"},"behavior":[{"en":"Clicking a folder opens or closes it. Clicking a file opens it.","ja":"フォルダをクリックすると開閉し、ファイルをクリックすると開きます。"},{"en":"The open file has `aria-current=\"true\"`, so screen readers announce it as current. Only one item has it at a time.","ja":"開いているファイルには `aria-current=\"true\"` を付け、スクリーンリーダーで「現在の項目」と読み上げられるようにします。付くのは常に1つだけです。"},{"en":"The whole tree is a single Tab stop; the arrow keys move between visible items.","ja":"ツリー全体で Tab の止まる場所は1か所だけで、見えている項目の間は矢印キーで移ります。"},{"en":"In this demo, jumping by typing a name and * to open all siblings are left out. APG recommends typing to jump for all trees, especially those with more than seven top-level items, and lists * as optional; this tree has three top-level items and few files, so the arrow keys reach every item quickly.","ja":"このデモでは、名前の文字を打って移る操作と、* での一括展開を省いています。APG は文字入力での移動をすべてのツリーに勧め（最上位の項目が7つを超えるときは特に）、* は任意としています。このツリーは最上位の項目が3つでファイルも少なく、矢印キーだけで素早くたどれます。"}],"keyboard":[{"key":"↑ / ↓","action":{"en":"Moves to the previous or next visible item.","ja":"前後の見えている項目へ移ります。"}},{"key":"→","action":{"en":"Opens a closed folder; on an open folder, moves to its first child.","ja":"閉じたフォルダを開きます。開いたフォルダでは最初の子へ移ります。"}},{"key":"←","action":{"en":"Closes an open folder; on a child, moves to its parent.","ja":"開いたフォルダを閉じます。子の項目では親へ移ります。"}},{"key":"Home / End","action":{"en":"Moves to the first or last visible item.","ja":"最初または最後の見えている項目へ移ります。"}},{"key":"Enter","action":{"en":"Opens a file and marks it as current, or opens or closes a folder.","ja":"ファイルを開き、現在の項目にします。フォルダでは開閉します。"}}],"usage":[{"en":"Use it for real hierarchies such as folders or categories. For a few sections of content, an accordion is simpler.","ja":"フォルダや分類のような本当の階層に使います。内容のまとまりがいくつかあるだけなら、アコーディオンの方が簡単です。"}],"related":[{"id":"accordion","diff":{"en":"A tree view opens nested items in several levels; an accordion opens sections of content in one level.","ja":"ツリービューは入れ子の項目を何段にも開閉し、アコーディオンは内容のまとまりを1段で開閉します。"}},{"id":"side-navigation","diff":{"en":"A tree view is a widget with its own arrow-key behavior for opening and choosing items; side navigation is a list of links that is read as navigation.","ja":"ツリービューは項目の開閉と選択に専用の矢印キー操作を持つ部品で、サイドナビゲーションはナビゲーションとして読まれるリンクの一覧です。"}}],"sources":[{"label":"WAI-ARIA APG: Tree View Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/treeview/","checkedAt":"2026-10-21"},{"label":"WAI-ARIA APG: Navigation Treeview Example","url":"https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/","checkedAt":"2026-10-21"},{"label":"Carbon Design System: Tree view","url":"https://carbondesignsystem.com/building-blocks/core/components/tree-view","checkedAt":"2026-10-20"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/tree-view/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/tree-view/"}},{"id":"window-splitter","category":"action","names":{"en":"Window splitter","ja":"ウィンドウスプリッター"},"aliases":[{"name":"Splitter","source":"Ant Design","url":"https://ant.design/components/splitter"}],"summary":{"en":"A movable divider between two panes that changes how much room each pane gets.","ja":"2つのペインの間にある動かせる区切りです。動かすと、それぞれのペインの広さが変わります。"},"appearance":{"en":"A thin line between two side-by-side panes, often with a small grip in the middle. The pointer turns into a double arrow over it.","ja":"横に並んだ2つのペインの間の細い線で、中央に小さなつまみがあることが多いです。ポインターを重ねると左右の矢印の形に変わります。"},"behavior":[{"en":"The splitter has `role=\"separator\"` and can take focus. `aria-valuenow` gives its position, from `aria-valuemin` (the primary pane at its smallest) to `aria-valuemax` (the primary pane at its largest).","ja":"区切りには `role=\"separator\"` を付け、フォーカスできるようにします。位置は `aria-valuenow` で伝え、`aria-valuemin`（主ペインがいちばん狭いとき）から `aria-valuemax`（主ペインがいちばん広いとき）の間の値にします。"},{"en":"The pane whose size the splitter controls is the primary pane. The splitter has the same name as that pane and points to it with `aria-controls`. “Primary” only means the controlled pane, not the more important one.","ja":"区切りが大きさを決めるペインを主ペインと呼びます。区切りには主ペインと同じ名前を付け、`aria-controls` で主ペインを指します。「主」は大きさを決める側という意味で、内容の重要さとは関係ありません。"},{"en":"A splitter between side-by-side panes is a vertical line, so it has `aria-orientation=\"vertical\"` and moves with ← and →. A `separator` is horizontal unless this is set.","ja":"横に並んだペインの間の区切りは縦の線なので、`aria-orientation=\"vertical\"` を付け、← と → で動かします。指定しなければ `separator` は横向きとして扱われます。"},{"en":"In this demo, the Contents pane is the primary pane, and its width is the value, as a percentage of the window from 0 (collapsed) to 80. The arrow keys move it by 10. Clicking or tapping the splitter without moving it collapses or restores the pane, like Enter.","ja":"このデモでは、目次のペインが主ペインで、その幅をウィンドウに対する % で値にしています。0（畳んだ状態）から80まで動き、矢印キーでは10ずつ動きます。区切りを動かさずにクリックやタップすると、Enter と同じく目次を畳んだり戻したりします。"},{"en":"In this demo, F6 to move between panes, which the APG lists as optional, is left out.","ja":"このデモでは、APG で任意とされている、F6でペインの間を移る操作は省いています。"}],"keyboard":[{"key":"Enter","action":{"en":"Collapses the primary pane. If it is collapsed, moves the splitter back to where it was.","ja":"主ペインを畳みます。畳んでいるときは、区切りを元の位置へ戻します。"}},{"key":"← / →","action":{"en":"Moves the splitter left / right, making the primary pane narrower / wider.","ja":"区切りを左・右へ動かし、主ペインを狭く・広くします。"}},{"key":"Home / End","action":{"en":"Gives the primary pane its smallest / largest size. In this demo, the smallest is collapsed.","ja":"主ペインをいちばん狭く・広くします。このデモでは、いちばん狭いと畳んだ状態になります。"}}],"variations":[{"name":{"en":"Fixed splitter","ja":"固定のスプリッター"},"description":{"en":"Switches between two positions only, such as open and collapsed. It has Enter but no arrow keys.","ja":"開いた状態と畳んだ状態のように、2つの位置だけを切り替えるものです。Enter はありますが、矢印キーの操作はありません。"}},{"name":{"en":"Horizontal splitter","ja":"横向きのスプリッター"},"description":{"en":"A horizontal line between panes stacked one above the other, moved with ↑ and ↓.","ja":"上下に重ねたペインの間の横線で、↑ と ↓ で動かすものです。"}}],"usage":[{"en":"The APG has no working example of this pattern yet, and its review is not finished, so test it with assistive technologies before relying on it.","ja":"APG にはこのパターンの動く例がまだなく、見直しも終わっていません。使う前に、支援技術で確かめます。"}],"misuse":[{"pattern":{"en":"Letting the panes be resized only by dragging the splitter","ja":"区切りをドラッグしなければペインの大きさを変えられない作りにする"},"harm":{"en":"People who cannot drag precisely, and people who use a trackball, head pointer, eye-gaze system or speech-controlled pointer, find dragging hard and error-prone.","ja":"正確にドラッグできない人や、トラックボール、ヘッドポインター、視線入力、音声で動かすポインターを使う人には、ドラッグは難しく、誤りやすい操作です。"},"instead":{"en":"Let the splitter take focus and move with the arrow keys and Enter, and give a single click or tap a job too, such as collapsing and restoring the pane or buttons with preset sizes.","ja":"区切りをフォーカスできるようにして矢印キーと Enter で動かせるようにし、ペインを畳む・戻す操作や決まった大きさにするボタンなど、1回のクリックやタップでできる操作も用意します。"}}],"related":[{"id":"slider","diff":{"en":"A window splitter is moved to resize the two panes on either side of it; a slider picks a value that is used somewhere else.","ja":"ウィンドウスプリッターは動かして両側のペインの大きさを変え、スライダーはほかの場所で使う値を選びます。"}}],"sources":[{"label":"WAI-ARIA APG: Window Splitter Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/","checkedAt":"2026-10-22"},{"label":"MDN: ARIA: separator role","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role","checkedAt":"2026-10-22"},{"label":"Ant Design: Splitter","url":"https://ant.design/components/splitter","checkedAt":"2026-10-22"},{"label":"Understanding Success Criterion 2.5.7: Dragging Movements (WCAG 2.2)","url":"https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html","checkedAt":"2026-10-22"}],"urls":{"en":"https://oekazuma.github.io/ui-component-lab/en/components/window-splitter/","ja":"https://oekazuma.github.io/ui-component-lab/ja/components/window-splitter/"}}]}