From f35e9242cf3d216be225872aff3c47bfa8bc26c9 Mon Sep 17 00:00:00 2001 From: Shimada Takayuki Date: Sun, 29 Oct 2023 17:56:39 +0900 Subject: [PATCH] =?UTF-8?q?Switch=20Pattern=E3=82=92=E6=97=A5=E6=9C=AC?= =?UTF-8?q?=E8=AA=9E=E5=8C=96=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../switch/examples/switch-button.html | 115 +++++++++--------- .../switch/examples/switch-checkbox.html | 109 +++++++++-------- content/patterns/switch/examples/switch.html | 106 ++++++++-------- content/patterns/switch/switch-pattern.html | 73 +++++------ 4 files changed, 203 insertions(+), 200 deletions(-) diff --git a/content/patterns/switch/examples/switch-button.html b/content/patterns/switch/examples/switch-button.html index b8d05712..4d8340f9 100644 --- a/content/patterns/switch/examples/switch-button.html +++ b/content/patterns/switch/examples/switch-button.html @@ -1,9 +1,9 @@ - + - Switch Example Using HTML Button + HTMLボタンを使用したスイッチの例 @@ -25,31 +25,32 @@
-

Switch Example Using HTML Button

+

HTMLボタンを使用したスイッチの例

+
-

About This Example

+

この例について

- This example illustrates implementing the Switch Pattern with an HTML button as a switch element and using an SVG element to provide graphical rendering of switch states. - It also demonstrates using the group role to present multiple switches in a labeled group. + この例は、HTMLの button をスイッチ要素として使用し、SVG 要素を使用してスイッチのステートのグラフィカルなレンダリングを提供するスイッチ パターンの実装を示しています。 + また、ラベル付きのグループ内で複数のスイッチを表示するための group ロールの使用も示しています。

-

Similar examples include:

+

類似の例には以下があります：

-

Example

+

例

- +
-

Environmental Controls

+

環境コントロール

- +
-

Accessibility Features

+

アクセシビリティ機能

    -
  • To help assistive technology users understand that the Environmental Controls are a group of two switches, the switches are wrapped in a group labeled by the heading that labels the set of switches.
    • +
  • 環境コントロールが2つのスイッチのグループであることを支援技術のユーザーに理解してもらうために、スイッチはそのセットのスイッチをラベル付けする見出しでラベル付けされたgroupにラップされています。
  • - To make understanding the state of the switch easier for users with visual or cognitive disabilities, a text equivalent of the state (on or off) is displayed adjacent to the graphical state indicator. - CSS attribute selectors ensure the label displayed is synchronized with the value of the aria-checked attribute.
    - NOTE: To prevent redundant announcement of the state by screen readers, the text indicators of state are hidden from assistive technologies with aria-hidden. + 視覚や認知障害のあるユーザーがスイッチの状態を理解しやすくするため、状態(onまたはoff)のテキスト相当がグラフィカルな状態指示器の隣に表示されます。 + CSS属性セレクタは、表示されるラベルがaria-checked属性の値と同期していることを保証します。
    + 注:スクリーンリーダーによる状態の冗長なアナウンスを防ぐため、状態のテキスト指示器はaria-hiddenで支援技術から隠されています。
  • - Spacing, stroke widths, and fill are important to ensure the graphical states will be visible and discernible to people with visual impairments, including when browser or operating system high contrast settings are enabled: + スペーシング、ストロークの幅、及び塗りつぶしは、グラフィカルな状態が視覚障害のある人々にも見えて識別できるようにするため重要です。これには、ブラウザーやオペレーティングシステムのハイコントラスト設定が有効になっている場合も含まれます：
      -
    • To make the graphical representation of the state of a switch readily perceivable, two pixel stroke width is used for the switch state container and a solid color is used to fill the rectangles indicating the on and off states.
      • -
    • To ensure users can perceive the difference between the container and the rectangles used to indicate the state of the switch, there are two pixels of space between the container border and the rectangles.
      • +
    • スイッチの状態のグラフィカルな表現を容易に知覚できるようにするため、スイッチ状態のコンテナには2ピクセルのストローク幅が使用され、on及びoffの状態を示す長方形は固定色で塗りつぶされます。
      • +
    • コンテナとスイッチの状態を示すために使用される長方形との違いをユーザーが知覚できるようにするため、コンテナの境界と長方形の間には2ピクセルのスペースがあります。
  • - To enhance perceivability when operating the switches, visual keyboard focus and hover are styled using the CSS :hover and :focus pseudo-classes: + スイッチの操作時の知覚性を向上させるため、CSSの:hoverおよび:focus疑似クラスを使用して、視覚的なキーボードフォーカスとホバーがスタイル設定されています：
      -
    • To make it easier to perceive focus and the relationship between a label and its associated switch, focus creates a border around both the switch and the label and also changes the background color.
      • -
    • To make it easier to perceive that clicking either the label or switch will activate the switch, the hover indicator is the same as the focus indicator.
      • -
    • To help people with visual impairments identify the switch as an interactive element, the cursor is changed to a pointer when hovering over the switch.
      • +
    • フォーカスとラベルとそれに関連するスイッチとの関係を容易に知覚できるようにするため、フォーカスはスイッチとラベルの両方を囲む境界線を作成し、背景色も変更します。
      • +
    • ラベルまたはスイッチをクリックするとスイッチがアクティブになることを容易に知覚できるようにするため、ホバーインジケータはフォーカスインジケータと同じです。
      • +
    • 視覚障害のある人々がスイッチを対話的な要素として識別できるようにするため、スイッチの上にホバーするとカーソルがポインタに変わります。
  • - To ensure the SVG graphics have sufficient contrast with the background when high contrast settings invert colors, the CSS currentcolor value for the stroke and fill properties is used to synchronize the colors with text content. - If specific colors were used to specify the stroke and fill properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background. - The fill-opacity of the container rect is set to zero for the background color of the page to provide the contrasting color to the stroke and fill colors.
    - NOTE: The SVG elements need to set the CSS forced-color-adjust property to auto for some browsers to support the currentcolor value. + ハイコントラスト設定が色を反転させたときにSVGグラフィックスが背景と十分なコントラストを持つようにするため、テキストコンテンツの色と同期させるためにstrokeおよびfillプロパティのCSScurrentcolor値が使用されます。 + stroke及びfillプロパティに特定の色を使用して指定すると、これらの要素の色はハイコントラストモードでも変わらないため、それらと背景との間のコントラストが不足する可能性があります。さらに、その色がハイコントラストモードの背景と一致する場合、それらを見えなくする可能性があります。 + ページの背景色がstroke及びfillの色とのコントラストカラーを提供するため、コンテナのrectのfill-opacityはゼロに設定されています。
    + 注: 一部のブラウザでcurrentcolor値をサポートするためには、SVG要素はCSSforced-color-adjustプロパティをautoに設定する必要があります。
-

Keyboard Support

+

キーボードサポート

- - + + @@ -121,7 +122,7 @@

Keyboard Support

@@ -129,7 +130,7 @@

Keyboard Support

@@ -138,14 +139,14 @@

Keyboard Support

-

Role, Property, State, and Tabindex Attributes

+

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

KeyFunctionキー機能
Tab
    -
  • Moves keyboard focus to the switch.
    • +
  • switchへのキーボードフォーカスを移動します。
Space, Enter
    -
  • Toggle switch between on and off.
    • +
  • スイッチをオンとオフの間で切り替えます。
- - - - + + + + @@ -153,7 +154,7 @@

Role, Property, State, and Tabindex Attributes

- + @@ -161,8 +162,8 @@

Role, Property, State, and Tabindex Attributes

@@ -172,19 +173,19 @@

Role, Property, State, and Tabindex Attributes

- + @@ -192,27 +193,27 @@

Role, Property, State, and Tabindex Attributes

- + - + - +
RoleAttributeElementUsageロール属性要素使用方法
switch buttonIdentifies the button element as a switch.button要素をswitchとして識別します。
button
    -
  • Indicates the switch is off.
    • -
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
    • +
  • switchがオフであることを示します。
    • +
  • CSS属性セレクタ（例：[aria-checked="false"]）は、aria-checked属性の値と視覚的な状態を同期させるために使用されます。
button
    -
  • Indicates the switch is on.
    • -
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
    • +
  • switchがオンであることを示します。
    • +
  • CSS属性セレクタ（例：[aria-checked="true"]）は、aria-checked属性の値と視覚的な状態を同期させるために使用されます。
aria-hidden="true"span.on and span.offspan.on および span.off
    -
  • Removes the strings on and off that appear to the right of the switch from the accessible name of the switch.
    • -
  • These strings are included only for enhancing visual comprehension of the state; element states are not permitted in accessible names.
    • +
  • スイッチの右側に表示されるonとoffの文字列をスイッチのアクセス可能な名前から除去します。
    • +
  • これらの文字列は、状態の視覚的な理解を強化するためだけに含まれています。要素の状態はアクセス可能な名前に許可されていません。
h3Provides a grouping label for the group of switches.スイッチのグループのラベルを提供します。
group divIdentifies the div element as a group container for the switches.div要素をスイッチのgroupコンテナとして識別します。
aria-labelledby divReferences the h3 element to define the accessible name for the group of switches.h3要素を参照して、スイッチのグループのアクセス可能な名前を定義します。
-

JavaScript and CSS Source Code

- +

JavaScriptとCSSのソースコード

+
  • CSS: @@ -226,10 +227,10 @@

    JavaScript and CSS Source Code

-

HTML Source Code

- +

HTMLソースコード

+
- +