--- title: "説明リスト" description: "ひとつのものについて分かっていることを、名前の付いた項目として示します。項目は、控えめな項目名と、それに答える値の組です。項目名は値の横、値の上、または大きな数値の下に置きます。レイアウトは自身の幅から決まり、コントロールにはなりません。" url: "https://tanrei.chnotchy.com/ja/components/description-list/" last_updated: 2026-10-23T21:17:12.000Z --- # 説明リスト > ひとつのものについて分かっていることを、名前の付いた項目として示します。項目は、控えめな項目名と、それに答える値の組です。項目名は値の横、値の上、または大きな数値の下に置きます。レイアウトは自身の幅から決まり、コントロールにはなりません。 ## 概要 説明リストは、注文、ファイル、アカウント、コンポーネントなど、ひとつのものについての情報を示します。それぞれの項目は、項目名と、それに答える値の組です。項目名は控えめなラベルで、利用者が知りたいのは値のほうです。 同じ項目を、3 つのレイアウトで描けます。 | `layout` | 描き方 | 用途 | | --- | --- | --- | | `inline`（既定） | 項目名を値の横に置きます。項目名はすべて 1 つの列に並び、列の幅は最も長い項目名に合わせます。 | 利用者が調べものに使う、ひとまとまりの項目。 | | `stacked` | 項目名を値の上に置きます。 | 長い値や長い項目名、複数列に並べる項目。 | | `stat` | 値を先に大きな数値として描き、項目名をその下にラベルとして置きます。 | 画面の最初に見せる、少数の数値。 | Web では、プロダクト側のネイティブの `
` を `` で囲みます。この要素はシャドウルートを持たず、リストにロールも付けません。そのため、スクリーンリーダーにも、クローラーにも、スクリプトのないページでも、通常の HTML の説明リストのままです。ほかのプラットフォームはまだ実装していません。 ### 使い方 **Web** ```html
注文番号
A-20418
担当者
田中 愛子
サミール・ハッダード
状態
 ``` **React** ```tsx import { DescriptionList } from '@tanrei/react'; import '@tanrei/web/description-list.css';
{figures.map((figure) => (
{figure.label}
{figure.value}
))}
``` `@tanrei/web/description-list.css` は、スクリプトが動く前にリスト全体を描きます。要素自身も同じスタイルシートをページに加えるので、スクリプトだけを読み込んだページでも、少し遅れてリストが描かれます。 ### 書くもの | パーツ | Web での書き方 | | --- | --- | | 項目 | `
` の中の `
`。1 つの `
` と、その `
` を囲みます。 | | 項目名 | `
`。テキストか、値が説明する対象のコンポーネント（凡例の中のタグなど）です。コロンは書きません。 | | 値 | `
`。テキストかコンポーネントで、空でもかまいません。 | | 複数の値 | 1 つの項目に書いた複数の `
`。それぞれを別の行に描きます。 | 一部の Markdown レンダラーが書き出すような、`
` でまとめていない `
` も、`inline` または `stacked` の 1 列で描かれます。`columns` と `stat` のレイアウトには、`
` でのまとまりが必要です。 ## 仕様 - Category: Containment - Level: base - Listing: default - Page: https://tanrei.chnotchy.com/components/description-list/ - Spec: https://github.com/chnotchy/tanrei/blob/main/specs/description-list.spec.json ### Availability | Design system | Has it | Notes | | --- | --- | --- | | Tanrei (`tanrei`) | Yes | — | | Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — | | M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — | | M3-like (Material 3-inspired) (`m3-like`) | Yes | — | ### Platforms - Web: the element ``, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/description-list`). - React: `DescriptionList` from `@tanrei/react`. | Platform | Name | Status | | --- | --- | --- | | Web | `tanrei-description-list` | lagging | | SwiftUI | `TanreiDescriptionList` | planned | | Jetpack Compose | `TanreiDescriptionList` | planned | | Flutter | `TanreiDescriptionList` | planned | | React Native | `DescriptionList` | planned | Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal. ### Anatomy - `container`: The list's box: as wide as its layout gives it, as tall as its facts. It has no fill, edge, corner or outer space of its own, and carries no state: nothing about it answers a pointer, a press or focus. - `fact`: One term with the value or values that answer it. Facts are drawn in the order given: one under another, or in equal columns. - `term`: The name of a fact, in a label style and a quieter color than its value: beside the value in a column all terms share, above it, or — in the stat layout — under it as the figure's label. Text, or a component of the product's (a tag that is explained by the value). - `value`: What answers the term: text that wraps inside its column, or a component of the product's (a tag, a link, inline code, a button). A fact may have several, each on a line of its own. In the stat layout the first value is the figure, in a heading style. - `divider` (optional): The one hairline between a fact and the fact below it, where facts are told apart by a line. ### Props | Prop | Type | Default | Web attribute | Description | | --- | --- | --- | --- | --- | | `layout` | `enum`: `inline`, `stacked`, `stat` | `"inline"` | `layout` | How a fact is drawn. inline: the term beside its value, every term in one column as wide as the widest term; the list draws its terms above their values by itself while it is too narrow for that (DSL-4). stacked: the term above its value, for long values or long terms, and for facts in several columns. stat: the value first, as a large figure, with the term under it as its label — the few numbers a screen opens with. | | `columns` | `number` | `1` | `columns` | The most columns of facts the list draws in the stacked and stat layouts; it draws fewer while it is too narrow for that many (DSL-7), and never more than it has facts. An inline list is one column whatever this says. | | `density` | `enum`: `regular`, `compact` | `"regular"` | `density` | How close the facts are and how large their text is. Regular is for facts a person reads: a page, a card, a dialog. Compact (smaller text, half the space) is for facts a person scans: a side panel, an inspector, a card of many figures. A design system may add values. | | `separation` | `enum`: `auto`, `divider`, `gap` | `"auto"` | `separation` | How a fact is told from the fact below it. divider: one hairline between them. gap: empty space and no line. Auto takes comp.description-list.separation, the design system's answer (divider in the default system). | ### Item: `fact` One fact: a term, and the value or values that answer it. Names: Web `div`, SwiftUI `TanreiFact`, Jetpack Compose `fact`, Flutter `TanreiFact`, React Native `DescriptionList.Fact`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `term` | `string` | `""` | The fact's name, as short as it can be and without a colon ("Ships to"). In the stat layout it is the label under the figure ("orders this week"). | | Slot | Description | | --- | --- | | `term` | What the term holds in place of plain text: a tag that the value explains (a legend), inline code, text with a glyph. The list places it and styles nothing inside it (DSL-10). | ### Item: `value` One value of a fact: plain text, a component of the product's, or nothing. Names: Web `dd`, SwiftUI `TanreiFactValue`, Jetpack Compose `value`, Flutter `TanreiFactValue`, React Native `DescriptionList.Value`. | Slot | Description | | --- | --- | | `content` | What the value holds in place of plain text: a tag, a link, inline code, a button, a short list, any view of the product's. The list places it and styles nothing inside it (DSL-10). | ### Item: `tag` A tag placed in a value: the Tag component, as it is drawn anywhere else. It is a Tag. Names: Web `tanrei-tag`, SwiftUI `TanreiTag`, Jetpack Compose `TanreiTag`, Flutter `TanreiTag`, React Native `Tag`. | Prop | Type | Default | Web attribute | Description | | --- | --- | --- | --- | --- | | `label` | `string` | `""` | `label` | The tag's text. | | `variant` | `enum`: `tonal`, `outlined`, `filled` | `"tonal"` | `variant` | The tag's look. | | `status` | `enum`: `default`, `info`, `warning`, `error`, `success` | `"default"` | `status` | What the tag reports. | | `size` | `enum`: `small`, `medium` | `"medium"` | `size` | The tag's size; small in a value, so that it does not make its line taller. | ### States `enabled` ### Accessibility - Role: `none` - Labeling: WAI-ARIA has no role for a description list as a whole, only for its parts (term, definition), so the component names none: on the web the product's own dl, dt and dd stay in the document and carry the structure; elsewhere each fact is one element read "term, value" (DSL-17). The list has no accessible name of its own: the heading above it says what the facts are about, as it does for a person who sees them. - Minimum target size: yes - Not interactive: the list, its facts, its terms and its values take no input and no focus (DSL-15), so there is no target to size. minimumTarget holds trivially. What is pressable inside a value — a link, a button, a copy button — meets the minimum target by its own spec and keeps its place in the focus order. - A description list is for the facts of one thing (WCAG 1.3.1): each term names what its value is. Several things that share the same names are a table, whose headers name columns; text that is read in order, with a term now and then, is prose, which sets a bare description list as running text (PRS-13). Do not use this component to place unrelated things side by side. - Every value has a term, and a term is a name, not a heading: it takes no heading role (DSL-17), so a screen reader's list of headings is not filled with "Size", "Owner" and "Date". A block of facts that needs a title gets a heading above it, which the product writes. - What is drawn first is not always what is read first: the stat layout draws the figure above its label and still exposes "orders this week, 1,284" (DSL-6). Both orders are a meaningful sequence (WCAG 1.3.2); the exposed one is the same in every layout, so that a person hears a list the same way wherever it is drawn. - An empty value is exposed as empty (DSL-11). Where the absence itself is information ("None", "Not set", "Unlimited"), write it as the value, in words: a dash is read as punctuation or not at all. - Meaning never rests on color. A figure is the surface's text color whatever it says; a change (up, down, better, worse) is a tag or text in the value whose words say the direction ("up 12 % since last week"), with a glyph if the product wants one, never a color alone (WCAG 1.4.1). - Reflow (WCAG 1.4.10) and enlarged text (1.4.4, 1.4.12): the list decides its layout from its own width, so the same rules that stack it in a narrow panel stack it at 200 % text and in a 320 wide window (DSL-4, DSL-7, DSL-21). Nothing is cut and nothing scrolls sideways; an unbreakable value is broken at the edge (DSL-8). - Contrast in the default system: a value is on-surface and a term on-surface-variant, each held to 4.5:1 on every surface and container step by the token invariants. The line between facts is decorative: facts are exposed without it. - A list does not announce a change of its facts (DSL-16). Where a change must be heard (a figure that updates while the person watches), the product puts the list, or the one fact, in a live region and decides how often it speaks. ### Behaviour Requirements in EARS form, each with its stable id. - **DSL-1** THE description list SHALL draw its facts in the order given, each fact a term and the value or values that answer it, as a block as wide as the layout gives it and as tall as its facts; it SHALL draw no fill, no edge, no corner and no elevation of its own, and SHALL bring no outer space of its own — no space above its first fact and none below its last — so that it is spaced by what holds it. - **DSL-2** THE description list SHALL set every term in comp.description-list.term.typescale.regular while density is regular and in comp.description-list.term.typescale.compact while density is compact, in comp.description-list.term.color, and every value in comp.description-list.value.typescale.regular or comp.description-list.value.typescale.compact by density, in comp.description-list.value.color, with digits in figures of equal width so that the numbers of a column of values line up; it SHALL NOT add a colon or any other mark of its own after a term, and SHALL NOT change the weight, the case or the family of what the product wrote. - **DSL-3** WHILE layout is inline THE description list SHALL draw one column of facts, and in each fact the term at the start and its values after it: every term in one term column, as wide as the widest term of the list set on one line, with no term wrapped or cut; every value in one value column that takes the rest of the list's width; and the two columns comp.description-list.term.gap.regular apart while density is regular and comp.description-list.term.gap.compact apart while density is compact. The first line of a term SHALL share its baseline with the first line of its first value. - **DSL-4** WHILE layout is inline and the value column of DSL-3 would be narrower than comp.description-list.column.min-width THE description list SHALL draw every fact as layout stacked draws it (DSL-5) — all of its facts together, never some of them — and SHALL return to the two columns when the room is there again; it SHALL decide this from its own width, not from the window's, SHALL change at once and without a motion, and SHALL change nothing that is exposed (DSL-17). - **DSL-5** WHILE layout is stacked THE description list SHALL draw in each fact the term on a line or lines of its own and its values below it after comp.description-list.stack.gap, both beginning at the start edge of the fact's column and no wider than it. - **DSL-6** WHILE layout is stat THE description list SHALL draw in each fact the first value first, as a figure: in comp.description-list.stat.value.typescale.regular while density is regular and comp.description-list.stat.value.typescale.compact while density is compact, in comp.description-list.value.color, with digits in figures of equal width, on one line wherever the fact's column holds it; and the term below the figure after comp.description-list.stack.gap, in the term's own style and color (DSL-2), both beginning at the start edge of the fact's column. It SHALL set the figure's letter-spacing by the script of its text, as every title is set (PRS-20): no negative letter-spacing WHERE its language is Chinese, Japanese or Korean, and none WHERE its script joins its letters or stacks marks on them. THE description list SHALL still expose the term before its value (DSL-17): the order it draws changes nothing that is read. - **DSL-7** WHILE layout is stacked or stat THE description list SHALL lay its facts out in columns of equal width, comp.description-list.column.gap apart, filled row by row in reading order from the start edge, the facts of a row beginning at one top edge: as many columns as the least of columns, the number of its facts, and the number of columns at least comp.description-list.column.min-width wide that its own width holds, and never fewer than one; WHEN its width changes it SHALL lay its facts out again at once, without a motion. WHILE layout is inline and columns is greater than 1 THE description list SHALL draw one column and in debug builds report that an inline list has one. IF columns is less than 1 or not a whole number THE description list SHALL draw one column and in debug builds report the value. - **DSL-8** THE description list SHALL wrap the text of a value inside its column, and of a term wherever DSL-5 or DSL-6 places it, breaking lines by the rules of the text's language, and SHALL never cut it or end it with an ellipsis; a run with no break opportunity that is wider than its column (an identifier, an address) SHALL be broken where it meets the column's edge rather than be cut or reach outside the list. - **DSL-9** WHERE a fact has more than one value THE description list SHALL draw each value on a line or lines of its own below the one before it, comp.description-list.stack.gap apart, in the order given, where the layout places a value: in the value column while the term sits beside it, under the term while it is stacked. WHILE layout is stat only the first value SHALL be the figure of DSL-6; those after it SHALL be drawn below the term, after comp.description-list.stack.gap, in the value's own style (DSL-2). - **DSL-10** WHERE a term or a value holds a component or any content of the product's that is not plain text — a tag, a link, inline code, a button, a short list — THE description list SHALL place it where the text would begin, on the first line, SHALL add nothing to it and style nothing inside it, and SHALL let pointer, touch and keyboard input reach it as it would outside the list, in the reading order of the facts. - **DSL-11** WHERE a fact has a term and no value, or a value with no content, THE description list SHALL draw the term, keep the value's place and one line of its height so that the fact stays in step with the others, expose the fact with an empty value, and SHALL NOT put a dash, a word or any other mark of its own in it. IF a fact has no term THE description list SHALL draw its values where they would be and in debug builds report that a value has no term. IF the list has no facts THE description list SHALL draw nothing, take no space and expose nothing. - **DSL-12** WHILE the list's separation is divider (DSL-13) THE description list SHALL draw one line of comp.description-list.divider.thickness in comp.description-list.divider.color above every fact that is not in its first row, as wide as that fact's column — the whole width of the list where it draws one column, a term and its value under one line — and SHALL leave comp.description-list.fact.gap.regular between the line and the content on each side of it while density is regular, and comp.description-list.fact.gap.compact while density is compact, the line taking no room of its own; it SHALL draw no line above the first row or below the last, and none between two columns or between a term and its value. - **DSL-13** THE description list SHALL tell a fact from the fact below it as its separation names: WHILE separation is auto, as comp.description-list.separation names, which follows sys.behavior.separation unless a design system sets it apart; WHILE separation is divider or gap, as that value names, whatever the tokens say; divider draws the lines of DSL-12 and gap leaves the space of DSL-14. WHEN separation, or the token it follows, changes THE description list SHALL draw the other form at once, without animation; WHEN separation names a value the description list does not define THE description list SHALL treat it as auto and in debug builds report the unknown value. A platform that cannot draw a choice SHALL fall back to the first value, divider, and state that in its README. - **DSL-14** WHILE the list's separation is gap (DSL-13) THE description list SHALL leave comp.description-list.fact.gap.regular of empty space while density is regular, and comp.description-list.fact.gap.compact while density is compact, between every fact and the fact below it, SHALL draw none of the lines of DSL-12, and SHALL leave no such space above the first row or below the last; the facts SHALL stay exposed as facts (DSL-17). - **DSL-15** THE description list, its facts, its terms and its values SHALL NOT take pointer, touch or keyboard input of their own, SHALL NOT take focus or be a stop in the focus order, and SHALL NOT change anything they draw under a pointer, a press or focus: a fact has no hovered, focused, pressed, selected or disabled state, draws no state layer and no focus indicator, and the list emits no event. - **DSL-16** WHEN the facts, a term or a value change THE description list SHALL draw the new content at once, without a motion, lay itself out again where a width changed with it (DSL-3, DSL-4, DSL-7), and SHALL NOT announce the change by itself. - **DSL-17** THE description list SHALL be exposed to assistive technology as terms each followed by the value or values that answer it, every value associated with its term, in the order given: on a platform that has the semantics of a description list, as that structure; on a platform that has none, each fact as one element whose text is the term followed by its values, set apart so that they are read as separate phrases ("Category, Actions"), with whatever inside the fact takes input still reached as an element of its own. The layout, the number of columns, the density, the separation and the order DSL-6 draws SHALL change nothing that is exposed; THE description list SHALL give a term no heading role and itself no name. - **DSL-18** THE description list SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the description list is shown THE description list SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows. - **DSL-19** WHERE the layout direction is right-to-left THE description list SHALL place the term column at the right and the value column at its left, begin every term and every value at the right edge of its column, fill its columns of facts from the right, and apply every gap by logical start and end. It draws no glyph of its own, so nothing in it is mirrored but its order. - **DSL-20** THE description list SHALL lay out the text of each term and of each value as text of its own direction, isolated from the text beside it: it takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right name, an identifier, a number with its sign, unit or currency, a version, an address and a date keep their own order in a right-to-left layout and reorder nothing beside them; THE description list SHALL place that text and align its lines by the layout direction, not by the text's own, and SHALL NOT reverse the digits of a number. - **DSL-21** WHILE the text size is enlarged THE description list SHALL grow every text style with it, keep its gaps and its lines, take comp.description-list.column.min-width as grown by the same factor, and lay itself out again by DSL-3, DSL-4 and DSL-7, so that an inline list draws its terms above their values and a list in columns draws fewer of them where the larger text no longer fits; it SHALL cut no content, SHALL set no fixed height on a fact, SHALL lose no content when the reader raises line height, paragraph spacing, letter spacing or word spacing, and SHALL need no sideways scrolling at a width of 320 points with text at 200 %. - **DSL-22** WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE description list SHALL draw the lines of DSL-12 in the platform's text color and its terms and values in that color, a term still told from its value by its text style and its place; it draws no fill, so nothing else changes. - **DSL-23** WHEN density names a value that the active design system does not have, or layout names a value this spec does not have, THE description list SHALL render with the default value (the default density's tokens, layout inline), and in debug builds report the unknown value. - **DSL-24** WHEN its inline size changes THE description list SHALL choose between terms beside and above their values again from the new size. ### Tokens As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.description-list.…` → `--tanrei-comp-description-list-…`). #### `tanrei.comp.description-list` | Token | Type | Value | | --- | --- | --- | | `comp.description-list.separation` | `number` | `{tanrei.sys.behavior.separation}` | | `comp.description-list.divider.color` | `color` | `{tanrei.sys.color.outline-variant}` | | `comp.description-list.divider.thickness` | `dimension` | `{tanrei.sys.border.hairline}` | | `comp.description-list.fact.gap.regular` | `dimension` | `12px` | | `comp.description-list.fact.gap.compact` | `dimension` | `6px` | | `comp.description-list.term.gap.regular` | `dimension` | `{tanrei.sys.space.space200}` | | `comp.description-list.term.gap.compact` | `dimension` | `{tanrei.sys.space.space100}` | | `comp.description-list.term.color` | `color` | `{tanrei.sys.color.on-surface-variant}` | | `comp.description-list.term.typescale.regular` | `typography` | `{tanrei.sys.typescale.label}` | | `comp.description-list.term.typescale.compact` | `typography` | `{tanrei.sys.typescale.label-small}` | | `comp.description-list.stack.gap` | `dimension` | `{tanrei.sys.space.space50}` | | `comp.description-list.column.gap` | `dimension` | `{tanrei.sys.space.space400}` | | `comp.description-list.column.min-width` | `dimension` | `144px` | | `comp.description-list.value.color` | `color` | `{tanrei.sys.color.on-surface}` | | `comp.description-list.value.typescale.regular` | `typography` | `{tanrei.sys.typescale.body}` | | `comp.description-list.value.typescale.compact` | `typography` | `{tanrei.sys.typescale.body-small}` | | `comp.description-list.stat.value.typescale.regular` | `typography` | `{tanrei.sys.typescale.heading-1}` | | `comp.description-list.stat.value.typescale.compact` | `typography` | `{tanrei.sys.typescale.heading-3}` | ## ガイドライン ### 説明リストを使う場面 - **ひとつ**のものについての情報に使います。同じ項目名を持つものが複数あるなら、それは[テーブル](https://tanrei.chnotchy.com/ja/components/table/)です。テーブルでは、見出しが列に名前を付けます。 - 段落の間で順に読む、言葉の説明はプローズです。コンテンツの中の `
` には何も付けずにおきます。プローズはそれを、項目名を目立たせた本文として組みます。このコンポーネントは同じリストをレイアウトした形で、目立つのは値のほうです。 - 利用者が選んだり押したりするリストは、[リスト](https://tanrei.chnotchy.com/ja/components/list/)です。 ### 収まり方 リストは、ウィンドウの幅ではなく、自身の幅からすべてを決めます。同じリストが、ページでも、カードでも、サイドパネルでも、ダイアログでも正しく収まります。 - **`inline` は自分で縦に並びます。** 最も長い項目名の横で値に残る幅が 144 を下回ると、すべての項目がそろって、項目名を値の上に置いた形になります。幅に余裕ができると 2 列に戻ります。幅が変わるたびに決め直します。まだ表示されていないパネルやタブの中で、幅のないまま最初にレイアウトされたリストも同じです。小さいウィンドウのために、利用者側でレイアウトを切り替えないでください。 - **列は自分で減ります。** `columns` は、`stacked` と `stat` のレイアウトが描く列の最大数です。各列の幅は 144 以上です。そのため 4 つの数値は、広いページでは 4 列、狭いページでは 2 列ずつ、スマートフォンでは 1 列になります。項目の数より多い列を描くことはありません。 - **`inline` のリストは 1 列です。** `columns` を指定しても変わりません。 - **何も途中で切りません。** 値は折り返します。途中で改行できない識別子やアドレスは、列の端で改行します。リストが横にスクロールすることはありません。 ### 密度 | `density` | 項目名と値 | 項目の間 | 用途 | | --- | --- | --- | --- | | `regular`（既定） | 文字サイズ 14 / 行の高さ 20 と、14 / 22 | 12。線があるときは線の両側に 12 | 利用者が読む項目：ページ、カード、ダイアログ。 | | `compact` | 12 / 16 と 13 / 20 | 6。線があるときは線の両側に 6 | 利用者がざっと目を通す項目：サイドパネル、インスペクター。 | `stat` の数値は、`regular` で 32 / 40、`compact` で 20 / 28 です。 ### 項目の区切り方 | `separation` | 描き方 | | --- | --- | | `auto`（既定） | デザインシステムが選んだもの。既定のシステムでは細い線です。 | | `divider` | 項目とその下の項目の間に、細い線を 1 本描きます。 | | `gap` | 余白だけで、線は描きません。 | 最初の行の上、最後の行の下、列と列の間、項目名と値の間には線を描きません。枠で囲んだリストにしたいときは、Outlined の[カード](https://tanrei.chnotchy.com/ja/components/card/)の中にリストを置きます。 ### 推奨 - 項目名はできるだけ短くします。「この注文のお届け先住所」ではなく「お届け先」です。 - 値がないことが情報になる場合は、言葉で書きます。「なし」「未設定」「無制限」などです。 - 変化は言葉で伝えます。「先週より 12% 増」のように、数値の下の 2 つ目の値として書きます。 - 値の中でステータスを示すときは、小さいタグ（`size="small"`）を使います。行が高くなりません。 ### 非推奨 - 項目名の後ろにコロンを付けない。句読点は言語ごとに決まるもので、項目名と値はスタイルと位置ですでに見分けられます。 - 空の値にダッシュを入れない。空のままにするか、ないことを言葉で書きます。 - 良し悪しを伝えるために数値に色を付けない。増減は、言葉か、ラベルでそれを伝えるタグで示します。 - 関係のないものを横に並べるためにリストを使わない。それはレイアウトです。 ## アクセシビリティ ### コンポーネントが担うこと - ネイティブのリストは説明リストのままです。どのレイアウトでも、どちらの密度でも、線があってもなくても、項目名とその説明はブラウザー自身のものです。 - 読み上げの順序は変わりません。`stat` のレイアウトは数値をラベルの上に描きますが、支援技術には項目名を先に伝えます。 - リストの中に、フォーカスや入力を受け取るものはありません。値の中のリンクやボタンは、自身のターゲットと、フォーカスの順序での位置を保ちます。 - テキストを 200% にしたときも、幅 320 のウィンドウでも、同じ幅の規則によってリストが縦に並び、列が減ります。最小の幅は、テキストとともに大きくなります。 - 右から左のレイアウトでは、項目名の列が右に置かれ、列は右から埋まります。項目名と値はそれぞれ自身の方向を保つので、バージョン、アドレス、金額の並びが逆になることはありません。 - 強制カラーモードでは、線とテキストがテキストの色になります。リストには、失われる塗りがありません。 - 項目名のない値、`inline` のリストへの `columns`、整数でない列数、`
` でまとめていないリストでの `stat` のレイアウトや複数列、未知のレイアウト・密度・区切り方は、デバッグビルドで報告します。 ### 利用者側で行うこと - リストの上に、何についての情報かを伝える見出しを置きます。リスト自身は名前を持たず、項目名が見出しになることもありません。 - すべての値に項目名を付けます。 - 利用者が見ている間に数値が変わり、その変化を読み上げさせる必要があるときは、リストかその項目を、プロダクト側のライブリージョンの中に置きます。リストは変化を読み上げません。