本文へ移動

メニュー

お知らせドキュメント

  • コンポーネント:カード
    • 「詳しく見る」というラベルを持つ作例から、タイトルのリンクを削除
    • 一部の作例で見られたスクリーンショットと説明文の内容の不一致を修正
  • コンポーネント:テーブル/データテーブル
    • 「アクセシビリティ」ページを追加
    • コンポーネント要素の名称である「テールアイコン」を「ソートアイコン」に変更
    • 「サイズ」を加筆修正
      テーブルの用途に応じて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を使用する」に参考情報を追加
  • 基本デザイン:タイポグラフィ
    • Displayテキストスタイルに太さレベルBを追加
  • リソース
    • デジタル庁デザインシステムの特定バージョン取得に関する説明と問い合わせフォームへのリンクを追加
  • コンポーネント:緊急時バナー
    • バナータイトルの先頭に「【緊急】」の文字列を追加
    • クリッカブルエリアをバナー全体ではなくアクションボタンのみに変更
    • アクションボタンの最小幅を利用可能な表示幅の50%に変更
  • コンポーネント:ドロワー
    • 仕様の内容を、モーダル展開に限定した文章として再構成
  • ガイダンス:アクセシビリティ
    • 参照ガイドラインのリンク集を加筆および構成を調整
  • 基本デザイン:タイポグラフィ
    • テキストスタイルの追加漏れを修正
  • 基本デザイン:カラー
    • グレーのカラー定義名を「Grey」から「Gray」に変更
  • 基本デザイン:タイポグラフィ
    • 太さレベルにv2系統では使用していないMediumが含まれていたのを削除
    • 行ボックスの高さ(行高)の定義に175%を追加
    • テキストスタイル名の構成において行高を%表記の値のまま記述するように変更
    • 行高175%のStandardテキストスタイルを追加
    • Standardテキストスタイルの文字間隔をフォントサイズの大小に応じて調整するように変更
  • コンポーネント:ボタン
    • 「無効ボタン(disabled)はタブフォーカスでアクセスできない」を加筆修正

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

  • 基本デザイン:タイポグラフィ
    • テキストブロックのグリフ幅について、考え方を加筆修正
  • 基本デザイン:レイアウト
    • カラムおよびガターについての説明を加筆修正
  • 基本デザイン:リンクテキスト
    • リンクテキストの下線の位置と範囲を調整
  • コンポーネント:ボタン
    • 「ボタン配置の考え方」を加筆し、概要を再構成
  • 基本デザイン:タイポグラフィ
    • Denseテキストスタイルにおける太さレベルの説明の誤りを修正
  • コンポーネント:ボタン
    • 参考情報のリンク先を変更
  • 基本デザイン:タイポグラフィ
    • Windows環境での閲覧を考慮し、CSSの記述例からsystem-uiを削除
  • リソース
    • 初版公開
  • ウェブアクセシビリティ
    • ウェブアクセシビリティ方針を策定し公開。また公開時点でのウェブアクセシビリティ検証結果を公開