From d805dcefccff54d46e7f7ff586b873c1af3653af Mon Sep 17 00:00:00 2001 From: p_craft Date: Sun, 21 Sep 2025 10:58:27 +0900 Subject: [PATCH] =?UTF-8?q?feat(radio):=20=E3=83=A9=E3=82=B8=E3=82=AA?= =?UTF-8?q?=E3=83=BB=E3=83=91=E3=82=BF=E3=83=BC=E3=83=B3=E3=82=92=E6=97=A5?= =?UTF-8?q?=E6=9C=AC=E8=AA=9E=E3=81=AB=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../coverage-and-quality-report.html | 104 +-- .../coverage-and-quality/prop-coverage.csv | 12 +- .../coverage-and-quality/role-coverage.csv | 14 +- content/index/index.html | 802 +++++++++--------- .../examples/radio-activedescendant.html | 171 ++-- .../patterns/radio/examples/radio-rating.html | 48 +- content/patterns/radio/examples/radio.html | 159 ++-- .../patterns/radio/radio-group-pattern.html | 115 +-- 8 files changed, 708 insertions(+), 717 deletions(-) diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 95f9be26..ca59a873 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -54,8 +54,8 @@

About These Reports

diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html index bc88302e..b08c627a 100644 --- a/content/patterns/radio/examples/radio-activedescendant.html +++ b/content/patterns/radio/examples/radio-activedescendant.html @@ -3,7 +3,7 @@ - Radio Group Example Using aria-activedescendant + <code>aria-activedescendant</code> を使用したラジオグループの例 @@ -25,90 +25,90 @@
-

Radio Group Example Using aria-activedescendant

+

aria-activedescendant を使用したラジオグループの例

+
-

About This Example

+

この例について

- This example implements the features of the Radio Group Pattern for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method. - This implementation uses aria-activedescendant for informing assistive technologies which radio button has visual focus. + この例は、ピザの生地を選択するラジオグループと、配達方法を選択するラジオグループの 2 つのラジオグループに対して、ラジオグループ・パターンの機能がどのように実装されているかを示しています。 + この実装では、aria-activedescendant を使用して、どのラジオボタンが視覚的にフォーカスされているかを支援技術に通知します。

-

Similar examples include:

+

類似の例は次のとおりです。

-

Example

+

例

- +
-

Pizza Crust

+

ピザの生地

    - - - + + +
-

Pizza Delivery

+

ピザの配達

    - - - + + +
- +
-

Accessibility Features

+

アクセシビリティ機能

  • - The radio button referenced by aria-activedescendant is scrolled into view when it is not visible in the graphical rendering. - This can occur under many conditions, but is most common when people with visual impairments use a browser's zoom feature to increase the size of content. + aria-activedescendant によって参照されるラジオボタンは、グラフィカルなレンダリングで表示されていない場合にスクロールして表示されます。 + これは多くの状況で発生しますが、視覚障害のある利用者がブラウザのズーム機能を使用してコンテンツのサイズを拡大する場合に最も一般的です。
    • -
  • Uses CSS attribute selectors for synchronizing aria-checked state with the visual state indicator.
    • +
  • CSS 属性セレクタを使用して、aria-checked 状態を視覚的な状態インジケータと同期します。
  • - Uses CSS :hover and :focus pseudo-classes for styling visual keyboard focus and hover. + 視覚的なキーボード・フォーカスとホバーのスタイル設定には、CSS の :hover 及び :focus 擬似クラスを使用します。
      -
    • The focus indicator encompasses both the radio button and label, making it easier to perceive which option is being chosen.
      • -
    • Hover changes background of both the radio button and label, making it easier to perceive that clicking either the label or button will activate the radio button.
      • -
    • The cursor is changed to a pointer when hovering over the radio button to help people with visual impairments identify it as an interactive element.
      • +
    • フォーカス・インジケータはラジオボタンとラベルの両方を囲み、どのオプションが選択されているかを認識しやすくします。
      • +
    • ホバーするとラジオボタンとラベルの両方の背景が変化し、ラベル又はボタンのいずれかをクリックするとラジオボタンがアクティブになることを認識しやすくします。
      • +
    • 視覚障害のある利用者がインタラクティブな要素として識別できるように、ラジオボタンにカーソルを合わせるとカーソルがポインタに変わります。
  • - Because transparent borders are visible on some systems with high contrast enabled, only the focused element has a visible border. - When focusable elements are not focused, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus. + ハイコントラストが有効になっている一部のシステムでは透明な境界線が表示されるため、フォーカスされた要素のみが可視境界線を持ちます。 + フォーカス可能な要素がフォーカスされていない場合、それらは幅 0 の境界線と、フォーカスを示すために使用される境界線と同じ幅の追加のパディングを持ちます。
  • - To ensure the inline SVG radio button graphics in the CSS file have sufficient contrast with the background when high contrast settings change the color of text content, CSS forced-color-adjust is set to auto on the svg graphics. - This causes the colors of the stroke and fill of the circle elements to be overridden by the high contrast color setting. - To make the background of the circle elements match the high contrast background color, the fill-opacity attribute of the outer circle is set to zero and the stroke-opacity attribute of the inner circle is set to zero. - If forced-color-adjust were not used to override the colors specified for the stroke and fill properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the radio circle elements and the background or even make them invisible if their color matched the high contrast mode background.
    - Note: The explicit setting of forced-color-adjust is necessary because some browsers do not use auto as the default value for SVG graphics. + CSS ファイル内のインライン SVG ラジオボタン・グラフィックが、ハイコントラスト設定でテキスト・コンテンツの色が変更されたときに背景と十分なコントラストを持つことを保証するために、svg グラフィックの forced-color-adjust は auto に設定されます。 + これにより、円要素の stroke 及び fill の色がハイコントラストの色設定によって上書きされます。 + 外側の circle の背景をハイコントラストの背景色と一致させるために、外側の circle の fill-opacity 属性はゼロに設定され、内側の circle の stroke-opacity 属性はゼロに設定されます。 + forced-color-adjust を使用して stroke 及び fill プロパティに指定された色を上書きしない場合、これらの色はハイコントラスト・モードでも同じままであり、ラジオ円要素と背景のコントラストが不十分になったり、色がハイコントラスト・モードの背景と一致するとアイコンが見えなくなったりする可能性があります。
    + 注: 一部のブラウザでは SVG グラフィックのデフォルト値として auto を使用しないため、forced-color-adjust の明示的な設定が必要です。
-

Keyboard Support

+

キーボードのサポート

- NOTE: When visual focus is on a radio button in the radio group, DOM focus remains on the radio group container and the value of aria-activedescendant on the radio group refers to the radio button that is visually indicated as focused. - Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator, not DOM focus. - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. + 注: ラジオグループ内のラジオボタンに視覚的なフォーカスがある場合、DOM フォーカスはラジオグループ・コンテナに留まり、ラジオグループの aria-activedescendant の値は、視覚的にフォーカスされているとして示されているラジオボタンを参照します。 + 以下のキーボード・コマンドの説明でフォーカスに言及している場合、それらは視覚的なフォーカス・インジケータを指しており、DOM フォーカスではありません。 + このフォーカス管理テクニックの詳細については、aria-activedescendant を使用した複合要素のフォーカス管理を参照してください。

- - + + @@ -116,38 +116,38 @@

Keyboard Support

- + - + - + @@ -156,14 +156,14 @@

Keyboard Support

-

Role, Property, State, and Tabindex Attributes

+

ロール、プロパティ、ステート、及び tabindex 属性

KeyFunctionキー機能
Tab
    -
  • Moves focus to the checked radio button in the radiogroup.
    • -
  • If a radio button is not checked, focus moves to the first radio button in the group.
    • +
  • radiogroup 内のチェックされた radio ボタンにフォーカスを移動します。
    • +
  • radio ボタンがチェックされていない場合、フォーカスはグループの最初の radio ボタンに移動します。
Spaceスペース
    -
  • If the radio button with focus is not checked, changes the state to checked.
    • -
  • Otherwise, does nothing.
    • -
  • Note: The state where a radio is not checked only occurs on page load.
    • +
  • フォーカスのある radio ボタンがチェックされていない場合、状態を checked に変更します。
    • +
  • それ以外の場合、何も行いません。
    • +
  • 注: ラジオがチェックされていない状態は、ページ・ロード時にのみ発生します。
Down arrow
Right arrow		下矢印
右矢印
    -
  • Moves focus to and checks the next radio button in the group.
    • -
  • If focus is on the last radio button, moves focus to the first radio button.
    • -
  • The state of the previously checked radio button is changed to unchecked.
    • +
  • グループ内の次の radio ボタンにフォーカスを移動し、チェックします。
    • +
  • フォーカスが最後の radio ボタンにある場合、フォーカスを最初の radio ボタンに移動します。
    • +
  • 以前にチェックされていたラジオボタンの状態はチェック解除に変更されます。
Up arrow
Left arrow		上矢印
左矢印
    -
  • Moves focus to and checks the previous radio button in the group.
    • -
  • If focus is on the first radio button, moves focus to and checks the last radio button.
    • -
  • The state of the previously checked radio button is changed to unchecked.
    • +
  • グループ内の前の radio ボタンにフォーカスを移動し、チェックします。
    • +
  • フォーカスが最初の radio ボタンにある場合、フォーカスを最後の radio ボタンに移動し、チェックします。
    • +
  • 以前にチェックされていたラジオボタンの状態はチェック解除に変更されます。
- - - - + + + + @@ -171,37 +171,36 @@

Role, Property, State, and Tabindex Attributes

- + - + - + - + @@ -212,8 +211,8 @@

Role, Property, State, and Tabindex Attributes

@@ -223,9 +222,9 @@

Role, Property, State, and Tabindex Attributes

@@ -235,9 +234,9 @@

Role, Property, State, and Tabindex Attributes

@@ -246,8 +245,8 @@

Role, Property, State, and Tabindex Attributes

-

Assistive Technology Support

-

Learn how to interpret and use assistive technology support data

+

支援技術のサポート

+

支援技術のサポート・データの解釈と使用方法を学ぶ

RoleAttributesElementUsageロール属性要素使用法
radiogroup ulIdentifies the element as a container for a group of radio buttons.要素を radio ボタンのグループのコンテナとして識別します。
aria-labelledby="[IDREF]" ulRefers to the element that contains the label of the radio group.ラジオグループのラベルを含む要素を参照します。
tabindex="0"tabindex="0" ul
    -
  • Includes the radio group in the page Tab sequence.
    • -
  • Applied to the radio group because aria--activedescendant is used to manage focus as described below.
    • +
  • ラジオグループをページの Tab 順序に含めます。
    • +
  • 以下で説明するように、フォーカスを管理するために aria--activedescendant が使用されるため、ラジオグループに適用されます。
aria-activedescendant="[IDREF]"aria-activedescendant="[IDREF]" ul
    -
  • When a radio button in the radio group is visually indicated as having keyboard focus, refers to that radio button.
    • -
  • When arrow keys are pressed, the JavaScript changes the value.
    • -
  • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the radio group element.
    • +
  • ラジオグループ内のラジオボタンが視覚的にキーボード・フォーカスを持っているとして示されている場合、そのラジオボタンを参照します。
    • +
  • 矢印キーが押されると、JavaScript が値を変更します。
    • +
  • DOM フォーカスがラジオグループ要素に留まっている間、アプリケーションがどの要素をフォーカスしていると見なしているかを支援技術が知ることを可能にします。
  • - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. + このフォーカス管理テクニックの詳細については、aria-activedescendant を使用した複合要素のフォーカス管理を参照してください。
li
    -
  • Identifies the element as an ARIA radio button.
    • -
  • The accessible name is computed from the child text content of the element.
    • +
  • 要素を ARIA radio ボタンとして識別します。
    • +
  • アクセシブルな名前は要素の子テキスト・コンテンツから計算されます。
li
    -
  • Identifies radio buttons which are not checked.
    • -
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
    • -
  • The CSS ::before pseudo-element is used to indicate visual state of unchecked radio buttons to support high contrast settings in operating systems and browsers.
    • +
  • チェックされていない radio ボタンを識別します。
    • +
  • CSS 属性セレクタ (例: [aria-checked="false"]) は、視覚的な状態を aria-checked 属性の値と同期するために使用されます。
    • +
  • CSS の ::before 擬似要素は、オペレーティング・システム及びブラウザのハイコントラスト設定をサポートするために、チェックされていないラジオボタンの視覚的な状態を示すために使用されます。
li
    -
  • Identifies the radio button which is checked.
    • -
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
    • -
  • The CSS ::before pseudo-element is used to indicate visual state of checked radio buttons to support high contrast settings in operating systems and browsers.
    • +
  • チェックされている radio ボタンを識別します。
    • +
  • CSS 属性セレクタ (例: [aria-checked="true"]) は、視覚的な状態を aria-checked 属性の値と同期するために使用されます。
    • +
  • CSS の ::before 擬似要素は、オペレーティング・システム及びブラウザのハイコントラスト設定をサポートするために、チェックされているラジオボタンの視覚的な状態を示すために使用されます。