css library

Universal design CSS library.

WCAG 2.2 auto-generated report

input, select, textarea

[data-size]

:user-invalid, [aria-invalid="true"]

button, a, details > summary

Anchor
Summary

Details

[data-size]

Anchor Anchor Anchor Anchor Anchor Anchor
Summary

Details

Summary

Details

Summary

Details

Summary

Details

Summary

Details

Summary

Details

[data-style="fill"], [data-style="outline"], [data-style="underline"]

Anchor Anchor
Summary

Details

Summary

Details

:disabled, [aria-disabled="true"]

Anchor
Summary

Details

button[aria-haspopup="listbox"] + [popover][role="listbox"]

[data-size]

:disabled

Toggle button (input[type="checkbox"][role="switch"])

[data-size]

:disabled, [aria-disabled="true"]

Checkbox

Radio button

Slider (input[type="range"])

[data-size]

label > input[type="range"] ([data-text-min], [data-text-max])

:user-invalid, [aria-invalid="true"]

:disabled, [aria-disabled="true"]

Step button (button[data-action] + input[role="spinbutton"])

[data-size]

label[data-axis="block"]

button[data-action] (:empty ではない場合、記号は描かない)

[data-style="outline"]

:user-invalid, [aria-invalid="true"]

:disabled, [aria-disabled="true"]

Error (section[data-type="error-summary"], p[data-type="error"])

section[data-type="error-summary"]

入力内容に問題があります

section[data-type="error-summary"] > p (説明つき)

入力内容に問題があります

次の項目を修正してから、もう一度送信してください。

p[data-type="error"]

エラー: 氏名を入力してください

legend + p[data-type="error"]

生年月日

エラー: 生年月日は実在する日付を入力してください

Heading

H1

H2

H3

H4

H5
H6

H1

P

[data-axis="inline"]

H1

Subtitle

H2

Subtitle

H3

Subtitle

H4

Subtitle

[data-size]

H1 sm

Subtitle

H3 2xl

Subtitle

Search

label > input[type="search"] (standalone)

search > label > select (no button)

[data-size]

search (button[type="button"])

Inline text

form[role="search"] (button[type="submit"])

Inline text

search > label > select (button[type="button"])

Inline text

form[role="search"] > label > select (button[type="submit"])

Inline text

[data-size]

Table

Caption
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell

[data-border]

All four edges of every cell
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Top edge of every cell: rules between rows
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Bottom edge of every cell: rules between rows
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Leading edge of every cell: rules between columns
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Trailing edge of every cell: rules between columns
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Two edges combined: space-separated values
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell

[data-stripe], [data-hover], [data-selectable]

Caption
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Caption
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Caption
Head Head
Cell Cell
Cell Cell

th > label > input[type="radio"] (sort)

Caption
Head Head
Cell Cell
Cell Cell

[data-size]

Caption
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Caption
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Caption
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell
Caption
Head Head Head
Row Cell Cell
Row Cell Cell
Row Cell Cell

Blockquote

"I will cast the dark shadows of human life over you without reserve. But you must not be afraid."

Soseki Natsume. 1914. Kokoro. Iwanami Shoten, Tokyo, Japan. Translated by Andyou, 2026.