From d0a486b4da607c4cbbaa8681680fb5d37e15b073 Mon Sep 17 00:00:00 2001 From: p_craft Date: Thu, 8 Aug 2024 23:12:11 +0900 Subject: [PATCH 01/13] =?UTF-8?q?combobox=E3=81=AB=E3=81=A4=E3=81=84?= =?UTF-8?q?=E3=81=A6=E6=9C=80=E6=96=B0=E3=83=AA=E3=83=93=E3=82=B8=E3=83=A7?= =?UTF-8?q?=E3=83=B3=E3=82=92=E5=8F=82=E7=85=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/patterns/combobox/combobox-pattern.html | 3 ++- .../examples/combobox-autocomplete-both.html | 10 ++++++---- .../examples/combobox-autocomplete-list.html | 10 ++++++---- .../examples/combobox-autocomplete-none.html | 10 ++++++---- .../combobox/examples/combobox-datepicker.html | 8 +++++--- .../combobox/examples/combobox-select-only.html | 10 ++++++---- .../examples/css/combobox-autocomplete.css | 4 ++-- .../patterns/combobox/examples/css/grid-combo.css | 2 +- .../patterns/combobox/examples/css/select-only.css | 4 ++-- content/patterns/combobox/examples/grid-combo.html | 8 +++++--- .../patterns/combobox/examples/js/select-only.js | 14 ++++++++++---- 11 files changed, 51 insertions(+), 32 deletions(-) diff --git a/content/patterns/combobox/combobox-pattern.html b/content/patterns/combobox/combobox-pattern.html index 640e2935..a243b504 100644 --- a/content/patterns/combobox/combobox-pattern.html +++ b/content/patterns/combobox/combobox-pattern.html @@ -10,7 +10,7 @@ - +
@@ -100,6 +100,7 @@

About This Pattern

+

Examples

  • Select-Only Combobox: A single-select combobox with no text input that is functionally similar to an HTML select element.
    • diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html index 9f9064c6..26a87a6d 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-both.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-both.html @@ -11,7 +11,7 @@ - + @@ -29,6 +29,7 @@

    Editable Combobox With Both List and Inline Autocomplete Example

    About This Example

    +

    The below combobox for choosing the name of a US state or territory demonstrates the Combobox Pattern. The design pattern describes four types of autocomplete behavior. @@ -143,7 +144,7 @@

    Accessibility Features

  • To help people with visual impairments identify the combobox as an interactive element, the cursor is changed to a pointer when hovering over the combobox or list.
  • To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.
  • - Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. + Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels. When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels. @@ -530,13 +531,14 @@

    JavaScript and CSS Source Code

-
+

HTML Source Code

+

To copy the following HTML code, please open it in CodePen.

diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html index eff7b1ee..fc47b07e 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-list.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-list.html @@ -11,7 +11,7 @@ - + @@ -29,6 +29,7 @@

Editable Combobox With List Autocomplete Example

About This Example

+

The below combobox for choosing the name of a US state or territory demonstrates the Combobox Pattern. The design pattern describes four types of autocomplete behavior. @@ -143,7 +144,7 @@

Accessibility Features

  • To help people with visual impairments identify the combobox as an interactive element, the cursor is changed to a pointer when hovering over the combobox or list.
  • To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.
  • - Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. + Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels. When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels. @@ -524,13 +525,14 @@

    JavaScript and CSS Source Code

    • -
    +

    HTML Source Code

    +

    To copy the following HTML code, please open it in CodePen.

    diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html index 7cb5c1ae..9503c57b 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-none.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-none.html @@ -11,7 +11,7 @@ - + @@ -29,6 +29,7 @@

    Editable Combobox without Autocomplete Example

    About This Example

    +

    The below combobox that enables users to choose a term from a hypothetical list of previously searched terms demonstrates the Combobox Pattern. The design pattern describes four types of autocomplete behavior. @@ -96,7 +97,7 @@

    Accessibility Features

  • To help people with visual impairments identify the combobox as an interactive element, the cursor is changed to a pointer when hovering over the combobox or list.
  • To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.
  • - Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. + Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels. When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels. @@ -466,13 +467,14 @@

    JavaScript and CSS Source Code

    • -
    +

    HTML Source Code

    +

    To copy the following HTML code, please open it in CodePen.

    diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html index 9869c83f..3fc085a4 100644 --- a/content/patterns/combobox/examples/combobox-datepicker.html +++ b/content/patterns/combobox/examples/combobox-datepicker.html @@ -11,7 +11,7 @@ - + @@ -30,6 +30,7 @@

    Date Picker Combobox Example

    About This Example

    +

    The below date picker demonstrates an implementation of the Combobox Pattern that opens a dialog. The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing Down Arrow or Alt + Down Arrow. @@ -709,13 +710,14 @@

    JavaScript and CSS Source Code

    -
    +

    HTML Source Code

    +

    To copy the following HTML code, please open it in CodePen.

    diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html index 4fce2109..4f11120a 100644 --- a/content/patterns/combobox/examples/combobox-select-only.html +++ b/content/patterns/combobox/examples/combobox-select-only.html @@ -11,7 +11,7 @@ - + @@ -29,6 +29,7 @@

    Select-Only Combobox Example

    About This Example

    +

    The following example implementation of the Combobox Pattern demonstrates a single-select combobox widget that is functionally similar to an HTML select element. Unlike the editable combobox examples, this select-only combobox is not made with an <input> element, and it does not accept freeform user input. @@ -50,8 +51,8 @@

    Example

    -
    +
    Favorite Fruit
    @@ -406,13 +407,14 @@

    JavaScript and CSS Source Code

    -
    +

    HTML Source Code

    +

    To copy the following HTML code, please open it in CodePen.

    diff --git a/content/patterns/combobox/examples/css/combobox-autocomplete.css b/content/patterns/combobox/examples/css/combobox-autocomplete.css index 72f0f113..cef393bd 100644 --- a/content/patterns/combobox/examples/css/combobox-autocomplete.css +++ b/content/patterns/combobox/examples/css/combobox-autocomplete.css @@ -13,7 +13,7 @@ background-color: white; color: black; box-sizing: border-box; - height: 24px; + height: 30px; padding: 0; margin: 0; vertical-align: bottom; @@ -46,7 +46,7 @@ ul[role="listbox"] { padding: 0; position: absolute; left: 4px; - top: 28px; + top: 34px; list-style: none; background-color: white; display: none; diff --git a/content/patterns/combobox/examples/css/grid-combo.css b/content/patterns/combobox/examples/css/grid-combo.css index 5484f8f7..8c86a4f3 100644 --- a/content/patterns/combobox/examples/css/grid-combo.css +++ b/content/patterns/combobox/examples/css/grid-combo.css @@ -23,7 +23,7 @@ margin: 0; padding: 0; position: absolute; - top: 1.7em; + top: auto; z-index: 1; } diff --git a/content/patterns/combobox/examples/css/select-only.css b/content/patterns/combobox/examples/css/select-only.css index 2f67d370..9bf2c1ae 100644 --- a/content/patterns/combobox/examples/css/select-only.css +++ b/content/patterns/combobox/examples/css/select-only.css @@ -20,7 +20,7 @@ pointer-events: none; position: absolute; right: 16px; - top: 50%; + top: 65%; transform: translate(0, -65%) rotate(45deg); width: 12px; } @@ -49,9 +49,9 @@ .combo-label { display: block; - font-size: 20px; font-weight: 100; margin-bottom: 0.25em; + font-size: 1.2em; } .combo-menu { diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html index e4249159..9907c558 100644 --- a/content/patterns/combobox/examples/grid-combo.html +++ b/content/patterns/combobox/examples/grid-combo.html @@ -11,7 +11,7 @@ - + @@ -31,6 +31,7 @@

    Editable Combobox with Grid Popup Example

    About This Example

    +

    The following example combobox implements the combobox pattern using a grid for the suggested values popup.

    @@ -385,13 +386,14 @@

    JavaScript and CSS Source Code

    -
    +

    HTML Source Code

    +

    To copy the following HTML code, please open it in CodePen.

    diff --git a/content/patterns/combobox/examples/js/select-only.js b/content/patterns/combobox/examples/js/select-only.js index fdf5874a..103d555c 100644 --- a/content/patterns/combobox/examples/js/select-only.js +++ b/content/patterns/combobox/examples/js/select-only.js @@ -170,6 +170,7 @@ function maintainScrollVisibility(activeElement, scrollParent) { const Select = function (el, options = []) { // element refs this.el = el; + this.labelEl = el.querySelector('.combo-label'); this.comboEl = el.querySelector('[role=combobox]'); this.listboxEl = el.querySelector('[role=listbox]'); @@ -194,7 +195,9 @@ Select.prototype.init = function () { this.comboEl.innerHTML = this.options[0]; // add event listeners + this.labelEl.addEventListener('click', this.onLabelClick.bind(this)); this.comboEl.addEventListener('blur', this.onComboBlur.bind(this)); + this.listboxEl.addEventListener('focusout', this.onComboBlur.bind(this)); this.comboEl.addEventListener('click', this.onComboClick.bind(this)); this.comboEl.addEventListener('keydown', this.onComboKeyDown.bind(this)); @@ -239,10 +242,13 @@ Select.prototype.getSearchString = function (char) { return this.searchString; }; -Select.prototype.onComboBlur = function () { - // do not do blur action if ignoreBlur flag has been set - if (this.ignoreBlur) { - this.ignoreBlur = false; +Select.prototype.onLabelClick = function () { + this.comboEl.focus(); +}; + +Select.prototype.onComboBlur = function (event) { + // do nothing if relatedTarget is contained within listboxEl + if (this.listboxEl.contains(event.relatedTarget)) { return; } From 2ae17789b6b9db722fd654126b332713bc7c022b Mon Sep 17 00:00:00 2001 From: p_craft Date: Sat, 10 Aug 2024 13:20:34 +0900 Subject: [PATCH 02/13] =?UTF-8?q?combobox=E3=82=92Copilot=E3=81=A7?= =?UTF-8?q?=E7=B2=97=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/index/index.html | 118 +-- .../patterns/combobox/combobox-pattern.html | 466 +++++----- .../examples/combobox-autocomplete-both.html | 867 +++++++++--------- .../examples/combobox-autocomplete-list.html | 427 ++++----- .../examples/combobox-autocomplete-none.html | 310 +++---- .../examples/combobox-datepicker.html | 381 ++++---- .../examples/combobox-select-only.html | 346 +++---- .../combobox/examples/grid-combo.html | 233 ++--- 8 files changed, 1570 insertions(+), 1578 deletions(-) diff --git a/content/index/index.html b/content/index/index.html index e0ccd255..9aa8e5cf 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -89,12 +89,12 @@

    Examples by Role

    combobox @@ -116,7 +116,7 @@

    Examples by Role

    dialog @@ -134,8 +134,8 @@

    Examples by Role

    grid
      -
    • Date Picker Combobox (HC)
      • -
    • Editable Combobox with Grid Popup
      • +
    • 日付ピッカーコンボボックスの例
      • +
    • グリッドポップアップ付き編集可能コンボボックスの例
    • Date Picker Dialog (HC)
    • Data Grid
    • Layout Grid
      • @@ -146,7 +146,7 @@

      Examples by Role

      gridcell @@ -177,10 +177,10 @@

      Examples by Role

      listbox
        -
      • Editable Combobox With Both List and Inline Autocomplete (HC)
        • -
      • Editable Combobox With List Autocomplete (HC)
        • -
      • Editable Combobox without Autocomplete (HC)
        • -
      • Select-Only Combobox
        • +
      • 編集可能なコンボボックスの例（リストとインラインオートコンプリート）
        • +
      • 編集可能なリスト自動補完のあるコンボボックスの例
        • +
      • 編集可能なオートコンプリートなしのコンボボックスの例
        • +
      • セレクトオンリーコンボボックスの例
      • (Deprecated) Collapsible Dropdown Listbox
      • Listbox with Grouped Options
      • Listboxes with Rearrangeable Options
        • @@ -271,10 +271,10 @@

        Examples by Role

        option
          -
        • Editable Combobox With Both List and Inline Autocomplete (HC)
          • -
        • Editable Combobox With List Autocomplete (HC)
          • -
        • Editable Combobox without Autocomplete (HC)
          • -
        • Select-Only Combobox
          • +
        • 編集可能なコンボボックスの例（リストとインラインオートコンプリート）
          • +
        • 編集可能なリスト自動補完のあるコンボボックスの例
          • +
        • 編集可能なオートコンプリートなしのコンボボックスの例
          • +
        • セレクトオンリーコンボボックスの例
        • (Deprecated) Collapsible Dropdown Listbox
        • Listbox with Grouped Options
        • Listboxes with Rearrangeable Options
          • @@ -321,7 +321,7 @@

          Examples by Role

          row
            -
          • Editable Combobox with Grid Popup
            • +
          • グリッドポップアップ付き編集可能コンボボックスの例
          • Layout Grid
          • Table
          • Treegrid Email Inbox
            • @@ -450,11 +450,11 @@

            Examples By Properties and States

            aria-activedescendant
              -
            • Editable Combobox With Both List and Inline Autocomplete (HC)
              • -
            • Editable Combobox With List Autocomplete (HC)
              • -
            • Editable Combobox without Autocomplete (HC)
              • -
            • Select-Only Combobox
              • -
            • Editable Combobox with Grid Popup
              • +
            • 編集可能なコンボボックスの例（リストとインラインオートコンプリート）
              • +
            • 編集可能なリスト自動補完のあるコンボボックスの例
              • +
            • 編集可能なオートコンプリートなしのコンボボックスの例
              • +
            • セレクトオンリーコンボボックスの例
              • +
            • グリッドポップアップ付き編集可能コンボボックスの例
            • (Deprecated) Collapsible Dropdown Listbox
            • Listbox with Grouped Options
            • Listboxes with Rearrangeable Options
              • @@ -472,11 +472,11 @@

              Examples By Properties and States

              aria-autocomplete @@ -516,12 +516,12 @@

              Examples By Properties and States

            • Auto-Rotating Image Carousel with Buttons for Slide Control
            • Auto-Rotating Image Carousel with Tabs for Slide Control (HC)
            • Checkbox (Mixed-State) (HC)
              • -
            • Editable Combobox With Both List and Inline Autocomplete (HC)
              • -
            • Editable Combobox With List Autocomplete (HC)
              • -
            • Editable Combobox without Autocomplete (HC)
              • -
            • Date Picker Combobox (HC)
              • -
            • Select-Only Combobox
              • -
            • Editable Combobox with Grid Popup
              • +
            • 編集可能なコンボボックスの例（リストとインラインオートコンプリート）
              • +
            • 編集可能なリスト自動補完のあるコンボボックスの例
              • +
            • 編集可能なオートコンプリートなしのコンボボックスの例
              • +
            • 日付ピッカーコンボボックスの例
              • +
            • セレクトオンリーコンボボックスの例
              • +
            • グリッドポップアップ付き編集可能コンボボックスの例
            • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
            • Disclosure (Show/Hide) for Image Description (HC)
            • Disclosure Navigation Menu with Top-Level Links
              • @@ -552,7 +552,7 @@

              Examples By Properties and States

              • Alert Dialog
                • -
              • Date Picker Combobox (HC)
                • +
              • 日付ピッカーコンボボックスの例
              • Date Picker Dialog (HC)
              • Modal Dialog
              • Feed
                • @@ -575,12 +575,12 @@

                Examples By Properties and States

                • Accordion
                  • -
                • Editable Combobox With Both List and Inline Autocomplete (HC)
                  • -
                • Editable Combobox With List Autocomplete (HC)
                  • -
                • Editable Combobox without Autocomplete (HC)
                  • -
                • Date Picker Combobox (HC)
                  • -
                • Select-Only Combobox
                  • -
                • Editable Combobox with Grid Popup
                  • +
                • 編集可能なコンボボックスの例（リストとインラインオートコンプリート）
                  • +
                • 編集可能なリスト自動補完のあるコンボボックスの例
                  • +
                • 編集可能なオートコンプリートなしのコンボボックスの例
                  • +
                • 日付ピッカーコンボボックスの例
                  • +
                • セレクトオンリーコンボボックスの例
                  • +
                • グリッドポップアップ付き編集可能コンボボックスの例
                • Disclosure (Show/Hide) for Answers to Frequently Asked Questions (HC)
                • Disclosure (Show/Hide) for Image Description (HC)
                • Disclosure Navigation Menu with Top-Level Links
                  • @@ -603,8 +603,8 @@

                  Examples By Properties and States

                  aria-haspopup @@ -733,7 +733,7 @@

                  Examples By Properties and States

                  @@ -803,12 +803,12 @@

                  Examples By Properties and States

                  • Auto-Rotating Image Carousel with Tabs for Slide Control (HC)
                    • -
                  • Editable Combobox With Both List and Inline Autocomplete (HC)
                    • -
                  • Editable Combobox With List Autocomplete (HC)
                    • -
                  • Editable Combobox without Autocomplete (HC)
                    • -
                  • Date Picker Combobox (HC)
                    • -
                  • Select-Only Combobox
                    • -
                  • Editable Combobox with Grid Popup
                    • +
                  • 編集可能なコンボボックスの例（リストとインラインオートコンプリート）
                    • +
                  • 編集可能なリスト自動補完のあるコンボボックスの例
                    • +
                  • 編集可能なオートコンプリートなしのコンボボックスの例
                    • +
                  • 日付ピッカーコンボボックスの例
                    • +
                  • セレクトオンリーコンボボックスの例
                    • +
                  • グリッドポップアップ付き編集可能コンボボックスの例
                  • Date Picker Dialog (HC)
                  • (Deprecated) Collapsible Dropdown Listbox
                  • Listbox with Grouped Options
                    • diff --git a/content/patterns/combobox/combobox-pattern.html b/content/patterns/combobox/combobox-pattern.html index a243b504..17957b9d 100644 --- a/content/patterns/combobox/combobox-pattern.html +++ b/content/patterns/combobox/combobox-pattern.html @@ -3,7 +3,7 @@ - Combobox Pattern + コンボボックスパターン @@ -14,446 +14,444 @@
                    -

                    Combobox Pattern

                    +

                    コンボボックスパターン

                    +
                    -

                    About This Pattern

                    +

                    このパターンについて

                    - A combobox is an input widget that has an associated popup. - The popup enables users to choose a value for the input from a collection. - The popup may be a listbox, grid, tree, or dialog. + コンボボックスは、関連付けられたポップアップを持つ入力ウィジェットです。 + ポップアップにより、利用者はコレクションから入力値を選択できます。 + ポップアップは、リストボックス、グリッド、ツリー、またはダイアログである可能性があります。

                    - In some implementations, the popup presents allowed values, while in other implementations, the popup presents suggested values. - Many implementations also include a third optional element -- a graphical Open button adjacent to the combobox, which indicates availability of the popup. - Activating the Open button displays the popup if suggestions are available. + いくつかの実装では、ポップアップは許可された値を表示し、他の実装では、ポップアップは提案された値を表示します。 + 多くの実装には、コンボボックスに隣接するグラフィカルな「開く」ボタンというオプションの第三要素も含まれており、ポップアップの可用性を示します。 + 「開く」ボタンを作動すると、提案が利用可能な場合にポップアップが表示されます。

                    - The combobox pattern supports several optional behaviors. - The one that most shapes interaction is text input. - Some comboboxes allow users to type and edit text in the combobox and others do not. - If a combobox does not support text input, it is referred to as select-only, meaning the only way users can set its value is by selecting a value in the popup. - For example, in some browsers, an HTML select element with size="1" is presented to assistive technologies as a combobox. - Alternatively, if a combobox supports text input, it is referred to as editable. - An editable combobox may either allow users to input any arbitrary value, or it may restrict its value to a discrete set of allowed values, in which case typing input serves to filter suggestions presented in the popup. + コンボボックスパターンは、いくつかのオプションの動作をサポートします。 + インタラクションを最も形作るものはテキスト入力です。 + 一部のコンボボックスでは、利用者がコンボボックス内でテキストを入力および編集できますが、他のコンボボックスではできません。 + テキスト入力をサポートしないコンボボックスは、選択のみと呼ばれ、利用者がその値を設定できる唯一の方法はポップアップで値を選択することです。 + 例えば、一部のブラウザでは、size="1"を持つHTMLのselect要素は、支援技術に対してコンボボックスとして提示されます。 + あるいは、コンボボックスがテキスト入力をサポートする場合、編集可能と呼ばれます。 + 編集可能なコンボボックスは、利用者が任意の値を入力することを許可するか、または許可された値の離散的なセットに値を制限することができ、その場合、入力の入力がポップアップに表示される提案をフィルタリングするために役立ちます。

                    - The popup is hidden by default, i.e., the default state is collapsed. - The conditions that trigger expansion -- display of the popup --are specific to each implementation. - Some possible conditions that trigger expansion include: + ポップアップはデフォルトで非表示、つまり折り畳まれた状態です。 + ポップアップの展開、つまりポップアップの表示をトリガーする条件は、実装ごとに異なります。 + 展開をトリガーする可能性のあるいくつかの条件には、以下が含まれます。

                    • - It is displayed when the Down Arrow key is pressed or the Open button is activated. - Optionally, if the combobox is editable and contains a string that does not match an allowed value, expansion does not occur. + 下矢印キーが押された場合または「開く」ボタンが作動した場合に表示されます。 + オプションとして、コンボボックスが編集可能で許可された値と一致しない文字列が含まれている場合、展開は発生しません。
                      • -
                    • It is displayed when the combobox receives focus even if the combobox is editable and empty.
                      • -
                    • If the combobox is editable, the popup is displayed only if a certain number of characters are typed in the combobox and those characters match some portion of one of the suggested values.
                      • +
                    • コンボボックスがフォーカスを受けると、コンボボックスが編集可能で空の場合でも表示されます。
                      • +
                    • コンボボックスが編集可能な場合、ポップアップは、特定の数の文字がコンボボックスに入力され、それらの文字が提案された値の一部と一致する場合にのみ表示されます。
                    -

                    Combobox widgets are useful for acquiring user input in either of two scenarios:

                    +

                    コンボボックスウィジェットは、次の2つのシナリオのいずれかでユーザー入力を取得するのに役立ちます。

                    1. - The value must be one of a predefined set of allowed values, e.g., a location field must contain a valid location name. - Note that the listbox and menu button patterns are also useful in this scenario; differences between combobox and alternative patterns are described below. + 値は、事前に定義された一連の許可された値のいずれかである必要があります。たとえば、場所フィールドには有効な場所名が含まれている必要があります。 + リストボックスとメニューボタンパターンもこのシナリオで有用であることに注意してください。コンボボックスと代替パターン間の違いについては以下で説明します。
                    2. - An arbitrary value is allowed, but it is advantageous to suggest possible values to users. - For example, a search field may suggest similar or previous searches to save the user time. + 任意の値が許可されますが、ユーザーに可能な値を提案することは有利です。 + たとえば、検索フィールドは、類似または以前の検索を提案して、ユーザーの時間を節約できます。

                    - The nature of possible values presented by a popup and the way they are presented is called the autocomplete behavior. - Comboboxes can have one of four forms of autocomplete:

                    + ポップアップによって提示される可能な値の性質とその提示方法は、オートコンプリート動作と呼ばれます。 + コンボボックスには、次の4つのオートコンプリート形式のいずれかがあります。

                    1. - No autocomplete: The combobox is editable, and when the popup is triggered, the suggested values it contains are the same regardless of the characters typed in the combobox. - For example, the popup suggests a set of recently entered values, and the suggestions do not change as the user types. + オートコンプリートなし：コンボボックスは編集可能であり、ポップアップがトリガーされると、それに含まれる提案された値は、コンボボックスに入力された文字に関係なく同じです。 + たとえば、ポップアップは最近入力された値のセットを提案し、提案はユーザーが入力しても変更されません。
                    2. - List autocomplete with manual selection: When the popup is triggered, it presents suggested values. - If the combobox is editable, the suggested values complete or logically correspond to the characters typed in the combobox. - The character string the user has typed will become the value of the combobox unless the user selects a value in the popup. + 手動選択付きリストオートコンプリート：ポップアップがトリガーされると、提案された値が表示されます。 + コンボボックスが編集可能な場合、提案された値は、コンボボックスに入力された文字を補完または論理的に対応します。 + ユーザーが入力した文字列は、ユーザーがポップアップで値を選択しない限り、コンボボックスの値になります。
                    3. - List autocomplete with automatic selection: The combobox is editable, and when the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the combobox, and the first suggestion is automatically highlighted as selected. - The automatically selected suggestion becomes the value of the combobox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the combobox. + 自動選択付きリストオートコンプリート：コンボボックスは編集可能であり、ポップアップがトリガーされると、コンボボックスに入力された文字を補完または論理的に対応する提案された値が表示され、最初の提案が自動的に強調表示されて選択されます。 + 自動的に選択された提案は、ユーザーが別の提案を選択するか、コンボボックス内の文字列を変更しない限り、コンボボックスがフォーカスを失ったときにコンボボックスの値になります。
                    4. - List with inline autocomplete: This is the same as list with automatic selection with one additional feature. - The portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the combobox. - The inline completion string is visually highlighted and has a selected state.
                      5. + インラインオートコンプリート付きリスト：これは、自動選択付きリストと同じで、1つの追加機能があります。 + ユーザーが入力していない選択された提案の部分である完了文字列は、コンボボックスの入力カーソルの後にインラインで表示されます。 + インライン完了文字列は視覚的に強調表示され、選択状態になります。

                    - If a combobox is editable and has any form of list autocomplete, the popup may appear and disappear as the user types. - For example, if the user types a two character string that triggers five suggestions to be displayed but then types a third character that forms a string that does not have any matching suggestions, the popup may close and, if present, the inline completion string disappears. + コンボボックスが編集可能で何らかのリストオートコンプリートを持っている場合、ポップアップはユーザーが入力すると表示および非表示になる可能性があります。 + たとえば、ユーザーが2文字の文字列を入力して5つの提案を表示するようにトリガーし、次に一致する提案を持たない文字列を形成する3文字目を入力すると、ポップアップが閉じられ、存在する場合、インライン完了文字列が消えます。

                    - Two other widgets that are also visually compact and enable users to make a single choice from a set of discrete choices are listbox and menu button. - One feature that distinguishes combobox from both listbox and menu button is that the user's choice can be presented as a value in an editable field, which gives users the ability to select some or all of the value for copying to the clipboard. - Comboboxes and menu buttons can be implemented so users can explore the set of allowed choices without losing a previously made choice. - That is, users can navigate the set of available choices in a combobox popup or menu and then press escape, which closes the popup or menu without changing previous input. - In contrast, navigating among options in a single-select listbox immediately changes its value, and Escape does not provide an undo mechanism. - Comboboxes and listboxes can be marked as required with aria-required="true", and they have an accessible name that is distinct from their value. - Thus, when assistive technology users focus either a combobox or listbox in its default state, they can perceive both a name and value for the widget. - However, a menu button cannot be marked required, and while it has an accessible name, it does not have a value so is not suitable for conveying the user's choice in its collapsed state. + 視覚的にコンパクトで、ユーザーが離散的な選択肢のセットから単一の選択を行うことを可能にする他の2つのウィジェットは、リストボックスとメニューボタンです。 + コンボボックスとリストボックスおよびメニューボタンを区別する1つの機能は、ユーザーの選択が編集可能なフィールドの値として表示できることであり、これによりユーザーはクリップボードにコピーするために値の一部またはすべてを選択できます。 + コンボボックスとメニューボタンは、ユーザーが以前に選択したものを失うことなく、許可された選択肢のセットを探索できるように実装できます。 + つまり、ユーザーはコンボボックスポップアップまたはメニュー内の利用可能な選択肢のセットをナビゲートし、次にEscapeを押すことができ、ポップアップまたはメニューを閉じますが、以前の入力を変更しません。 + 対照的に、シングルセレクトリストボックス内のオプション間のナビゲーションはすぐにその値を変更し、Escapeは元に戻すメカニズムを提供しません。 + コンボボックスとリストボックスは、aria-required="true"で必須としてマークでき、それらはそれらの値とは異なるアクセシブル名を持ちます。 + したがって、支援技術ユーザーがデフォルト状態のコンボボックスまたはリストボックスにフォーカスすると、ウィジェットの名前と値の両方を認識できます。 + ただし、メニューボタンは必須としてマークすることはできず、アクセシブル名がありますが、値を持たないため、折り畳まれた状態でユーザーの選択を伝えるのに適していません。

                    -

                    Examples

                    +

                    例

                    -

                    Keyboard Interaction

                    +

                    キーボード操作

                      -
                    • Tab: The combobox is in the page Tab sequence.
                      • -
                    • Note: The popup indicator icon or button (if present), the popup, and the popup descendants are excluded from the page Tab sequence.
                      • +
                    • Tab: コンボボックスはページのTab順序にあります。
                      • +
                    • 注: ポップアップインジケータアイコンまたはボタン（存在する場合）、ポップアップ、およびポップアップの子孫は、ページのTab順序から除外されます。
                    -

                    Combobox Keyboard Interaction

                    -

                    When focus is in the combobox:

                    +

                    コンボボックスのキーボード操作

                    +

                    コンボボックスにフォーカスがある場合:

                    • - Down Arrow: If the popup is available, moves focus into the popup: + 下矢印: ポップアップが利用可能な場合、ポップアップ内にフォーカスを移動します。
                        -
                      • If the autocomplete behavior automatically selected a suggestion before Down Arrow was pressed, focus is placed on the suggestion following the automatically selected suggestion.
                        • -
                      • Otherwise, places focus on the first focusable element in the popup.
                        • +
                      • 下矢印が押される前にオートコンプリート動作が提案を自動的に選択した場合、自動的に選択された提案の次の提案にフォーカスが置かれます。
                        • +
                      • それ以外の場合、ポップアップ内の最初のフォーカス可能な要素にフォーカスを置きます。
                      • -
                    • Up Arrow (Optional): If the popup is available, places focus on the last focusable element in the popup.
                      • +
                    • 上矢印 (オプション): ポップアップが利用可能な場合、ポップアップ内の最後のフォーカス可能な要素にフォーカスを置きます。
                    • - Escape: Dismisses the popup if it is visible. - Optionally, if the popup is hidden before Escape is pressed, clears the combobox. + Escape: ポップアップが表示されている場合、ポップアップを閉じます。 + オプションとして、Escapeが押される前にポップアップが非表示の場合、コンボボックスをクリアします。
                    • - Enter: If the combobox is editable and an autocomplete suggestion is selected in the popup, accepts the suggestion either by placing the input cursor at the end of the accepted value in the combobox or by performing a default action on the value. - For example, in a messaging application, the default action may be to add the accepted value to a list of message recipients and then clear the combobox so the user can add another recipient. + Enter: コンボボックスが編集可能で、ポップアップでオートコンプリートの提案が選択されている場合、提案を受け入れます。これは、コンボボックス内の受け入れられた値の最後に入力カーソルを配置するか、値に対してデフォルトのアクションを実行することによって行われます。 + たとえば、メッセージングアプリケーションでは、デフォルトのアクションは、受け入れられた値をメッセージ受信者のリストに追加してから、コンボボックスをクリアしてユーザーが別の受信者を追加できるようにすることです。
                    • - Printable Characters: + 印刷可能文字:
                      • - If the combobox is editable, type characters in the combobox. - Note that some implementations may regard certain characters as invalid and prevent their input. + コンボボックスが編集可能な場合、コンボボックスに文字を入力します。 + 一部の実装では特定の文字を無効と見なし、入力できない場合があります。
                        • -
                      • If the combobox is not editable, optionally moves focus to a value that starts with the typed characters.
                        • +
                      • コンボボックスが編集不可能な場合、オプションで入力された文字で始まる値にフォーカスを移動します。
                      • -
                    • If the combobox is editable, it supports standard single line text editing keys appropriate for the device platform (see note below).
                      • -
                    • Alt + Down Arrow (Optional): If the popup is available but not displayed, displays the popup without moving focus.
                      • +
                    • コンボボックスが編集可能な場合、デバイスプラットフォームに適した標準的な単一行テキスト編集キーをサポートします（以下の注を参照）。
                      • +
                    • Alt + 下矢印 (オプション): ポップアップが利用可能だが表示されていない場合、フォーカスを移動せずにポップアップを表示します。
                    • - Alt + Up Arrow (Optional): If the popup is displayed: + Alt + 上矢印 (オプション): ポップアップが表示されている場合:
                        -
                      • If the popup contains focus, returns focus to the combobox.
                        • -
                      • Closes the popup.
                        • +
                      • ポップアップにフォーカスがある場合、フォーカスをコンボボックスに戻します。
                        • +
                      • ポップアップを閉じます。
                    -

                    Note

                    -

                    Standard single line text editing keys appropriate for the device platform:

                    +

                    注

                    +

                    デバイスプラットフォームに適した標準的な単一行テキスト編集キー:

                      -
                    1. include keys for input, cursor movement, selection, and text manipulation.
                      2. -
                    2. Standard key assignments for editing functions depend on the device operating system.
                      3. -
                    3. The most robust approach for providing text editing functions is to rely on browsers, which supply them for HTML inputs with type text and for elements with the contenteditable HTML attribute.
                      4. -
                    4. IMPORTANT: Ensure JavaScript does not interfere with browser-provided text editing functions by capturing key events for the keys used to perform them.
                      5. +
                    5. 入力、カーソル移動、選択、テキスト操作のためのキーが含まれます。
                      6. +
                    6. 編集機能の標準的なキー割り当ては、デバイスのオペレーティングシステムによって異なります。
                      7. +
                    7. テキスト編集機能を提供するための最も堅牢なアプローチは、ブラウザに依存することです。ブラウザは、type textを持つHTML入力およびcontenteditable HTML属性を持つ要素に対してそれらを供給します。
                      8. +
                    8. 重要: JavaScriptが、それらを実行するために使用されるキーのキーイベントをキャプチャすることによって、ブラウザ提供のテキスト編集機能を妨げないようにしてください。
                    -

                    Listbox Popup Keyboard Interaction

                    -

                    When focus is in a listbox popup:

                    +

                    リストボックスポップアップのキーボード操作

                    +

                    リストボックスポップアップにフォーカスがある場合:

                      -
                    • Enter: Accepts the focused option in the listbox by closing the popup, placing the accepted value in the combobox, and if the combobox is editable, placing the input cursor at the end of the value.
                      • +
                    • Enter: リストボックス内のフォーカスされたオプションを受け入れ、ポップアップを閉じ、受け入れられた値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置します。
                    • - Escape: Closes the popup and returns focus to the combobox. - Optionally, if the combobox is editable, clears the contents of the combobox. + Escape: ポップアップを閉じて、フォーカスをコンボボックスに戻します。 + オプションとして、コンボボックスが編集可能な場合、コンボボックスの内容をクリアします。
                    • - Down Arrow: Moves focus to and selects the next option. - If focus is on the last option, either returns focus to the combobox or does nothing. + 下矢印: 次のオプションにフォーカスを移動して選択します。 + フォーカスが最後のオプションにある場合、フォーカスをコンボボックスに戻すか、何も行いません。
                    • - Up Arrow: Moves focus to and selects the previous option. - If focus is on the first option, either returns focus to the combobox or does nothing. + 上矢印: 前のオプションにフォーカスを移動して選択します。 + フォーカスが最初のオプションにある場合、フォーカスをコンボボックスに戻すか、何も行いません。
                    • - Right Arrow: If the combobox is editable, returns focus to the combobox without closing the popup and moves the input cursor one character to the right. - If the input cursor is on the right-most character, the cursor does not move. + 右矢印: コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻し、入力カーソルを1文字右に移動します。 + 入力カーソルが右端の文字にある場合、カーソルは動きません。
                    • - Left Arrow: If the combobox is editable, returns focus to the combobox without closing the popup and moves the input cursor one character to the left. - If the input cursor is on the left-most character, the cursor does not move. + 左矢印: コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻し、入力カーソルを1文字左に移動します。 + 入力カーソルが左端の文字にある場合、カーソルは動きません。
                      • -
                    • Home (Optional): Either moves focus to and selects the first option or, if the combobox is editable, returns focus to the combobox and places the cursor on the first character.
                      • -
                    • End (Optional): Either moves focus to the last option or, if the combobox is editable, returns focus to the combobox and places the cursor after the last character.
                      • +
                    • Home (オプション): 最初のオプションにフォーカスを移動して選択するか、コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最初の文字に配置します。
                      • +
                    • End (オプション): 最後のオプションにフォーカスを移動するか、コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最後の文字の後に配置します。
                    • - Any printable character: + 任意の印刷可能文字:
                        -
                      • If the combobox is editable, returns the focus to the combobox without closing the popup and types the character.
                        • -
                      • Otherwise, moves focus to the next option with a name that starts with the characters typed.
                        • +
                      • コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻して文字を入力します。
                        • +
                      • それ以外の場合、入力された文字で始まる名前を持つ次のオプションにフォーカスを移動します。
                      • -
                    • Backspace (Optional): If the combobox is editable, returns focus to the combobox and deletes the character prior to the cursor.
                      • -
                    • Delete (Optional): If the combobox is editable, returns focus to the combobox, removes the selected state if a suggestion was selected, and removes the inline autocomplete string if present.
                      • +
                    • Backspace (オプション): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻してカーソルの前の文字を削除します。
                      • +
                    • Delete (オプション): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻し、提案が選択されていた場合は選択状態を削除し、インラインオートコンプリート文字列が存在する場合は削除します。
                    -

                    Note

                    +

                    注記

                    1. - DOM Focus is maintained on the combobox and the assistive technology focus is moved within the listbox using aria-activedescendant as described in - Managing Focus in Composites Using aria-activedescendant. + DOMフォーカスはコンボボックスに維持され、支援技術のフォーカスは、複合要素でのaria-activedescendantを使用したフォーカスの管理で説明されているように、aria-activedescendantを使用してリストボックス内で移動されます。
                      2. -
                    2. Selection follows focus in the listbox; the listbox allows only one suggested value to be selected at a time for the combobox value.
                      3. +
                    3. 選択はリストボックス内のフォーカスに従います。リストボックスでは、コンボボックス値に対して一度に1つの提案値のみを選択できます。
                    -

                    Grid Popup Keyboard Interaction

                    +

                    グリッドポップアップのキーボード操作

                    - In a grid popup, each suggested value may be represented by either a single cell or an entire row. - See notes below for how this aspect of grid design effects the keyboard interaction design and the way that selection moves in response to focus movements. + グリッドポップアップでは、各提案値は単一のセルまたは行全体で表される場合があります。 + グリッドデザインのこの側面がキーボード操作設計と、フォーカスの移動に応じた選択の移動方法にどのように影響するかについては、以下の注を参照してください。

                      -
                    • Enter: Accepts the currently selected suggested value by closing the popup, placing the selected value in the combobox, and if the combobox is editable, placing the input cursor at the end of the value.
                      • +
                    • Enter: 現在選択されている提案値を受け入れ、ポップアップを閉じ、選択された値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置します。
                    • - Escape: Closes the popup and returns focus to the combobox. - Optionally, if the combobox is editable, clears the contents of the combobox. + Escape: ポップアップを閉じて、フォーカスをコンボボックスに戻します。 + オプションとして、コンボボックスが編集可能な場合、コンボボックスの内容をクリアします。
                    • - Right Arrow: Moves focus one cell to the right. - Optionally, if focus is on the right-most cell in the row, focus may move to the first cell in the following row. - If focus is on the last cell in the grid, either does nothing or returns focus to the combobox. + 右矢印: フォーカスを1セル右に移動します。 + オプションとして、フォーカスが行の一番右のセルにある場合、フォーカスは次の行の一番左のセルに移動する場合があります。 + グリッドの最後のセルにフォーカスがある場合、何も行わないか、フォーカスをコンボボックスに戻します。
                    • - Left Arrow: Moves focus one cell to the left. - Optionally, if focus is on the left-most cell in the row, focus may move to the last cell in the previous row. - If focus is on the first cell in the grid, either does nothing or returns focus to the combobox. + 左矢印: フォーカスを1セル左に移動します。 + オプションとして、フォーカスが行の一番左のセルにある場合、フォーカスは前の行の一番右のセルに移動する場合があります。 + グリッドの一番左のセルにフォーカスがある場合、何も行わないか、フォーカスをコンボボックスに戻します。
                    • - Down Arrow: Moves focus one cell down. - If focus is in the last row of the grid, either does nothing or returns focus to the combobox. + 下矢印: フォーカスを1セル下に移動します。 + グリッドの最後の行にフォーカスがある場合、何も行わないか、フォーカスをコンボボックスに戻します。
                    • - Up Arrow: Moves focus one cell up. - If focus is in the first row of the grid, either does nothing or returns focus to the combobox. + 上矢印: フォーカスを1セル上に移動します。 + グリッドの一番上の行にフォーカスがある場合、何も行わないか、フォーカスをコンボボックスに戻します。
                    • - Page Down (Optional): Moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. - If focus is in the last row of the grid, focus does not move. + Page Down (オプション): フォーカスを作者が決定した行数だけ下に移動します。通常、スクロールして、現在表示されている行セットの一番下の行が最初に表示される行の1つになります。 + グリッドの最後の行にフォーカスがある場合、フォーカスは動きません。
                    • - Page Up (Optional): Moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. - If focus is in the first row of the grid, focus does not move. + Page Up (オプション): フォーカスを作者が決定した行数だけ上に移動します。通常、スクロールして、現在表示されている行セットの一番上の行が最後に表示される行の1つになります。 + グリッドの一番上の行にフォーカスがある場合、フォーカスは動きません。
                    • - Home (Optional): Either: + Home (オプション): どちらか:
                      • - Moves focus to the first cell in the row that contains focus. - Or, if the grid has fewer than three cells per row or multiple suggested values per row, focus may move to the first cell in the grid. + フォーカスのある行の一番左のセルにフォーカスを移動します。 + または、グリッドが行あたり3セル未満の場合、または行あたり複数の提案値がある場合、グリッドの一番左のセルにフォーカスが移動する場合があります。
                        • -
                      • If the combobox is editable, returns focus to the combobox and places the cursor on the first character.
                        • +
                      • コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最初の文字に配置します。
                    • - End (Optional): Either: + End (オプション): どちらか:
                      • - Moves focus to the last cell in the row that contains focus. - Or, if the grid has fewer than three cells per row or multiple suggested values per row, focus may move to the last cell in the grid. + フォーカスのある行の一番右のセルにフォーカスを移動します。 + または、グリッドが行あたり3セル未満の場合、または行あたり複数の提案値がある場合、グリッドの一番右のセルにフォーカスが移動する場合があります。
                        • -
                      • If the combobox is editable, returns focus to the combobox and places the cursor after the last character.
                        • +
                      • コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最後の文字の後に配置します。
                      • -
                    • Control + Home (optional): moves focus to the first row.
                      • -
                    • Control + End (Optional): moves focus to the last row.
                      • -
                    • Any printable character: If the combobox is editable, returns the focus to the combobox without closing the popup and types the character.
                      • -
                    • Backspace (Optional): If the combobox is editable, returns focus to the combobox and deletes the character prior to the cursor.
                      • -
                    • Delete (Optional): If the combobox is editable, returns focus to the combobox, removes the selected state if a suggestion was selected, and removes the inline autocomplete string if present.
                      • +
                    • Control + Home (オプション): 最初の行にフォーカスを移動します。
                      • +
                    • Control + End (オプション): 最後の行にフォーカスを移動します。
                      • +
                    • 任意の印刷可能文字: コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻して文字を入力します。
                      • +
                    • Backspace (オプション): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻してカーソルの前の文字を削除します。
                      • +
                    • Delete (オプション): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻し、提案が選択されていた場合は選択状態を削除し、インラインオートコンプリート文字列が存在する場合は削除します。
                    -

                    Note

                    +

                    注記

                    1. - DOM Focus is maintained on the combobox and the assistive technology focus is moved within the grid using aria-activedescendant as described in - Managing Focus in Composites Using aria-activedescendant. + DOMフォーカスはコンボボックスに維持され、支援技術のフォーカスは、複合要素でのaria-activedescendantを使用したフォーカスの管理で説明されているように、aria-activedescendantを使用してグリッド内で移動されます。
                      2. -
                    2. The grid allows only one suggested value to be selected at a time for the combobox value.
                      3. +
                    3. グリッドでは、コンボボックスの値に対して一度に1つの提案値のみを選択できます。
                    4. - In a grid popup, each suggested value may be represented by either a single cell or an entire row. - This aspect of design effects focus and selection movement: + グリッドポップアップでは、各提案値は単一のセルまたは行全体で表される場合があります。 + このデザインの側面は、フォーカスと選択の移動に影響します。
                      1. - If every cell contains a different suggested value: + 各セルに異なる提案値が含まれている場合:
                          -
                        • Selection follows focus so that the cell containing focus is selected.
                          • -
                        • Horizontal arrow key navigation typically wraps from one row to another.
                          • -
                        • Vertical arrow key navigation typically wraps from one column to another.
                          • +
                        • フォーカスを含むセルが選択されるように、選択はフォーカスに従います。
                          • +
                        • 水平方向の矢印キーナビゲーションは通常、行間でラップされます。
                          • +
                        • 垂直方向の矢印キーナビゲーションは通常、列間でラップされます。
                      2. - If all cells in a row contain information about the same suggested value: + 行内のすべてのセルに同じ提案値に関する情報が含まれている場合:
                          -
                        • Either the row containing focus is selected or a cell containing a suggested value is selected when any cell in the same row contains focus.
                          • -
                        • Horizontal key navigation may wrap from one row to another.
                          • -
                        • Vertical arrow key navigation does not wrap from one column to another.
                          • +
                        • フォーカスを含む行が選択されるか、同じ行内の任意のセルにフォーカスがあるときに提案値を含むセルが選択されます。
                          • +
                        • 水平方向のキーナビゲーションは、行間でラップされる場合があります。
                          • +
                        • 垂直方向の矢印キーナビゲーションは、列間でラップされません。
                    -

                    Tree Popup Keyboard Interaction

                    +

                    ツリーポップアップのキーボード操作

                    - In some implementations of tree popups, some or all parent nodes may serve as suggestion category labels so may not be selectable values. - See notes below for how this aspect of the design effects the way selection moves in response to focus movements. + ツリーポップアップの一部の実装では、一部またはすべての親ノードが提案カテゴリラベルとして機能するため、選択可能な値ではない場合があります。 + デザインのこの側面が、フォーカスの移動に応じた選択の移動方法にどのように影響するかについては、以下の注を参照してください。

                    -

                    When focus is in a vertically oriented tree popup:

                    +

                    縦向きツリーポップアップにフォーカスがある場合:

                      -
                    • Enter: Accepts the currently selected suggested value by closing the popup, placing the selected value in the combobox, and if the combobox is editable, placing the input cursor at the end of the value.
                      • +
                    • Enter: 現在選択されている提案値を受け入れ、ポップアップを閉じ、選択された値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置します。
                    • - Escape: Closes the popup and returns focus to the combobox. - Optionally, clears the contents of the combobox. + Escape: ポップアップを閉じて、フォーカスをコンボボックスに戻します。 + オプションとして、コンボボックスの内容をクリアします。
                    • - Right arrow: + 右矢印:
                        -
                      • When focus is on a closed node, opens the node; focus and selection do not move.
                        • -
                      • When focus is on a open node, moves focus to the first child node and selects it if it is selectable.
                        • -
                      • When focus is on an end node, does nothing.
                        • +
                      • フォーカスが閉じられたノードにある場合、ノードを開きます。フォーカスと選択は移動しません。
                        • +
                      • フォーカスが開いたノードにある場合、フォーカスを最初の子ノードに移動し、選択可能な場合は選択します。
                        • +
                      • フォーカスがエンドノードにある場合、何も行いません。
                    • - Left arrow: + 左矢印:
                        -
                      • When focus is on an open node, closes the node.
                        • -
                      • When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node and selects it if it is selectable.
                        • -
                      • When focus is on a root node that is also either an end node or a closed node, does nothing.
                        • +
                      • フォーカスが開いたノードにある場合、ノードを閉じます。
                        • +
                      • フォーカスが子ノードで、その子ノードもエンドノードまたは閉じられたノードである場合、フォーカスを親ノードに移動し、選択可能な場合は選択します。
                        • +
                      • フォーカスがルートノードで、そのルートノードもエンドノードまたは閉じられたノードである場合、何も行いません。
                      • -
                    • Down Arrow: Moves focus to the next node that is focusable without opening or closing a node and selects it if it is selectable.
                      • -
                    • Up Arrow: Moves focus to the previous node that is focusable without opening or closing a node and selects it if it is selectable.
                      • -
                    • Home: Moves focus to the first focusable node in the tree without opening or closing a node and selects it if it is selectable.
                      • -
                    • End: Moves focus to the last focusable node in the tree without opening or closing a node and selects it if it is selectable.
                      • +
                    • 下矢印: ノードを開いたり閉じたりせずにフォーカス可能な次のノードにフォーカスを移動し、選択可能な場合は選択します。
                      • +
                    • 上矢印: ノードを開いたり閉じたりせずにフォーカス可能な前のノードにフォーカスを移動し、選択可能な場合は選択します。
                      • +
                    • Home: ノードを開いたり閉じたりせずにツリー内の最初のフォーカス可能なノードにフォーカスを移動し、選択可能な場合は選択します。
                      • +
                    • End: ノードを開いたり閉じたりせずにツリー内の最後のフォーカス可能なノードにフォーカスを移動し、選択可能な場合は選択します。
                    • - Any printable character: + 任意の印刷可能文字:
                        -
                      • If the combobox is editable, returns the focus to the combobox without closing the popup and types the character.
                        • -
                      • Otherwise, moves focus to the next suggested value with a name that starts with the characters typed.
                        • +
                      • コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻して文字を入力します。
                        • +
                      • それ以外の場合、入力された文字で始まる名前を持つ次の提案値にフォーカスを移動します。
                    -
                    -

                    Note

                    +
                    +

                    注記

                    1. - DOM Focus is maintained on the combobox and the assistive technology focus is moved within the tree using aria-activedescendant as described in - Managing Focus in Composites Using aria-activedescendant. + DOMフォーカスはコンボボックスに維持され、支援技術のフォーカスは、複合要素でのaria-activedescendantを使用したフォーカスの管理で説明されているように、aria-activedescendantを使用してツリー内で移動されます。
                      2. -
                    2. The tree allows only one suggested value to be selected at a time for the combobox value.
                      3. +
                    3. ツリーでは、コンボボックスの値に対して一度に1つの提案値のみを選択できます。
                    4. - In a tree popup, some or all parent nodes may not be selectable values; they may serve as category labels for suggested values. - If focus moves to a node that is not a selectable value, either: + ツリーポップアップでは、一部またはすべての親ノードは選択可能な値ではない場合があります。それらは、提案値のカテゴリラベルとして機能する場合があります。 + フォーカスが選択可能な値ではないノードに移動した場合、どちらか一方になります。
                        -
                      • The previously selected node, if any, remains selected until focus moves to a node that is selectable.
                        • -
                      • There is no selected value.
                        • -
                      • In either case, focus is visually distinct from selection so users can readily see if a value is selected or not.
                        • +
                      • 以前に選択されたノードがある場合、そのノードはフォーカスが選択可能なノードに移動するまで選択されたままになります。
                        • +
                      • 選択された値はありません。
                        • +
                      • いずれの場合も、フォーカスは選択と視覚的に区別されるため、ユーザーは値が選択されているかどうかを簡単に確認できます。
                    5. - If nodes in the tree are arranged horizontally (aria-orientation is set to horizontal): + ツリー内のノードが水平方向に配置されている場合(aria-orientationがhorizontalに設定されている):
                        -
                      1. Down Arrow performs as Right Arrow is described above, and vice versa.
                        2. -
                      2. Up Arrow performs as Left Arrow is described above, and vice versa.
                        3. +
                      3. 下矢印は上記で説明されている右矢印として機能し、その逆も同様です。
                        4. +
                      4. 上矢印は上記で説明されている左矢印として機能し、その逆も同様です。
                    -

                    Dialog Popup Keyboard Interaction

                    -

                    When focus is in a dialog popup:

                    +

                    ダイアログポップアップのキーボード操作

                    +

                    ダイアログポップアップにフォーカスがある場合:

                    • - There are two ways to close the popup and return focus to the combobox: + ポップアップを閉じてフォーカスをコンボボックスに戻す方法は2つあります。
                        -
                      1. Perform an action in the dialog, such as activate a button, that specifies a value for the combobox.
                        2. +
                      2. コンボボックスの値を指定するボタンなどをアクティブにするなど、ダイアログ内でアクションを実行します。
                      3. - Cancel out of the dialog, e.g., press Escape or activate the cancel button in the dialog. - Canceling either returns focus to the text box without changing the combobox value or returns focus to the combobox and clears the combobox. + ダイアログからキャンセルします。たとえば、Escapeを押すか、ダイアログのキャンセルボタンをアクティブにします。 + キャンセルすると、コンボボックスの値を変更せずにテキストボックスにフォーカスが戻る場合と、コンボボックスに戻ってコンボボックスがクリアされる場合があります。
                      • -
                    • The dialog implements the keyboard interaction defined in the modal dialog pattern.
                      • +
                    • ダイアログは、モーダルダイアログパターンで定義されているキーボード操作を実装します。
                    -

                    Note

                    -

                    Unlike other combobox popups, dialogs do not support aria-activedescendant so DOM focus moves into the dialog from the combobox.

                    +

                    注

                    +

                    他のコンボボックスポップアップとは異なり、ダイアログはaria-activedescendantをサポートしていないため、DOMフォーカスはコンボボックスからダイアログに移動します。

                    -

                    WAI-ARIA Roles, States, and Properties

                    +

                    WAI-ARIAロール、状態、およびプロパティ

                      -
                    • The element that serves as an input and displays the combobox value has role combobox.
                      • +
                    • 入力として機能し、コンボボックスの値を表示する要素は、ロールコンボボックスを持ちます。
                    • - The combobox element has aria-controls set to a value that refers to the element that serves as the popup. - Note that aria-controls only needs to be set when the popup is visible. - However, it is valid to reference an element that is not visible. + コンボボックス要素には、ポップアップとして機能する要素を参照する値に設定されたaria-controlsがあります。 + aria-controlsは、ポップアップが表示されている場合にのみ設定する必要があります。 + ただし、表示されていない要素を参照することも有効です。
                      • -
                    • The popup is an element that has role listbox, tree, grid, or dialog.
                      • +
                    • ポップアップは、ロールリストボックス、ツリー、グリッド、またはダイアログを持つ要素です。
                    • - If the popup has a role other than listbox, the element with role combobox has aria-haspopup set to a value that corresponds to the popup type. - That is, aria-haspopup is set to grid, tree, or dialog. - Note that elements with role combobox have an implicit aria-haspopup value of listbox. + ポップアップのロールがlistbox以外の場合、ロールcomboboxを持つ要素には、ポップアップの種類に対応する値に設定されたaria-haspopupがあります。 + つまり、aria-haspopupはgrid、tree、またはdialogに設定されます。 + ロールcomboboxを持つ要素には、aria-haspopupの暗黙の値listboxがあります。
                    • - When the combobox popup is not visible, the element with role combobox has aria-expanded set to false. - When the popup element is visible, aria-expanded is set to true. - Note that elements with role combobox have a default value for aria-expanded of false. + コンボボックスポップアップが表示されていない場合、ロールcomboboxを持つ要素のaria-expandedはfalseに設定されます。 + ポップアップ要素が表示されている場合、aria-expandedはtrueに設定されます。 + ロールcomboboxを持つ要素には、aria-expandedのデフォルト値falseがあります。
                      • -
                    • When a combobox receives focus, DOM focus is placed on the combobox element.
                      • -
                    • When a descendant of a listbox, grid, or tree popup is focused, DOM focus remains on the combobox and the combobox has aria-activedescendant set to a value that refers to the focused element within the popup.
                      • -
                    • For a combobox that controls a listbox, grid, or tree popup, when a suggested value is visually indicated as the currently selected value, the option, gridcell, row, or treeitem containing that value has aria-selected set to true.
                      • +
                    • コンボボックスがフォーカスを受けると、DOMフォーカスはコンボボックス要素に置かれます。
                      • +
                    • リストボックス、グリッド、またはツリーポップアップの子孫にフォーカスがある場合、DOMフォーカスはコンボボックスに残ります。コンボボックスには、ポップアップ内のフォーカスされた要素を参照する値に設定されたaria-activedescendantがあります。
                      • +
                    • リストボックス、グリッド、またはツリーポップアップを制御するコンボボックスの場合、提案値が現在選択されている値として視覚的に示されている場合、その値を含むoption、gridcell、row、またはtreeitemのaria-selectedはtrueに設定されます。
                    • - If the combobox has a visible label and the combobox element is an HTML element that can be labelled using the HTML label element (e.g., the input element), it is labeled using the label element. - Otherwise, if it has a visible label, the combobox element has aria-labelledby set to a value that refers to the labelling element. - Otherwise, the combobox element has a label provided by aria-label. + コンボボックスに表示可能なラベルがあり、コンボボックス要素がHTMLのlabel要素を使用してラベル付けできるHTML要素（例：input要素）である場合、label要素を使用してラベル付けされます。 + それ以外の場合、表示可能なラベルがある場合、コンボボックス要素には、ラベル付け要素を参照する値に設定されたaria-labelledbyがあります。 + それ以外の場合、コンボボックス要素には、aria-labelによって提供されるラベルがあります。
                    • - The combobox element has aria-autocomplete set to a value that corresponds to its autocomplete behavior: + コンボボックス要素には、オートコンプリート動作に対応する値に設定されたaria-autocompleteがあります。
                        -
                      • none: When the popup is displayed, the suggested values it contains are the same regardless of the characters typed in the combobox.
                        • +
                      • none: ポップアップが表示されるときに、それに含まれる提案された値は、コンボボックスに入力された文字に関係なく同じです。
                      • - list: When the popup is triggered, it presents suggested values. - If the combobox is editable, the values complete or logically correspond to the characters typed in the combobox. + list: ポップアップがトリガーされると、提案された値が表示されます。 + コンボボックスが編集可能な場合、値はコンボボックスに入力された文字を補完または論理的に対応します。
                      • - both: When the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the combobox. - In addition, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the combobox. - The inline completion string is visually highlighted and has a selected state. + both: ポップアップがトリガーされると、コンボボックスに入力された文字を補完または論理的に対応する提案された値が表示されます。 + さらに、ユーザーが入力していない選択された提案の部分（「完了文字列」と呼ばれる）は、コンボボックスの入力カーソルの後にインラインで表示されます。 + インライン完了文字列は視覚的に強調表示され、選択状態になります。
                    -

                    Note

                    +

                    注

                    1. - In ARIA 1.0, the combobox referenced its popup with aria-owns instead of aria-controls. - While user agents might support comboboxes with aria-owns for backwards compatibility with legacy content, it is strongly recommended that authors use aria-controls. + ARIA 1.0では、コンボボックスはaria-controlsではなくaria-ownsを使用してポップアップを参照していました。 + ユーザーエージェントは、レガシーコンテンツとの下位互換性のためにaria-ownsを持つコンボボックスをサポートする場合がありますが、aria-controlsを使用することを強くお勧めします。
                      2. -
                    2. When referring to the roles, states, and properties documentation for the below list of patterns used for popups, keep in mind that a combobox is a single-select widget where selection follows focus in the popup.
                      3. +
                    3. ポップアップに使用される以下のパターンに関するロール、状態、およびプロパティのドキュメントを参照するときは、コンボボックスは単一選択ウィジェットであり、選択はポップアップ内のフォーカスに従うことに注意してください。
                    4. - The roles, states, and properties for popup elements are defined in their respective design patterns: + ポップアップ要素のロール、状態、およびプロパティは、それぞれのデザインパターンで定義されています。
                    diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html index 26a87a6d..25041a3b 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-both.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-both.html @@ -1,11 +1,11 @@ - + - Editable Combobox With Both List and Inline Autocomplete Example + 編集可能なコンボボックスの例（リストとインラインオートコンプリート） - + @@ -13,530 +13,531 @@ - + -
                    - -
                    + +
    -
    -

    Accessibility Features

    -
      -
    • - Browsers do not manage visibility of elements referenced by aria-activedescendant like they do for elements with focus. - When a keyboard event changes the active option in the listbox, the JavaScript scrolls the option referenced by aria-activedescendant into view. - Managing aria-activedescendant visibility is essential to accessibility for people who use a browser's zoom feature to increase the size of content. -
      • -
    • - To enhance perceivability when operating the combobox, visual keyboard focus and hover are styled using the CSS :hover pseudo-class, and focus and blur event handlers: +
      +

      アクセシビリティの機能

      +
        +
      • + ブラウザは、フォーカスを持つ要素と同様に、aria-activedescendantで参照される要素の表示を管理しません。 + キーボードイベントによってリストボックス内のアクティブなオプションが変更されると、JavaScriptはaria-activedescendantで参照されるオプションを表示領域にスクロールします。 + aria-activedescendantの表示を管理することは、コンテンツのサイズを拡大するためにブラウザのズーム機能を使用する人々のアクセシビリティにとって重要です。 +
        • +
      • + コンボボックスの操作時に知覚性を向上させるために、ビジュアルキーボードフォーカスとホバーはCSSの:hover疑似クラスとfocusおよびblurイベントハンドラを使用してスタイリングされます：
          -
        • To make it easier to perceive when the combobox receives focus, focus creates a 2 pixel focus ring around both the input and button elements with 2 pixels of space between the focus ring and the combobox.
          • -
        • To make it easier to perceive that either the input or button can be clicked to open the listbox, hover causes the same styling as focus.
          • -
        • To help people with visual impairments identify the combobox as an interactive element, the cursor is changed to a pointer when hovering over the combobox or list.
          • -
        • To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.
          • +
        • コンボボックスがフォーカスを受け取ったときにわかりやすくするため、フォーカスは2ピクセルのフォーカスリングを要素と
          • +
        • リストボックスを開くために入力またはボタンをクリックできることをわかりやすくするため、ホバーはフォーカスと同じスタイリングをします。
          • +
        • コンボボックスまたはリスト上にホバーすると、視覚障害を持つ人々がコンボボックスを対話型要素として識別できるように、カーソルがポインタに変わります。
          • +
        • 選択されたリストボックスのオプションを他のオプションと区別しやすくするため、選択はオプションの上下に2ピクセルのボーダーを作成します。
        • - Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements. - Instead of using transparency, the focused element has a thicker border and less padding. - When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels. - When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels. + 注意：透明なボーダーは、一部のシステムでオペレーティングシステムの高いコントラスト設定が有効になっている場合に表示されます。 + 透明度は、フォーカスされた要素と他の要素との間に視覚的な違いを作成するために使用できません。 + 透明度の代わりに、フォーカスされた要素はより厚いボーダーと少ないパディングを持ちます。 + 要素がフォーカスを受け取ると、ボーダーはゼロから2ピクセルに変更され、パディングは2ピクセル減少します。 + 要素がフォーカスを失うと、ボーダーは2ピクセルから2ピクセルに変更され、パディングは2ピクセル増加します。
        -
        • -
      • - To ensure the inline SVG graphic used for the arrow in the open button has 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 element and and the fill attribute of the polygon element is set to currentcolor. - This causes the colors of the fill of the polygon elements to be overridden by the high contrast color setting. - If forced-color-adjust were not used to override the colors specified for the fill property, the color would remain the same in high contrast mode, which could lead to insufficient contrast between the arrow and the background or even make it invisible if the 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. -
        • -
      -
      +
      • +
    • + 高コントラスト設定がテキストコンテンツの色を変更する場合、開いたボタンの矢印に使用されるインラインSVGグラフィックが背景と十分なコントラストを持つようにするために、CSSのforced-color-adjustをautoに設定し、polygon要素のfill属性をcurrentcolorに設定します。 + これにより、polygon要素のfillの色は高コントラストカラー設定によって上書きされます。 + forced-color-adjustを使用してfillプロパティの指定された色を上書きしない場合、色は高コントラストモードでも同じままになり、矢印と背景との間の十分なコントラストが得られないか、色が高コントラストモードの背景と一致して見えなくなる可能性があります。
      + 注意：forced-color-adjustの明示的な設定は、一部のブラウザがSVGグラフィックのデフォルト値としてautoを使用しないため必要です。 +
      • +
    +
    -

    Keyboard Support

    +

    キーボードサポート

    - The example combobox on this page implements the following keyboard interface. - Other variations and options for the keyboard interface are described in the Keyboard Interaction section of the Combobox Pattern. + このページの例のコンボボックスは、以下のキーボードインターフェースを実装しています。 + キーボードインターフェースの他のバリエーションやオプションについては、コンボボックスパターンのキーボードインタラクションセクションで説明されています。

    -

    Textbox

    +

    テキストボックス

    - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
    KeyFunction
    キー機能
    Down Arrow -
      -
    • If the listbox is displayed and a suggestion is selected, moves visual focus to the next suggested value.
      • -
    • If the textbox is empty and the listbox is not displayed, opens the listbox and moves visual focus to the first option.
      • -
    • In both cases DOM focus remains on the textbox.
      • -
    -
    Alt + Down ArrowOpens the listbox without moving focus or changing selection.
    Up Arrow -
      -
    • If the listbox is displayed and a suggestion is selected, moves visual focus to the last suggested value.
      • -
    • If the textbox is empty, first opens the listbox if it is not already displayed and then moves visual focus to the last option.
      • -
    • In both cases DOM focus remains on the textbox.
      • -
    -
    Enter -
      -
    • Sets the textbox value to the content of the selected option.
      • -
    • Closes the listbox.
      • -
    -
    Escape -
      -
    • If the listbox is displayed, closes it.
      • -
    • If the listbox is not displayed, clears the textbox.
      • -
    -
    Standard single line text editing keys -
      -
    • Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow.
      • -
    • An HTML input with type="text" is used for the textbox so the browser will provide platform-specific editing keys.
      • -
    -
    下矢印 +
      +
    • リストボックスが表示され、候補が選択されている場合、次の候補値に視覚的なフォーカスを移動します。
      • +
    • テキストボックスが空で、リストボックスが表示されていない場合、リストボックスを開き、最初のオプションに視覚的なフォーカスを移動します。
      • +
    • いずれの場合も、DOMのフォーカスはテキストボックスに残ります。
      • +
    +
    Alt + 下矢印フォーカスや選択を変更せずにリストボックスを開きます。
    上矢印 +
      +
    • リストボックスが表示され、候補が選択されている場合、最後の候補値に視覚的なフォーカスを移動します。
      • +
    • テキストボックスが空の場合、リストボックスをまだ表示していない場合はリストボックスを開き、最後のオプションに視覚的なフォーカスを移動します。
      • +
    • いずれの場合も、DOMのフォーカスはテキストボックスに残ります。
      • +
    +
    Enter +
      +
    • 選択されたオプションの内容でテキストボックスの値を設定します。
      • +
    • リストボックスを閉じます。
      • +
    +
    Escape +
      +
    • リストボックスが表示されている場合、リストボックスを閉じます。
      • +
    • リストボックスが表示されていない場合、テキストボックスをクリアします。
      • +
    +
    標準の単一行テキスト編集キー +
      +
    • カーソルの移動やテキストの操作に使用されるキー、例えばDeleteやShift + 右矢印など。
      • +
    • テキストボックスにはtype="text"のHTML inputが使用されているため、ブラウザがプラットフォーム固有の編集キーを提供します。
      • +
    +
    -

    Listbox Popup

    +

    リストボックスポップアップ

    - NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused. - Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator. - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. + 注意: リストボックスに視覚的なフォーカスがある場合、DOMのフォーカスはテキストボックスに残り、テキストボックスのaria-activedescendantの値は、視覚的にフォーカスされているリストボックスのオプションを参照する値に設定されます。 + キーボードコマンドの以下の説明でフォーカスと言及している場合、視覚的なフォーカスインジケータを指しています。 + このフォーカス管理テクニックの詳細については、aria-activedescendantを使用したコンポジット内のフォーカス管理を参照してください。

    - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyFunction
    キー機能
    Enter -
      -
    • Sets the textbox value to the content of the focused option in the listbox.
      • -
    • Closes the listbox.
      • -
    • Sets visual focus on the textbox.
      • -
    -
    Escape -
      -
    • Closes the listbox.
      • -
    • Sets visual focus on the textbox.
      • -
    -
    Down Arrow -
      -
    • Moves visual focus to the next option.
      • -
    • If visual focus is on the last option, moves visual focus to the first option.
      • -
    • Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
      • -
    -
    Up Arrow -
      -
    • Moves visual focus to the previous option.
      • -
    • If visual focus is on the first option, moves visual focus to the last option.
      • -
    • Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
      • -
    -
    Right ArrowMoves visual focus to the textbox and moves the editing cursor one character to the right.
    Left ArrowMoves visual focus to the textbox and moves the editing cursor one character to the left.
    HomeMoves visual focus to the textbox and places the editing cursor at the beginning of the field.
    EndMoves visual focus to the textbox and places the editing cursor at the end of the field.
    Printable Characters -
      -
    • Moves visual focus to the textbox.
      • -
    • Types the character in the textbox.
      • -
    • Options in the listbox are filtered based on characters in the textbox.
      • -
    -
    Enter +
      +
    • フォーカスされているリストボックスのオプションの内容でテキストボックスの値を設定します。
      • +
    • リストボックスを閉じます。
      • +
    • 視覚的なフォーカスをテキストボックスに設定します。
      • +
    +
    Escape +
      +
    • リストボックスを閉じます。
      • +
    • 視覚的なフォーカスをテキストボックスに設定します。
      • +
    +
    下矢印 +
      +
    • 次のオプションに視覚的なフォーカスを移動します。
      • +
    • 視覚的なフォーカスが最後のオプションにある場合、最初のオプションに視覚的なフォーカスを移動します。
      • +
    • 注: このラッピング動作は、以下で説明するようにHomeとEndが編集カーソルを移動する場合に便利です。
      • +
    +
    上矢印 +
      +
    • 前のオプションに視覚的なフォーカスを移動します。
      • +
    • 視覚的なフォーカスが最初のオプションにある場合、最後のオプションに視覚的なフォーカスを移動します。
      • +
    • 注: このラッピング動作は、以下で説明するようにHomeとEndが編集カーソルを移動する場合に便利です。
      • +
    +
    右矢印視覚的なフォーカスをテキストボックスに移動し、編集カーソルを右に1文字移動します。
    左矢印視覚的なフォーカスをテキストボックスに移動し、編集カーソルを左に1文字移動します。
    Home視覚的なフォーカスをテキストボックスに移動し、フィールドの先頭に編集カーソルを配置します。
    End視覚的なフォーカスをテキストボックスに移動し、フィールドの末尾に編集カーソルを配置します。
    印刷可能な文字 +
      +
    • 視覚的なフォーカスをテキストボックスに移動します。
      • +
    • テキストボックスに文字を入力します。
      • +
    • リストボックスのオプションは、テキストボックス内の文字に基づいてフィルタリングされます。
      • +
    +
    -

    Button

    -

    The button has been removed from the tab sequence of the page, but is still important to assistive technologies for mobile devices that use touch events to open the list of options.

    +

    ボタン

    +

    ボタンはページのタブシーケンスから削除されていますが、モバイルデバイスでタッチイベントを使用してオプションのリストを開くために補助技術に重要です。

    -

    Role, Property, State, and Tabindex Attributes

    +

    ロール、プロパティ、状態、および tabindex属性

    - The example combobox on this page implements the following ARIA roles, states, and properties. - Information about other ways of applying ARIA roles, states, and properties is available in the Roles, States, and Properties section of the Combobox Pattern. + このページの例のコンボボックスは、以下のARIAロール、状態、およびプロパティを実装しています。 + ARIAロール、状態、およびプロパティの他の適用方法についての情報は、コンボボックスパターンのロール、状態、およびプロパティセクションで入手できます。

    -

    Textbox

    +

    テキストボックス

    - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    ロール属性要素使用方法
    - combobox - input[type="text"]Identifies the input as a combobox.
    - aria-autocomplete="both" - input[type="text"]Indicates that the autocomplete behavior of the text input is to both show an inline completion string and suggest a list of possible values in a popup where the suggestions are related to the string that is present in the textbox.
    - aria-controls="ID_REF" - input[type="text"]Identifies the element that serves as the popup.
    - aria-expanded="false" - input[type="text"]Indicates that the popup element is not displayed.
    - aria-expanded="true" - input[type="text"]Indicates that the popup element is displayed.
    - id="string" - input[type="text"] -
      -
    • Referenced by for attribute of label element to provide an accessible name.
      • -
    • Recommended naming method for HTML input elements because clicking label focuses input.
      • -
    -
    - aria-activedescendant="ID_REF" - input[type="text"] -
      -
    • When an option in the listbox is visually indicated as having keyboard focus, refers to that option.
      • -
    • When navigation keys, such as Down Arrow, 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 input element.
      • -
    • - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. -
      • -
    -
    + combobox + input[type="text"]入力をコンボボックスとして識別します。
    + aria-autocomplete="both" + input[type="text"]テキスト入力の自動補完の動作が、インラインの補完文字列を表示し、テキストボックスに存在する文字列に関連する候補値のリストを提案することを示します。
    + aria-controls="ID_REF" + input[type="text"]ポップアップとして機能する要素を識別します。
    + aria-expanded="false" + input[type="text"]ポップアップ要素が表示されていないことを示します。
    + aria-expanded="true" + input[type="text"]ポップアップ要素が表示されていることを示します。
    + id="string" + input[type="text"] +
      +
    • アクセシブルな名前を提供するために、label要素のfor属性で参照されます。
      • +
    • HTMLの入力要素に対する推奨される命名方法であり、ラベルをクリックすると入力がフォーカスされます。
      • +
    +
    + aria-activedescendant="ID_REF" + input[type="text"] +
      +
    • リストボックスのオプションがキーボードフォーカスを持つことを視覚的に示す場合、そのオプションを参照します。
      • +
    • ナビゲーションキー（例：Down Arrow）が押されたときに、JavaScriptが値を変更します。
      • +
    • DOMのフォーカスがinput要素にある間、支援技術がアプリケーションがフォーカスしている要素を知ることができるようにします。
      • +
    • + このフォーカス管理テクニックの詳細については、 + aria-activedescendantを使用したコンポジット内のフォーカスの管理を参照してください。 +
      • +
    +
    -

    Listbox Popup

    +

    リストボックスポップアップ

    - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    ロール属性要素使用方法
    - listbox - - ul - Identifies the ul element as a listbox.
    - aria-label="States" - ulProvides a label for the listbox.
    - option - li -
      -
    • Identifies the element as a listbox option.
      • -
    • The text content of the element provides the accessible name of the option.
      • -
    -
    - aria-selected="true" - li -
      -
    • Specified on an option in the listbox when it is visually highlighted as selected.
      • -
    • Occurs when an option in the list is referenced by aria-activedescendant and when focus is in the textbox and the first option is automatically selected.
      • -
    -
    + listbox + + ul + ul要素をlistboxとして識別します。
    + aria-label="States" + ullistboxのためのラベルを提供します。
    + option + li +
      +
    • 要素をlistboxのoptionとして識別します。
      • +
    • 要素のテキストコンテンツはoptionのアクセシブルな名前を提供します。
      • +
    +
    + aria-selected="true" + li +
      +
    • リストボックスのオプションが視覚的に選択されていることを示す場合に指定されます。
      • +
    • リスト内のオプションがaria-activedescendantで参照され、テキストボックスにフォーカスがあり、最初のオプションが自動的に選択される場合に発生します。
      • +
    +
    -

    Button

    +

    ボタン

    - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    ロール属性要素使用方法
    - tabindex="-1" - buttonRemoves the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.
    - aria-label="States" - buttonProvides a label for the button.
    - aria-controls="ID_REF" - buttonIdentifies the element that serves as the popup.
    - aria-expanded="false" - buttonIndicates that the popup element is not displayed.
    - aria-expanded="true" - buttonIndicates that the popup element is displayed.
    + tabindex="-1" + buttonコンボボックスのキーボード操作と重複するため、ボタンをページのタブシーケンスから削除します。
    + aria-label="States" + buttonbuttonのためのラベルを提供します。
    + aria-controls="ID_REF" + buttonポップアップとして機能する要素を識別します。
    + aria-expanded="false" + buttonポップアップ要素が表示されていないことを示します。
    + aria-expanded="true" + buttonポップアップ要素が表示されていることを示します。
    -

    JavaScript and CSS Source Code

    +

    JavaScriptとCSSのソースコード

    - +
    -

    HTML Source Code

    -

    To copy the following HTML code, please open it in CodePen.

    - +

    HTMLのソースコード

    +

    以下のHTMLコードをコピーするには、CodePenで開いてください。

    +
    - + - - - - - - - + + + 編集可能なリスト自動補完のあるコンボボックスの例 + + + + + + + + + + + + -
    @@ -702,9 +713,9 @@

    JavaScript 及び CSS のソースコード

    HTML のソースコード

    以下の HTML コードをコピーするには、CodePen で開いてください。

    - +
    - + @@ -13,7 +13,7 @@ - + @@ -34,24 +34,24 @@

    グリッドポップアップ付き編集可能コンボボックスの例<

    この例について

    - 以下のコンボボックスの例は、コンボボックスパターンを使用して、提案値のポップアップにグリッドを使用しています。 + 以下のコンボボックスの例は、提案値のポップアップにグリッドを使用したコンボボックスパターンを実装しています。

    この例では、利用者はボックスに値を入力するか、グリッドポップアップに表示される値のセットから選択することで、果物や野菜の名前を指定することができます。 - テキストボックスにセット内のアイテム名の先頭文字に一致する文字が含まれると、ポップアップが利用可能になります。 + テキストボックスが提案値のセット内のアイテム名の先頭文字に一致する文字を含むようになった後に、ポップアップが使用可能になります。 利用者はテキストボックスに任意の値を入力することができます。この実装では、入力を提案値のセット内の値に制限しません。

    - 提案値を表示するグリッドには 2 列があります。 - グリッドの各行は 1 つの提案を表し、列 1 には果物や野菜の名前が含まれ、列 2 にはそれが果物か野菜かが記載されています。 + 提案値を表示するグリッドは 2 つの列を持ちます。 + グリッドの各行は 1 つの提案を表し、列 1 には果物や野菜の名前が含まれ、列 2 はそれが果物か野菜かを識別します。

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

    @@ -64,7 +64,10 @@

    例

    - +
    @@ -76,7 +79,7 @@

    例

    アクセシビリティ機能

    ブラウザは、フォーカスのある要素のように aria-activedescendant によって参照される要素の可視性を管理しません。 - キーボードイベントがリストボックス内のアクティブなオプションを変更すると、JavaScript は aria-activedescendant によって参照されるオプションを表示領域にスクロールします。 + キーボードイベントがリストボックス内のアクティブな選択肢を変更すると、JavaScript は aria-activedescendant によって参照される選択肢を表示領域にスクロールします。 aria-activedescendant の可視性を管理することは、コンテンツのサイズを拡大するためにブラウザのズーム機能を使用する人々にとってアクセシビリティのために不可欠です。

    @@ -105,7 +108,7 @@

    テキストボックス

    グリッドが表示されている場合、フォーカスを最後の提案値に移動します。 - エスケープ + Escape
    • グリッドが表示されている場合、それを閉じます。
      • @@ -119,7 +122,7 @@

      テキストボックス

      • Delete や Shift + 右矢印 などのカーソル移動及びテキスト操作に使用されるキー。
      • - テキストボックスには type=text の HTML input が使用されているため、ブラウザはプラットフォーム固有の編集キーを提供します。 + テキストボックスには type="text" の HTML input が使用されているため、ブラウザはプラットフォーム固有の編集キーを提供します。
      @@ -128,10 +131,10 @@

      テキストボックス

      グリッドポップアップ

      - 注記: 視覚的フォーカスがグリッド内にある場合、DOM フォーカスはテキストボックスに残り、テキストボックスの aria-activedescendant の値が視覚的にフォーカスされている要素を参照する値に設定されます。 + 注記: 視覚的フォーカスがグリッド内にある場合、DOM フォーカスはテキストボックスに残り、テキストボックスの aria-activedescendant の値は、フォーカスされていると視覚的に表示されているグリッド内の要素を参照する値に設定されます。 以下のキーボードコマンドの説明でフォーカスに言及する場合、それは視覚的フォーカスインジケーターを指します。 - このフォーカスマネジメントテクニックの詳細については、 - aria-activedescendant を使用したコンポジット内のフォーカス管理 を参照してください。 + このフォーカス管理テクニックの詳細については、 + aria-activedescendant を使用したコンポジット内のフォーカスの管理を参照してください。

      @@ -260,7 +263,7 @@

      テキストボックス

      aria-expanded="false" - + @@ -268,7 +271,7 @@

      テキストボックス

      aria-expanded="true" - + @@ -278,7 +281,7 @@

      テキストボックス

      @@ -289,7 +292,7 @@

      テキストボックス

      aria-autocomplete="list" - + @@ -297,7 +300,7 @@

      テキストボックス

      aria-controls="IDREF" - + @@ -308,11 +311,11 @@

      テキストボックス

      From 611c0e57b6e0252c8dc801d764b62fea87f0ce49 Mon Sep 17 00:00:00 2001 From: p_craft Date: Fri, 20 Sep 2024 00:39:54 +0900 Subject: [PATCH 12/13] =?UTF-8?q?combobox=E3=81=AE=E7=BF=BB=E8=A8=B3?= =?UTF-8?q?=E6=8F=BA=E3=82=8C=E3=82=92=E7=B5=B1=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../patterns/combobox/combobox-pattern.html | 272 +++++++++--------- .../examples/combobox-autocomplete-both.html | 112 ++++---- .../examples/combobox-autocomplete-list.html | 114 ++++---- .../examples/combobox-autocomplete-none.html | 92 +++--- .../examples/combobox-datepicker.html | 12 +- .../examples/combobox-select-only.html | 54 ++-- .../combobox/examples/grid-combo.html | 36 +-- 7 files changed, 346 insertions(+), 346 deletions(-) diff --git a/content/patterns/combobox/combobox-pattern.html b/content/patterns/combobox/combobox-pattern.html index 86b27c1c..01fe3bd3 100644 --- a/content/patterns/combobox/combobox-pattern.html +++ b/content/patterns/combobox/combobox-pattern.html @@ -1,5 +1,5 @@ - + @@ -22,19 +22,19 @@

      このパターンについて

      コンボボックスは、関連付けられたポップアップを持つ入力ウィジェットです。 ポップアップにより、利用者はコレクションから入力値を選択できます。 - ポップアップは、リストボックス、グリッド、ツリー、又はダイアログである可能性があります。 + ポップアップは、リストボックス、グリッド、ツリー、又はダイアログである可能性があります。

      いくつかの実装では、ポップアップは許可された値を表示し、他の実装では、ポップアップは提案された値を表示します。 - 多くの実装には、コンボボックスに隣接するグラフィカルな「開く」ボタンというオプションの第三要素も含まれており、ポップアップの可用性を示します。 + 多くの実装には、三つ目の任意の要素、コンボボックスに隣接するグラフィカルな「開く」ボタンも含まれており、ポップアップが使用可能であることを示します。 「開く」ボタンを作動すると、提案が利用可能な場合にポップアップが表示されます。

      - コンボボックスパターンは、いくつかのオプションの動作をサポートします。 + コンボボックスパターンは、いくつかの任意の動作をサポートします。 インタラクションを最も形作るものはテキスト入力です。 一部のコンボボックスでは、利用者がコンボボックス内でテキストを入力及び編集できますが、他のコンボボックスではできません。 - テキスト入力をサポートしないコンボボックスは、選択のみと呼ばれ、利用者がその値を設定できる唯一の方法はポップアップで値を選択することです。 - 例えば、一部のブラウザでは、size="1"を持つ HTML のselect要素は、支援技術に対してコンボボックスとして提示されます。 + テキスト入力をサポートしないコンボボックスは、選択限定と呼ばれ、利用者がその値を設定できる唯一の方法はポップアップで値を選択することです。 + 例えば、一部のブラウザでは、 size="1" を持つ HTML の select 要素は、支援技術に対してコンボボックスとして提示されます。 あるいは、コンボボックスがテキスト入力をサポートする場合、編集可能と呼ばれます。 編集可能なコンボボックスは、利用者が任意の値を入力することを許可するか、又は許可された値の離散的なセットに値を制限することができ、その場合、入力の入力がポップアップに表示される提案をフィルタリングするために役立ちます。

      @@ -54,47 +54,47 @@

      このパターンについて

      コンボボックスウィジェットは、次の 2 つのシナリオのいずれかで利用者入力を取得するのに役立ちます。

      1. - 値は、事前に定義された一連の許可された値のいずれかである必要があります。たとえば、場所フィールドには有効な場所名が含まれている必要があります。 + 値は、事前に定義された一連の許可された値のいずれかである必要があります。例えば、場所フィールドは有効な場所名を含んでいる必要があります。 リストボックスとメニューボタンパターンもこのシナリオで有用であることに注意してください。コンボボックスと代替パターン間の違いについては以下で説明します。
      2. - 任意の値が許可されますが、利用者に可能な値を提案することは有利です。 - たとえば、検索フィールドは、類似又は以前の検索を提案して、利用者の時間を節約できます。 + 任意の値が許可されますが、利用者に可能な値を提案することは好都合です。 + 例えば、検索フィールドは、類似又は以前の検索を提案して、利用者の時間を節約できます。

      - ポップアップによって提示される可能な値の性質とその提示方法は、オートコンプリート動作と呼ばれます。 + ポップアップによって提示される有効な値の性質とその提示方法は、オートコンプリート動作と呼ばれます。 コンボボックスには、次の 4 つのオートコンプリート形式のいずれかがあります。

      1. オートコンプリートなし：コンボボックスは編集可能であり、ポップアップがトリガされると、それに含まれる提案された値は、コンボボックスに入力された文字に関係なく同じです。 - たとえば、ポップアップは最近入力された値のセットを提案し、提案は利用者が入力しても変更されません。 + 例えば、ポップアップは最近入力された値のセットを提案し、提案は利用者が入力した内容を変更しません。
      2. 手動選択付きリストオートコンプリート：ポップアップがトリガされると、提案された値が表示されます。 - コンボボックスが編集可能な場合、提案された値は、コンボボックスに入力された文字を補完又は論理的に対応します。 + コンボボックスが編集可能な場合、提案された値は、コンボボックスに入力された文字を補完又はその文字と論理的に対応します。 利用者が入力した文字列は、利用者がポップアップで値を選択しない限り、コンボボックスの値になります。
      3. - 自動選択付きリストオートコンプリート：コンボボックスは編集可能であり、ポップアップがトリガされると、コンボボックスに入力された文字を補完又は論理的に対応する提案された値が表示され、最初の提案が自動的に強調表示されて選択されます。 + 自動選択付きリストオートコンプリート：コンボボックスは編集可能であり、ポップアップがトリガされると、コンボボックスに入力された文字を補完する又は論理的に対応する提案された値が表示され、最初の提案が自動的に強調表示されて選択されます。 自動的に選択された提案は、利用者が別の提案を選択するか、コンボボックス内の文字列を変更しない限り、コンボボックスがフォーカスを失ったときにコンボボックスの値になります。
      4. - インラインオートコンプリート付きリスト：これは、自動選択付きリストと同じで、1つの追加機能があります。 - 利用者が入力していない選択された提案の部分である完了文字列は、コンボボックスの入力カーソルの後にインラインで表示されます。 - インライン完了文字列は視覚的に強調表示され、選択状態になります。
        5. + インラインオートコンプリート付きリスト：これは、自動選択付きリストと同じで、追加機能が一つあります。 + 利用者が入力したものではない選択された提案の一部分である補完文字列が、コンボボックスの入力カーソルの後にインラインで表示されます。 + インライン補完文字列は視覚的に強調表示され、選択状態になります。

      - コンボボックスが編集可能で何らかのリストオートコンプリートを持っている場合、ポップアップは利用者が入力すると表示及び非表示になる可能性があります。 - たとえば、利用者が 2 文字の文字列を入力して 5 つの提案を表示するようにトリガし、次に一致する提案を持たない文字列を形成する 3 文字目を入力すると、ポップアップが閉じられ、存在する場合、インライン完了文字列が消えます。 + コンボボックスが編集可能で何らか形のリストオートコンプリートを持っている場合、ポップアップは利用者の入力に応じて表示及び非表示になる可能性があります。 + 例えば、利用者が 2 文字の文字列を入力して 5 つの提案を表示するようにトリガし、次に一致する提案を持たない文字列を形成する 3 文字目を入力すると、ポップアップが閉じられ、存在する場合、インライン補完文字列が消えます。

      - 視覚的にコンパクトで、利用者が離散的な選択肢のセットから単一の選択を行うことを可能にする他の 2 つのウィジェットは、リストボックスとメニューボタンです。 - コンボボックスとリストボックス及びメニューボタンを区別する 1 つの機能は、利用者の選択が編集可能なフィールドの値として表示できることであり、これにより利用者はクリップボードにコピーするために値の一部又はすべてを選択できます。 + 視覚的にコンパクトで、利用者が別個の選択肢のセットから単一の選択を行うことを可能にする他の 2 つのウィジェットは、リストボックスとメニューボタンです。 + コンボボックスとリストボックス及びメニューボタンを区別する 1 つの機能は、利用者の選択が編集可能なフィールドの値として表示できることであり、これにより利用者はクリップボードにコピーするために値の一部又は全てを選択できます。 コンボボックスとメニューボタンは、利用者が以前に選択したものを失うことなく、許可された選択肢のセットを探索できるように実装できます。 - つまり、利用者はコンボボックスポップアップ又はメニュー内の利用可能な選択肢のセットをナビゲートし、次にEscapeを押すことができ、ポップアップ又はメニューを閉じますが、以前の入力を変更しません。 - 対照的に、シングルセレクトリストボックス内のオプション間のナビゲーションはすぐにその値を変更し、Escapeは元に戻すメカニズムを提供しません。 - コンボボックスとリストボックスは、aria-required="true"で必須としてマークでき、それらはそれらの値とは異なるアクセシブル名を持ちます。 + つまり、利用者はコンボボックスポップアップ又はメニュー内の利用可能な選択肢のセットをナビゲートして Escape を押すことができ、そうすると以前の入力を変更せずにポップアップ又はメニューを閉じます。 + 対照的に、単一選択リストボックス内の選択肢間のナビゲーションはすぐにその値を変更し、Escape は元に戻すメカニズムを提供しません。 + コンボボックスとリストボックスは、aria-required="true" で必須としてマークでき、それらはそれらの値とは異なるアクセシブル名を持ちます。 したがって、支援技術利用者がデフォルト状態のコンボボックス又はリストボックスにフォーカスすると、ウィジェットの名前と値の両方を認識できます。 ただし、メニューボタンは必須としてマークすることはできず、アクセシブル名がありますが、値を持たないため、折り畳まれた状態で利用者の選択を伝えるのに適していません。

      @@ -104,11 +104,11 @@

      このパターンについて

      例

      @@ -116,8 +116,8 @@

      例

      キーボード操作

        -
      • Tab: コンボボックスはページのTab順序にあります。
        • -
      • 注: ポップアップインジケータアイコン又はボタン（存在する場合）、ポップアップ、及びポップアップの子孫は、ページのTab順序から除外されます。
        • +
      • Tab: コンボボックスはページの Tab シーケンスの中にあります。
        • +
      • 注記: ポップアップインジケータアイコン又はボタン (存在する場合) 、ポップアップ、及びポップアップの子孫は、ページの Tab シーケンスから除外されます。

      コンボボックスのキーボード操作

      コンボボックスにフォーカスがある場合:

      @@ -129,17 +129,17 @@

      コンボボックスのキーボード操作

    • それ以外の場合、ポップアップ内の最初のフォーカス可能な要素にフォーカスを置きます。
      • -
    • 上矢印 (オプション): ポップアップが利用可能な場合、ポップアップ内の最後のフォーカス可能な要素にフォーカスを置きます。
      • +
    • 上矢印 (任意): ポップアップが利用可能な場合、ポップアップ内の最後のフォーカス可能な要素にフォーカスを置きます。
    • Escape: ポップアップが表示されている場合、ポップアップを閉じます。 - オプションとして、Escapeが押される前にポップアップが非表示の場合、コンボボックスをクリアします。 + オプションとして、Escape が押される前にポップアップが非表示の場合、コンボボックスをクリアします。
    • Enter: コンボボックスが編集可能で、ポップアップでオートコンプリートの提案が選択されている場合、提案を受け入れます。これは、コンボボックス内の受け入れられた値の最後に入力カーソルを配置するか、値に対してデフォルトのアクションを実行することによって行われます。 - たとえば、メッセージングアプリケーションでは、デフォルトのアクションは、受け入れられた値をメッセージ受信者のリストに追加してから、コンボボックスをクリアして利用者が別の受信者を追加できるようにすることです。 + 例えば、メッセージングアプリケーションでは、デフォルトのアクションは、受け入れられた値をメッセージ受信者のリストに追加してから、コンボボックスをクリアして利用者が別の受信者を追加できるようにすることです。
    • - 印刷可能文字: + 表示可能文字:
      • コンボボックスが編集可能な場合、コンボボックスに文字を入力します。 @@ -148,7 +148,7 @@

        コンボボックスのキーボード操作

      • コンボボックスが編集不可能な場合、オプションで入力された文字で始まる値にフォーカスを移動します。
      • -
    • コンボボックスが編集可能な場合、デバイスプラットフォームに適した標準的な単一行テキスト編集キーをサポートします（以下の注を参照）。
      • +
    • コンボボックスが編集可能な場合、デバイスプラットフォームに適した標準的な単一行テキスト編集キーをサポートします (下の注記を参照)。
    • Alt + 下矢印 (オプション): ポップアップが利用可能だが表示されていない場合、フォーカスを移動せずにポップアップを表示します。
    • Alt + 上矢印 (オプション): ポップアップが表示されている場合: @@ -159,30 +159,30 @@

      コンボボックスのキーボード操作

      • -

      注

      +

      注記

      デバイスプラットフォームに適した標準的な単一行テキスト編集キー:

      1. 入力、カーソル移動、選択、テキスト操作のためのキーが含まれます。
        2. -
      2. 編集機能の標準的なキー割り当ては、デバイスのオペレーティングシステムによって異なります。
        3. -
      3. テキスト編集機能を提供するための最も堅牢なアプローチは、ブラウザに依存することです。ブラウザは、type textを持つHTML入力及びcontenteditable HTML属性を持つ要素に対してそれらを供給します。
        4. -
      4. 重要: JavaScriptが、それらを実行するために使用されるキーのキーイベントをキャプチャすることによって、ブラウザ提供のテキスト編集機能を妨げないようにしてください。
        5. +
      5. 編集機能の標準的なキー割り当ては、デバイスのオペレーティングシステムに基づきます。
        6. +
      6. テキスト編集機能を提供するための最も堅牢なアプローチは、ブラウザに依存することです。ブラウザは、type text を持つ HTML 入力及び contenteditable HTML 属性を持つ要素に対してそれらを供給します。
        7. +
      7. 重要: JavaScript が、それらを実行するために使用されるキーのキーイベントをキャプチャすることによって、ブラウザ提供のテキスト編集機能を妨げないようにしてください。

      リストボックスポップアップのキーボード操作

      リストボックスポップアップにフォーカスがある場合:

        -
      • Enter: リストボックス内のフォーカスされたオプションを受け入れ、ポップアップを閉じ、受け入れられた値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置します。
        • +
      • Enter: ポップアップを閉じてリストボックス内のフォーカスされた選択肢を受け入れ、受け入れられた値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置します。
      • Escape: ポップアップを閉じて、フォーカスをコンボボックスに戻します。 - オプションとして、コンボボックスが編集可能な場合、コンボボックスの内容をクリアします。 + 任意で、コンボボックスが編集可能な場合、コンボボックスの内容をクリアします。
      • - 下矢印: 次のオプションにフォーカスを移動して選択します。 - フォーカスが最後のオプションにある場合、フォーカスをコンボボックスに戻すか、何も行いません。 + 下矢印: 次の選択肢にフォーカスを移動して選択します。 + フォーカスが最後の選択肢にある場合、フォーカスをコンボボックスに戻すか、何も行いません。
      • - 上矢印: 前のオプションにフォーカスを移動して選択します。 - フォーカスが最初のオプションにある場合、フォーカスをコンボボックスに戻すか、何も行いません。 + 上矢印: 前の選択肢にフォーカスを移動して選択します。 + フォーカスが最初の選択肢にある場合、フォーカスをコンボボックスに戻すか、何も行いません。
      • 右矢印: コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻し、入力カーソルを1文字右に移動します。 @@ -192,97 +192,97 @@

        リストボックスポップアップのキーボード操作

        左矢印: コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻し、入力カーソルを1文字左に移動します。 入力カーソルが左端の文字にある場合、カーソルは動きません。
        • -
      • Home (オプション): 最初のオプションにフォーカスを移動して選択するか、コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最初の文字に配置します。
        • -
      • End (オプション): 最後のオプションにフォーカスを移動するか、コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最後の文字の後に配置します。
        • +
      • Home (任意): 最初の選択肢にフォーカスを移動して選択するか、コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最初の文字に配置します。
        • +
      • End (任意): 最後の選択肢にフォーカスを移動するか、コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最後の文字の後に配置します。
      • - 任意の印刷可能文字: + 任意の表示可能文字:
        • コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻して文字を入力します。
        • それ以外の場合、入力された文字で始まる名前を持つ次のオプションにフォーカスを移動します。
        • -
      • Backspace (オプション): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻してカーソルの前の文字を削除します。
        • -
      • Delete (オプション): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻し、提案が選択されていた場合は選択状態を削除し、インラインオートコンプリート文字列が存在する場合は削除します。
        • +
      • Backspace (任意): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻してカーソルの前の文字を削除します。
        • +
      • Delete (任意): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻し、提案が選択されていた場合は選択状態を削除し、インラインオートコンプリート文字列が存在する場合は削除します。

      注記

      1. - DOMフォーカスはコンボボックスに維持され、支援技術のフォーカスは、複合要素でのaria-activedescendantを使用したフォーカスの管理で説明されているように、aria-activedescendantを使用してリストボックス内で移動されます。 + DOM フォーカスはコンボボックスに維持され、支援技術のフォーカスは、aria-activedescendant を使用した複合要素でのフォーカスの管理で説明されているように、aria-activedescendant を使用してリストボックス内で移動されます。
        2. -
      2. 選択はリストボックス内のフォーカスに従います。リストボックスでは、コンボボックス値に対して一度に1つの提案値のみを選択できます。
        3. +
      3. 選択はリストボックス内のフォーカスに従います。リストボックスでは、コンボボックス値に対して一度に一つの提案値のみを選択できます。

      グリッドポップアップのキーボード操作

      グリッドポップアップでは、各提案値は単一のセル又は行全体で表される場合があります。 - グリッドデザインのこの側面がキーボード操作設計と、フォーカスの移動に応じた選択の移動方法にどのように影響するかについては、以下の注を参照してください。 + グリッドデザインのこの側面が、キーボード操作設計とフォーカスの移動に応じた選択の移動方法にどのように影響するかについては、後述の注記を参照してください。

        -
      • Enter: 現在選択されている提案値を受け入れ、ポップアップを閉じ、選択された値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置します。
        • +
      • Enter: ポップアップを閉じ、選択された値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置することで、現在選択されている提案値を受け入れます。
      • Escape: ポップアップを閉じて、フォーカスをコンボボックスに戻します。 - オプションとして、コンボボックスが編集可能な場合、コンボボックスの内容をクリアします。 + 任意で、コンボボックスが編集可能な場合、コンボボックスの内容をクリアします。
      • 右矢印: フォーカスを1セル右に移動します。 - オプションとして、フォーカスが行の一番右のセルにある場合、フォーカスは次の行の一番左のセルに移動する場合があります。 - グリッドの最後のセルにフォーカスがある場合、何も行わないか、フォーカスをコンボボックスに戻します。 + 任意で、フォーカスが行の一番右のセルにある場合、フォーカスは次の行の一番左のセルに移動してもよいです。 + グリッドの最後のセルにフォーカスがある場合、何もしないか、フォーカスをコンボボックスに戻します。
      • 左矢印: フォーカスを1セル左に移動します。 - オプションとして、フォーカスが行の一番左のセルにある場合、フォーカスは前の行の一番右のセルに移動する場合があります。 - グリッドの一番左のセルにフォーカスがある場合、何も行わないか、フォーカスをコンボボックスに戻します。 + 任意で、フォーカスが行の一番左のセルにある場合、フォーカスは前の行の一番右のセルに移動してもよいです。 + グリッドの最初のセルにフォーカスがある場合、何もしないか、フォーカスをコンボボックスに戻します。
      • 下矢印: フォーカスを1セル下に移動します。 - グリッドの最後の行にフォーカスがある場合、何も行わないか、フォーカスをコンボボックスに戻します。 + グリッドの最後の行にフォーカスがある場合、何もしないか、フォーカスをコンボボックスに戻します。
      • 上矢印: フォーカスを1セル上に移動します。 - グリッドの一番上の行にフォーカスがある場合、何も行わないか、フォーカスをコンボボックスに戻します。 + グリッドの一番上の行にフォーカスがある場合、何もしないか、フォーカスをコンボボックスに戻します。
      • - Page Down (オプション): フォーカスを作者が決定した行数だけ下に移動します。通常、スクロールして、現在表示されている行セットの一番下の行が最初に表示される行の1つになります。 + Page Down (任意): フォーカスを作者が決定した行数だけ下に移動します。通常、スクロールして、現在表示されている行セットの一番下の行が最初に表示される行の1つになります。 グリッドの最後の行にフォーカスがある場合、フォーカスは動きません。
      • - Page Up (オプション): フォーカスを作者が決定した行数だけ上に移動します。通常、スクロールして、現在表示されている行セットの一番上の行が最後に表示される行の1つになります。 + Page Up (任意): フォーカスを作者が決定した行数だけ上に移動します。通常、スクロールして、現在表示されている行セットの一番上の行が最後に表示される行の1つになります。 グリッドの一番上の行にフォーカスがある場合、フォーカスは動きません。
      • - Home (オプション): どちらか: + Home (任意): どちらか:
        • - フォーカスのある行の一番左のセルにフォーカスを移動します。 - 又は、グリッドが行あたり3セル未満の場合、又は行あたり複数の提案値がある場合、グリッドの一番左のセルにフォーカスが移動する場合があります。 + フォーカスのある行の最初のセルにフォーカスを移動します。 + 又は、グリッドが 1 行あたり 3 セル未満の場合、又は 1 行あたり複数の提案値がある場合、グリッドの最初のセルにフォーカスが移動してもよいです。
        • コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最初の文字に配置します。
      • - End (オプション): どちらか: + End (任意): どちらか:
        • - フォーカスのある行の一番右のセルにフォーカスを移動します。 - 又は、グリッドが行あたり3セル未満の場合、又は行あたり複数の提案値がある場合、グリッドの一番右のセルにフォーカスが移動する場合があります。 + フォーカスのある行の最後のセルにフォーカスを移動します。 + 又は、グリッドが 1 行あたり 3 セル未満の場合、又は 1 行あたり複数の提案値がある場合、グリッドの最後のセルにフォーカスが移動してもよいです。
          • -
        • コンボボックスが編集可能な場合は、フォーカスをコンボボックスに戻してカーソルを最後の文字の後に配置します。
          • +
        • コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻してカーソルを最後の文字の後に配置します。
        • -
      • Control + Home (オプション): 最初の行にフォーカスを移動します。
        • -
      • Control + End (オプション): 最後の行にフォーカスを移動します。
        • -
      • 任意の印刷可能文字: コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻して文字を入力します。
        • -
      • Backspace (オプション): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻してカーソルの前の文字を削除します。
        • -
      • Delete (オプション): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻し、提案が選択されていた場合は選択状態を削除し、インラインオートコンプリート文字列が存在する場合は削除します。
        • +
      • Control + Home (任意): 最初の行にフォーカスを移動します。
        • +
      • Control + End (任意): 最後の行にフォーカスを移動します。
        • +
      • 任意の表示可能文字: コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻して文字を入力します。
        • +
      • Backspace (任意): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻してカーソルの前の文字を削除します。
        • +
      • Delete (任意): コンボボックスが編集可能な場合、フォーカスをコンボボックスに戻し、提案が選択されていた場合は選択状態を削除し、インラインオートコンプリート文字列が存在する場合は削除します。

      注記

      1. - DOMフォーカスはコンボボックスに維持され、支援技術のフォーカスは、複合要素でのaria-activedescendantを使用したフォーカスの管理で説明されているように、aria-activedescendantを使用してグリッド内で移動されます。 + DOM フォーカスはコンボボックスに維持され、支援技術のフォーカスは、複合要素での aria-activedescendant を使用したフォーカスの管理で説明されているように、aria-activedescendant を使用してグリッド内で移動されます。
        2. -
      2. グリッドでは、コンボボックスの値に対して一度に1つの提案値のみを選択できます。
        3. +
      3. グリッドでは、コンボボックスの値に対して一度に一つの提案値のみを選択できます。
      4. グリッドポップアップでは、各提案値は単一のセル又は行全体で表される場合があります。 このデザインの側面は、フォーカスと選択の移動に影響します。 @@ -291,16 +291,16 @@

        注記

        各セルに異なる提案値が含まれている場合:
        • フォーカスを含むセルが選択されるように、選択はフォーカスに従います。
          • -
        • 水平方向の矢印キーナビゲーションは通常、行間でラップされます。
          • -
        • 垂直方向の矢印キーナビゲーションは通常、列間でラップされます。
          • +
        • 水平方向の矢印キーナビゲーションは通常、ある行から前後の行へ移動します。(訳註: 原文では "wrap" の語が使われており、行の先頭や末尾にフォーカスがある場合にその前後の行に回り込むように移動することが表現されています。)
          • +
        • 垂直方向の矢印キーナビゲーションは通常、ある列から前後の列へ移動します。(訳註: 原文では "wrap" の語が使われており、列の先頭や末尾にフォーカスがある場合にその前後の列に回り込むように移動することが表現されています。)
      5. 行内のすべてのセルに同じ提案値に関する情報が含まれている場合:
        • フォーカスを含む行が選択されるか、同じ行内の任意のセルにフォーカスがあるときに提案値を含むセルが選択されます。
          • -
        • 水平方向のキーナビゲーションは、行間でラップされる場合があります。
          • -
        • 垂直方向の矢印キーナビゲーションは、列間でラップされません。
          • +
        • 水平方向の矢印キーナビゲーションは、ある行から前後の行へ移動してもよいです。(訳註: 原文では "wrap" の語が使われており、行の先頭や末尾にフォーカスがある場合にその前後の行に回り込むように移動することが表現されています。)
          • +
        • 垂直方向の矢印キーナビゲーションは、ある列から前後の列へ移動しません。(訳註: 原文では "wrap" の語が使われており、列の先頭や末尾にフォーカスがある場合にその前後の列に回り込むように移動しないことが表現されています。)
      @@ -309,38 +309,38 @@

      注記

      ツリーポップアップのキーボード操作

      - ツリーポップアップの一部の実装では、一部又はすべての親ノードが提案カテゴリラベルとして機能するため、選択可能な値ではない場合があります。 - デザインのこの側面が、フォーカスの移動に応じた選択の移動方法にどのように影響するかについては、以下の注を参照してください。 + ツリーポップアップの一部の実装では、一部又は全ての親ノードが提案カテゴリラベルとして機能するため、選択可能な値ではない場合があります。 + デザインのこの側面が、フォーカスの移動に応じた選択の移動方法にどのように影響するかについては、以下の注記を参照してください。

      縦向きツリーポップアップにフォーカスがある場合:

        -
      • Enter: 現在選択されている提案値を受け入れ、ポップアップを閉じ、選択された値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置します。
        • +
      • Enter: ポップアップを閉じ、選択された値をコンボボックスに配置し、コンボボックスが編集可能な場合は、値の最後に入力カーソルを配置することで、現在選択されている提案値を受け入れます。
      • Escape: ポップアップを閉じて、フォーカスをコンボボックスに戻します。 - オプションとして、コンボボックスの内容をクリアします。 + 任意で、コンボボックスの内容をクリアします。
      • 右矢印:
        • フォーカスが閉じられたノードにある場合、ノードを開きます。フォーカスと選択は移動しません。
        • フォーカスが開いたノードにある場合、フォーカスを最初の子ノードに移動し、選択可能な場合は選択します。
          • -
        • フォーカスがエンドノードにある場合、何も行いません。
          • +
        • フォーカスが終端ノードにある場合、何も行いません。
      • 左矢印:
        • フォーカスが開いたノードにある場合、ノードを閉じます。
          • -
        • フォーカスが子ノードで、その子ノードもエンドノード又は閉じられたノードである場合、フォーカスを親ノードに移動し、選択可能な場合は選択します。
          • -
        • フォーカスがルートノードで、そのルートノードもエンドノード又は閉じられたノードである場合、何も行いません。
          • +
        • フォーカスが子ノードにあり、またそれが終端ノード又は閉じられたノードのいずれかである場合、フォーカスをその親ノードに移動し、選択可能な場合は選択します。
          • +
        • フォーカスがルートノードにあり、またそれが終端ノード又は閉じられたノードのいずれかである場合、何も行いません。
        • -
      • 下矢印: ノードを開いたり閉じたりせずにフォーカス可能な次のノードにフォーカスを移動し、選択可能な場合は選択します。
        • -
      • 上矢印: ノードを開いたり閉じたりせずにフォーカス可能な前のノードにフォーカスを移動し、選択可能な場合は選択します。
        • -
      • Home: ノードを開いたり閉じたりせずにツリー内の最初のフォーカス可能なノードにフォーカスを移動し、選択可能な場合は選択します。
        • -
      • End: ノードを開いたり閉じたりせずにツリー内の最後のフォーカス可能なノードにフォーカスを移動し、選択可能な場合は選択します。
        • +
      • 下矢印: ノードを開閉せずに、フォーカス可能な次のノードにフォーカスを移動し、選択可能な場合は選択します。
        • +
      • 上矢印: ノードを開閉せずに、フォーカス可能な前のノードにフォーカスを移動し、選択可能な場合は選択します。
        • +
      • Home: ノードを開閉せずに、ツリー内の最初のフォーカス可能なノードにフォーカスを移動し、選択可能な場合は選択します。
        • +
      • End: ノードを開閉せずに、ツリー内の最後のフォーカス可能なノードにフォーカスを移動し、選択可能な場合は選択します。
      • - 任意の印刷可能文字: + 任意の表示可能文字:
        • コンボボックスが編集可能な場合、ポップアップを閉じずにコンボボックスにフォーカスを戻して文字を入力します。
        • それ以外の場合、入力された文字で始まる名前を持つ次の提案値にフォーカスを移動します。
          • @@ -351,12 +351,12 @@

          ツリーポップアップのキーボード操作

          注記

          1. - DOMフォーカスはコンボボックスに維持され、支援技術のフォーカスは、複合要素でのaria-activedescendantを使用したフォーカスの管理で説明されているように、aria-activedescendantを使用してツリー内で移動されます。 + DOMフォーカスはコンボボックスに維持され、支援技術のフォーカスは、 複合要素での aria-activedescendant を使用したフォーカスの管理で説明されているように、aria-activedescendant を使用してツリー内で移動されます。
            2. -
          2. ツリーでは、コンボボックスの値に対して一度に1つの提案値のみを選択できます。
            3. +
          3. ツリーでは、コンボボックスの値に対して一度に一つの提案値のみを選択できます。
          4. - ツリーポップアップでは、一部又はすべての親ノードは選択可能な値ではない場合があります。それらは、提案値のカテゴリラベルとして機能する場合があります。 - フォーカスが選択可能な値ではないノードに移動した場合、どちらか一方になります。 + ツリーポップアップでは、一部又は全ての親ノードは選択可能な値ではない場合があります。それらは、提案値のカテゴリラベルとして機能する場合があります。 + フォーカスが選択可能な値ではないノードに移動した場合、以下のいずれかになります:
            • 以前に選択されたノードがある場合、そのノードはフォーカスが選択可能なノードに移動するまで選択されたままになります。
            • 選択された値はありません。
              • @@ -364,7 +364,7 @@

              注記

          5. - ツリー内のノードが水平方向に配置されている場合(aria-orientationがhorizontalに設定されている): + ツリー内のノードが水平方向に配置されている場合(aria-orientation が horizontal に設定されている):
            1. 下矢印は上記で説明されている右矢印として機能し、その逆も同様です。
            2. 上矢印は上記で説明されている左矢印として機能し、その逆も同様です。
              3. @@ -376,82 +376,82 @@

              ダイアログポップアップのキーボード操作

              ダイアログポップアップにフォーカスがある場合:

              • - ポップアップを閉じてフォーカスをコンボボックスに戻す方法は2つあります。 + ポップアップを閉じてフォーカスをコンボボックスに戻す方法は二つあります。
                  -
                1. コンボボックスの値を指定するボタンなどをアクティブにするなど、ダイアログ内でアクションを実行します。
                  2. +
                2. コンボボックスの値を指定するボタンを押すなど、ダイアログ内でアクションを実行します。
                3. - ダイアログからキャンセルします。たとえば、Escapeを押すか、ダイアログのキャンセルボタンをアクティブにします。 - キャンセルすると、コンボボックスの値を変更せずにテキストボックスにフォーカスが戻る場合と、コンボボックスに戻ってコンボボックスがクリアされる場合があります。 + ダイアログからキャンセルします。例えば、Escape を押すか、ダイアログのキャンセルボタンを押します。 + キャンセルすると、コンボボックスの値を変更せずにテキストボックスにフォーカスが戻る場合と、コンボボックスにフォーカスが戻ってコンボボックスがクリアされる場合があります。
              • ダイアログは、モーダルダイアログパターンで定義されているキーボード操作を実装します。
              -

              注

              -

              他のコンボボックスポップアップとは異なり、ダイアログはaria-activedescendantをサポートしていないため、DOM フォーカスはコンボボックスからダイアログに移動します。

              +

              注記

              +

              他のコンボボックスポップアップとは異なり、ダイアログは aria-activedescendant をサポートしていないため、DOM フォーカスはコンボボックスからダイアログに移動します。

      -

      WAI-ARIAロール、状態、及びプロパティ

      +

      WAI-ARIA ロール、ステート、及びプロパティ

        -
      • 入力として機能し、コンボボックスの値を表示する要素は、ロールコンボボックスを持ちます。
        • +
      • 入力欄として機能し、コンボボックスの値を表示する要素は、ロール combobox を持ちます。
      • - コンボボックス要素には、ポップアップとして機能する要素を参照する値に設定されたaria-controlsがあります。 - aria-controlsは、ポップアップが表示されている場合にのみ設定する必要があります。 + コンボボックス要素には、ポップアップとして機能する要素を参照する値に設定された aria-controls があります。 + aria-controls は、ポップアップが表示されている場合にのみ設定する必要があることに注意してください。 ただし、表示されていない要素を参照することも有効です。
        • -
      • ポップアップは、ロールリストボックス、ツリー、グリッド、又はダイアログを持つ要素です。
        • +
      • ポップアップは、ロール listbox、tree、grid、又は dialog を持つ要素です。
      • - ポップアップのロールがlistbox以外の場合、ロールcomboboxを持つ要素には、ポップアップの種類に対応する値に設定されたaria-haspopupがあります。 - つまり、aria-haspopupはgrid、tree、又はdialogに設定されます。 - ロールcomboboxを持つ要素には、aria-haspopupの暗黙の値listboxがあります。 + ポップアップのロールが listbox 以外の場合、ロール combobox を持つ要素には、ポップアップの種類に対応する値に設定された aria-haspopup があります。 + つまり、aria-haspopup は grid、tree、又は dialog に設定されます。 + ロール combobox を持つ要素には、listbox の暗黙の aria-haspopup の値を持つことに注意してください。
      • - コンボボックスポップアップが表示されていない場合、ロールcomboboxを持つ要素のaria-expandedはfalseに設定されます。 - ポップアップ要素が表示されている場合、aria-expandedはtrueに設定されます。 - ロールcomboboxを持つ要素には、aria-expandedのデフォルト値falseがあります。 + コンボボックスポップアップが表示されていない場合、ロール combobox を持つ要素の aria-expanded はfalse に設定されます。 + ポップアップ要素が表示されている場合、aria-expanded は true に設定されます。 + ロール combobox を持つ要素には、aria-expanded のデフォルト値 false を持つことに注意してください。
        • -
      • コンボボックスがフォーカスを受けると、DOMフォーカスはコンボボックス要素に置かれます。
        • -
      • リストボックス、グリッド、又はツリーポップアップの子孫にフォーカスがある場合、DOMフォーカスはコンボボックスに残ります。コンボボックスには、ポップアップ内のフォーカスされた要素を参照する値に設定されたaria-activedescendantがあります。
        • -
      • リストボックス、グリッド、又はツリーポップアップを制御するコンボボックスの場合、提案値が現在選択されている値として視覚的に示されている場合、その値を含むoption、gridcell、row、又はtreeitemのaria-selectedはtrueに設定されます。
        • +
      • コンボボックスがフォーカスを受けると、DOM フォーカスはコンボボックス要素に置かれます。
        • +
      • リストボックス、グリッド、又はツリーポップアップの子孫にフォーカスがある場合、DOM フォーカスはコンボボックスに残り、またコンボボックスは、ポップアップ内のフォーカスされた要素を参照する値に設定された aria-activedescendant を持ちます。
        • +
      • リストボックス、グリッド、又はツリーポップアップを制御するコンボボックスでは、提案値が現在選択されている値として視覚的に示されている場合、その値を含む option、gridcell、row、又は treeitem の aria-selected は true に設定されます。
      • - コンボボックスに表示可能なラベルがあり、コンボボックス要素がHTMLのlabel要素を使用してラベル付けできるHTML要素（例：input要素）である場合、label要素を使用してラベル付けされます。 - それ以外の場合、表示可能なラベルがある場合、コンボボックス要素には、ラベル付け要素を参照する値に設定されたaria-labelledbyがあります。 - それ以外の場合、コンボボックス要素には、aria-labelによって提供されるラベルがあります。 + コンボボックスに表示可能なラベルがあり、コンボボックス要素が HTML の label 要素を使用してラベル付けできる HTML 要素 (例: input 要素) である場合、label 要素を使用してラベル付けされます。 + それ以外の場合、表示可能なラベルがある場合、コンボボックス要素は、ラベル付け要素を参照する値に設定された aria-labelledby を持ちます。 + それ以外の場合、コンボボックス要素は、aria-label によって提供されるラベルを持ちます。
      • - コンボボックス要素には、オートコンプリート動作に対応する値に設定されたaria-autocompleteがあります。 + コンボボックス要素は、オートコンプリート動作に対応する値に設定された aria-autocomplete を持ちます。
          -
        • none: ポップアップが表示されるときに、それに含まれる提案された値は、コンボボックスに入力された文字に関係なく同じです。
          • +
        • none: ポップアップが表示されたとき、それに含まれる提案された値は、コンボボックスに入力された文字に関係なく同じです。
        • - list: ポップアップがトリガされると、提案された値が表示されます。 + list: ポップアップがトリガされたとき、提案された値が表示されます。 コンボボックスが編集可能な場合、値はコンボボックスに入力された文字を補完又は論理的に対応します。
        • - both: ポップアップがトリガされると、コンボボックスに入力された文字を補完又は論理的に対応する提案された値が表示されます。 - 更に、利用者が入力していない選択された提案の部分（「完了文字列」と呼ばれる）は、コンボボックスの入力カーソルの後にインラインで表示されます。 - インライン完了文字列は視覚的に強調表示され、選択状態になります。 + both: ポップアップがトリガされたとき、コンボボックスに入力された文字を補完又は論理的に対応する提案された値が表示されます。 + 更に、利用者が入力していない選択された提案の部分 (「補完文字列」と呼ばれる) は、コンボボックスの入力カーソルの後にインラインで表示されます。 + インライン補完文字列は視覚的に強調表示され、選択状態になります。
      -

      注

      +

      注記

      1. - ARIA 1.0では、コンボボックスはaria-controlsではなくaria-ownsを使用してポップアップを参照していました。 - ユーザエージェントは、レガシーコンテンツとの下位互換性のためにaria-ownsを持つコンボボックスをサポートする場合がありますが、aria-controlsを使用することを強くお勧めします。 + ARIA 1.0 では、コンボボックスは aria-controls ではなく aria-owns を使用してポップアップを参照していました。 + ユーザエージェントは、レガシーコンテンツとの下位互換性のために aria-owns を持つコンボボックスをサポートする場合がありますが、aria-controls を使用することを強くお勧めします。
        2. -
      2. ポップアップに使用される以下のパターンに関するロール、状態、及びプロパティのドキュメントを参照するときは、コンボボックスは単一選択ウィジェットであり、選択はポップアップ内のフォーカスに従うことに注意してください。
        3. +
      3. ポップアップに使用される以下のパターンに関するロール、ステート、及びプロパティのドキュメントを参照するときは、コンボボックスは単一選択ウィジェットであり、選択はポップアップ内のフォーカスに従うことに注意してください。
      4. - ポップアップ要素のロール、状態、及びプロパティは、それぞれのデザインパターンで定義されています。 + ポップアップ要素のロール、ステート、及びプロパティは、それぞれのデザインパターンで定義されています。
      diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html index f7f27a91..c4b2e25a 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-both.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-both.html @@ -20,7 +20,7 @@ @@ -32,15 +32,15 @@

      リストとインラインオートコンプリートの両方を備えた

      この例について

      - 以下のアメリカ合衆国の州や地域の名前を選択するためのコンボボックスは、コンボボックスパターンをデモンストレーションしています。 - このデザインパターンでは、4 つのオートコンプリートの動作が説明されています。 + 以下の米国の州や地域の名前を選択するためのコンボボックスは、コンボボックスパターンをデモンストレーションします。 + このデザインパターンは、4 つのオートコンプリートの動作タイプを説明しています。 この例では、このパターンの中でリストとインライン補完と呼ばれるオートコンプリートの動作を示しています。 利用者が編集ボックスに 1 文字以上の文字を入力し、入力された文字が 1 つ以上の州や地域の名前の先頭と一致する場合、一致する名前を含むリストボックスのポップアップが表示され、その最初のものが自動的に選択されます。 更に、選択値のうち利用者によって入力されていない部分、補完文字列がインラインで入力カーソルの後ろに表示されます。 自動的に選択された提案は、利用者が異なる提案を選択するか、テキストボックスの文字列を変更しなければ、コンボボックスがフォーカスを失ったときにテキストボックスの値になります。 この実装では利用者が州や地域の名前を入力することが可能ですが、他の任意の値の入力を防がないことに注意してください。

      -

      類似の例には次のものがあります:

      +

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

      • 選択限定コンボボックス: テキスト入力のない単一選択コンボボックスで、HTML の select 要素と機能的に似ています。
      • リストオートコンプリート付き編集可能コンボボックス: オートコンプリートの動作である「リストと手動選択」として知られるオートコンプリートを示す編集可能なコンボボックスです。
        • @@ -69,14 +69,14 @@

        例

        • アラバマ
        • アラスカ
          • -
        • アメリカンサモア
          • +
        • アメリカ領サモア
        • アリゾナ
        • アーカンソー
        • カリフォルニア
        • コロラド
        • コネチカット
        • デラウェア
          • -
        • ワシントンD.C.
          • +
        • コロンビア特別区
        • フロリダ
        • ジョージア
        • グアム
          • @@ -126,11 +126,11 @@

          例

      - +
      -

      アクセシビリティの機能

      +

      アクセシビリティ機能

      • ブラウザは、フォーカスを持つ要素の表示を管理するのとは異なり、aria-activedescendant で参照される要素の表示を管理しません。 @@ -138,22 +138,22 @@

        アクセシビリティの機能

        aria-activedescendant の表示を管理することは、コンテンツのサイズを拡大するためにブラウザのズーム機能を使用する人々のアクセシビリティにとって重要です。
      • - コンボボックスを操作するときの知覚可能性を向上させるために、ビジュアルキーボードフォーカスとホバーは CSS の :hover 疑似クラスと focus 及び blur イベントハンドラーを使用してスタイリングされます： + コンボボックスを操作するときの知覚可能性を向上させるために、視覚的キーボードフォーカスとホバーは CSS の :hover 疑似クラスと focus 及び blur イベントハンドラーを使用してスタイリングされます：
          -
        • コンボボックスがフォーカスを受け取ったときにそれをわかりやすくするため、フォーカスは 2 ピクセルのフォーカスリングを input 要素と button 要素の両方に作成します。フォーカスリングとコンボボックスの間には 2 ピクセルのスペースがあります。
          • +
        • コンボボックスがフォーカスを受け取ったときに認識しやすくするために、フォーカスは input 要素と button 要素それぞれの周りに 2 ピクセルのスペースを空けて 2 ピクセルのフォーカスリングを作成します。
        • リストボックスを開くために入力欄又はボタンをクリックできることをわかりやすくするため、ホバーはフォーカスと同じスタイリングをします。
        • 視覚障害を持つ人々がコンボボックスを対話型要素として識別できるように、コンボボックス又はリスト上にホバーすると、カーソルがポインターに変わります。
        • 選択されたリストボックスの選択肢を他の選択肢と区別しやすくするため、選択するとその選択肢の上下に 2 ピクセルのボーダーを作成します。
        • - 注記: 透明なボーダーが一部のシステムでオペレーティングシステムの高コントラスト設定が有効になっている場合に表示されるため、透明度は、フォーカスされた要素と他の要素との間に視覚的な違いを作成するために使うことができません。 - 透明度の代わりに、フォーカスされた要素はより太いボーダーと少ないパディングを持ちます。 - 要素がフォーカスを受け取るとき、ボーダーはゼロから 2 ピクセルに変更され、パディングは 2 ピクセル減少します。 - 要素がフォーカスを失うと、ボーダーは 2 ピクセルからゼロに変更され、パディングは 2 ピクセル増加します。 + 注記: 透明なボーダーは、オペレーティングシステムの高コントラスト設定が有効な一部のシステムで表示されるため、フォーカスされた要素と他の要素との視覚的な違いを作成するために透明度を使用することはできません。 + 透明度の代わりに、フォーカスされた要素はより太いボーダーとより少ないパディングを持ちます。 + 要素がフォーカスを受け取るとき、ボーダーはゼロから 2 ピクセルに変更され、パディングは 2 ピクセル減少します。 + 要素がフォーカスを失ったとき、ボーダーは 2 ピクセルからゼロに変更され、パディングは 2 ピクセル増加します。
      • - 高コントラスト設定がテキストコンテンツの色を変更する場合、開くボタンの矢印に使用されるインライン SVG グラフィックが背景と十分なコントラストを持つようにするために、svg 要素の CSS の forced-color-adjust を auto に設定し、polygon 要素の fill 属性を currentcolor に設定します。 + 高コントラスト設定がテキストコンテンツの色を変更する場合、開くボタンの矢印として使われるインライン SVG グラフィックがその背景と十分なコントラストを持つようにするために、svg 要素の CSS forced-color-adjust は auto に設定され、かつ polygon 要素の fill 属性は currentcolor に設定されます。 これにより、polygon 要素の fill の色は高コントラストカラー設定によって上書きされます。 forced-color-adjust を使用して fill プロパティの指定された色を上書きしない場合、色は高コントラストモードでも同じままになり、矢印と背景との間の十分なコントラストが得られないか、色が高コントラストモードの背景と一致して見えなくなる可能性があります。
        注記: forced-color-adjust の明示的な設定は、一部のブラウザが SVG グラフィックのデフォルト値として auto を使用しないため必要です。 @@ -162,9 +162,9 @@

        アクセシビリティの機能

      -

      キーボードサポート

      +

      キーボードのサポート

      - このページの例のコンボボックスは、以下のキーボードインターフェースを実装しています。 + このページのコンボボックスの例では、以下のキーボードインターフェースを実装しています。 キーボードインターフェースの他のバリエーションやオプションについては、コンボボックスパターンのキーボードインタラクションセクションで説明されています。

      テキストボックス

      @@ -180,8 +180,8 @@

      テキストボックス

       @@ -194,8 +194,8 @@

      テキストボックス

      @@ -223,7 +223,7 @@

      テキストボックス

      @@ -231,8 +231,8 @@

      テキストボックス

      input[type="text"]ポップアップ要素が表示されていないことを示します。ポップアップ要素が表示されていないことを示します。
      input[type="text"]ポップアップ要素が表示されていることを示します。ポップアップ要素が表示されていることを示します。
      input[type="text"]
        -
      • label 要素の for 属性によって参照され、アクセシブルな名前を提供します。
        • +
      • アクセシブル名を提供するために label 要素の for 属性によって参照されます。
      • HTML 入力要素の推奨される命名方法であり、ラベルをクリックすると入力にフォーカスが移動します。
      		 input[type="text"]入力のオートコンプリート動作がポップアップで可能な値のリストを提案することを示します。入力欄のオートコンプリートの振る舞いがポップアップ内で指定可能な値のリストを提案することを示します。
      input[type="text"]提案された値をリストするポップアップ要素を特定します。提案値を列挙するポップアップ要素を特定します。
      • グリッド内のセルがキーボードフォーカスを持つことを視覚的に示すとき、そのセルを参照します。
        • -
      • Down Arrow などのナビゲーションキーが押されたとき、JavaScript が値を変更します。
        • -
      • 支援技術が、DOM フォーカスが input 要素に残っている間にアプリケーションがフォーカスしている要素を知ることができます。
        • +
      • 下矢印 などのナビゲーションキーが押されたとき、JavaScript が値を変更します。
        • +
      • DOM のフォーカスが input 要素にある間、アプリケーションがどの要素にフォーカスしているかを支援技術が知れるようにします。
      • - このフォーカスマネジメントテクニックの詳細については、 - aria-activedescendant を使用したコンポジットのフォーカスマネジメントをご覧ください。 + このフォーカス管理テクニックの詳細については、 + aria-activedescendant を使用したコンポジット内のフォーカスの管理を参照してください。
      		下矢印
        -
      • リストボックスが表示され、かつ提案が選択されている場合、次の提案値に視覚的なフォーカスを移動します。
        • -
      • テキストボックスが空で、かつリストボックスが表示されていない場合、リストボックスを開き、最初の選択肢に視覚的なフォーカスを移動します。
        • +
      • リストボックスが表示され、かつ提案が選択されている場合、視覚的フォーカスを次の提案値に移動します。
        • +
      • テキストボックスが空であり、かつリストボックスが表示されていない場合、リストボックスを開き、視覚的フォーカスを最初の選択肢に移動します。
      • いずれの場合も、DOM のフォーカスはテキストボックスに残ります。
      		 上矢印
        -
      • リストボックスが表示され、かつ提案が選択されている場合、最後の提案値に視覚的なフォーカスを移動します。
        • -
      • テキストボックスが空の場合、リストボックスがまだ表示されていない場合はまずリストボックスを開き、そして最後の選択肢に視覚的なフォーカスを移動します。
        • +
      • リストボックスが表示され、かつ提案が選択されている場合、最後の提案値に視覚的フォーカスを移動します。
        • +
      • テキストボックスが空の場合、リストボックスがまだ表示されていない場合はまずリストボックスを開き、そして視覚的フォーカスを最後の選択肢に移動します。
      • いずれの場合も、DOM のフォーカスはテキストボックスに残ります。
      • カーソルの移動やテキストの操作に使用されるキー、例えば Delete や Shift + 右矢印 など。
        • -
      • テキストボックスには type="text" の HTML input が使用されているため、ブラウザがプラットフォーム固有の編集キーを提供します。
        • +
      • テキストボックスには type="text" のついた HTML input が使用されているため、ブラウザがプラットフォーム固有の編集キーを提供します。

      リストボックスポップアップ

      - 注記: リストボックスに視覚的なフォーカスがある場合、DOM のフォーカスはテキストボックスに残り、かつテキストボックスの aria-activedescendant の値は、視覚的にフォーカス表示されているリストボックスの選択肢の値に設定されます。 - キーボードコマンドの以下の説明でフォーカスと言及している場合、視覚的なフォーカスインジケータを指しています。 + 注記: リストボックスに視覚的フォーカスがある場合、DOM のフォーカスはテキストボックスに残り、かつテキストボックスの aria-activedescendant の値は、視覚的にフォーカス表示されているリストボックスの選択肢の値に設定されます。 + キーボードコマンドの以下の説明でフォーカスと言及している場合、視覚的フォーカスインジケータを指しています。 このフォーカス管理テクニックの詳細については、aria-activedescendant を使用したコンポジット内のフォーカス管理 を参照してください。

      @@ -247,9 +247,9 @@

      リストボックスポップアップ

      @@ -258,7 +258,7 @@

      リストボックスポップアップ

      @@ -266,9 +266,9 @@

      リストボックスポップアップ

      @@ -276,33 +276,33 @@

      リストボックスポップアップ

      - + - + - + - +
      Enter
        -
      • フォーカスされているリストボックスの選択肢の内容でテキストボックスの値を設定します。
        • +
      • テキストボックスの値をリストボックス内のフォーカスされた選択肢の内容に設定します。
      • リストボックスを閉じます。
        • -
      • 視覚的なフォーカスをテキストボックスに設定します。
        • +
      • 視覚的フォーカスをテキストボックスに設定します。
      • リストボックスを閉じます。
        • -
      • 視覚的なフォーカスをテキストボックスに設定します。
        • +
      • 視覚的フォーカスをテキストボックスに設定します。
      下矢印
        -
      • 視覚的なフォーカスを次の選択肢に移動します。
        • -
      • 視覚的なフォーカスが最後の選択肢にある場合、最初の選択肢に視覚的なフォーカスを移動します。
        • -
      • 注記: このラッピング動作は、以下で説明するように Home と End が編集カーソルを移動する場合に便利です。
        • +
      • 視覚的フォーカスを次の選択肢に移動します。
        • +
      • 視覚的フォーカスが最後の選択肢にある場合、視覚的フォーカスを最初の選択肢に移動します。
        • +
      • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
      上矢印
        -
      • 視覚的なフォーカスを前の選択肢に移動します。
        • -
      • 視覚的なフォーカスが最初の選択肢にある場合、最後の選択肢に視覚的なフォーカスを移動します。
        • -
      • 注: このラッピング動作は、以下で説明するように Home と End が編集カーソルを移動する場合に便利です。
        • +
      • 視覚的フォーカスを前の選択肢に移動します。
        • +
      • 視覚的フォーカスが最初の選択肢にある場合、視覚的フォーカスを最後の選択肢に移動します。
        • +
      • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
      右矢印視覚的なフォーカスをテキストボックスに移動し、編集カーソルを右に 1 文字移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルを右に 1 文字移動します。
      左矢印視覚的なフォーカスをテキストボックスに移動し、編集カーソルを左に 1 文字移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルを左に 1 文字移動します。
      Home視覚的なフォーカスをテキストボックスに移動し、フィールドの先頭に編集カーソルを配置します。視覚的フォーカスをテキストボックスに移動し、編集カーソルをフィールドの先頭に移動します。
      End視覚的なフォーカスをテキストボックスに移動し、フィールドの末尾に編集カーソルを配置します。視覚的フォーカスをテキストボックスに移動し、編集カーソルをフィールドの末尾に移動します。
      印刷可能な文字
        -
      • 視覚的なフォーカスをテキストボックスに移動します。
        • +
      • 視覚的フォーカスをテキストボックスに移動します。
      • テキストボックスに文字を入力します。
      • リストボックスの選択肢は、テキストボックス内の文字に基づいてフィルタリングされます。
      @@ -311,14 +311,14 @@

      リストボックスポップアップ

      ボタン

      -

      ボタンはページのタブシーケンスから削除されていますが、それでもなおモバイルデバイスでタッチイベントを使用して選択肢のリストを開くために支援技術に重要です。

      +

      このボタンはページのタブ順序から除外されていますが、タッチイベントを使用して選択肢のリストを開くモバイルデバイスの支援技術にとって依然として重要です。

    -

    ロール、プロパティ、状態、及び tabindex 属性

    +

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

    - このページの例のコンボボックスは、以下の ARIA ロール、状態、及びプロパティを実装しています。 - ARIA ロール、状態、及びプロパティの他の適用方法についての情報は、コンボボックスパターンのロール、状態、及びプロパティセクションで入手できます。 + このページのコンボボックスの例は、以下の ARIA ロール、ステート、及びプロパティを実装しています。 + ARIA ロール、ステート、及びプロパティを適用する他の方法についての情報は、コンボボックスパターンのロール、ステート、及びプロパティセクションで確認できます。

    テキストボックス

    @@ -327,7 +327,7 @@

    テキストボックス

    - + @@ -337,7 +337,7 @@

    テキストボックス

    - + @@ -379,8 +379,8 @@

    テキストボックス

    @@ -392,12 +392,12 @@

    テキストボックス

    @@ -411,7 +411,7 @@

    リストボックスポップアップ

    - + @@ -442,7 +442,7 @@

    リストボックスポップアップ

    @@ -454,7 +454,7 @@

    リストボックスポップアップ

    @@ -469,7 +469,7 @@

    ボタン

    - + @@ -479,7 +479,7 @@

    ボタン

    tabindex="-1" - + @@ -518,7 +518,7 @@

    ボタン

    -

    JavaScript と CSS のソースコード

    +

    JavaScript 及び CSS のソースコード

    • CSS: diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html index 57cad223..5d988b61 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-list.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-list.html @@ -20,7 +20,7 @@ @@ -38,15 +38,15 @@

      この例について

      利用者が編集ボックスに 1 文字以上の文字を入力し、その入力された文字が 1 つ以上の州や地域の名前の先頭と一致する場合、一致する名前が含まれるリストボックスポップアップが表示されます。 リストボックスが表示されたとき、提案された名前は自動的に選択されません。 したがって、入力後、利用者がリストボックスから値を選択せずにコンボボックスの外側をタブキーで移動するかクリックすると、入力された文字列がコンボボックスの値になります。 - なお、この実装では利用者が州や地域の名前を入力することは可能ですが、他の任意の値の入力を防止することはありません。 + この実装では利用者が州や地域の名前を入力することが可能ですが、他の任意の値の入力を防がないことに注意してください。

      -

      類似の例は以下を含みます:

      +

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

    @@ -130,38 +130,38 @@

    例

    -

    アクセシビリティの機能

    +

    アクセシビリティ機能

    • - ブラウザは、フォーカスを持つ要素と同様に、aria-activedescendant で参照される要素の表示を管理しません。 - キーボードイベントによってリストボックス内のアクティブな選択肢が変更されたとき、JavaScript は aria-activedescendant で参照される選択肢を表示領域にスクロールします。 + ブラウザは、フォーカスを持つ要素の表示を管理するのとは異なり、aria-activedescendant で参照される要素の表示を管理しません。 + キーボードイベントがリストボックス内のアクティブな選択肢を変更したとき、 JavaScript は aria-activedescendant で参照される選択肢を表示領域にスクロールします。 aria-activedescendant の表示を管理することは、コンテンツのサイズを拡大するためにブラウザのズーム機能を使用する人々のアクセシビリティにとって重要です。
    • - コンボボックスの操作時に知覚性を向上させるために、CSS の :hover 疑似クラス、focus 及び blur イベントハンドラを使用して、視覚的なキーボードフォーカスとホバーをスタイル設定します: + コンボボックスを操作するときの知覚可能性を向上させるために、視覚的キーボードフォーカスとホバーは CSS の :hover 疑似クラスと focus 及び blur イベントハンドラーを使用してスタイリングされます：
      • コンボボックスがフォーカスを受け取ったときに認識しやすくするために、フォーカスは input 要素と button 要素それぞれの周りに 2 ピクセルのスペースを空けて 2 ピクセルのフォーカスリングを作成します。
        • -
      • 入力又はボタンをクリックしてリストボックスを開くことができることを認識しやすくするために、ホバーはフォーカスと同じスタイルを適用します。
        • -
      • 視覚障害を持つ人々がコンボボックスを対話型要素として識別しやすくするために、コンボボックス又はリスト上にホバーするとカーソルがポインタに変わります。
        • -
      • 選択されたリストボックスの選択肢を他の選択肢と区別しやすくするために、選択された選択肢の上下に2ピクセルのボーダーを作成します。
        • +
      • リストボックスを開くために入力欄又はボタンをクリックできることをわかりやすくするため、ホバーはフォーカスと同じスタイリングをします。
        • +
      • 視覚障害を持つ人々がコンボボックスを対話型要素として識別できるように、コンボボックス又はリスト上にホバーすると、カーソルがポインターに変わります。
        • +
      • 選択されたリストボックスの選択肢を他の選択肢と区別しやすくするため、選択するとその選択肢の上下に 2 ピクセルのボーダーを作成します。
      • 注記: 透明なボーダーは、オペレーティングシステムの高コントラスト設定が有効な一部のシステムで表示されるため、フォーカスされた要素と他の要素との視覚的な違いを作成するために透明度を使用することはできません。 透明度の代わりに、フォーカスされた要素はより太いボーダーとより少ないパディングを持ちます。 要素がフォーカスを受け取るとき、ボーダーはゼロから 2 ピクセルに変更され、パディングは 2 ピクセル減少します。 - 要素がフォーカスを失うとき、ボーダーは 2 ピクセルからゼロに変更され、パディングは 2 ピクセル増加します。 + 要素がフォーカスを失ったとき、ボーダーは 2 ピクセルからゼロに変更され、パディングは 2 ピクセル増加します。
    • 高コントラスト設定がテキストコンテンツの色を変更する場合、開くボタンの矢印として使われるインライン SVG グラフィックがその背景と十分なコントラストを持つようにするために、svg 要素の CSS forced-color-adjust は auto に設定され、かつ polygon 要素の fill 属性は currentcolor に設定されます。 これにより、polygon 要素の fill の色は高コントラストカラー設定によって上書きされます。仮に fill プロパティに指定された色を上書きするために forced-color-adjust が使われない場合、色は高コントラストモードでも同じままになり、矢印と背景の間の十分なコントラストが得られない可能性があり、もしくは色が高コントラストモードの背景と一致する場合、矢印が見えなくなる可能性もあります。
      - 注記: 一部のブラウザは、SVG グラフィックのデフォルト値としてauto を使用しないため、forced-color-adjust の明示的な設定が必要です。 + 注記: forced-color-adjust の明示的な設定は、一部のブラウザが SVG グラフィックのデフォルト値として auto を使用しないため必要です。
    -

    キーボードサポート

    +

    キーボードのサポート

    このページのコンボボックスの例では、以下のキーボードインターフェースを実装しています。 キーボードインターフェースの他のバリエーションやオプションについては、コンボボックスパターンのキーボードインタラクションセクションで説明されています。 @@ -179,22 +179,22 @@

    テキストボックス

    - + @@ -216,8 +216,8 @@

    テキストボックス

    @@ -225,10 +225,10 @@

    テキストボックス

    ロール 属性 要素使用方法使用法
    input[type="text"]入力をコンボボックスとして識別します。入力欄をコンボボックスとして識別します。
    input[type="text"]
      -
    • アクセシブルな名前を提供するために、label 要素の for 属性で参照されます。
      • -
    • ラベルをクリックすると入力がフォーカスされるため、HTML の入力要素に対する推奨される命名方法です。
      • +
    • アクセシブル名を提供するために label 要素の for 属性によって参照されます。
      • +
    • ラベルをクリックすると入力欄がフォーカスされるため、HTML の input 要素のための推奨される命名方法です。
    input[type="text"]
      -
    • リストボックスの選択肢がキーボードフォーカスを持つことを視覚的に示す場合、その選択肢を参照します。
      • -
    • ナビゲーションキー (例：下矢印) が押されたときに、JavaScript が値を変更します。
      • -
    • DOM のフォーカスが input 要素にある間、アプリケーションがフォーカスしている要素を支援技術が知れるようにします。
      • +
    • リストボックス内の選択肢がキーボードフォーカスを持つことを視覚的に示す場合、その選択肢を参照します。
      • +
    • ナビゲーションキー (例えば 下矢印) が押されたとき、JavaScript が値を変更します。
      • +
    • DOM のフォーカスが input 要素にある間、どの要素がフォーカスされているとアプリケーションがみなすかを支援技術が知れるようにします。
    • このフォーカス管理テクニックの詳細については、 - aria-activedescendant を使用したコンポジット内のフォーカスの管理を参照してください。 + aria-activedescendant を使用したコンポジット内のフォーカス管理 を参照してください。
    		ロール 属性 要素使用方法使用法
    • 要素を listbox の option として識別します。
      • -
    • 要素のテキストコンテンツは option のアクセシブルな名前を提供します。
      • +
    • 要素のテキストコンテンツは option のアクセシブル名を提供します。
    li
      -
    • リストボックスの選択肢が選択されているとして視覚的に強調されている場合に指定されます。
      • +
    • リストボックス内の選択肢が選択されているとして視覚的にハイライトされている場合に指定されます。
    • リスト内の選択肢が aria-activedescendant で参照され、かつテキストボックス内にフォーカスがあり、かつ最初の選択肢が自動的に選択される場合に発生します。
    		 ロール 属性 要素使用方法使用法
    buttonコンボボックスのキーボード操作と重複するため、ボタンをページのタブシーケンスから削除します。コンボボックスのキーボード操作と重複するため、ボタンをページのタブ順序から除外します。
    下矢印
      -
    • テキストボックスが空でなく、かつリストボックスが表示されている場合、視覚的なフォーカスを最初の提案値に移動します。
      • -
    • テキストボックスが空であり、リストボックスが表示されていない場合、リストボックスを開き、視覚的なフォーカスを最初の選択肢に移動します。
      • +
    • テキストボックスが空でなく、かつリストボックスが表示されている場合、視覚的フォーカスを最初の提案値に移動します。
      • +
    • テキストボックスが空であり、かつリストボックスが表示されていない場合、リストボックスを開き、視覚的フォーカスを最初の選択肢に移動します。
    • いずれの場合も、DOM のフォーカスはテキストボックスに残ります。
    Alt + 下矢印フォーカスや選択を変更せずにリストボックスを開きます。フォーカスを移動したり選択を変更したりせずにリストボックスを開きます。
    上矢印
      -
    • テキストボックスが空でなく、リストボックスが表示されている場合、視覚的なフォーカスを最後の提案値に移動します。
      • -
    • テキストボックスが空の場合、まずリストボックスが表示されていない場合はリストボックスを開き、そして視覚的なフォーカスを最後の選択肢に移動します。
      • +
    • テキストボックスが空でなく、リストボックスが表示されている場合、視覚的フォーカスを最後の提案値に移動します。
      • +
    • テキストボックスが空の場合、リストボックスがまだ表示されていない場合はまずリストボックスを開き、そして視覚的フォーカスを最後の選択肢に移動します。
    • いずれの場合も、DOM のフォーカスはテキストボックスに残ります。
    		 標準の単一行テキスト編集キー
      -
    • カーソルの移動やテキストの操作に使用されるキー、例えばDelete や Shift + Right Arrow など。
      • -
    • テキストボックスには HTML の type="text" がついた input 要素を使用するので、ブラウザがプラットフォーム固有の編集キーを提供します。
      • +
    • カーソルの移動やテキストの操作に使用されるキー、例えば Delete や Shift + 右矢印 など。
      • +
    • テキストボックスには type="text" のついた HTML input が使用されているため、ブラウザがプラットフォーム固有の編集キーを提供します。

    リストボックスポップアップ

    - 注記: リストボックスに視覚的なフォーカスがある場合、DOM フォーカスはテキストボックスに残り、テキストボックスの aria-activedescendant の値は、フォーカスされていると視覚的に表示されたリストボックス選択肢を参照した値に設定されます。 - 以下のキーボードコマンドの説明でフォーカスに言及する場合、それは視覚的なフォーカスインジケーターを指しています。 - このフォーカス管理技術のさらなる情報については、 - aria-activedescendant を使用したコンポジットのフォーカス管理を参照してください。 + 注記: リストボックスに視覚的フォーカスがある場合、DOM フォーカスはテキストボックスに残り、テキストボックスの aria-activedescendant の値は、フォーカスされていると視覚的に表示されたリストボックス選択肢を参照した値に設定されます。 + 以下のキーボードコマンドの説明でフォーカスに言及する場合、それは視覚的フォーカスインジケーターを指します。 + このフォーカス管理テクニックの詳細については、 + aria-activedescendant を使用したコンポジット内のフォーカス管理 を参照してください。

    @@ -244,7 +244,7 @@

    リストボックスポップアップ

    • テキストボックスの値をリストボックス内のフォーカスされた選択肢の内容に設定します。
    • リストボックスを閉じます。
      • -
    • 視覚的なフォーカスをテキストボックスに設定します。
      • +
    • 視覚的フォーカスをテキストボックスに設定します。
    @@ -253,7 +253,7 @@

    リストボックスポップアップ

    @@ -261,8 +261,8 @@

    リストボックスポップアップ

    @@ -271,35 +271,35 @@

    リストボックスポップアップ

    - + - + - + - + @@ -310,10 +310,10 @@

    ボタン

    -

    ロール、プロパティ、状態、及び tabindex 属性

    +

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

    - このページのコンボボックスの例は、以下の ARIA ロール、状態、及びプロパティを実装しています。 - ARIA ロール、状態、及びプロパティを適用する他の方法についての情報は、コンボボックスパターンのロール、状態、及びプロパティセクションで確認できます。 + このページのコンボボックスの例は、以下の ARIA ロール、ステート、及びプロパティを実装しています。 + ARIA ロール、ステート、及びプロパティを適用する他の方法についての情報は、コンボボックスパターンのロール、ステート、及びプロパティセクションで確認できます。

    テキストボックス

    • リストボックスを閉じます。
      • -
    • 視覚的なフォーカスをテキストボックスに設定します。
      • +
    • 視覚的フォーカスをテキストボックスに設定します。
    下矢印
      -
    • 視覚的なフォーカスを次の選択肢に移動します。
      • -
    • 視覚的なフォーカスが最後の選択肢にある場合、視覚的なフォーカスを最初の選択肢に移動します。
      • +
    • 視覚的フォーカスを次の選択肢に移動します。
      • +
    • 視覚的フォーカスが最後の選択肢にある場合、視覚的フォーカスを最初の選択肢に移動します。
    • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
    		 上矢印
      -
    • 視覚的なフォーカスを前の選択肢に移動します。
      • -
    • 視覚的なフォーカスが最初の選択肢にある場合、視覚的なフォーカスを最後の選択肢に移動します。
      • -
    • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
      • +
    • 視覚的フォーカスを前の選択肢に移動します。
      • +
    • 視覚的フォーカスが最初の選択肢にある場合、視覚的フォーカスを最後の選択肢に移動します。
      • +
    • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
    右矢印視覚的なフォーカスをテキストボックスに移動し、編集カーソルを右に1文字移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルを右に 1 文字移動します。
    左矢印視覚的なフォーカスをテキストボックスに移動し、編集カーソルを左に1文字移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルを左に 1 文字移動します。
    Home視覚的なフォーカスをテキストボックスに移動し、編集カーソルをフィールドの先頭に移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルをフィールドの先頭に移動します。
    End視覚的なフォーカスをテキストボックスに移動し、編集カーソルをフィールドの末尾に移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルをフィールドの末尾に移動します。
    印刷可能な文字
      -
    • 視覚的なフォーカスをテキストボックスに移動します。
      • +
    • 視覚的フォーカスをテキストボックスに移動します。
    • テキストボックスに文字を入力します。
      • -
    • テキストボックス内の文字に基づいてリストボックスの選択肢がフィルタリングされます。
      • +
    • リストボックスの選択肢は、テキストボックス内の文字に基づいてフィルタリングされます。
    @@ -322,7 +322,7 @@

    テキストボックス

    - + @@ -374,8 +374,8 @@

    テキストボックス

    @@ -387,12 +387,12 @@

    テキストボックス

    @@ -406,7 +406,7 @@

    リストボックスポップアップ

    - + @@ -418,7 +418,7 @@

    リストボックスポップアップ

    - + @@ -436,7 +436,7 @@

    リストボックスポップアップ

    @@ -464,7 +464,7 @@

    ボタン

    - + @@ -482,7 +482,7 @@

    ボタン

    aria-label="States" - + @@ -513,7 +513,7 @@

    ボタン

    -

    JavaScriptとCSSのソースコード

    +

    JavaScript 及び CSS のソースコード

    • CSS: @@ -527,7 +527,7 @@

      JavaScriptとCSSのソースコード

    -

    HTMLのソースコード

    +

    HTML のソースコード

    以下の HTML コードをコピーするには、CodePen で開いてください。

    diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html index bf101d3f..47328b4d 100644 --- a/content/patterns/combobox/examples/combobox-autocomplete-none.html +++ b/content/patterns/combobox/examples/combobox-autocomplete-none.html @@ -20,7 +20,7 @@ @@ -33,12 +33,12 @@

    この例について

    利用者が以前に検索した用語の仮想リストから用語を選択できるようにする以下のコンボボックスは、コンボボックスパターンをデモンストレーションしています。 - このデザインパターンでは、4 つのオートコンプリートの動作が説明されています。 + このデザインパターンは、4 つのオートコンプリートの動作タイプを説明しています。 この例は、オートコンプリートなしとして知られるオートコンプリートの動作を示しています。 リストボックスのポップアップに表示される用語は、テキストボックスに表示されている文字列とは関係ありません。 この実装では、テキストボックスがフォーカスを受け取ったときにリストボックスのポップアップが自動的にトリガーされることはありません。利用者がテキストボックスに文字を入力するか、明示的なオープンコマンドを使用したときにリストが開かれます。

    -

    類似の例は以下を含みます:

    +

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

    • 選択限定コンボボックス: テキスト入力のない単一選択コンボボックスで、HTML の select 要素と機能的に似ています。
    • リストとインラインオートコンプリートの両方を備えた編集可能コンボボックス: 「リストとインラインのオートコンプリート」として知られるオートコンプリートの動作を示す編集可能なコンボボックスです。
      • @@ -86,27 +86,27 @@

      例

      アクセシビリティ機能

      • - ブラウザは、フォーカスを持つ要素と同様に、aria-activedescendant で参照される要素の表示を管理しません。 - キーボードイベントがリストボックスのアクティブな選択肢を変更するとき、JavaScript はaria-activedescendant で参照される選択肢を表示領域にスクロールします。 + ブラウザは、フォーカスを持つ要素の表示を管理するのとは異なり、aria-activedescendant で参照される要素の表示を管理しません。 + キーボードイベントがリストボックス内のアクティブな選択肢を変更したとき、 JavaScript は aria-activedescendant で参照される選択肢を表示領域にスクロールします。 aria-activedescendant の表示を管理することは、コンテンツのサイズを拡大するためにブラウザのズーム機能を使用する人々のアクセシビリティにとって重要です。
      • - コンボボックスの操作時に知覚性を向上させるために、視覚的なキーボードフォーカスとホバーは CSS の :hover 疑似クラス、focus 及び blur イベントハンドラーを使用してスタイルが適用されます: + コンボボックスを操作するときの知覚可能性を向上させるために、視覚的キーボードフォーカスとホバーは CSS の :hover 疑似クラスと focus 及び blur イベントハンドラーを使用してスタイリングされます：
          -
        • コンボボックスがフォーカスを受け取ったときにそれをわかりやすくするため、フォーカスは 2 ピクセルのフォーカスリングを input 要素と button 要素の両方に作成します。フォーカスリングとコンボボックスの間には 2 ピクセルのスペースがあります。
          • +
        • コンボボックスがフォーカスを受け取ったときに認識しやすくするために、フォーカスは input 要素と button 要素それぞれの周りに 2 ピクセルのスペースを空けて 2 ピクセルのフォーカスリングを作成します。
        • リストボックスを開くために入力欄又はボタンをクリックできることをわかりやすくするため、ホバーはフォーカスと同じスタイリングをします。
        • 視覚障害を持つ人々がコンボボックスを対話型要素として識別できるように、コンボボックス又はリスト上にホバーすると、カーソルがポインターに変わります。
        • 選択されたリストボックスの選択肢を他の選択肢と区別しやすくするため、選択するとその選択肢の上下に 2 ピクセルのボーダーを作成します。
        • - 注記: 透明なボーダーが一部のシステムでオペレーティングシステムの高コントラスト設定が有効になっている場合に表示されるため、透明度は、フォーカスされた要素と他の要素との間に視覚的な違いを作成するために使うことができません。 - 透明度の代わりに、フォーカスされた要素はより太いボーダーと少ないパディングを持ちます。 - 要素がフォーカスを受け取るとき、ボーダーはゼロから 2 ピクセルに変更され、パディングは 2 ピクセル減少します。 - 要素がフォーカスを失うと、ボーダーは 2 ピクセルからゼロに変更され、パディングは 2 ピクセル増加します。 + 注記: 透明なボーダーは、オペレーティングシステムの高コントラスト設定が有効な一部のシステムで表示されるため、フォーカスされた要素と他の要素との視覚的な違いを作成するために透明度を使用することはできません。 + 透明度の代わりに、フォーカスされた要素はより太いボーダーとより少ないパディングを持ちます。 + 要素がフォーカスを受け取るとき、ボーダーはゼロから 2 ピクセルに変更され、パディングは 2 ピクセル減少します。 + 要素がフォーカスを失ったとき、ボーダーは 2 ピクセルからゼロに変更され、パディングは 2 ピクセル増加します。
      • - 高コントラスト設定がテキストコンテンツの色を変更する場合、開くボタンの矢印に使用されるインライン SVG グラフィックが背景と十分なコントラストを持つようにするために、svg 要素の CSS の forced-color-adjust を auto に設定し、polygon 要素の fill 属性を currentcolor に設定します。 + 高コントラスト設定がテキストコンテンツの色を変更する場合、開くボタンの矢印として使われるインライン SVG グラフィックがその背景と十分なコントラストを持つようにするために、svg 要素の CSS forced-color-adjust は auto に設定され、かつ polygon 要素の fill 属性は currentcolor に設定されます。 これにより、polygon 要素の fill の色は高コントラストカラー設定によって上書きされます。 forced-color-adjust を使用して fill プロパティの指定された色を上書きしない場合、色は高コントラストモードでも同じままになり、矢印と背景との間の十分なコントラストが得られないか、色が高コントラストモードの背景と一致して見えなくなる可能性があります。
        注記: forced-color-adjust の明示的な設定は、一部のブラウザが SVG グラフィックのデフォルト値として auto を使用しないため必要です。 @@ -133,20 +133,20 @@

        テキストボックス

    - + @@ -160,7 +160,7 @@

    テキストボックス

    @@ -168,10 +168,10 @@

    テキストボックス

    ロール 属性 要素使用方法使用法
    input[type="text"]
      -
    • アクセシブル名を提供するため、label 要素の for 属性で参照されます。
      • -
    • HTML の input 要素に対して推奨される命名方法であり、ラベルをクリックすると入力がフォーカスされます。
      • +
    • アクセシブル名を提供するために label 要素の for 属性によって参照されます。
      • +
    • ラベルをクリックすると入力欄がフォーカスされるため、HTML の input 要素のための推奨される命名方法です。
    input[type="text"]
      -
    • リストボックス内の選択肢がキーボードフォーカスを持つように視覚的に示されている場合、その選択肢を参照します。
      • -
    • キーボードのナビゲーションキー (例えば 下矢印) が押されたとき、JavaScript が値を変更します。
      • -
    • DOM のフォーカスが input 要素にある間、支援技術がアプリケーションがフォーカスとして扱う要素を知ることができるようにします。
      • +
    • リストボックス内の選択肢がキーボードフォーカスを持つことを視覚的に示す場合、その選択肢を参照します。
      • +
    • ナビゲーションキー (例えば 下矢印) が押されたとき、JavaScript が値を変更します。
      • +
    • DOM のフォーカスが input 要素にある間、どの要素がフォーカスされているとアプリケーションがみなすかを支援技術が知れるようにします。
    • - このフォーカス管理テクニックのさらなる情報については、 - aria-activedescendant を使用したコンポジットのフォーカス管理を参照してください。 + このフォーカス管理テクニックの詳細については、 + aria-activedescendant を使用したコンポジット内のフォーカス管理 を参照してください。
    		ロール 属性 要素使用方法使用法
    ul リストボックスとして ul 要素を識別します。ul 要素を listbox として識別します。
    li
      -
    • listbox の option 要素として識別します。
      • + 要素を listbox の option として識別します。
    • 要素のテキストコンテンツは option のアクセシブル名を提供します。
    		 ロール 属性 要素使用方法使用法
    buttonbutton にラベルを提供します。button のためのラベルを提供します。
    下矢印
      -
    • リストボックスがまだ表示されていない場合、最初にリストボックスを開き、次に視覚的なフォーカスを最初の選択肢に移動します。
      • +
    • リストボックスがまだ表示されていない場合、まずリストボックスを開き、次に視覚的フォーカスを最初の選択肢に移動します。
    • DOM のフォーカスはテキストボックスに残ります。
    Alt + 下矢印フォーカスや選択の変更をせずにリストボックスを開きます。フォーカスを移動したり選択を変更したりせずにリストボックスを開きます。
    上矢印
      -
    • リストボックスがまだ表示されていない場合、最初にリストボックスを開き、次に視覚的なフォーカスを最後の選択肢に移動します。
      • +
    • リストボックスがまだ表示されていない場合、最初にリストボックスを開き、次に視覚的フォーカスを最後の選択肢に移動します。
    • DOM のフォーカスはテキストボックスに残ります。
    • カーソルの移動やテキストの操作に使用されるキー、例えば Delete や Shift + 右矢印 など。
      • -
    • テキストボックスには type="text" の HTML input が使用されているため、ブラウザがプラットフォーム固有の編集キーを提供します。
      • +
    • テキストボックスには type="text" のついた HTML input が使用されているため、ブラウザがプラットフォーム固有の編集キーを提供します。

    リストボックスポップアップ

    - 注記: リストボックスに視覚的なフォーカスがある場合、DOM のフォーカスはテキストボックスに残り、テキストボックスのaria-activedescendant の値は、視覚的にフォーカスされているリストボックスの選択肢を参照する値に設定されます。 - キーボードコマンドの説明で「フォーカス」と言及している場合、視覚的なフォーカスインジケータを指しています。 + 注記: リストボックスに視覚的フォーカスがある場合、DOM フォーカスはテキストボックスに残り、テキストボックスの aria-activedescendant の値は、フォーカスされていると視覚的に表示されたリストボックス選択肢を参照した値に設定されます。 + 以下のキーボードコマンドの説明でフォーカスに言及する場合、それは視覚的フォーカスインジケーターを指します。 このフォーカス管理テクニックの詳細については、 - aria-activedescendant を使用したコンポジット内のフォーカスの管理を参照してください。 + aria-activedescendant を使用したコンポジット内のフォーカス管理 を参照してください。

    @@ -185,9 +185,9 @@

    リストボックスポップアップ

    @@ -196,7 +196,7 @@

    リストボックスポップアップ

    @@ -204,9 +204,9 @@

    リストボックスポップアップ

    @@ -214,33 +214,33 @@

    リストボックスポップアップ

    - + - + - + - +
    Enter
      -
    • テキストボックスの値をリストボックスのフォーカスされている選択肢の内容に設定します。
      • +
    • テキストボックスの値をリストボックス内のフォーカスされた選択肢の内容に設定します。
    • リストボックスを閉じます。
      • -
    • テキストボックスに視覚的なフォーカスを設定します。
      • +
    • 視覚的フォーカスをテキストボックスに設定します。
    • リストボックスを閉じます。
      • -
    • テキストボックスに視覚的なフォーカスを設定します。
      • +
    • 視覚的フォーカスをテキストボックスに設定します。
    下矢印
      -
    • 次の選択肢に視覚的なフォーカスを移動します。
      • -
    • 視覚的なフォーカスが最後の選択肢にある場合、視覚的なフォーカスを最初の選択肢に移動します。
      • -
    • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
      • +
    • 視覚的フォーカスを次の選択肢に移動します。
      • +
    • 視覚的フォーカスが最後の選択肢にある場合、視覚的フォーカスを最初の選択肢に移動します。
      • +
    • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
    上矢印
      -
    • 前の選択肢に視覚的なフォーカスを移動します。
      • -
    • 視覚的なフォーカスが最初の選択肢にある場合、視覚的なフォーカスを最後の選択肢に移動します。
      • -
    • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
      • +
    • 視覚的フォーカスを前の選択肢に移動します。
      • +
    • 視覚的フォーカスが最初の選択肢にある場合、視覚的フォーカスを最後の選択肢に移動します。
      • +
    • 注記: このラッピング動作は、以下で説明するように Home 及び End が編集カーソルを移動する場合に便利です。
    右矢印テキストボックスに視覚的なフォーカスを移動し、編集カーソルを右に1文字移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルを右に 1 文字移動します。
    左矢印テキストボックスに視覚的なフォーカスを移動し、編集カーソルを左に1文字移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルを左に 1 文字移動します。
    Home視覚的なフォーカスをテキストボックスに移動し、編集カーソルをフィールドの先頭に移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルをフィールドの先頭に移動します。
    End視覚的なフォーカスをテキストボックスに移動し、編集カーソルをフィールドの末尾に移動します。視覚的フォーカスをテキストボックスに移動し、編集カーソルをフィールドの末尾に移動します。
    印刷可能な文字
      -
    • テキストボックスに視覚的なフォーカスを移動します。
      • +
    • 視覚的フォーカスをテキストボックスに移動します。
    • テキストボックスに文字を入力します。
    • テキストボックス内の文字に基づいてリストボックスの選択肢がフィルタリングされません。
    @@ -249,14 +249,14 @@

    リストボックスポップアップ

    ボタン

    -

    ボタンはページのタブシーケンスから削除されていますが、モバイルデバイスでタッチイベントを使用して選択肢のリストを開くために支援技術にとって重要です。

    +

    このボタンはページのタブ順序から除外されていますが、タッチイベントを使用して選択肢のリストを開くモバイルデバイスの支援技術にとって依然として重要です。

    -

    ロール、プロパティ、状態、及び tabindex 属性

    +

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

    - このページの例のコンボボックスは、以下の ARIA の役割、状態、及びプロパティを実装しています。 - ARIA の役割、状態、及びプロパティの適用方法についての詳細は、コンボボックスパターンのロール、状態、及びプロパティのセクションで確認できます。 + このページのコンボボックスの例は、以下の ARIA ロール、ステート、及びプロパティを実装しています。 + ARIA ロール、ステート、及びプロパティを適用する他の方法についての情報は、コンボボックスパターンのロール、ステート、及びプロパティセクションで確認できます。

    テキストボックス

    @@ -317,8 +317,8 @@

    テキストボックス

    @@ -330,12 +330,12 @@

    テキストボックス

    @@ -379,7 +379,7 @@

    リストボックスポップアップ

    @@ -416,7 +416,7 @@

    ボタン

    tabindex="-1" - + @@ -455,7 +455,7 @@

    ボタン

    -

    JavaScript と CSS のソースコード

    +

    JavaScript 及び CSS のソースコード

    • CSS: diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html index 2b06f6ea..941011b4 100644 --- a/content/patterns/combobox/examples/combobox-datepicker.html +++ b/content/patterns/combobox/examples/combobox-datepicker.html @@ -21,7 +21,7 @@ @@ -453,7 +453,7 @@

      コンボボックス

    - + @@ -483,7 +483,7 @@

    コンボボックス

    - + @@ -541,7 +541,7 @@

    日付選択ダイアログ

    - + @@ -713,9 +713,9 @@

    JavaScript 及び CSS のソースコード

    HTML のソースコード

    以下の HTML コードをコピーするには、CodePen で開いてください。

    - +
    - +
    input[type="text"]
      -
    • アクセシブル名を提供するため label 要素の for 属性で参照されます。
      • -
    • ラベルをクリックすると入力がフォーカスされるため、HTML の入力要素に対して推奨される命名方法です。
      • +
    • アクセシブル名を提供するために label 要素の for 属性によって参照されます。
      • +
    • ラベルをクリックすると入力欄がフォーカスされるため、HTML の input 要素のための推奨される命名方法です。
    input[type="text"]
      -
    • リストボックス内の選択肢がキーボードフォーカスを持つとして視覚的に示されたとき、その選択肢を参照します。
      • -
    • キーボードのナビゲーションキー (例えば Down Arrow) が押されたときに、JavaScript が値を変更します。
      • -
    • DOM のフォーカスが input 要素にある間、アプリケーションがどの要素にフォーカスしているかを支援技術が知れるようにします。
      • +
    • リストボックス内の選択肢がキーボードフォーカスを持つことを視覚的に示す場合、その選択肢を参照します。
      • +
    • ナビゲーションキー (例えば 下矢印) が押されたとき、JavaScript が値を変更します。
      • +
    • DOM のフォーカスが input 要素にある間、どの要素がフォーカスされているとアプリケーションがみなすかを支援技術が知れるようにします。
    • このフォーカス管理テクニックの詳細については、 - aria-activedescendant を使用したコンポジットのフォーカス管理を参照してください。 + aria-activedescendant を使用したコンポジット内のフォーカス管理 を参照してください。
    		li
      -
    • option 要素を listbox の option として識別します。
      • +
    • 要素を listbox の option として識別します。
    • 要素のテキストコンテンツは option のアクセシブル名を提供します。
    		 buttonこのボタンのキーボード機能がリストボックスを開くためのテキストボックスのキーボード操作と重複しているため、このボタンをページのタブシーケンスから削除します。このボタンのキーボード機能がリストボックスを開くためのテキストボックスのキーボード操作と重複しているため、このボタンをページのタブ順序から削除します。
    combobox inputinput 要素をコンボボックスとして特定します。input 要素をコンボボックスとして識別します。
    aria-controls="IDREF" inputコンボボックスによって制御される要素を特定します。コンボボックスによって制御される要素を識別します。
    div 要素をダイアログとして特定します。要素をダイアログとして識別します。