From a70a97fabf76e892d979ccd7424f7d1d50368e15 Mon Sep 17 00:00:00 2001 From: Shimada Takayuki Date: Thu, 10 Aug 2023 09:25:09 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=20=E3=83=91?= =?UTF-8?q?=E3=82=BF=E3=83=BC=E3=83=B3=E3=81=AE=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 --- content/patterns/button/button-pattern.html | 95 +++++++++++---------- 1 file changed, 48 insertions(+), 47 deletions(-) diff --git a/content/patterns/button/button-pattern.html b/content/patterns/button/button-pattern.html index a4716b3d..5a1e28cf 100644 --- a/content/patterns/button/button-pattern.html +++ b/content/patterns/button/button-pattern.html @@ -1,9 +1,9 @@ - + - Button Pattern + ボタン パターン @@ -14,72 +14,73 @@
-

Button Pattern

+

ボタン パターン

+
-

About This Pattern

+

このパターンについて

- A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. - A common convention for informing users that a button launches a dialog is to append "…" (ellipsis) to the button label, e.g., "Save as…". + ボタンは、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などのアクションやイベントのトリガーを可能にするウィジェットです。 + ボタンがダイアログを起動することをユーザーに知らせるための一般的な慣例は、ボタンラベルに "…"（省略記号）を付加することです。例： "名前を付けて保存…"

-

In addition to the ordinary button widget, WAI-ARIA supports 2 other types of buttons:

+

通常のボタンウィジェットに加えて、WAI-ARIAは2種類のボタンをサポートしています：

  • - Toggle button: A two-state button that can be either off (not pressed) or on (pressed). - To tell assistive technologies that a button is a toggle button, specify a value for the attribute aria-pressed. - For example, a button labelled mute in an audio player could indicate that sound is muted by setting the pressed state true. - Important: it is critical the label on a toggle does not change when its state changes. - In this example, when the pressed state is true, the label remains "Mute" so a screen reader would say something like "Mute toggle button pressed". - Alternatively, if the design were to call for the button label to change from "Mute" to "Unmute," the aria-pressed attribute would not be needed. + トグルボタン：オフ（押されていない状態）とオン（押された状態）の2つの状態を持つボタン。 + ボタンがトグルボタンであることを支援技術に伝えるには、aria-pressed属性に値を指定します。 + 例えば、オーディオプレーヤーのミュートというラベルのボタンは、押された状態をtrueに設定することで、音がミュートされていることを示すことができます。 + 重要：トグルボタンのラベルは、その状態が変化しても変化しないことが重要です。 + この例では、押された状態がtrueのとき、ラベルは "ミュート" のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています"のように言うでしょう。 + そうではなく、ボタンのラベルが "ミュート" から "ミュート解除" に変わるようなデザインであれば、aria-pressed属性は必要ありません。
    • -
  • Menu button: as described in the menu button pattern, a button is revealed to assistive technologies as a menu button if it has the property aria-haspopup set to either menu or true.
    • +
  • メニューボタン：メニューボタン パターンで説明されているように、ボタンは、プロパティaria-haspopupがmenuかtrueに設定されていれば、メニューボタンとして支援技術に公開されます。
-

Note

+

ノート

- The types of actions performed by buttons are distinctly different from the function of a link (see link pattern). - It is important that both the appearance and role of a widget match the function it provides. - Nevertheless, elements occasionally have the visual style of a link but perform the action of a button. - In such cases, giving the element role button helps assistive technology users understand the function of the element. - However, a better solution is to adjust the visual design so it matches the function and ARIA role. + ボタンによって実行されるアクションのタイプは、リンクの機能（リンクパターンを参照）とは明確に異なる。 + ウィジェットの外観と役割は、それが提供する機能と一致することが重要です。 + それにもかかわらず、要素がリンクの視覚的なスタイルを持ちながら、ボタンのアクションを実行することがあります。 + このような場合、要素にbuttonの役割を与えることは、支援技術ユーザーが要素の機能を理解するのに役立ちます。 + しかし、より良い解決策は、機能とARIAロールが一致するように視覚デザインを調整することです。

-

Examples

+

例

    -
  • Button Examples: Examples of clickable HTML div and span elements made into accessible command and toggle buttons.
    • +
  • ボタンの例：クリック可能なHTMLのdivとspan要素をアクセシブルなコマンドボタンとトグルボタンにした例。
  • - Button Examples (IDL): Examples of clickable HTML div and span elements made into accessible command and toggle buttons. - This example uses the IDL Interface. + ボタンの例（IDL）：クリック可能なHTMLのdivとspan要素をアクセシブルなコマンドとトグルボタンにした例。 + この例ではIDLインターフェイスを用いています。
-

Keyboard Interaction

-

When the button has focus:

+

キーボード操作

+

ボタンにフォーカスがある場合：

    -
  • Space: Activates the button.
    • -
  • Enter: Activates the button.
    • +
  • Space：ボタンをアクティブにします。
    • +
  • Enter：ボタンをアクティブにします。
  • - Following button activation, focus is set depending on the type of action the button performs. For example: + ボタンをアクティブにした後、ボタンが実行するアクションのタイプに応じてフォーカスが設定されます。例えば：
    • - If activating the button opens a dialog, the focus moves inside the dialog. - (see dialog pattern) + ボタンを押すとダイアログが開く場合、フォーカスはダイアログ内に移動します。 + （ダイアログ パターンを参照）
    • - If activating the button closes a dialog, focus typically returns to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element. - For example, activating a cancel button in a dialog returns focus to the button that opened the dialog. - However, if the dialog were confirming the action of deleting the page from which it was opened, the focus would logically move to a new context. + ボタンをクリックするとダイアログが閉じる場合、ダイアログのコンテキストで実行された機能が論理的に別の要素につながらない限り、フォーカスは通常、ダイアログを開いたボタンに戻ります。 + 例えば、ダイアログのキャンセルボタンを押すと、フォーカスはダイアログを開いたボタンに戻ります。 + しかし、ダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。
      • -
    • If activating the button does not dismiss the current context, then focus typically remains on the button after activation, e.g., an Apply or Recalculate button.
      • -
    • If the button action indicates a context change, such as move to next step in a wizard or add another search criteria, then it is often appropriate to move focus to the starting point for that action.
      • +
    • ボタンをクリックしても現在のコンテキストがなくならない場合、フォーカスは通常、クリック後もボタン上に残ります（例：適用ボタンや再計算ボタン）。
      • +
    • ボタンのアクションが、ウィザードの次のステップへ移動したり、別の検索条件を追加したりするような、コンテキストの変更を示している場合、そのアクションの開始点にフォーカスを移動させることが適切であることが多いでしょう。
    • - If the button is activated with a shortcut key, the focus usually remains in the context from which the shortcut key was activated. - For example, if Alt + U were assigned to an "Up" button that moves the currently focused item in a list one position higher in the list, pressing Alt + U when the focus is in the list would not move the focus from the list. + ボタンがショートカットキーで起動された場合、フォーカスは通常、ショートカットキーが起動されたコンテキストに残ります。 + 例えば、Alt + Uがリストの現在フォーカスのある項目を1つ上の位置に移動させる "Up" ボタンに割り当てられている場合、フォーカスがリストにあるときにAlt + Uを押しても、フォーカスはリストから移動しません。
    • @@ -87,19 +88,19 @@

    Keyboard Interaction

-

WAI-ARIA Roles, States, and Properties

+

WAI-ARIAの役割、状態、およびプロパティ

    -
  • The button has role of button.
    • +
  • ボタンはbuttonの役割を持っています。
  • - The button has an accessible label. - By default, the accessible name is computed from any text content inside the button element. - However, it can also be provided with aria-labelledby or aria-label. + buttonはアクセス可能なラベルを持ちます。 + デフォルトでは、アクセシブルな名前はボタン要素内のテキスト内容から計算されます。 + しかし、aria-labelledbyやaria-labelで指定することもできます。
    • -
  • If a description of the button's function is present, the button element has aria-describedby set to the ID of the element containing the description.
    • -
  • When the action associated with a button is unavailable, the button has aria-disabled set to true.
    • +
  • ボタンの機能の説明が存在する場合、ボタン要素のaria-describedbyには、説明を含む要素のIDが設定されます。
    • +
  • ボタンに関連するアクションが利用できない場合、ボタンはaria-disabledにtrueが設定されます。
  • - If the button is a toggle button, it has an aria-pressed state. - When the button is toggled on, the value of this state is true, and when toggled off, the state is false. + ボタンがトグルボタンの場合、aria-pressed状態を持ちます。 + ボタンがオンに切り替えられると、この状態の値はtrueになり、オフに切り替えられると、この状態はfalseになります。
From b09ebfb5503cbfccd12015d5d2b6774a3572944b Mon Sep 17 00:00:00 2001 From: Shimada Takayuki Date: Thu, 17 Aug 2023 06:54:29 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?= =?UTF-8?q?=E4=BE=8B=E3=81=AE=E6=97=A5=E6=9C=AC=E8=AA=9E=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/index/index.html | 4 +- content/patterns/button/examples/button.html | 91 ++++++++++---------- 2 files changed, 48 insertions(+), 47 deletions(-) diff --git a/content/index/index.html b/content/index/index.html index e9f3c4d4..bc5bdcc3 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -64,7 +64,7 @@

Examples by Role

@@ -766,7 +766,7 @@

Examples By Properties and States

diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html index 15b9ea49..1b719c16 100644 --- a/content/patterns/button/examples/button.html +++ b/content/patterns/button/examples/button.html @@ -1,9 +1,9 @@ - + - Button Examples + ボタンの例 @@ -20,45 +20,46 @@
-

Button Examples

+

ボタンの例

+
-

About This Example

-

The following command and toggle button examples demonstrate the Button Pattern.

-

Similar examples include:

+

この例について

+

以下のコマンドとトグルボタンの例は、ボタンパターンを示しています。

+

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

-

Example

+

例

- +
-

This Print action button uses a div element.

-
Print Page
+

この印刷アクションボタンは、div要素を使用しています。

+
ページを印刷
-

This Mute toggle button uses an a element.

+

このミュートトグルボタンは、a要素を使用しています。

- Mute + ミュート @@ -81,42 +82,42 @@

Example

- +
-

Keyboard Support

+

キーボードサポート

- - + + - + - +
KeyFunctionキー機能
EnterActivates the button.ボタンを作動させる。
SpaceActivates the button.ボタンを作動させる。
-

Role, Property, State, and Tabindex Attributes

+

役割、プロパティ、状態、およびタブインデックス属性

- - - - + + + + @@ -126,8 +127,8 @@

Role, Property, State, and Tabindex Attributes

@@ -139,8 +140,8 @@

Role, Property, State, and Tabindex Attributes

@@ -150,8 +151,8 @@

Role, Property, State, and Tabindex Attributes

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

Role, Property, State, and Tabindex Attributes

@@ -171,7 +172,7 @@

Role, Property, State, and Tabindex Attributes

-

JavaScript and CSS Source Code

+

JavaScriptとCSSのソースコード

  • @@ -186,10 +187,10 @@

    JavaScript and CSS Source Code

-

HTML Source Code

- +

HTMLソースコード

+
- +
RoleAttributeElementUsage役割属性要素使用法
div, a
    -
  • Identifies the element as a button widget.
    • -
  • Accessible name for the button is defined by the text content of the element.
    • +
  • 要素をbuttonウィジェットとして識別します。
    • +
  • ボタンのアクセシブルな名前は、要素のテキストコンテンツによって定義されます。
div, a
    -
  • Includes the element in the tab sequence.
    • -
  • Needed on the a element because it does not have a href attribute.
    • +
  • 要素をタブ順序に含めます。
    • +
  • href属性を持っていないa要素に必要です。
a
    -
  • Identifies the button as a toggle button.
    • -
  • Indicates the toggle button is not pressed.
    • +
  • ボタンをトグルボタンとして識別します。
    • +
  • トグルボタンが押されていないことを示します。
a
    -
  • Identifies the button as a toggle button.
    • -
  • Indicates the toggle button is pressed.
    • +
  • ボタンをトグルボタンとして識別します。
    • +
  • トグルボタンが押されていることを示します。