From 582c7ce090ff57f1132cb3d3ae7075a328cb5391 Mon Sep 17 00:00:00 2001 From: Shimada Takayuki Date: Sun, 29 Oct 2023 16:58:03 +0900 Subject: [PATCH 01/31] =?UTF-8?q?=E3=83=A9=E3=82=B8=E3=82=AA=E3=82=B0?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=97=E3=82=92=E6=9C=80=E6=96=B0=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../examples/radio-activedescendant.html | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html index 5c87957c..6e327697 100644 --- a/content/patterns/radio/examples/radio-activedescendant.html +++ b/content/patterns/radio/examples/radio-activedescendant.html @@ -244,6 +244,17 @@

Role, Property, State, and Tabindex Attributes

+
+

Assistive Technology Support

+ +
+

JavaScript and CSS Source Code

-
-

Assistive Technology Support

- -
- From fcb5d9dafc1990f85bb11374186413ae16cf4c4c Mon Sep 17 00:00:00 2001 From: Shimada Takayuki Date: Sun, 29 Oct 2023 17:07:49 +0900 Subject: [PATCH 02/31] =?UTF-8?q?=E3=83=A9=E3=82=B8=E3=82=AA=E3=82=B0?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=97=E3=82=92=E6=97=A5=E6=9C=AC=E8=AA=9E?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../examples/radio-activedescendant.html | 168 ++++++++---------- .../patterns/radio/examples/radio-rating.html | 153 ++++++++-------- content/patterns/radio/examples/radio.html | 158 ++++++++-------- .../patterns/radio/radio-group-pattern.html | 117 ++++++------ 4 files changed, 291 insertions(+), 305 deletions(-) diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html index 6e327697..b6bd06da 100644 --- a/content/patterns/radio/examples/radio-activedescendant.html +++ b/content/patterns/radio/examples/radio-activedescendant.html @@ -1,9 +1,9 @@ - + - Radio Group Example Using aria-activedescendant + aria-activedescendantを使用したラジオグループの例 @@ -25,89 +25,89 @@
-

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.
    • +
  • aria-checkedステートと視覚的なステートインジケータを同期するためにCSS属性セレクタを使用。
  • - 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ラジオボタングラフィックが、高コントラスト設定がテキストコンテンツの色を変更するときに背景と十分なコントラストを持つようにするため、CSSのforced-color-adjustはsvgグラフィック上で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を使用したコンポジットのフォーカス管理を参照してください。

- - + + @@ -115,8 +115,8 @@

Keyboard Support

@@ -124,29 +124,29 @@

Keyboard Support

- + - + @@ -155,14 +155,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ボタンを選択します。
    • +
  • 以前に選択されていたラジオボタンの状態は選択解除に変更されます。
- - - - + + + + @@ -170,38 +170,22 @@

Role, Property, State, and Tabindex Attributes

- + - + - + - - - - - - @@ -211,8 +195,8 @@

Role, Property, State, and Tabindex Attributes

@@ -222,9 +206,9 @@

Role, Property, State, and Tabindex Attributes

@@ -234,9 +218,9 @@

Role, Property, State, and Tabindex Attributes

@@ -245,7 +229,7 @@

Role, Property, State, and Tabindex Attributes

-

Assistive Technology Support

+

支援技術のサポート

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.
    • -
-
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.
    • -
  • - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. -
    • +
  • ラジオグループをページのTabシーケンスに含めます。
    • +
  • 以下で説明されているように、aria-activedescendant属性と組み合わせて使用することで、フォーカスを移動しながらTabキーを使用してページのタブシーケンスに含めることができます。
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疑似要素は、オペレーティングシステムやブラウザの高コントラスト設定で選択されているラジオボタンの視覚的な状態を示すために使用されます。