Skip to content

Commit

Permalink
ボタン パターンの日本語化
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsmd
tsmd committed Aug 10, 2023
1 parent b2ba4eb commit a70a97f
Showing 1 changed file with 48 additions and 47 deletions.
95 changes: 48 additions & 47 deletions content/patterns/button/button-pattern.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Button Pattern</title>
<title>ボタン パターン</title>

<!-- Core JS and CSS shared by all patterns -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
Expand All @@ -14,92 +14,93 @@
</head>
<body>
<main>
<h1>Button Pattern</h1>
<h1>ボタン パターン</h1>
<!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/d6cf9d8db772603a456e7d7ef52e409d39124301 -->

<section id="about">
<h2>About This Pattern</h2>
<h2>このパターンについて</h2>
<p>
A <a class="role-reference" href="#button">button</a> 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 &quot;&#8230;&quot; (ellipsis) to the button label, e.g., &quot;Save as&#8230;&quot;.
<a class="role-reference" href="#button">ボタン</a>は、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などのアクションやイベントのトリガーを可能にするウィジェットです。
ボタンがダイアログを起動することをユーザーに知らせるための一般的な慣例は、ボタンラベルに &quot;&#8230;&quot;（省略記号）を付加することです。例： &quot;名前を付けて保存&#8230;&quot;
</p>
<p>In addition to the ordinary button widget, WAI-ARIA supports 2 other types of buttons:</p>
<p>通常のボタンウィジェットに加えて、WAI-ARIAは2種類のボタンをサポートしています：</p>
<ul>
<li>
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 <a href="#aria-pressed" class="state-reference">aria-pressed</a>.
For example, a button labelled mute in an audio player could indicate that sound is muted by setting the pressed state true.
<strong>Important:</strong> 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 &quot;Mute&quot; so a screen reader would say something like &quot;Mute toggle button pressed&quot;.
Alternatively, if the design were to call for the button label to change from &quot;Mute&quot; to &quot;Unmute,&quot; the aria-pressed attribute would not be needed.
トグルボタン：オフ（押されていない状態）とオン（押された状態）の2つの状態を持つボタン。
ボタンがトグルボタンであることを支援技術に伝えるには、<a href="#aria-pressed" class="state-reference">aria-pressed</a>属性に値を指定します。
例えば、オーディオプレーヤーのミュートというラベルのボタンは、押された状態をtrueに設定することで、音がミュートされていることを示すことができます。
<strong>重要：</strong>トグルボタンのラベルは、その状態が変化しても変化しないことが重要です。
この例では、押された状態がtrueのとき、ラベルは &quot;ミュート&quot; のままなので、スクリーンリーダーは "ミュート トグルボタン 押されています"のように言うでしょう。
そうではなく、ボタンのラベルが "ミュート" から "ミュート解除" に変わるようなデザインであれば、aria-pressed属性は必要ありません。
</li>
<li>Menu button: as described in the <a href="../menu-button/menu-button-pattern.html">menu button pattern</a>, a button is revealed to assistive technologies as a menu button if it has the property <a href="#aria-haspopup" class="property-reference">aria-haspopup</a> set to either <code>menu</code> or <code>true</code>.</li>
<li>メニューボタン：<a href="../menu-button/menu-button-pattern.html">メニューボタン パターン</a>で説明されているように、ボタンは、プロパティ<a href="#aria-haspopup" class="property-reference">aria-haspopup</a>が<code>menu</code>か<code>true</code>に設定されていれば、メニューボタンとして支援技術に公開されます。</li>
</ul>
<div class="note">
<h3>Note</h3>
<h3>ノート</h3>
<p>
The types of actions performed by buttons are distinctly different from the function of a link (see <a href="../link/link-pattern.html">link pattern</a>).
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 <code>button</code> 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.
ボタンによって実行されるアクションのタイプは、リンクの機能（<a href="../link/link-pattern.html">リンクパターン</a>を参照）とは明確に異なる。
ウィジェットの外観と役割は、それが提供する機能と一致することが重要です。
それにもかかわらず、要素がリンクの視覚的なスタイルを持ちながら、ボタンのアクションを実行することがあります。
このような場合、要素に<code>button</code>の役割を与えることは、支援技術ユーザーが要素の機能を理解するのに役立ちます。
しかし、より良い解決策は、機能とARIAロールが一致するように視覚デザインを調整することです。
</p>
</div>
</section>

<section id="examples">
<h2>Examples</h2>
<h2>例</h2>
<ul>
<li><a href="examples/button.html">Button Examples</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons.</li>
<li><a href="examples/button.html">ボタンの例</a>：クリック可能なHTMLの<code>div</code>と<code>span</code>要素をアクセシブルなコマンドボタンとトグルボタンにした例。</li>
<li>
<a href="examples/button_idl.html">Button Examples (IDL)</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons.
This example uses the <a class="specref" href="#idl-interface">IDL Interface</a>.
<a href="examples/button_idl.html">ボタンの例（IDL）</a>：クリック可能なHTMLの<code>div</code>と<code>span</code>要素をアクセシブルなコマンドとトグルボタンにした例。
この例では<a class="specref" href="#idl-interface">IDLインターフェイス</a>を用いています。
</li>
</ul>
</section>

<section id="keyboard_interaction">
<h2>Keyboard Interaction</h2>
<p>When the button has focus:</p>
<h2>キーボード操作</h2>
<p>ボタンにフォーカスがある場合：</p>
<ul>
<li><kbd>Space</kbd>: Activates the button.</li>
<li><kbd>Enter</kbd>: Activates the button.</li>
<li><kbd>Space</kbd>：ボタンをアクティブにします。</li>
<li><kbd>Enter</kbd>：ボタンをアクティブにします。</li>
<li>
Following button activation, focus is set depending on the type of action the button performs. For example:
ボタンをアクティブにした後、ボタンが実行するアクションのタイプに応じてフォーカスが設定されます。例えば：
<ul>
<li>
If activating the button opens a dialog, the focus moves inside the dialog.
(see <a href="../dialog-modal/dialog-modal-pattern.html">dialog pattern</a>)
ボタンを押すとダイアログが開く場合、フォーカスはダイアログ内に移動します。
（<a href="../dialog-modal/dialog-modal-pattern.html">ダイアログ パターン</a>を参照）
</li>
<li>
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.
ボタンをクリックするとダイアログが閉じる場合、ダイアログのコンテキストで実行された機能が論理的に別の要素につながらない限り、フォーカスは通常、ダイアログを開いたボタンに戻ります。
例えば、ダイアログのキャンセルボタンを押すと、フォーカスはダイアログを開いたボタンに戻ります。
しかし、ダイアログが開かれたページを削除する操作を確認するものであった場合、フォーカスは論理的に新しいコンテキストに移動します。
</li>
<li>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.</li>
<li>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.</li>
<li>ボタンをクリックしても現在のコンテキストがなくならない場合、フォーカスは通常、クリック後もボタン上に残ります（例：適用ボタンや再計算ボタン）。</li>
<li>ボタンのアクションが、ウィザードの次のステップへ移動したり、別の検索条件を追加したりするような、コンテキストの変更を示している場合、そのアクションの開始点にフォーカスを移動させることが適切であることが多いでしょう。</li>
<li>
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 <kbd>Alt + U</kbd> were assigned to an &quot;Up&quot; button that moves the currently focused item in a list one position higher in the list, pressing <kbd>Alt + U</kbd> when the focus is in the list would not move the focus from the list.
ボタンがショートカットキーで起動された場合、フォーカスは通常、ショートカットキーが起動されたコンテキストに残ります。
例えば、<kbd>Alt + U</kbd>がリストの現在フォーカスのある項目を1つ上の位置に移動させる &quot;Up&quot; ボタンに割り当てられている場合、フォーカスがリストにあるときに<kbd>Alt + U</kbd>を押しても、フォーカスはリストから移動しません。
</li>
</ul>
</li>
</ul>
</section>

<section id="roles_states_properties">
<h2>WAI-ARIA Roles, States, and Properties</h2>
<h2>WAI-ARIAの役割、状態、およびプロパティ</h2>
<ul>
<li>The button has role of <a class="role-reference" href="#button">button</a>.</li>
<li>ボタンは<a class="role-reference" href="#button">button</a>の役割を持っています。</li>
<li>
The <code>button</code> 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 <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> or <a href="#aria-label" class="property-reference">aria-label</a>.
<code>button</code>はアクセス可能なラベルを持ちます。
デフォルトでは、アクセシブルな名前はボタン要素内のテキスト内容から計算されます。
しかし、<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>や<a href="#aria-label" class="property-reference">aria-label</a>で指定することもできます。
</li>
<li>If a description of the button's function is present, the button element has <a href="#aria-describedby" class="property-reference">aria-describedby</a> set to the ID of the element containing the description.</li>
<li>When the action associated with a button is unavailable, the button has <a class="state-reference" href="#aria-disabled">aria-disabled</a> set to <code>true</code>.</li>
<li>ボタンの機能の説明が存在する場合、ボタン要素の<a href="#aria-describedby" class="property-reference">aria-describedby</a>には、説明を含む要素のIDが設定されます。</li>
<li>ボタンに関連するアクションが利用できない場合、ボタンは<a class="state-reference" href="#aria-disabled">aria-disabled</a>に<code>true</code>が設定されます。</li>
<li>
If the button is a toggle button, it has an <a href="#aria-pressed" class="state-reference">aria-pressed</a> state.
When the button is toggled on, the value of this state is <code>true</code>, and when toggled off, the state is <code>false</code>.
ボタンがトグルボタンの場合、<a href="#aria-pressed" class="state-reference">aria-pressed</a>状態を持ちます。
ボタンがオンに切り替えられると、この状態の値は<code>true</code>になり、オフに切り替えられると、この状態は<code>false</code>になります。
</li>
</ul>
</section>
Expand Down

0 comments on commit a70a97f

Please sign in to comment.