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
menuortrue.
+ - メニューボタン： メニューボタン パターン で説明されているように、ボタンが支援技術にメニューボタンとして認識されるためには、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
divandspanelements made into accessible command and toggle buttons.
+ - ボタンの例 ：クリック可能なHTMLの
div要素及びspan要素を使って、アクセシブルなコマンドボタン及びトグルボタンを作った例。 -
- Button Examples (IDL): Examples of clickable HTML
divandspanelements 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
buttonhas 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 isfalse. + ボタンがトグルボタンの場合、ボタンは aria-pressed の状態を持ちます。 + ボタンがオンに切り替えられると、この状態の値はtrueになり、オフに切り替えられると、この状態の値はfalseになります。
Button Examples
+ボタンの例
+About This Example
-The following command and toggle button examples demonstrate the Button Pattern.
-Similar examples include:
+この例について
+以下のコマンドとトグルボタンの例は、ボタンパターン のデモンストレーションです。
+類似の例には以下のものがあります：
-
-
- Navigation Menu Button: A button that opens a menu of items that behave as links. +
- ナビゲーションメニューボタン ：リンクとして動作する、項目のメニューを開くボタン。
-
- Action Menu Button Example Using
element.focus(): - A button that opens a menu of actions or commands where focus in the menu is managed usingelement.focus(). +element.focus()を使用したアクションメニューボタンの例 ： + メニュー内のフォーカスがelement.focus()を使用して管理される、アクション又はコマンドのメニューを開くボタン。 -
- Action Menu Button Example Using
aria-activedescendant: - A button that opens a menu of actions or commands where focus in the menu is managed usingaria-activedescendant. +aria-activedescendantを使用したアクションメニューボタンの例 ： + メニュー内のフォーカスがaria-activedescendantを使用して管理される、アクション又はコマンドのメニューを開くボタン。
-
-
+
Example
+例
-
-
+
This Print
action button uses a div element.
Print Page
+ この印刷
アクションボタンは、div 要素を使用しています。
ページを印刷
- This Mute
toggle button uses an a element.
このミュート
トグルボタンは、a 要素を使用しています。
Example
Keyboard Support
+キーボードサポート
| Key | -Function | +キー | +機能 |
|---|---|---|---|
| Enter | -Activates the button. | +ボタンを作動させる。 | |
| Space | -Activates the button. | +ボタンを作動させる。 |
Role, Property, State, and Tabindex Attributes
+ロール、プロパティ、ステート、及び tabindex 属性
| Role | -Attribute | -Element | -Usage | +ロール | +属性 | +要素 | +使用法 | div, a |
|
@@ -139,8 +140,8 @@ div, a |
|
@@ -150,8 +151,8 @@ a |
|
@@ -161,8 +162,8 @@ a |
|
@@ -171,7 +172,7 @@
|---|