お知らせ （ ドキュメント ）

なお、CSS Fonts Module Level 4ではバリアブルフォントが導入される前提で、1から1000までの任意の数値を受け付けるようになっています。（Noto Sans JPおよびNoto Sans Monoでは利用できません）

「注意が必要なケース」を加筆修正（修正の意図：ユーザー数の大小を根拠に、重要か否かの判断をしてはならないため）

内容が多くのユーザーにとって重要なときにディスクロージャーを使ってはいけません

「注意が必要なケース」を加筆修正（修正の意図：ユーザー数の大小を根拠に、重要か否かの判断をしてはならないため。および、日本語文章の調整）

内容が多くのユーザーにとって重要なときにアコーディオンを使っていけません

折りたたまれている内容のほうに重要な情報が含まれるような使い方をしないでください。原則として、重要な情報は最初から隠さずに表示するようにします。

デスクリプションを修正

日付ピッカーは、日付を選択するためのフォームコントロールを提供します。カレンダーは、日付の選択を補助するコンポーネントです。日付ピッカーに加えて任意でカレンダーを表示できます。 日付ピッカーは、日付を選択するためのフォームコントロールとして、入力フィールドおよびカレンダーによって構成されるコンポーネントです。

日付ピッカーは入力フィールドおよびカレンダーの組み合わせであることを明確にし、各ページに反映

「コンポーネント要素」の入力フィールドの説明からエラー時を別項目に分割

設計の原則を加筆修正

複数の選択肢からひとつの項目しか選択できない場合は、必ずラジオボタンを使用してください。

2024年5月の試験に関する注釈を追加

本JIS試験には、2025年7月30日のアップデートで、当該ドメイン配下となった以下のリソースは含まれません。

• URLが https{/**/}://design.digital.go.jp/dads/html/ で始まるページ
• URLが https{/**/}://design.digital.go.jp/dads/react/ で始まるページ

「アクセシビリティ」ページを追加

コンポーネント要素の名称である「テールアイコン」を「ソートアイコン」に変更

「サイズ」を加筆修正

テーブルの用途に応じてDefaultまたはDenseを選択してください。 一覧性が重要な用途や、画面領域を有効に活用したい場合にはDenseを選択できます。DefaultまたはDenseが用意されています。 扱うデータの量が多く、画面内にできるだけ多くの情報を表示したい場合にはDenseを選択できます。

「セルの結合」を加筆修正

• セルの結合は最小限にしてください。 セルが複雑に結合されると、データの再利用が難しくなります。
• セルの結合は最小限にしてください。
• データテーブルの場合は、セルの結合は原則として行いません。 セルが結合されると、データの再利用が難しくなります。

「テキストの配置」を追加

「ストライプ表示」を加筆修正

• 必要に応じて、行および列をストライプ表示にできます。 大きなテーブルやデータ密度の高いテーブルの視認性が向上します。
• 必要に応じて、行および／または列をストライプ表示にできます。 大きなテーブルやデータ密度の高いテーブルの視認性が向上します。
• データセルが結合されている場合、ストライプ表示ができない場合があります。
  • 行方向の結合（縦方向のセル結合）がある場合、行はストライプ表示できません。
  • 列方向の結合（横方向のセル結合）がある場合、列はストライプ表示できません。
• テーブルがストライプ表示を含む場合、背景色の有無に関わらずボーダーと背景色とのコントラスト比が3:1を下回らないよう留意してください。

「テキスト」を追加

「リンク」を加筆修正

• セルのリンクが1つの場合は、セル全体をリンク領域にしてください。 ターゲットサイズが広がり使い勝手を高めます。
• セルのリンクが1つの場合は、セル全体をリンク領域にできます。

「シンプルに作る」を削除（内容は「アクセシビリティ」ページに移譲）

「ホバーハイライト」を加筆修正

• マウスカーソルが乗った行または列をHoverハイライトで表示できます。
• マウスカーソルが乗った行および／または列をホバーハイライトで表示できます。
• テーブルがホバーハイライトを含む場合、背景色の有無に関わらずボーダーと背景色とのコントラスト比が3:1を下回らないよう留意してください。

「行の選択」を加筆修正

• 行の先頭にあるチェックボックスで行の選択ができます。 選択された行はSelectedハイライトで表示してください。
• 行の先頭にあるチェックボックスで行の選択ができます。 選択された行はハイライト表示になります。
• テーブルが行の選択を含む場合、ボーダーと背景色の有無に関わらず背景色とのコントラスト比が3:1を下回らないよう留意してください。

「すべての行を選択する」を加筆修正

テーブルヘッダーの先頭に「全て選択」、すべての行を選択するためのチェックボックスを追加できます。

テーブル内で選択されたアイテムと選択されていないアイテムが混在している場合、「全て選択」チェックボックスはindeterminateプロパティを利用したチェックボックス表示になります。この状態で「全て選択」チェックボックスを選択した場合、全て選択が実行されます。テーブル内で選択済みの行と未選択の行が混在している場合、このチェックボックスはindeterminateプロパティを利用したマイナス記号表示になります。この状態でテーブルヘッダーのチェックボックスを選択した場合、すべての行が選択されます。

「ソート（並べ替え）」を加筆修正

• 上向き矢印アイコン（昇順）または下向き矢印アイコン（降順）を使って並び順を表示します。
• ソートが可能であることを示すためにソートアイコンを表示します。
• ソートアイコンは昇順を表す上向き矢印を強調したもの、降順を表す下向き矢印を強調したもの、およびどちらの矢印も強調されていないものがあり、ソートの状態に応じたソートアイコンを表示します。

「コントラスト要件」を加筆修正

JIS X 8341-3:2016およびWCAG 2.1, 2.2において求められるコントラスト要件は以下の通りです。ただし、デジタル庁デザインシステムでは、「サイズの大きなテキスト（24 CSS px以上のテキストまたは18 CSS px以上の太字テキスト）および文字画像」の規定は除外し、サイズの大きさに関わらず、テキストおよび文字画像は背景色に対して4.5:1以上のコントラスト比を確保しています。

「文脈に応じてautocompleteを使用する」を加筆修正

年月日の各フィールドに適切なautocomplete属性を指定することで、ブラウザの自動入力機能に対応できます。日付に関連するautocompleteの値は以下のとおりです。 フォームの入力操作は、操作そのものの煩雑さだけでなく入力内容の検討もあり、ユーザーに一定の負担がかかるものとなります。ブラウザの自動入力機能（オートフィル）を用いることで負担の軽減が期待できるため、対応するautocomplete属性を指定するようにしましょう。日付ピッカーに関連するautocompleteの値は以下のとおりです。

「文脈に応じてautocompleteを使用する」に参考情報を追加

「無効ボタン（disabled）はタブフォーカスでアクセスできない」を加筆修正

HTMLのdisabledコンテンツ属性が指定されたボタンやフォームコントロールは、スクリーンリーダーで「無効」「使用不能」などと読み上げられるものの、キーボード操作のタブフォーカスではアクセスできません。そのため、ロービジョンのユーザーがスクリーンリーダーとキーボード操作を併用している際など、無効ボタンの位置を正確に把握することができない場合があるという、アクセシビリティ上の問題があります。また無効ボタンには、ユーザーからは見えているのになぜ押せないのかが分からないというように、ユーザビリティ上の問題もあります。