diff --git a/content/patterns/listbox/examples/css/listbox.css b/content/patterns/listbox/examples/css/listbox.css
index 7fc920c5..5ecb8d12 100644
--- a/content/patterns/listbox/examples/css/listbox.css
+++ b/content/patterns/listbox/examples/css/listbox.css
@@ -44,15 +44,30 @@
 [role="option"] {
   position: relative;
   display: block;
-  padding: 0 1em 0 1.5em;
+  margin: 2px;
+  padding: 2px 1em 2px 1.5em;
   line-height: 1.8em;
+  cursor: pointer;
 }
 
-[role="option"].focused {
+[role="listbox"]:focus [role="option"].focused {
   background: #bde4ff;
 }
 
-[role="option"][aria-selected="true"]::before {
+[role="listbox"]:focus [role="option"].focused,
+[role="option"]:hover {
+  outline: 2px solid currentcolor;
+}
+
+.move-right-btn span.checkmark::after {
+  content: " →";
+}
+
+.move-left-btn span.checkmark::before {
+  content: "← ";
+}
+
+[role="option"][aria-selected="true"] span.checkmark::before {
   position: absolute;
   left: 0.5em;
   content: "✓";
@@ -120,14 +135,6 @@ button[aria-disabled="true"] {
   opacity: 0.5;
 }
 
-.move-right-btn::after {
-  content: " →";
-}
-
-.move-left-btn::before {
-  content: "← ";
-}
-
 .annotate {
   color: #366ed4;
   font-style: italic;
diff --git a/content/patterns/listbox/examples/js/listbox-collapsible.js b/content/patterns/listbox/examples/js/listbox-collapsible.js
index 4c5733de..4beaae9f 100644
--- a/content/patterns/listbox/examples/js/listbox-collapsible.js
+++ b/content/patterns/listbox/examples/js/listbox-collapsible.js
@@ -1,4 +1,18 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
+
 'use strict';
+
+/**
+ * @namespace aria
+ * @description
+ * The aria namespace is used to support sharing class definitions between example files
+ * without causing eslint errors for undefined classes
+ */
+var aria = aria || {};
+
 /**
  * ARIA Collapsible Dropdown Listbox Example
  *
@@ -7,70 +21,66 @@
  */
 
 window.addEventListener('load', function () {
-  var button = document.getElementById('exp_button');
-  var exListbox = new aria.Listbox(document.getElementById('exp_elem_list'));
-  new aria.ListboxButton(button, exListbox);
+  const button = document.getElementById('exp_button');
+  const exListbox = new aria.Listbox(document.getElementById('exp_elem_list'));
+  new ListboxButton(button, exListbox);
 });
 
-var aria = aria || {};
-
-aria.ListboxButton = function (button, listbox) {
-  this.button = button;
-  this.listbox = listbox;
-  this.registerEvents();
-};
-
-aria.ListboxButton.prototype.registerEvents = function () {
-  this.button.addEventListener('click', this.showListbox.bind(this));
-  this.button.addEventListener('keyup', this.checkShow.bind(this));
-  this.listbox.listboxNode.addEventListener(
-    'blur',
-    this.hideListbox.bind(this)
-  );
-  this.listbox.listboxNode.addEventListener(
-    'keydown',
-    this.checkHide.bind(this)
-  );
-  this.listbox.setHandleFocusChange(this.onFocusChange.bind(this));
-};
-
-aria.ListboxButton.prototype.checkShow = function (evt) {
-  var key = evt.which || evt.keyCode;
+class ListboxButton {
+  constructor(button, listbox) {
+    this.button = button;
+    this.listbox = listbox;
+    this.registerEvents();
+  }
 
-  switch (key) {
-    case aria.KeyCode.UP:
-    case aria.KeyCode.DOWN:
-      evt.preventDefault();
-      this.showListbox();
-      this.listbox.checkKeyPress(evt);
-      break;
+  registerEvents() {
+    this.button.addEventListener('click', this.showListbox.bind(this));
+    this.button.addEventListener('keyup', this.checkShow.bind(this));
+    this.listbox.listboxNode.addEventListener(
+      'blur',
+      this.hideListbox.bind(this)
+    );
+    this.listbox.listboxNode.addEventListener(
+      'keydown',
+      this.checkHide.bind(this)
+    );
+    this.listbox.setHandleFocusChange(this.onFocusChange.bind(this));
   }
-};
 
-aria.ListboxButton.prototype.checkHide = function (evt) {
-  var key = evt.which || evt.keyCode;
+  checkShow(evt) {
+    switch (evt.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        evt.preventDefault();
+        this.showListbox();
+        this.listbox.checkKeyPress(evt);
+        break;
+    }
+  }
 
-  switch (key) {
-    case aria.KeyCode.RETURN:
-    case aria.KeyCode.ESC:
-      evt.preventDefault();
-      this.hideListbox();
-      this.button.focus();
-      break;
+  checkHide(evt) {
+    switch (evt.key) {
+      case 'Enter':
+      case 'Escape':
+        evt.preventDefault();
+        this.hideListbox();
+        this.button.focus();
+        break;
+    }
   }
-};
 
-aria.ListboxButton.prototype.showListbox = function () {
-  aria.Utils.removeClass(this.listbox.listboxNode, 'hidden');
-  this.button.setAttribute('aria-expanded', 'true');
-  this.listbox.listboxNode.focus();
-};
+  showListbox() {
+    this.listbox.listboxNode.classList.remove('hidden');
+    this.button.setAttribute('aria-expanded', 'true');
+    this.listbox.listboxNode.focus();
+  }
 
-aria.ListboxButton.prototype.hideListbox = function () {
-  aria.Utils.addClass(this.listbox.listboxNode, 'hidden');
-  this.button.removeAttribute('aria-expanded');
-};
+  hideListbox() {
+    this.listbox.listboxNode.classList.add('hidden');
+    this.button.removeAttribute('aria-expanded');
+  }
 
-aria.ListboxButton.prototype.onFocusChange = function (focusedItem) {
-  this.button.innerText = focusedItem.innerText;
-};
+  onFocusChange(focusedItem) {
+    this.button.innerText = focusedItem.innerText;
+  }
+}
diff --git a/content/patterns/listbox/examples/js/listbox-rearrangeable.js b/content/patterns/listbox/examples/js/listbox-rearrangeable.js
index 561b5d51..b5ba8ee8 100644
--- a/content/patterns/listbox/examples/js/listbox-rearrangeable.js
+++ b/content/patterns/listbox/examples/js/listbox-rearrangeable.js
@@ -3,10 +3,16 @@
  *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  */
 
-/* global aria */
-
 'use strict';
 
+/**
+ * @namespace aria
+ * @description
+ * The aria namespace is used to support sharing class definitions between example files
+ * without causing eslint errors for undefined classes
+ */
+var aria = aria || {};
+
 /**
  * ARIA Listbox Examples
  *
diff --git a/content/patterns/listbox/examples/js/listbox-scrollable.js b/content/patterns/listbox/examples/js/listbox-scrollable.js
index 40204060..fe7b2658 100644
--- a/content/patterns/listbox/examples/js/listbox-scrollable.js
+++ b/content/patterns/listbox/examples/js/listbox-scrollable.js
@@ -3,10 +3,16 @@
  *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  */
 
-/* global aria */
-
 'use strict';
 
+/**
+ * @namespace aria
+ * @description
+ * The aria namespace is used to support sharing class definitions between example files
+ * without causing eslint errors for undefined classes
+ */
+var aria = aria || {};
+
 /**
  * ARIA Scrollable Listbox Example
  *
diff --git a/content/patterns/listbox/examples/js/listbox.js b/content/patterns/listbox/examples/js/listbox.js
index 8a24176b..632063f2 100644
--- a/content/patterns/listbox/examples/js/listbox.js
+++ b/content/patterns/listbox/examples/js/listbox.js
@@ -7,6 +7,9 @@
 
 /**
  * @namespace aria
+ * @description
+ * The aria namespace is used to support sharing class definitions between example files
+ * without causing eslint errors for undefined classes
  */
 var aria = aria || {};
 
@@ -17,681 +20,668 @@ var aria = aria || {};
  * @param listboxNode
  *  The DOM node pointing to the listbox
  */
-aria.Listbox = function (listboxNode) {
-  this.listboxNode = listboxNode;
-  this.activeDescendant = this.listboxNode.getAttribute(
-    'aria-activedescendant'
-  );
-  this.multiselectable = this.listboxNode.hasAttribute('aria-multiselectable');
-  this.moveUpDownEnabled = false;
-  this.siblingList = null;
-  this.startRangeIndex = 0;
-  this.upButton = null;
-  this.downButton = null;
-  this.moveButton = null;
-  this.keysSoFar = '';
-  this.handleFocusChange = function () {};
-  this.handleItemChange = function () {};
-  this.registerEvents();
-};
 
-/**
- * @description
- *  Register events for the listbox interactions
- */
-aria.Listbox.prototype.registerEvents = function () {
-  this.listboxNode.addEventListener('focus', this.setupFocus.bind(this));
-  this.listboxNode.addEventListener('keydown', this.checkKeyPress.bind(this));
-  this.listboxNode.addEventListener('click', this.checkClickItem.bind(this));
-
-  if (this.multiselectable) {
-    this.listboxNode.addEventListener(
-      'mousedown',
-      this.checkMouseDown.bind(this)
+aria.Listbox = class Listbox {
+  constructor(listboxNode) {
+    this.listboxNode = listboxNode;
+    this.activeDescendant = this.listboxNode.getAttribute(
+      'aria-activedescendant'
+    );
+    this.multiselectable = this.listboxNode.hasAttribute(
+      'aria-multiselectable'
     );
+    this.moveUpDownEnabled = false;
+    this.siblingList = null;
+    this.startRangeIndex = 0;
+    this.upButton = null;
+    this.downButton = null;
+    this.moveButton = null;
+    this.keysSoFar = '';
+    this.handleFocusChange = function () {};
+    this.handleItemChange = function () {};
+    this.registerEvents();
+  }
+
+  registerEvents() {
+    this.listboxNode.addEventListener('focus', this.setupFocus.bind(this));
+    this.listboxNode.addEventListener('keydown', this.checkKeyPress.bind(this));
+    this.listboxNode.addEventListener('click', this.checkClickItem.bind(this));
+
+    if (this.multiselectable) {
+      this.listboxNode.addEventListener(
+        'mousedown',
+        this.checkMouseDown.bind(this)
+      );
+    }
   }
-};
 
-/**
- * @description
- *  If there is no activeDescendant, focus on the first option
- */
-aria.Listbox.prototype.setupFocus = function () {
-  if (this.activeDescendant) {
-    return;
+  setupFocus() {
+    if (this.activeDescendant) {
+      const listitem = document.getElementById(this.activeDescendant);
+      listitem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
   }
-};
 
-/**
- * @description
- *  Focus on the first option
- */
-aria.Listbox.prototype.focusFirstItem = function () {
-  var firstItem = this.listboxNode.querySelector('[role="option"]');
+  focusFirstItem() {
+    var firstItem = this.listboxNode.querySelector('[role="option"]');
 
-  if (firstItem) {
-    this.focusItem(firstItem);
+    if (firstItem) {
+      this.focusItem(firstItem);
+    }
   }
-};
 
-/**
- * @description
- *  Focus on the last option
- */
-aria.Listbox.prototype.focusLastItem = function () {
-  var itemList = this.listboxNode.querySelectorAll('[role="option"]');
+  focusLastItem() {
+    const itemList = this.listboxNode.querySelectorAll('[role="option"]');
 
-  if (itemList.length) {
-    this.focusItem(itemList[itemList.length - 1]);
+    if (itemList.length) {
+      this.focusItem(itemList[itemList.length - 1]);
+    }
   }
-};
 
-/**
- * @description
- *  Handle various keyboard controls; UP/DOWN will shift focus; SPACE selects
- *  an item.
- * @param evt
- *  The keydown event object
- */
-aria.Listbox.prototype.checkKeyPress = function (evt) {
-  var key = evt.which || evt.keyCode;
-  var lastActiveId = this.activeDescendant;
-  var allOptions = this.listboxNode.querySelectorAll('[role="option"]');
-  var currentItem =
-    document.getElementById(this.activeDescendant) || allOptions[0];
-  var nextItem = currentItem;
-
-  if (!currentItem) {
-    return;
-  }
-
-  switch (key) {
-    case aria.KeyCode.PAGE_UP:
-    case aria.KeyCode.PAGE_DOWN:
-      if (this.moveUpDownEnabled) {
-        evt.preventDefault();
+  checkKeyPress(evt) {
+    const lastActiveId = this.activeDescendant;
+    const allOptions = this.listboxNode.querySelectorAll('[role="option"]');
+    const currentItem =
+      document.getElementById(this.activeDescendant) || allOptions[0];
+    let nextItem = currentItem;
 
-        if (key === aria.KeyCode.PAGE_UP) {
-          this.moveUpItems();
-        } else {
-          this.moveDownItems();
+    if (!currentItem) {
+      return;
+    }
+
+    switch (evt.key) {
+      case 'PageUp':
+      case 'PageDown':
+        evt.preventDefault();
+        if (this.moveUpDownEnabled) {
+          if (evt.key === 'PageUp') {
+            this.moveUpItems();
+          } else {
+            this.moveDownItems();
+          }
         }
-      }
 
-      break;
-    case aria.KeyCode.UP:
-    case aria.KeyCode.DOWN:
-      if (!this.activeDescendant) {
-        // focus first option if no option was previously focused, and perform no other actions
-        this.focusItem(currentItem);
         break;
-      }
-
-      if (this.moveUpDownEnabled && evt.altKey) {
+      case 'ArrowUp':
+      case 'ArrowDown':
         evt.preventDefault();
-        if (key === aria.KeyCode.UP) {
-          this.moveUpItems();
+        if (!this.activeDescendant) {
+          // focus first option if no option was previously focused, and perform no other actions
+          this.focusItem(currentItem);
+          break;
+        }
+
+        if (this.moveUpDownEnabled && evt.altKey) {
+          evt.preventDefault();
+          if (evt.key === 'ArrowUp') {
+            this.moveUpItems();
+          } else {
+            this.moveDownItems();
+          }
+          this.updateScroll();
+          return;
+        }
+
+        if (evt.key === 'ArrowUp') {
+          nextItem = this.findPreviousOption(currentItem);
         } else {
-          this.moveDownItems();
+          nextItem = this.findNextOption(currentItem);
         }
-        return;
-      }
 
-      if (key === aria.KeyCode.UP) {
-        nextItem = this.findPreviousOption(currentItem);
-      } else {
-        nextItem = this.findNextOption(currentItem);
-      }
+        if (nextItem && this.multiselectable && event.shiftKey) {
+          this.selectRange(this.startRangeIndex, nextItem);
+        }
 
-      if (nextItem && this.multiselectable && event.shiftKey) {
-        this.selectRange(this.startRangeIndex, nextItem);
-      }
+        if (nextItem) {
+          this.focusItem(nextItem);
+        }
 
-      if (nextItem) {
-        this.focusItem(nextItem);
+        break;
+
+      case 'Home':
         evt.preventDefault();
-      }
+        this.focusFirstItem();
 
-      break;
-    case aria.KeyCode.HOME:
-      evt.preventDefault();
-      this.focusFirstItem();
+        if (this.multiselectable && evt.shiftKey && evt.ctrlKey) {
+          this.selectRange(this.startRangeIndex, 0);
+        }
+        break;
 
-      if (this.multiselectable && evt.shiftKey && evt.ctrlKey) {
-        this.selectRange(this.startRangeIndex, 0);
-      }
-      break;
-    case aria.KeyCode.END:
-      evt.preventDefault();
-      this.focusLastItem();
+      case 'End':
+        evt.preventDefault();
+        this.focusLastItem();
 
-      if (this.multiselectable && evt.shiftKey && evt.ctrlKey) {
-        this.selectRange(this.startRangeIndex, allOptions.length - 1);
-      }
-      break;
-    case aria.KeyCode.SHIFT:
-      this.startRangeIndex = this.getElementIndex(currentItem, allOptions);
-      break;
-    case aria.KeyCode.SPACE:
-      evt.preventDefault();
-      this.toggleSelectItem(nextItem);
-      break;
-    case aria.KeyCode.BACKSPACE:
-    case aria.KeyCode.DELETE:
-    case aria.KeyCode.RETURN:
-      if (!this.moveButton) {
-        return;
-      }
+        if (this.multiselectable && evt.shiftKey && evt.ctrlKey) {
+          this.selectRange(this.startRangeIndex, allOptions.length - 1);
+        }
+        break;
 
-      var keyshortcuts = this.moveButton.getAttribute('aria-keyshortcuts');
-      if (key === aria.KeyCode.RETURN && keyshortcuts.indexOf('Enter') === -1) {
-        return;
-      }
-      if (
-        (key === aria.KeyCode.BACKSPACE || key === aria.KeyCode.DELETE) &&
-        keyshortcuts.indexOf('Delete') === -1
-      ) {
-        return;
-      }
+      case 'Shift':
+        this.startRangeIndex = this.getElementIndex(currentItem, allOptions);
+        break;
 
-      evt.preventDefault();
+      case ' ':
+        evt.preventDefault();
+        this.toggleSelectItem(nextItem);
+        break;
 
-      var nextUnselected = nextItem.nextElementSibling;
-      while (nextUnselected) {
-        if (nextUnselected.getAttribute('aria-selected') != 'true') {
-          break;
+      case 'Backspace':
+      case 'Delete':
+      case 'Enter':
+        if (!this.moveButton) {
+          return;
         }
-        nextUnselected = nextUnselected.nextElementSibling;
-      }
-      if (!nextUnselected) {
-        nextUnselected = nextItem.previousElementSibling;
+
+        var keyshortcuts = this.moveButton.getAttribute('aria-keyshortcuts');
+        if (evt.key === 'Enter' && keyshortcuts.indexOf('Enter') === -1) {
+          return;
+        }
+        if (
+          (evt.key === 'Backspace' || evt.key === 'Delete') &&
+          keyshortcuts.indexOf('Delete') === -1
+        ) {
+          return;
+        }
+
+        evt.preventDefault();
+
+        var nextUnselected = nextItem.nextElementSibling;
         while (nextUnselected) {
           if (nextUnselected.getAttribute('aria-selected') != 'true') {
             break;
           }
-          nextUnselected = nextUnselected.previousElementSibling;
+          nextUnselected = nextUnselected.nextElementSibling;
+        }
+        if (!nextUnselected) {
+          nextUnselected = nextItem.previousElementSibling;
+          while (nextUnselected) {
+            if (nextUnselected.getAttribute('aria-selected') != 'true') {
+              break;
+            }
+            nextUnselected = nextUnselected.previousElementSibling;
+          }
         }
-      }
 
-      this.moveItems();
+        this.moveItems();
 
-      if (!this.activeDescendant && nextUnselected) {
-        this.focusItem(nextUnselected);
-      }
-      break;
-    case 65:
-      // handle control + A
-      if (this.multiselectable && (evt.ctrlKey || evt.metaKey)) {
-        evt.preventDefault();
-        this.selectRange(0, allOptions.length - 1);
+        if (!this.activeDescendant && nextUnselected) {
+          this.focusItem(nextUnselected);
+        }
         break;
-      }
-    // fall through
-    default:
-      var itemToFocus = this.findItemToFocus(key);
-      if (itemToFocus) {
-        this.focusItem(itemToFocus);
-      }
-      break;
-  }
 
-  if (this.activeDescendant !== lastActiveId) {
-    this.updateScroll();
+      case 'A':
+      case 'a':
+        // handle control + A
+        if (evt.ctrlKey || evt.metaKey) {
+          if (this.multiselectable) {
+            this.selectRange(0, allOptions.length - 1);
+          }
+          evt.preventDefault();
+          break;
+        }
+      // fall through
+      default:
+        if (evt.key.length === 1) {
+          const itemToFocus = this.findItemToFocus(evt.key.toLowerCase());
+          if (itemToFocus) {
+            this.focusItem(itemToFocus);
+          }
+        }
+        break;
+    }
+
+    if (this.activeDescendant !== lastActiveId) {
+      this.updateScroll();
+    }
   }
-};
 
-aria.Listbox.prototype.findItemToFocus = function (key) {
-  var itemList = this.listboxNode.querySelectorAll('[role="option"]');
-  var character = String.fromCharCode(key);
-  var searchIndex = 0;
+  findItemToFocus(character) {
+    const itemList = this.listboxNode.querySelectorAll('[role="option"]');
+    let searchIndex = 0;
 
-  if (!this.keysSoFar) {
-    for (var i = 0; i < itemList.length; i++) {
-      if (itemList[i].getAttribute('id') == this.activeDescendant) {
-        searchIndex = i;
+    if (!this.keysSoFar) {
+      for (let i = 0; i < itemList.length; i++) {
+        if (itemList[i].getAttribute('id') == this.activeDescendant) {
+          searchIndex = i;
+        }
       }
     }
-  }
-  this.keysSoFar += character;
-  this.clearKeysSoFarAfterDelay();
 
-  var nextMatch = this.findMatchInRange(
-    itemList,
-    searchIndex + 1,
-    itemList.length
-  );
-  if (!nextMatch) {
-    nextMatch = this.findMatchInRange(itemList, 0, searchIndex);
-  }
-  return nextMatch;
-};
+    this.keysSoFar += character;
+    this.clearKeysSoFarAfterDelay();
 
-/* Return the index of the passed element within the passed array, or null if not found */
-aria.Listbox.prototype.getElementIndex = function (option, options) {
-  var allOptions = Array.prototype.slice.call(options); // convert to array
-  var optionIndex = allOptions.indexOf(option);
+    let nextMatch = this.findMatchInRange(
+      itemList,
+      searchIndex + 1,
+      itemList.length
+    );
 
-  return typeof optionIndex === 'number' ? optionIndex : null;
-};
+    if (!nextMatch) {
+      nextMatch = this.findMatchInRange(itemList, 0, searchIndex);
+    }
+    return nextMatch;
+  }
 
-/* Return the next listbox option, if it exists; otherwise, returns null */
-aria.Listbox.prototype.findNextOption = function (currentOption) {
-  var allOptions = Array.prototype.slice.call(
-    this.listboxNode.querySelectorAll('[role="option"]')
-  ); // get options array
-  var currentOptionIndex = allOptions.indexOf(currentOption);
-  var nextOption = null;
+  /* Return the index of the passed element within the passed array, or null if not found */
+  getElementIndex(option, options) {
+    const allOptions = Array.prototype.slice.call(options); // convert to array
+    const optionIndex = allOptions.indexOf(option);
 
-  if (currentOptionIndex > -1 && currentOptionIndex < allOptions.length - 1) {
-    nextOption = allOptions[currentOptionIndex + 1];
+    return typeof optionIndex === 'number' ? optionIndex : null;
   }
 
-  return nextOption;
-};
+  /* Return the next listbox option, if it exists; otherwise, returns null */
+  findNextOption(currentOption) {
+    const allOptions = Array.prototype.slice.call(
+      this.listboxNode.querySelectorAll('[role="option"]')
+    ); // get options array
+    const currentOptionIndex = allOptions.indexOf(currentOption);
+    let nextOption = null;
 
-/* Return the previous listbox option, if it exists; otherwise, returns null */
-aria.Listbox.prototype.findPreviousOption = function (currentOption) {
-  var allOptions = Array.prototype.slice.call(
-    this.listboxNode.querySelectorAll('[role="option"]')
-  ); // get options array
-  var currentOptionIndex = allOptions.indexOf(currentOption);
-  var previousOption = null;
+    if (currentOptionIndex > -1 && currentOptionIndex < allOptions.length - 1) {
+      nextOption = allOptions[currentOptionIndex + 1];
+    }
 
-  if (currentOptionIndex > -1 && currentOptionIndex > 0) {
-    previousOption = allOptions[currentOptionIndex - 1];
+    return nextOption;
   }
 
-  return previousOption;
-};
+  /* Return the previous listbox option, if it exists; otherwise, returns null */
+  findPreviousOption(currentOption) {
+    const allOptions = Array.prototype.slice.call(
+      this.listboxNode.querySelectorAll('[role="option"]')
+    ); // get options array
+    const currentOptionIndex = allOptions.indexOf(currentOption);
+    let previousOption = null;
 
-aria.Listbox.prototype.clearKeysSoFarAfterDelay = function () {
-  if (this.keyClear) {
-    clearTimeout(this.keyClear);
-    this.keyClear = null;
-  }
-  this.keyClear = setTimeout(
-    function () {
-      this.keysSoFar = '';
-      this.keyClear = null;
-    }.bind(this),
-    500
-  );
-};
-
-aria.Listbox.prototype.findMatchInRange = function (
-  list,
-  startIndex,
-  endIndex
-) {
-  // Find the first item starting with the keysSoFar substring, searching in
-  // the specified range of items
-  for (var n = startIndex; n < endIndex; n++) {
-    var label = list[n].innerText;
-    if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
-      return list[n];
+    if (currentOptionIndex > -1 && currentOptionIndex > 0) {
+      previousOption = allOptions[currentOptionIndex - 1];
     }
-  }
-  return null;
-};
 
-/**
- * @description
- *  Check if an item is clicked on. If so, focus on it and select it.
- * @param evt
- *  The click event object
- */
-aria.Listbox.prototype.checkClickItem = function (evt) {
-  if (evt.target.getAttribute('role') !== 'option') {
-    return;
+    return previousOption;
   }
 
-  this.focusItem(evt.target);
-  this.toggleSelectItem(evt.target);
-  this.updateScroll();
-
-  if (this.multiselectable && evt.shiftKey) {
-    this.selectRange(this.startRangeIndex, evt.target);
+  clearKeysSoFarAfterDelay() {
+    if (this.keyClear) {
+      clearTimeout(this.keyClear);
+      this.keyClear = null;
+    }
+    this.keyClear = setTimeout(
+      function () {
+        this.keysSoFar = '';
+        this.keyClear = null;
+      }.bind(this),
+      500
+    );
   }
-};
 
-/**
- * Prevent text selection on shift + click for multi-select listboxes
- *
- * @param evt
- */
-aria.Listbox.prototype.checkMouseDown = function (evt) {
-  if (
-    this.multiselectable &&
-    evt.shiftKey &&
-    evt.target.getAttribute('role') === 'option'
-  ) {
-    evt.preventDefault();
+  findMatchInRange(list, startIndex, endIndex) {
+    // Find the first item starting with the keysSoFar substring, searching in
+    // the specified range of items
+    for (let n = startIndex; n < endIndex; n++) {
+      const label = list[n].innerText;
+      if (label && label.toLowerCase().indexOf(this.keysSoFar) === 0) {
+        return list[n];
+      }
+    }
+    return null;
   }
-};
 
-/**
- * @description
- *  Toggle the aria-selected value
- * @param element
- *  The element to select
- */
-aria.Listbox.prototype.toggleSelectItem = function (element) {
-  if (this.multiselectable) {
-    element.setAttribute(
-      'aria-selected',
-      element.getAttribute('aria-selected') === 'true' ? 'false' : 'true'
-    );
+  checkClickItem(evt) {
+    if (evt.target.getAttribute('role') !== 'option') {
+      return;
+    }
 
-    this.updateMoveButton();
-  }
-};
+    this.focusItem(evt.target);
+    this.toggleSelectItem(evt.target);
+    this.updateScroll();
 
-/**
- * @description
- *  Defocus the specified item
- * @param element
- *  The element to defocus
- */
-aria.Listbox.prototype.defocusItem = function (element) {
-  if (!element) {
-    return;
-  }
-  if (!this.multiselectable) {
-    element.removeAttribute('aria-selected');
+    if (this.multiselectable && evt.shiftKey) {
+      this.selectRange(this.startRangeIndex, evt.target);
+    }
   }
-  element.classList.remove('focused');
-};
 
-/**
- * @description
- *  Focus on the specified item
- * @param element
- *  The element to focus
- */
-aria.Listbox.prototype.focusItem = function (element) {
-  this.defocusItem(document.getElementById(this.activeDescendant));
-  if (!this.multiselectable) {
-    element.setAttribute('aria-selected', 'true');
+  /**
+   * Prevent text selection on shift + click for multi-select listboxes
+   *
+   * @param evt
+   */
+  checkMouseDown(evt) {
+    if (
+      this.multiselectable &&
+      evt.shiftKey &&
+      evt.target.getAttribute('role') === 'option'
+    ) {
+      evt.preventDefault();
+    }
   }
-  element.classList.add('focused');
-  this.listboxNode.setAttribute('aria-activedescendant', element.id);
-  this.activeDescendant = element.id;
 
-  if (!this.multiselectable) {
-    this.updateMoveButton();
+  /**
+   * @description
+   *  Toggle the aria-selected value
+   * @param element
+   *  The element to select
+   */
+  toggleSelectItem(element) {
+    if (this.multiselectable) {
+      element.setAttribute(
+        'aria-selected',
+        element.getAttribute('aria-selected') === 'true' ? 'false' : 'true'
+      );
+
+      this.updateMoveButton();
+    }
   }
 
-  this.checkUpDownButtons();
-  this.handleFocusChange(element);
-};
-
-/**
- * Helper function to check if a number is within a range; no side effects.
- *
- * @param index
- * @param start
- * @param end
- * @returns {boolean}
- */
-aria.Listbox.prototype.checkInRange = function (index, start, end) {
-  var rangeStart = start < end ? start : end;
-  var rangeEnd = start < end ? end : start;
+  /**
+   * @description
+   *  Defocus the specified item
+   * @param element
+   *  The element to defocus
+   */
+  defocusItem(element) {
+    if (!element) {
+      return;
+    }
+    if (!this.multiselectable) {
+      element.removeAttribute('aria-selected');
+    }
+    element.classList.remove('focused');
+  }
+
+  /**
+   * @description
+   *  Focus on the specified item
+   * @param element
+   *  The element to focus
+   */
+  focusItem(element) {
+    this.defocusItem(document.getElementById(this.activeDescendant));
+    if (!this.multiselectable) {
+      element.setAttribute('aria-selected', 'true');
+    }
+    element.classList.add('focused');
+    this.listboxNode.setAttribute('aria-activedescendant', element.id);
+    this.activeDescendant = element.id;
 
-  return index >= rangeStart && index <= rangeEnd;
-};
+    if (!this.multiselectable) {
+      this.updateMoveButton();
+    }
 
-/**
- * Select a range of options
- *
- * @param start
- * @param end
- */
-aria.Listbox.prototype.selectRange = function (start, end) {
-  // get start/end indices
-  var allOptions = this.listboxNode.querySelectorAll('[role="option"]');
-  var startIndex =
-    typeof start === 'number' ? start : this.getElementIndex(start, allOptions);
-  var endIndex =
-    typeof end === 'number' ? end : this.getElementIndex(end, allOptions);
+    this.checkUpDownButtons();
+    this.handleFocusChange(element);
+  }
+
+  /**
+   * Helper function to check if a number is within a range; no side effects.
+   *
+   * @param index
+   * @param start
+   * @param end
+   * @returns {boolean}
+   */
+  checkInRange(index, start, end) {
+    const rangeStart = start < end ? start : end;
+    const rangeEnd = start < end ? end : start;
+
+    return index >= rangeStart && index <= rangeEnd;
+  }
+
+  /**
+   * Select a range of options
+   *
+   * @param start
+   * @param end
+   */
+  selectRange(start, end) {
+    // get start/end indices
+    const allOptions = this.listboxNode.querySelectorAll('[role="option"]');
+    const startIndex =
+      typeof start === 'number'
+        ? start
+        : this.getElementIndex(start, allOptions);
+    const endIndex =
+      typeof end === 'number' ? end : this.getElementIndex(end, allOptions);
+
+    for (let index = 0; index < allOptions.length; index++) {
+      const selected = this.checkInRange(index, startIndex, endIndex);
+      allOptions[index].setAttribute('aria-selected', selected + '');
+    }
 
-  for (var index = 0; index < allOptions.length; index++) {
-    var selected = this.checkInRange(index, startIndex, endIndex);
-    allOptions[index].setAttribute('aria-selected', selected + '');
+    this.updateMoveButton();
   }
 
-  this.updateMoveButton();
-};
-
-/**
- * Check for selected options and update moveButton, if applicable
- */
-aria.Listbox.prototype.updateMoveButton = function () {
-  if (!this.moveButton) {
-    return;
-  }
+  /**
+   * Check for selected options and update moveButton, if applicable
+   */
+  updateMoveButton() {
+    if (!this.moveButton) {
+      return;
+    }
 
-  if (this.listboxNode.querySelector('[aria-selected="true"]')) {
-    this.moveButton.setAttribute('aria-disabled', 'false');
-  } else {
-    this.moveButton.setAttribute('aria-disabled', 'true');
+    if (this.listboxNode.querySelector('[aria-selected="true"]')) {
+      this.moveButton.setAttribute('aria-disabled', 'false');
+    } else {
+      this.moveButton.setAttribute('aria-disabled', 'true');
+    }
   }
-};
 
-/**
- * Check if the selected option is in view, and scroll if not
- */
-aria.Listbox.prototype.updateScroll = function () {
-  var selectedOption = document.getElementById(this.activeDescendant);
-  if (
-    selectedOption &&
-    this.listboxNode.scrollHeight > this.listboxNode.clientHeight
-  ) {
-    var scrollBottom =
-      this.listboxNode.clientHeight + this.listboxNode.scrollTop;
-    var elementBottom = selectedOption.offsetTop + selectedOption.offsetHeight;
-    if (elementBottom > scrollBottom) {
-      this.listboxNode.scrollTop =
-        elementBottom - this.listboxNode.clientHeight;
-    } else if (selectedOption.offsetTop < this.listboxNode.scrollTop) {
-      this.listboxNode.scrollTop = selectedOption.offsetTop;
+  /**
+   * Check if the selected option is in view, and scroll if not
+   */
+  updateScroll() {
+    const selectedOption = document.getElementById(this.activeDescendant);
+    if (selectedOption) {
+      const scrollBottom =
+        this.listboxNode.clientHeight + this.listboxNode.scrollTop;
+      const elementBottom =
+        selectedOption.offsetTop + selectedOption.offsetHeight;
+      if (elementBottom > scrollBottom) {
+        this.listboxNode.scrollTop =
+          elementBottom - this.listboxNode.clientHeight;
+      } else if (selectedOption.offsetTop < this.listboxNode.scrollTop) {
+        this.listboxNode.scrollTop = selectedOption.offsetTop;
+      }
+      selectedOption.scrollIntoView({ block: 'nearest', inline: 'nearest' });
     }
   }
-};
-
-/**
- * @description
- *  Enable/disable the up/down arrows based on the activeDescendant.
- */
-aria.Listbox.prototype.checkUpDownButtons = function () {
-  var activeElement = document.getElementById(this.activeDescendant);
 
-  if (!this.moveUpDownEnabled) {
-    return;
-  }
+  /**
+   * @description
+   *  Enable/disable the up/down arrows based on the activeDescendant.
+   */
+  checkUpDownButtons() {
+    const activeElement = document.getElementById(this.activeDescendant);
 
-  if (!activeElement) {
-    this.upButton.setAttribute('aria-disabled', 'true');
-    this.downButton.setAttribute('aria-disabled', 'true');
-    return;
-  }
+    if (!this.moveUpDownEnabled) {
+      return;
+    }
 
-  if (this.upButton) {
-    if (activeElement.previousElementSibling) {
-      this.upButton.setAttribute('aria-disabled', false);
-    } else {
+    if (!activeElement) {
       this.upButton.setAttribute('aria-disabled', 'true');
+      this.downButton.setAttribute('aria-disabled', 'true');
+      return;
     }
-  }
 
-  if (this.downButton) {
-    if (activeElement.nextElementSibling) {
-      this.downButton.setAttribute('aria-disabled', false);
-    } else {
-      this.downButton.setAttribute('aria-disabled', 'true');
+    if (this.upButton) {
+      if (activeElement.previousElementSibling) {
+        this.upButton.setAttribute('aria-disabled', false);
+      } else {
+        this.upButton.setAttribute('aria-disabled', 'true');
+      }
     }
-  }
-};
 
-/**
- * @description
- *  Add the specified items to the listbox. Assumes items are valid options.
- * @param items
- *  An array of items to add to the listbox
- */
-aria.Listbox.prototype.addItems = function (items) {
-  if (!items || !items.length) {
-    return;
+    if (this.downButton) {
+      if (activeElement.nextElementSibling) {
+        this.downButton.setAttribute('aria-disabled', false);
+      } else {
+        this.downButton.setAttribute('aria-disabled', 'true');
+      }
+    }
   }
 
-  items.forEach(
-    function (item) {
-      this.defocusItem(item);
-      this.toggleSelectItem(item);
-      this.listboxNode.append(item);
-    }.bind(this)
-  );
+  /**
+   * @description
+   *  Add the specified items to the listbox. Assumes items are valid options.
+   * @param items
+   *  An array of items to add to the listbox
+   */
+  addItems(items) {
+    if (!items || !items.length) {
+      return;
+    }
 
-  if (!this.activeDescendant) {
-    this.focusItem(items[0]);
-  }
+    items.forEach(
+      function (item) {
+        this.defocusItem(item);
+        this.toggleSelectItem(item);
+        this.listboxNode.append(item);
+      }.bind(this)
+    );
 
-  this.handleItemChange('added', items);
-};
+    if (!this.activeDescendant) {
+      this.focusItem(items[0]);
+    }
 
-/**
- * @description
- *  Remove all of the selected items from the listbox; Removes the focused items
- *  in a single select listbox and the items with aria-selected in a multi
- *  select listbox.
- * @returns {Array}
- *  An array of items that were removed from the listbox
- */
-aria.Listbox.prototype.deleteItems = function () {
-  var itemsToDelete;
+    this.handleItemChange('added', items);
+  }
+
+  /**
+   * @description
+   *  Remove all of the selected items from the listbox; Removes the focused items
+   *  in a single select listbox and the items with aria-selected in a multi
+   *  select listbox.
+   * @returns {Array}
+   *  An array of items that were removed from the listbox
+   */
+  deleteItems() {
+    let itemsToDelete;
+
+    if (this.multiselectable) {
+      itemsToDelete = this.listboxNode.querySelectorAll(
+        '[aria-selected="true"]'
+      );
+    } else if (this.activeDescendant) {
+      itemsToDelete = [document.getElementById(this.activeDescendant)];
+    }
 
-  if (this.multiselectable) {
-    itemsToDelete = this.listboxNode.querySelectorAll('[aria-selected="true"]');
-  } else if (this.activeDescendant) {
-    itemsToDelete = [document.getElementById(this.activeDescendant)];
-  }
+    if (!itemsToDelete || !itemsToDelete.length) {
+      return [];
+    }
 
-  if (!itemsToDelete || !itemsToDelete.length) {
-    return [];
-  }
+    itemsToDelete.forEach(
+      function (item) {
+        item.remove();
 
-  itemsToDelete.forEach(
-    function (item) {
-      item.remove();
+        if (item.id === this.activeDescendant) {
+          this.clearActiveDescendant();
+        }
+      }.bind(this)
+    );
 
-      if (item.id === this.activeDescendant) {
-        this.clearActiveDescendant();
-      }
-    }.bind(this)
-  );
+    this.handleItemChange('removed', itemsToDelete);
 
-  this.handleItemChange('removed', itemsToDelete);
+    return itemsToDelete;
+  }
 
-  return itemsToDelete;
-};
+  clearActiveDescendant() {
+    this.activeDescendant = null;
+    this.listboxNode.setAttribute('aria-activedescendant', null);
 
-aria.Listbox.prototype.clearActiveDescendant = function () {
-  this.activeDescendant = null;
-  this.listboxNode.setAttribute('aria-activedescendant', null);
+    this.updateMoveButton();
+    this.checkUpDownButtons();
+  }
 
-  this.updateMoveButton();
-  this.checkUpDownButtons();
-};
+  /**
+   * @description
+   *  Shifts the currently focused item up on the list. No shifting occurs if the
+   *  item is already at the top of the list.
+   */
+  moveUpItems() {
+    if (!this.activeDescendant) {
+      return;
+    }
 
-/**
- * @description
- *  Shifts the currently focused item up on the list. No shifting occurs if the
- *  item is already at the top of the list.
- */
-aria.Listbox.prototype.moveUpItems = function () {
-  if (!this.activeDescendant) {
-    return;
-  }
+    const currentItem = document.getElementById(this.activeDescendant);
+    const previousItem = currentItem.previousElementSibling;
 
-  var currentItem = document.getElementById(this.activeDescendant);
-  var previousItem = currentItem.previousElementSibling;
+    if (previousItem) {
+      this.listboxNode.insertBefore(currentItem, previousItem);
+      this.handleItemChange('moved_up', [currentItem]);
+    }
 
-  if (previousItem) {
-    this.listboxNode.insertBefore(currentItem, previousItem);
-    this.handleItemChange('moved_up', [currentItem]);
+    this.checkUpDownButtons();
   }
 
-  this.checkUpDownButtons();
-};
+  /**
+   * @description
+   *  Shifts the currently focused item down on the list. No shifting occurs if
+   *  the item is already at the end of the list.
+   */
+  moveDownItems() {
+    if (!this.activeDescendant) {
+      return;
+    }
 
-/**
- * @description
- *  Shifts the currently focused item down on the list. No shifting occurs if
- *  the item is already at the end of the list.
- */
-aria.Listbox.prototype.moveDownItems = function () {
-  if (!this.activeDescendant) {
-    return;
-  }
+    var currentItem = document.getElementById(this.activeDescendant);
+    var nextItem = currentItem.nextElementSibling;
 
-  var currentItem = document.getElementById(this.activeDescendant);
-  var nextItem = currentItem.nextElementSibling;
+    if (nextItem) {
+      this.listboxNode.insertBefore(nextItem, currentItem);
+      this.handleItemChange('moved_down', [currentItem]);
+    }
 
-  if (nextItem) {
-    this.listboxNode.insertBefore(nextItem, currentItem);
-    this.handleItemChange('moved_down', [currentItem]);
+    this.checkUpDownButtons();
   }
 
-  this.checkUpDownButtons();
-};
+  /**
+   * @description
+   *  Delete the currently selected items and add them to the sibling list.
+   */
+  moveItems() {
+    if (!this.siblingList) {
+      return;
+    }
 
-/**
- * @description
- *  Delete the currently selected items and add them to the sibling list.
- */
-aria.Listbox.prototype.moveItems = function () {
-  if (!this.siblingList) {
-    return;
+    var itemsToMove = this.deleteItems();
+    this.siblingList.addItems(itemsToMove);
   }
 
-  var itemsToMove = this.deleteItems();
-  this.siblingList.addItems(itemsToMove);
-};
-
-/**
- * @description
- *  Enable Up/Down controls to shift items up and down.
- * @param upButton
- *   Up button to trigger up shift
- * @param downButton
- *   Down button to trigger down shift
- */
-aria.Listbox.prototype.enableMoveUpDown = function (upButton, downButton) {
-  this.moveUpDownEnabled = true;
-  this.upButton = upButton;
-  this.downButton = downButton;
-  upButton.addEventListener('click', this.moveUpItems.bind(this));
-  downButton.addEventListener('click', this.moveDownItems.bind(this));
-};
+  /**
+   * @description
+   *  Enable Up/Down controls to shift items up and down.
+   * @param upButton
+   *   Up button to trigger up shift
+   * @param downButton
+   *   Down button to trigger down shift
+   */
+  enableMoveUpDown(upButton, downButton) {
+    this.moveUpDownEnabled = true;
+    this.upButton = upButton;
+    this.downButton = downButton;
+    upButton.addEventListener('click', this.moveUpItems.bind(this));
+    downButton.addEventListener('click', this.moveDownItems.bind(this));
+  }
 
-/**
- * @description
- *  Enable Move controls. Moving removes selected items from the current
- *  list and adds them to the sibling list.
- * @param button
- *   Move button to trigger delete
- * @param siblingList
- *   Listbox to move items to
- */
-aria.Listbox.prototype.setupMove = function (button, siblingList) {
-  this.siblingList = siblingList;
-  this.moveButton = button;
-  button.addEventListener('click', this.moveItems.bind(this));
-};
+  /**
+   * @description
+   *  Enable Move controls. Moving removes selected items from the current
+   *  list and adds them to the sibling list.
+   * @param button
+   *   Move button to trigger delete
+   * @param siblingList
+   *   Listbox to move items to
+   */
+  setupMove(button, siblingList) {
+    this.siblingList = siblingList;
+    this.moveButton = button;
+    button.addEventListener('click', this.moveItems.bind(this));
+  }
 
-aria.Listbox.prototype.setHandleItemChange = function (handlerFn) {
-  this.handleItemChange = handlerFn;
-};
+  setHandleItemChange(handlerFn) {
+    this.handleItemChange = handlerFn;
+  }
 
-aria.Listbox.prototype.setHandleFocusChange = function (focusChangeHandler) {
-  this.handleFocusChange = focusChangeHandler;
+  setHandleFocusChange(focusChangeHandler) {
+    this.handleFocusChange = focusChangeHandler;
+  }
 };
diff --git a/content/patterns/listbox/examples/js/toolbar.js b/content/patterns/listbox/examples/js/toolbar.js
index 6def976c..a1fb9f89 100644
--- a/content/patterns/listbox/examples/js/toolbar.js
+++ b/content/patterns/listbox/examples/js/toolbar.js
@@ -7,6 +7,9 @@
 
 /**
  * @namespace aria
+ * @description
+ * The aria namespace is used to support sharing class definitions between example files
+ * without causing eslint errors for undefined classes
  */
 var aria = aria || {};
 
@@ -17,101 +20,118 @@ var aria = aria || {};
  * @param toolbarNode
  *  The DOM node pointing to the toolbar
  */
-aria.Toolbar = function (toolbarNode) {
-  this.toolbarNode = toolbarNode;
-  this.items = this.toolbarNode.querySelectorAll('.toolbar-item');
-  this.selectedItem = this.toolbarNode.querySelector('.selected');
-  this.registerEvents();
-};
 
-/**
- * @description
- *  Register events for the toolbar interactions
- */
-aria.Toolbar.prototype.registerEvents = function () {
-  this.toolbarNode.addEventListener(
-    'keydown',
-    this.checkFocusChange.bind(this)
-  );
-  this.toolbarNode.addEventListener('click', this.checkClickItem.bind(this));
-};
+aria.Toolbar = class Toolbar {
+  constructor(toolbarNode) {
+    this.toolbarNode = toolbarNode;
+    this.items = this.toolbarNode.querySelectorAll('.toolbar-item');
+    this.selectedItem = this.toolbarNode.querySelector('.selected');
+    this.registerEvents();
+  }
 
-/**
- * @description
- *  Handle various keyboard controls; LEFT/RIGHT will shift focus; DOWN
- *  activates a menu button if it is the focused item.
- * @param evt
- *  The keydown event object
- */
-aria.Toolbar.prototype.checkFocusChange = function (evt) {
-  var key = evt.which || evt.keyCode;
-  var nextIndex, nextItem;
+  /**
+   * @description
+   *  Register events for the toolbar interactions
+   */
+  registerEvents() {
+    this.toolbarNode.addEventListener(
+      'keydown',
+      this.checkFocusChange.bind(this)
+    );
+    this.toolbarNode.addEventListener('click', this.checkClickItem.bind(this));
+  }
+
+  /**
+   * @description
+   *  Handle various keyboard commands to move focus:
+   *    LEFT:  Previous button
+   *    RIGHT: Next button
+   *    HOME:  First button
+   *    END:   Last button
+   * @param evt
+   *  The keydown event object
+   */
+  checkFocusChange(evt) {
+    let nextIndex, nextItem;
+
+    // Do not move focus if any modifier keys pressed
+    if (!evt.shiftKey && !evt.metaKey && !evt.altKey && !evt.ctrlKey) {
+      switch (evt.key) {
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          nextIndex = Array.prototype.indexOf.call(
+            this.items,
+            this.selectedItem
+          );
+          nextIndex = evt.key === 'ArrowLeft' ? nextIndex - 1 : nextIndex + 1;
+          nextIndex = Math.max(Math.min(nextIndex, this.items.length - 1), 0);
+
+          nextItem = this.items[nextIndex];
+          break;
 
-  switch (key) {
-    case aria.KeyCode.LEFT:
-    case aria.KeyCode.RIGHT:
-      nextIndex = Array.prototype.indexOf.call(this.items, this.selectedItem);
-      nextIndex = key === aria.KeyCode.LEFT ? nextIndex - 1 : nextIndex + 1;
-      nextIndex = Math.max(Math.min(nextIndex, this.items.length - 1), 0);
+        case 'End':
+          nextItem = this.items[this.items.length - 1];
+          break;
 
-      nextItem = this.items[nextIndex];
-      this.selectItem(nextItem);
-      this.focusItem(nextItem);
-      break;
-    case aria.KeyCode.DOWN:
-      // if selected item is menu button, pressing DOWN should act like a click
-      if (aria.Utils.hasClass(this.selectedItem, 'menu-button')) {
+        case 'Home':
+          nextItem = this.items[0];
+          break;
+      }
+
+      if (nextItem) {
+        this.selectItem(nextItem);
+        this.focusItem(nextItem);
+        evt.stopPropagation();
         evt.preventDefault();
-        this.selectedItem.click();
       }
-      break;
+    }
   }
-};
 
-/**
- * @description
- *  Selects a toolbar item if it is clicked
- * @param evt
- *  The click event object
- */
-aria.Toolbar.prototype.checkClickItem = function (evt) {
-  if (aria.Utils.hasClass(evt.target, 'toolbar-item')) {
-    this.selectItem(evt.target);
+  /**
+   * @description
+   *  Selects a toolbar item if it is clicked
+   * @param evt
+   *  The click event object
+   */
+  checkClickItem(evt) {
+    if (evt.target.classList.contains('toolbar-item')) {
+      this.selectItem(evt.target);
+    }
   }
-};
 
-/**
- * @description
- *  Deselect the specified item
- * @param element
- *  The item to deselect
- */
-aria.Toolbar.prototype.deselectItem = function (element) {
-  aria.Utils.removeClass(element, 'selected');
-  element.setAttribute('aria-selected', 'false');
-  element.setAttribute('tabindex', '-1');
-};
+  /**
+   * @description
+   *  Deselect the specified item
+   * @param element
+   *  The item to deselect
+   */
+  deselectItem(element) {
+    element.classList.remove('selected');
+    element.setAttribute('aria-selected', 'false');
+    element.setAttribute('tabindex', '-1');
+  }
 
-/**
- * @description
- *  Deselect the currently selected item and select the specified item
- * @param element
- *  The item to select
- */
-aria.Toolbar.prototype.selectItem = function (element) {
-  this.deselectItem(this.selectedItem);
-  aria.Utils.addClass(element, 'selected');
-  element.setAttribute('aria-selected', 'true');
-  element.setAttribute('tabindex', '0');
-  this.selectedItem = element;
-};
+  /**
+   * @description
+   *  Deselect the currently selected item and select the specified item
+   * @param element
+   *  The item to select
+   */
+  selectItem(element) {
+    this.deselectItem(this.selectedItem);
+    element.classList.add('selected');
+    element.setAttribute('aria-selected', 'true');
+    element.setAttribute('tabindex', '0');
+    this.selectedItem = element;
+  }
 
-/**
- * @description
- *  Focus on the specified item
- * @param element
- *  The item to focus on
- */
-aria.Toolbar.prototype.focusItem = function (element) {
-  element.focus();
+  /**
+   * @description
+   *  Focus on the specified item
+   * @param element
+   *  The item to focus on
+   */
+  focusItem(element) {
+    element.focus();
+  }
 };
diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html
index 2c08fc81..bc27a272 100644
--- a/content/patterns/listbox/examples/listbox-collapsible.html
+++ b/content/patterns/listbox/examples/listbox-collapsible.html
@@ -15,7 +15,6 @@
 
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
-    <script src="../../../shared/js/utils.js"></script>
     <script src="js/listbox.js"></script>
     <script src="js/listbox-collapsible.js"></script>
   </head>
@@ -39,7 +38,7 @@ <h3>Deprecation Warning</h3>
           </p>
         </div>
         <p>
-          The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML <code>select</code> input with the attribute <code>size=&quot;1&quot;</code>.
+          The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML <code>select</code> input with the attribute <code>size="1"</code>.
           The widget consists of a button that triggers the display of a listbox.
           In its default state, the widget is collapsed (the listbox is not visible) and the button label shows the currently selected option from the listbox.
           When the button is activated, the listbox is displayed and the current option is focused and selected.
@@ -98,24 +97,23 @@ <h2 id="ex_label">Example</h2>
           </div>
         </div>
         <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-        <h3>Notes</h3>
-        <p>This listbox is scrollable; it has more options than its height can accommodate.</p>
-        <ol>
+      </section>
+
+      <section id="accessibility_features">
+        <h2>Accessibility Features</h2>
+        <ul>
           <li>
-            Scrolling only works as expected if the listbox is the options' <code>offsetParent</code>.
-            The example uses <code>position: relative</code> on the listbox to that effect.
+            Because this listbox implementation is scrollable and manages which option is focused by <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">using aria-activedescendant</a>, the JavaScript must ensure the focused option is visible.
+            So, when a keyboard or pointer event changes the option referenced by <code>aria-activedescendant</code>, if the referenced option is not fully visible, the JavaScript scrolls the listbox to position the option in view.
           </li>
           <li>
-            When an option is focused that isn't (fully) visible, the listbox's scroll position is updated:
-            <ol>
-              <li>If <kbd>Up Arrow</kbd> or <kbd>Down Arrow</kbd> is pressed, the previous or next option is scrolled into view.</li>
-              <li>If <kbd>Home</kbd> or <kbd>End</kbd> is pressed, the listbox scrolls all the way to the top or to the bottom.</li>
-              <li>If <code>focusItem</code> is called, the focused option will be scrolled to the top of the view if it was located above it or to the bottom if it was below it.</li>
-              <li>If the mouse is clicked on a partially visible option, it will be scrolled fully into view.</li>
-            </ol>
+            To enhance perceivability when operating the listbox, visual keyboard focus and hover are styled using the CSS <code>:hover</code> and <code>:focus</code> pseudo-classes:
+            <ul>
+              <li>To help people with visual impairments identify the listbox as an interactive element, the cursor is changed to a pointer when hovering over the list.</li>
+              <li>To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.</li>
+            </ul>
           </li>
-          <li>When a fully visible option is focused in any way, no scrolling occurs.</li>
-        </ol>
+        </ul>
       </section>
 
       <section>
@@ -124,6 +122,12 @@ <h2 id="kbd_label">Keyboard Support</h2>
           The example listbox on this page implements the following keyboard interface.
           Other variations and options for the keyboard interface are described in the <a href="../listbox-pattern.html#keyboard_interaction">Keyboard Interaction section of the Listbox Pattern</a>.
         </p>
+        <p>
+          <strong>NOTE:</strong> When visual focus is on an option in this listbox implementation, DOM focus remains on the listbox element and the value of <code>aria-activedescendant</code> on the listbox refers to the descendant option that is visually indicated as focused.
+          Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator, not DOM focus.
+          For more information about this focus management technique, see
+          <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">Managing Focus in Composites Using aria-activedescendant</a>.
+        </p>
         <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
@@ -132,6 +136,15 @@ <h2 id="kbd_label">Keyboard Support</h2>
             </tr>
           </thead>
           <tbody>
+            <tr data-test-id="key-tab">
+              <th><kbd>Tab</kbd></th>
+              <td>
+                <ul>
+                  <li>Moves focus into and out of the listbox.</li>
+                  <li>If the listbox is expanded, selects the focused option, collapses the listbox, and moves focus out of the listbox.</li>
+                </ul>
+              </td>
+            </tr>
             <tr data-test-id="key-enter">
               <th><kbd>Enter</kbd></th>
               <td>
@@ -202,7 +215,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
           <tbody>
             <tr data-test-id="button-aria-labelledby">
               <td></td>
-              <th scope="row"><code>aria-labelledby=&quot;ID_REF1 ID_REF2&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REF1 ID_REF2"</code></th>
               <td><code>button</code></td>
               <td>
                 <ul>
@@ -214,13 +227,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             </tr>
             <tr data-test-id="button-aria-haspopup">
               <td></td>
-              <th scope="row"><code>aria-haspopup=&quot;listbox&quot;</code></th>
+              <th scope="row"><code>aria-haspopup="listbox"</code></th>
               <td><code>button</code></td>
               <td>Indicates that activating the button displays a listbox.</td>
             </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
-              <th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-expanded="true"</code></th>
               <td><code>button</code></td>
               <td>
                 <ul>
@@ -237,13 +250,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             </tr>
             <tr data-test-id="listbox-aria-labelledby">
               <td></td>
-              <th scope="row"><code>aria-labelledby=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REF"</code></th>
               <td><code>ul</code></td>
               <td>Refers to the element containing the listbox label.</td>
             </tr>
             <tr data-test-id="listbox-tabindex">
               <td></td>
-              <th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
+              <th scope="row"><code>tabindex="-1"</code></th>
               <td><code>ul</code></td>
               <td>
                 <ul>
@@ -254,14 +267,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             </tr>
             <tr data-test-id="listbox-aria-activedescendant">
               <td></td>
-              <th scope="row"><code>aria-activedescendant=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-activedescendant="ID_REF"</code></th>
               <td><code>ul</code></td>
               <td>
                 <ul>
-                  <li>Set by the JavaScript when it displays and sets focus on the listbox; otherwise is not present.</li>
-                  <li>Refers to the option in the listbox that is visually indicated as having keyboard focus.</li>
+                  <li>When an option in the listbox is visually indicated as having keyboard focus, refers to that option.</li>
+                  <li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the listbox element.</li>
                   <li>When navigation keys, such as <kbd>Down Arrow</kbd>, are pressed, the JavaScript changes the value.</li>
-                  <li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the <code>ul</code> element.</li>
                   <li>
                     For more information about this focus management technique, see
                     <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">Managing Focus in Composites Using aria-activedescendant</a>.
@@ -277,7 +289,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             </tr>
             <tr data-test-id="option-aria-selected">
               <td></td>
-              <th scope="row"><code>aria-selected=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-selected="true"</code></th>
               <td><code>li</code></td>
               <td>
                 <ul>
@@ -300,7 +312,7 @@ <h2>JavaScript and CSS Source Code</h2>
           </li>
           <li>
             Javascript:
-            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/listbox-collapsible.js" type="text/javascript">listbox-collapsible.js</a>, <a href="../../../shared/js/utils.js">utils.js</a>
+            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/listbox-collapsible.js" type="text/javascript">listbox-collapsible.js</a>
           </li>
         </ul>
       </section>
diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html
index b3525cc6..c838e4a7 100644
--- a/content/patterns/listbox/examples/listbox-grouped.html
+++ b/content/patterns/listbox/examples/listbox-grouped.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Listbox Example with Grouped Options</title>
+    <title>グループ化されたオプションを持つ Listbox の例</title>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -15,7 +15,6 @@
 
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
-    <script src="../../../shared/js/utils.js"></script>
     <script src="js/listbox.js"></script>
     <script src="js/listbox-scrollable.js"></script>
   </head>
@@ -27,127 +26,179 @@
       </ul>
     </nav>
     <main>
-      <h1>Listbox Example with Grouped Options</h1>
+      <h1>グループ化されたオプションを持つ Listbox の例</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7fb7c8e28b55a2804bda682c36945a1154d1096a -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <p>
-          The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a single-select listbox widget with grouped options.
-          This widget is functionally similar to an HTML <code>select</code> element with <code>size</code> greater than 1 and options grouped into categories with labeled <code>optgroup</code> elements.
+          次の例の実装は、グループ化されたオプションを持つ単一選択リストボックスウィジェットの<a href="../listbox-pattern.html">リストボックスパターン</a>を示しています。
+          このウィジェットは、<code>size</code>が1より大きく、<code>optgroup</code>要素でラベル付けされたカテゴリ内にオプションがグループ化されているHTML <code>select</code>要素と機能的に似ています。
         </p>
-        <p>Similar examples include:</p>
+        <p>類似の例には以下があります:</p>
         <ul>
-          <li><a href="listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
-          <li><a href="listbox-rearrangeable.html">Example Listboxes with Rearrangeable Options</a>: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.</li>
+          <li><a href="listbox-scrollable.html">スクロール可能なリストボックス例</a>: より多くのオプションを表示するためにスクロールする単一選択リストボックスで、<code>size</code>属性が1より大きいHTML <code>select</code>と似ています。</li>
+          <li><a href="listbox-rearrangeable.html">並べ替え可能なオプションのリストボックス例</a>: オプションを追加、移動、及び削除できるツールバーを伴う、単一選択及び複数選択のリストボックスの例。</li>
         </ul>
       </section>
 
       <section>
         <div class="example-header">
-          <h2 id="ex_label">Example</h2>
+          <h2 id="ex_label">例</h2>
         </div>
-        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="開始"></div>
         <div id="ex">
           <div class="listbox-area">
             <div>
-              <span id="ss_elem" class="listbox-label">Choose your animal sidekick</span>
+              <span id="ss_elem" class="listbox-label">あなたの動物の相棒を選んでください</span>
               <div id="ss_elem_list" tabindex="0" role="listbox" aria-labelledby="ss_elem">
                 <ul role="group" aria-labelledby="cat1">
-                  <li role="presentation" id="cat1">Land</li>
-                  <li id="ss_elem_1" role="option">Cat</li>
-                  <li id="ss_elem_2" role="option">Dog</li>
-                  <li id="ss_elem_3" role="option">Tiger</li>
-                  <li id="ss_elem_4" role="option">Reindeer</li>
-                  <li id="ss_elem_5" role="option">Raccoon</li>
+                  <li role="presentation" id="cat1">陸</li>
+                  <li id="ss_elem_1" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    猫
+                  </li>
+                  <li id="ss_elem_2" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    犬
+                  </li>
+                  <li id="ss_elem_3" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    虎
+                  </li>
+                  <li id="ss_elem_4" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    トナカイ
+                  </li>
+                  <li id="ss_elem_5" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    アライグマ
+                  </li>
                 </ul>
                 <ul role="group" aria-labelledby="cat2">
-                  <li role="presentation" id="cat2">Water</li>
-                  <li id="ss_elem_6" role="option">Dolphin</li>
-                  <li id="ss_elem_7" role="option">Flounder</li>
-                  <li id="ss_elem_8" role="option">Eel</li>
+                  <li role="presentation" id="cat2">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    水
+                  </li>
+                  <li id="ss_elem_6" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    イルカ
+                  </li>
+                  <li id="ss_elem_7" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    ヒラメ
+                  </li>
+                  <li id="ss_elem_8" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    ウナギ
+                  </li>
                 </ul>
                 <ul role="group" aria-labelledby="cat3">
-                  <li role="presentation" id="cat3">Air</li>
-                  <li id="ss_elem_9" role="option">Falcon</li>
-                  <li id="ss_elem_10" role="option">Winged Horse</li>
-                  <li id="ss_elem_11" role="option">Owl</li>
+                  <li role="presentation" id="cat3">空</li>
+                  <li id="ss_elem_9" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    ハヤブサ
+                  </li>
+                  <li id="ss_elem_10" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    翼のある馬
+                  </li>
+                  <li id="ss_elem_11" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    フクロウ
+                  </li>
                 </ul>
               </div>
             </div>
           </div>
         </div>
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-        <h3>Notes</h3>
-        <p>This listbox is scrollable; it has more options than its height can accommodate.</p>
-        <ol>
-          <li>
-            Scrolling only works as expected if the listbox is the options' <code>offsetParent</code>.
-            The example uses <code>position: relative</code> on the listbox to that effect.
-          </li>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="終了"></div>
+      </section>
+
+
+      <section id="accessibility_features">
+        <h2>アクセシビリティ機能</h2>
+        <ul>
           <li>
-            When an option is focused that isn't (fully) visible, the listbox's scroll position is updated:
-            <ol>
-              <li>If <kbd>Up Arrow</kbd> or <kbd>Down Arrow</kbd> is pressed, the previous or next option is scrolled into view.</li>
-              <li>If <kbd>Home</kbd> or <kbd>End</kbd> is pressed, the listbox scrolls all the way to the top or to the bottom.</li>
-              <li>If <code>focusItem</code> is called, the focused option will be scrolled to the top of the view if it was located above it or to the bottom if it was below it.</li>
-              <li>If the mouse is clicked on a partially visible option, it will be scrolled fully into view.</li>
-            </ol>
+            このリストボックスの実装はスクロール可能であり、<a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendant を使用して</a>どのオプションがフォーカスされているかを管理しているため、JavaScript はフォーカスされているオプションが表示されていることを確認しなければならない。
+            したがって、キーボード又はポインタのイベントが <code>aria-activedescendant</code> で参照されるオプションを変更する場合、参照されるオプションが完全に表示されていない場合、JavaScript はリストボックスをスクロールしてオプションを表示位置にします。
           </li>
-          <li>When a fully visible option is focused in any way, no scrolling occurs.</li>
           <li>
-            Normal scrolling through any scrolling mechanism (including <kbd>Page Up</kbd> and <kbd>Page Down</kbd>) works as expected.
-            The scroll position will jump as described for <code>focusItem</code> if a means other than a mouse click is used to change focus after scrolling.
+            リストボックスの操作時の知覚を高めるために、視覚的なキーボードのフォーカスとホバーは CSS の <code>:hover</code> 及び <code>:focus</code> 擬似クラスを使用してスタイルが適用されています:
+            <ul>
+              <li>視覚的な障害を持つ利用者がリストボックスをインタラクティブな要素として特定するのを助けるため、リストの上にホバーするとカーソルがポインタに変わります。</li>
+              <li>選択されたリストボックスのオプションを他のオプションと区別しやすくするため、選択するとオプションの上下に 2 ピクセルの境界線が作成されます。</li>
+            </ul>
           </li>
-        </ol>
+        </ul>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2 id="kbd_label">キーボードサポート</h2>
         <p>
-          The example listboxes on this page implement the following keyboard interface.
-          Other variations and options for the keyboard interface are described in the <a href="../listbox-pattern.html#keyboard_interaction">Keyboard Interaction section of the Listbox Pattern.</a>
+          このページの例のリストボックスは、以下のキーボードインターフェースを実装しています。
+          キーボードインターフェースの他のバリエーション及びオプションについては、<a href="../listbox-pattern.html#keyboard_interaction">リストボックスのパターンのキーボードインタラクションセクション</a>で説明されています。
+        </p>
+        <p>
+          <strong>注記:</strong> このリストボックスの実装において視覚的なフォーカスがオプションにある場合、DOM のフォーカスはリストボックス要素に留まり、リストボックス上の <code>aria-activedescendant</code> の値は視覚的にフォーカスが示されている子孫オプションを参照しています。
+          以下のキーボードコマンドの説明でフォーカスに言及している場合、それは視覚的なフォーカスインジケータを指しており、DOM のフォーカスを指していません。
+          このフォーカス管理テクニックに関する詳しい情報については、
+          <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendant を使用したコンポジットのフォーカス管理</a>を参照してください。
         </p>
         <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
-              <th>Key</th>
-              <th>Function</th>
+              <th>キー</th>
+              <th>機能</th>
             </tr>
           </thead>
           <tbody>
+            <tr data-test-id="key-tab">
+              <th><kbd>Tab</kbd></th>
+              <td>リストボックス内及び外へのフォーカスを移動する。</td>
+            </tr>
             <tr data-test-id="key-down-arrow">
-              <th><kbd>Down Arrow</kbd></th>
-              <td>Moves focus to and selects the next option.</td>
+              <th><kbd>↓</kbd></th>
+              <td>次のオプションへのフォーカスを移動し、選択する。</td>
             </tr>
             <tr data-test-id="key-up-arrow">
-              <th><kbd>Up Arrow</kbd></th>
-              <td>Moves focus to and selects the previous option.</td>
+              <th><kbd>↑</kbd></th>
+              <td>前のオプションへのフォーカスを移動し、選択する。</td>
             </tr>
             <tr data-test-id="key-home">
               <th><kbd>Home</kbd></th>
-              <td>Moves focus to and selects the first option.</td>
+              <td>最初のオプションへのフォーカスを移動し、選択する。</td>
             </tr>
             <tr data-test-id="key-end">
               <th><kbd>End</kbd></th>
-              <td>Moves focus to and selects the last option.</td>
+              <td>最後のオプションへのフォーカスを移動し、選択する。</td>
+            </tr>
+            <tr data-test-id="key-character">
+              <th>印刷可能な文字</th>
+              <td>
+                <ul>
+                  <li>文字を入力: フォーカスは入力された文字で始まる名前の次の項目へ移動する。</li>
+                  <li>短い時間内に複数の文字を入力: フォーカスは入力された文字列で始まる名前の次の項目へ移動する。</li>
+                </ul>
+              </td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
         <p>
-          The example listboxes on this page implement the following ARIA roles, states, and properties.
-          Information about other ways of applying ARIA roles, states, and properties is available in the <a href="../listbox-pattern.html#roles_states_properties">Roles, States, and Properties section of the Listbox Pattern</a>.
+          このページの例示されたリストボックスは、次のARIAのロール、ステート、及びプロパティを実装しています。
+          ARIAのロール、ステート、及びプロパティの他の適用方法については、<a href="../listbox-pattern.html#roles_states_properties">リストボックスパターンのロール、ステート、及びプロパティのセクション</a>で利用可能です。
         </p>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
-              <th scope="col">Role</th>
-              <th scope="col">Attribute</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
+              <th scope="col">ロール</th>
+              <th scope="col">属性</th>
+              <th scope="col">要素</th>
+              <th scope="col">使用法</th>
             </tr>
           </thead>
           <tbody>
@@ -155,29 +206,34 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <th scope="row"><code>listbox</code></th>
               <td></td>
               <td><code>div</code></td>
-              <td>Identifies the focusable element that has listbox behaviors and contains the listbox options.</td>
+              <td>リストボックスの動作を持ち、リストボックスのオプションを含むフォーカス可能な要素を特定する。</td>
             </tr>
             <tr data-test-id="listbox-aria-labelledby">
               <td></td>
-              <th scope="row"><code>aria-labelledby=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REF"</code></th>
               <td><code>div</code></td>
-              <td>Refers to the element containing the listbox label.</td>
+              <td>リストボックスのラベルを含む要素を参照する。</td>
             </tr>
             <tr data-test-id="listbox-tabindex">
               <td></td>
-              <th scope="row"><code>tabindex=&quot;0&quot;</code></th>
+              <th scope="row"><code>tabindex="0"</code></th>
               <td><code>div</code></td>
-              <td>Includes the listbox in the page tab sequence.</td>
+              <td>ページのタブ順序にリストボックスを含める。</td>
             </tr>
             <tr data-test-id="listbox-aria-activedescendant">
               <td></td>
-              <th scope="row"><code>aria-activedescendant=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-activedescendant="ID_REF"</code></th>
               <td><code>div</code></td>
               <td>
                 <ul>
-                  <li>Tells assistive technologies which of the options, if any, is visually indicated as having keyboard focus.</li>
-                  <li>DOM focus remains on the <code>ul</code> element and the idref specified for <code>aria-activedescendant</code> refers to the <code>li</code> element that is visually styled as focused.</li>
-                  <li>When navigation keys, such as <kbd>Down Arrow</kbd>, are pressed, the JavaScript changes the value.</li>
+                  <li>リストボックス内のオプションがキーボードフォーカスを持つと視覚的に示されている場合、そのオプションを指す。</li>
+                  <li>DOMのフォーカスがリストボックス要素に留まる間、アプリケーションがフォーカスしているとみなす要素を支援技術が知ることを可能にする。</li>
+                  <li>例えば<kbd>下矢印</kbd>のようなナビゲーションキーが押されると、JavaScriptが値を変更する。</li>
+                  <li>
+                    このフォーカス管理テクニックに関する詳細は、
+                    <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendantを使用したコンポジットのフォーカス管理</a>
+                    を参照してください。
+                  </li>
                 </ul>
               </td>
             </tr>
@@ -185,38 +241,46 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <th scope="row"><code>group</code></th>
               <td></td>
               <td><code>ul</code></td>
-              <td>Identifies a group of related options</td>
+              <td>関連するオプションのグループを特定する</td>
             </tr>
             <tr data-test-id="group-aria-labelledby">
               <td></td>
-              <th scope="row"><code>aria-labelledby=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REF"</code></th>
               <td><code>ul</code></td>
-              <td>Refers to the element containing the option group label.</td>
+              <td>オプショングループのラベルを含む要素を指す。</td>
             </tr>
             <tr data-test-id="option-role">
               <th scope="row"><code>option</code></th>
               <td></td>
               <td><code>li</code></td>
-              <td>Identifies each selectable element containing the name of an option.</td>
+              <td>オプションの名前を含む選択可能な要素を特定する。</td>
             </tr>
             <tr data-test-id="option-aria-selected">
               <td></td>
-              <th scope="row"><code>aria-selected=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-selected="true"</code></th>
               <td><code>li</code></td>
               <td>
                 <ul>
-                  <li>Indicates that the option is selected.</li>
-                  <li>Applied to the element with role option that is visually styled as selected.</li>
-                  <li>The option with this attribute is always the same as the option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus.</li>
+                  <li>オプションが選択されていることを示す。</li>
+                  <li>選択として視覚的にスタイルが適用されたロール option の要素に適用される。</li>
+                  <li>この属性を持つオプションは、選択がフォーカスに従う単一選択リストボックスであるため、常に aria-activedescendant で参照されるオプションと同じである。</li>
                 </ul>
               </td>
             </tr>
+            <tr data-test-id="span-aria-hidden">
+              <td></td>
+              <th><code>aria-hidden="true"</code></th>
+              <td><code>span</code></td>
+              <td>
+                チェックマークのアイコン用に使用されるキャラクターエンティティをアクセシビリティツリーから削除し、オプションのアクセシブルな名前に含まれるのを防ぐ。
+              </td>
+            </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
+        <h2>JavaScript 及び CSS ソースコード</h2>
         <ul id="css_js_files">
           <li>
             CSS:
@@ -224,16 +288,16 @@ <h2>JavaScript and CSS Source Code</h2>
           </li>
           <li>
             Javascript:
-            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/listbox-scrollable.js" type="text/javascript">listbox-scrollable.js</a>, <a href="../../../shared/js/utils.js">utils.js</a>
+            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/listbox-scrollable.js" type="text/javascript">listbox-scrollable.js</a>
           </li>
         </ul>
       </section>
 
       <section>
-        <h2 id="sc_label">HTML Source Code</h2>
-        <div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="Start of "></div>
+        <h2 id="sc_label">HTML ソースコード</h2>
+        <div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="開始"></div>
         <pre><code id="sc1"></code></pre>
-        <div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="End of"></div>
+        <div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="終了"></div>
         <script>
           sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files');
           sourceCode.make();
diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html
index 5367d021..83d024cb 100644
--- a/content/patterns/listbox/examples/listbox-rearrangeable.html
+++ b/content/patterns/listbox/examples/listbox-rearrangeable.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Example Listboxes with Rearrangeable Options</title>
+    <title>並べ替え可能なオプションを持つ例のListboxes</title>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -15,7 +15,6 @@
 
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
-    <script src="../../../shared/js/utils.js"></script>
     <script src="js/listbox.js"></script>
     <script src="js/toolbar.js"></script>
     <script src="js/listbox-rearrangeable.js"></script>
@@ -28,215 +27,313 @@
       </ul>
     </nav>
     <main>
-      <h1>Example Listboxes with Rearrangeable Options</h1>
+      <h1>並べ替え可能なオプションを持つ例のListboxes</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7fb7c8e28b55a2804bda682c36945a1154d1096a -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <p>
-          The following two example implementations of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrate differences between single-select and multi-select functionality.
-          In both examples, users can use action buttons to move options from one list to another.
-          In the first implementation, users can choose a single option and then activate an action button while in the second example, they may select multiple options before activating an action button.
+          次の2つの例の実装は、<a href="../listbox-pattern.html">リストボックスのパターン</a>における単一選択と複数選択の機能の違いを示しています。
+          両方の例で、利用者はアクションボタンを使用して、一つのリストから別のリストにオプションを移動することができます。
+          最初の実装では、利用者は単一のオプションを選択し、アクションボタンを作動することができますが、2つ目の例では、アクションボタンを作動する前に複数のオプションを選択することができます。
         </p>
-        <p>Similar examples include:</p>
+        <p>似たような例には以下があります:</p>
         <ul>
-          <li><a href="listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
-          <li><a href="listbox-grouped.html">Listbox Example with Grouped Options</a>: Single-select listbox with grouped options, similar to an HTML <code>select</code> with <code>optgroup</code> children.</li>
+          <li><a href="listbox-scrollable.html">スクロール可能なリストボックスの例</a> : もっと多くのオプションを明らかにするためにスクロールする単一選択リストボックス、HTML の <code>select</code> に <code>size</code> 属性が一つ以上の場合と似ています。</li>
+          <li><a href="listbox-grouped.html">グループ化されたオプションを持つリストボックスの例</a> : グループ化されたオプションを持つ単一選択リストボックス、HTML の <code>select</code> が <code>optgroup</code> 子供としている場合と似ています。</li>
         </ul>
       </section>
 
       <section>
-        <h2>Examples</h2>
+        <h2>例</h2>
         <section>
           <div class="example-header">
-            <h3 id="ex1_label">Example 1: Single-Select Listbox</h3>
+            <h3 id="ex1_label">例 1: シングルセレクト リストボックス</h3>
           </div>
-          <div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
+          <div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="開始"></div>
           <div id="ex1">
             <p>
-              Rank features important to you when choosing where to live.
-              If a feature is unimportant, move it to the unimportant features list.
+              住む場所を選ぶ際に重要と思う特徴をランク付けしてください。
+              特徴が重要でない場合は、重要でない特徴のリストに移動してください。
             </p>
             <div class="listbox-area">
               <div class="left-area">
-                <span id="ss_imp_l" class="listbox-label">Important Features:</span>
-                <ul id="ss_imp_list" tabindex="0" role="listbox" aria-labelledby="ss_imp_l">
-                  <li id="ss_opt1" role="option">Proximity of public K-12 schools</li>
-                  <li id="ss_opt2" role="option">Proximity of child-friendly parks</li>
-                  <li id="ss_opt3" role="option">Proximity of grocery shopping</li>
-                  <li id="ss_opt4" role="option">Proximity of fast food</li>
-                  <li id="ss_opt5" role="option">Proximity of fine dining</li>
-                  <li id="ss_opt6" role="option">Neighborhood walkability</li>
-                  <li id="ss_opt7" role="option">Availability of public transit</li>
-                  <li id="ss_opt8" role="option">Proximity of hospital and medical services</li>
-                  <li id="ss_opt9" role="option">Level of traffic noise</li>
-                  <li id="ss_opt10" role="option">Access to major highways</li>
+                <span id="ss_imp_l" class="listbox-label">重要な特徴:</span>
+                <ul id="ss_imp_list"
+                    tabindex="0"
+                    role="listbox"
+                    aria-labelledby="ss_imp_l">
+                  <li id="ss_opt1" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    公立のK-12学校の近さ
+                  </li>
+                  <li id="ss_opt2" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    子供に優しい公園の近さ
+                  </li>
+                  <li id="ss_opt3" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    グロサリーショッピングの近さ
+                  </li>
+                  <li id="ss_opt4" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    ファストフードの近さ
+                  </li>
+                  <li id="ss_opt5" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    ファインダイニングの近さ
+                  </li>
+                  <li id="ss_opt6" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    近所の歩行可能性
+                  </li>
+                  <li id="ss_opt7" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    公共交通機関の利用可能性
+                  </li>
+                  <li id="ss_opt8" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    病院及び医療サービスの近さ
+                  </li>
+                  <li id="ss_opt9" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    交通の騒音レベル
+                  </li>
+                  <li id="ss_opt10" role="option">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    主要な高速道路へのアクセス
+                  </li>
                 </ul>
-                <div role="toolbar" aria-label="Actions" class="toolbar">
-                  <button type="button" id="ex1-up" class="toolbar-item selected" aria-keyshortcuts="Alt+ArrowUp" aria-disabled="true">Up</button>
-                  <button type="button" id="ex1-down" class="toolbar-item" tabindex="-1" aria-keyshortcuts="Alt+ArrowDown" aria-disabled="true">Down</button>
-                  <button type="button" id="ex1-delete" class="toolbar-item move-right-btn" tabindex="-1" aria-keyshortcuts="Alt+ArrowRight Delete" aria-disabled="true">Not Important</button>
+                <div role="toolbar" aria-label="操作" class="toolbar">
+                  <button type="button"
+                          id="ex1-up"
+                          class="toolbar-item selected"
+                          aria-keyshortcuts="Alt+ArrowUp"
+                          aria-disabled="true">
+                    上
+                  </button>
+                  <button type="button"
+                          id="ex1-down"
+                          class="toolbar-item"
+                          tabindex="-1"
+                          aria-keyshortcuts="Alt+ArrowDown"
+                          aria-disabled="true">
+                    下
+                  </button>
+                  <button type="button"
+                          id="ex1-delete"
+                          class="toolbar-item move-right-btn"
+                          tabindex="-1"
+                          aria-keyshortcuts="Alt+ArrowRight Delete"
+                          aria-disabled="true">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    重要ではない
+                  </button>
                 </div>
               </div>
               <div class="right-area">
-                <span id="ss_unimp_l" class="listbox-label">Unimportant Features:</span>
-                <ul id="ss_unimp_list" tabindex="0" role="listbox" aria-labelledby="ss_unimp_l" aria-activedescendant=""></ul>
-                <button type="button" id="ex1-add" class="move-left-btn" aria-keyshortcuts="Alt+ArrowLeft Enter" aria-disabled="true">Important</button>
+                <span id="ss_unimp_l" class="listbox-label">重要でない機能:</span>
+                <ul id="ss_unimp_list"
+                    tabindex="0"
+                    role="listbox"
+                    aria-labelledby="ss_unimp_l"
+                    aria-activedescendant=""></ul>
+                <button type="button"
+                        id="ex1-add"
+                        class="move-left-btn"
+                        aria-keyshortcuts="Alt+ArrowLeft Enter"
+                        aria-disabled="true">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  重要
+                </button>
               </div>
-              <div class="offscreen">Last change: <span aria-live="polite" id="ss_live_region"></span></div>
+              <div class="offscreen">最後の変更: <span aria-live="polite" id="ss_live_region"></span></div>
             </div>
           </div>
-          <div role="separator" id="ex1_end_sep" aria-labelledby="ex1_end_sep ex1_label" aria-label="End of"></div>
-          <h3>Notes</h3>
-          <ol>
-            <li>
-              Assistive technologies are told which option in the list is visually focused by the value of <code>aria-activedescendant</code>:
-              <ol>
-                <li>DOM focus remains on the <code>listbox</code> element.</li>
-                <li>When a key that moves focus is pressed or an option is clicked, JavaScript changes the value of <code>aria-activedescendant</code> on the <code>listbox</code> element.</li>
-                <li>If the <code>listbox</code> element does not contain any options, <code>aria-activedescendant</code> does not have a value.</li>
-              </ol>
-            </li>
-            <li>
-              When <kbd>Tab</kbd> moves focus into either listbox:
-              <ol>
-                <li>If none of the options are selected, the first option receives focus.</li>
-                <li>If an option is selected, the selected option receives focus.</li>
-              </ol>
-            </li>
-            <li>Only one option may be selected at a time (have <code>aria-selected=&quot;true&quot;</code>).</li>
-            <li>
-              As the user moves focus in the list, selection also moves.
-              That is, both the value of <code>aria-activedescendant</code> and the element that has <code>aria-selected=&quot;true&quot;</code> change.
-            </li>
-          </ol>
+          <div role="separator" id="ex1_end_sep" aria-labelledby="ex1_end_sep ex1_label" aria-label="終了"></div>
         </section>
 
         <section>
           <div class="example-header">
-            <h3 id="ex2_label">Example 2: Multi-Select Listbox</h3>
+            <h3 id="ex2_label">例 2: 複数選択リストボックス</h3>
           </div>
-          <div role="separator" id="ex2_start_sep" aria-labelledby="ex2_start_sep ex2_label" aria-label="Start of"></div>
+          <div role="separator" id="ex2_start_sep" aria-labelledby="ex2_start_sep ex2_label" aria-label="開始"></div>
           <div id="ex2">
-            <p>Choose upgrades for your transport capsule.</p>
+            <p>あなたのトランスポートカプセルのアップグレードを選んでください。</p>
             <div class="listbox-area">
               <div class="left-area">
-                <span id="ms_av_l" class="listbox-label">Available upgrades:</span>
-                <ul id="ms_imp_list" tabindex="0" role="listbox" aria-labelledby="ms_av_l" aria-multiselectable="true">
-                  <li id="ms_opt1" role="option" aria-selected="false">Leather seats</li>
-                  <li id="ms_opt2" role="option" aria-selected="false">Front seat warmers</li>
-                  <li id="ms_opt3" role="option" aria-selected="false">Rear bucket seats</li>
-                  <li id="ms_opt4" role="option" aria-selected="false">Rear seat warmers</li>
-                  <li id="ms_opt5" role="option" aria-selected="false">Front sun roof</li>
-                  <li id="ms_opt6" role="option" aria-selected="false">Rear sun roof</li>
-                  <li id="ms_opt7" role="option" aria-selected="false">Cloaking capability</li>
-                  <li id="ms_opt8" role="option" aria-selected="false">Food synthesizer</li>
-                  <li id="ms_opt9" role="option" aria-selected="false">Advanced waste recycling system</li>
-                  <li id="ms_opt10" role="option" aria-selected="false">Turbo vertical take-off capability</li>
+                <span id="ms_av_l" class="listbox-label">利用可能なアップグレード:</span>
+                <ul id="ms_imp_list"
+                    tabindex="0"
+                    role="listbox"
+                    aria-labelledby="ms_av_l"
+                    aria-multiselectable="true">
+                  <li id="ms_opt1" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    レザーシート
+                  </li>
+                  <li id="ms_opt2" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    フロントシートヒーター
+                  </li>
+                  <li id="ms_opt3" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    リアバケットシート
+                  </li>
+                  <li id="ms_opt4" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    リアシートヒーター
+                  </li>
+                  <li id="ms_opt5" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    フロントサンルーフ
+                  </li>
+                  <li id="ms_opt6" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    リア サンルーフ
+                  </li>
+                  <li id="ms_opt7" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    クローキング 機能
+                  </li>
+                  <li id="ms_opt8" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    フード シンセサイザー
+                  </li>
+                  <li id="ms_opt9" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    アドバンス廃棄物リサイクル システム
+                  </li>
+                  <li id="ms_opt10" role="option" aria-selected="false">
+                    <span class="checkmark" aria-hidden="true"></span>
+                    ターボ垂直離陸 機能
+                  </li>
                 </ul>
-                <button type="button" id="ex2-add" class="move-right-btn" aria-keyshortcuts="Alt+ArrowRight Enter" aria-disabled="true">Add</button>
+                <button type="button"
+                        id="ex2-add"
+                        class="move-right-btn"
+                        aria-keyshortcuts="Alt+ArrowRight Enter"
+                        aria-disabled="true">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  追加
+                </button>
               </div>
               <div class="right-area">
-                <span id="ms_ch_l" class="listbox-label">Upgrades you have chosen:</span>
-                <ul id="ms_unimp_list" tabindex="0" role="listbox" aria-labelledby="ms_ch_l" aria-activedescendant="" aria-multiselectable="true"></ul>
-                <button type="button" id="ex2-delete" class="move-left-btn" aria-keyshortcuts="Alt+ArrowLeft Delete" aria-disabled="true">Remove</button>
+                <span id="ms_ch_l" class="listbox-label">選択したアップグレード：</span>
+                <ul id="ms_unimp_list"
+                    tabindex="0"
+                    role="listbox"
+                    aria-labelledby="ms_ch_l"
+                    aria-activedescendant=""
+                    aria-multiselectable="true">
+                </ul>
+                <button type="button"
+                        id="ex2-delete"
+                        class="move-left-btn"
+                        aria-keyshortcuts="Alt+ArrowLeft Delete"
+                        aria-disabled="true">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  削除
+                </button>
               </div>
-              <div class="offscreen">Last change: <span aria-live="polite" id="ms_live_region"></span></div>
+              <div class="offscreen">最後の変更: <span aria-live="polite" id="ms_live_region"></span></div>
             </div>
           </div>
-          <div role="separator" id="ex2_end_sep" aria-labelledby="ex2_end_sep ex2_label" aria-label="End of"></div>
-          <h3>Notes</h3>
-          <ol>
-            <li>
-              Like in example 1, assistive technologies are told which option in the list is visually focused by the value of <code>aria-activedescendant</code>:
-              <ol>
-                <li>DOM focus remains on the <code>listbox</code> element.</li>
-                <li>When a key that moves focus is pressed or an option is clicked, JavaScript changes the value of <code>aria-activedescendant</code> on the <code>listbox</code> element.</li>
-                <li>If the <code>listbox</code> element does not contain any options, <code>aria-activedescendant</code> does not have a value.</li>
-              </ol>
-            </li>
-            <li>
-              When <kbd>Tab</kbd> moves focus into either listbox:
-              <ol>
-                <li>If none of the options are selected, focus is set on the first option.</li>
-                <li>If one or more options are selected, focus is set on the first selected option.</li>
-              </ol>
-            </li>
-            <li>
-              Unlike example 1, more than one option may be selected at a time (have <code>aria-selected=&quot;true&quot;</code>).
-              <ol>
-                <li>The multi-select capability is communicated to assistive technologies by setting <code>aria-multiselectable=&quot;true&quot;</code> on the <code>listbox</code> element.</li>
-                <li>All option elements have a value set for <code>aria-selected</code>.</li>
-                <li>Selected options have <code>aria-selected</code> set to <code>true</code> and all others have it set to <code>false</code>.</li>
-                <li>Keys that move focus do not change the selected state of an option.</li>
-              </ol>
-            </li>
-            <li>Users can toggle the selected state of the focused option with <kbd>Space</kbd> or click.</li>
-          </ol>
+          <div role="separator" id="ex2_end_sep" aria-labelledby="ex2_end_sep ex2_label" aria-label="終了"></div>
         </section>
       </section>
 
       <section>
-        <h2>Accessibility Features</h2>
-        <ol>
+        <h2>アクセシビリティ機能</h2>
+        <ul>
           <li>
-            Keyboard shortcuts for action buttons:
-            <ol>
+            アクションボタンのキーボードショートカット:
+            <ul>
               <li>
-                Action buttons have the following shortcuts:
+                アクションボタンは以下のショートカットを持っています:
                 <ul>
-                  <li>&quot;Up&quot;: <kbd>Alt + Up Arrow</kbd></li>
-                  <li>&quot;Down&quot;: <kbd>Alt + Down Arrow</kbd></li>
-                  <li>&quot;Add&quot;: <kbd>Enter</kbd></li>
-                  <li>&quot;Not Important&quot;, &quot;Important&quot;, and &quot;Remove&quot;: <kbd>Delete</kbd></li>
+                  <li>"上": <kbd>Alt + 上矢印</kbd></li>
+                  <li>"下": <kbd>Alt + 下矢印</kbd></li>
+                  <li>"追加": <kbd>Enter</kbd></li>
+                  <li>"重要ではない"、"重要" 及び "削除": <kbd>Delete</kbd></li>
                 </ul>
               </li>
-              <li>Availability of the shortcuts is communicated to assistive technologies via the <code>aria-keyshortcuts</code> property on the button elements.</li>
+              <li>ショートカットの利用可能性は、ボタン要素の <code>aria-keyshortcuts</code> プロパティを通じて支援技術に伝えられます。</li>
               <li>
-                Each shortcut is only captured when focus is in a context where it is relevant.
-                For example, <kbd>Enter</kbd> performs an add only when focus is in the available options list, and <kbd>Delete</kbd> performs a remove only when focus is in the chosen options list.
+                各ショートカットは、関連するコンテキストでフォーカスがある場合のみキャプチャされます。
+                例えば、利用可能なオプションのリストでフォーカスがある場合、<kbd>Enter</kbd> は追加を実行し、選択したオプションのリストでフォーカスがある場合、<kbd>Delete</kbd> は削除を実行します。
               </li>
               <li>
-                Using a shortcut key intentionally places focus to optimize both screen reader and keyboard usability.
-                For example, pressing <kbd>Alt + Up Arrow</kbd> in the &quot;Important Features&quot; list keeps focus on the option that is moved up, enabling all keyboard users to easily perform consecutive move operations for an option and screen reader users to hear the position of an option after it is moved.
-                Similarly, pressing <kbd>Enter</kbd> in the available options list leaves focus in the available options list.
-                If the option that had focus before the add operation is no longer present in the list, focus lands on the first of the subsequent options that is still present.
+                ショートカットキーを意図的に使用すると、スクリーンリーダー及びキーボードの利用性を最適化するためにフォーカスが配置されます。
+                例えば、"重要な機能"のリストで <kbd>Alt + 上矢印</kbd> を押すと、移動されるオプションにフォーカスが維持され、すべてのキーボード利用者がオプションの連続した移動操作を簡単に実行でき、スクリーンリーダー利用者が移動後のオプションの位置を聞くことができます。
+                同様に、利用可能なオプションのリストで <kbd>Enter</kbd> を押すと、利用可能なオプションのリストにフォーカスが残ります。
+                追加操作前のフォーカスがあったオプションがリストに存在しない場合、フォーカスはまだ存在する次のオプションの最初に着地します。
               </li>
-            </ol>
+            </ul>
+          </li>
+          <li>例 1 では、アクションボタンが 4つあるため、ツールバーウィジェットが使用され、すべてのアクションボタンを1つのタブストップにグループ化します。</li>
+          <li>ライブ領域は、完了したアクションの確認を提供します。</li>
+          <li>
+            このリストボックスの実装はスクロール可能であり、<a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendantを使用して</a>どのオプションにフォーカスがあるかを管理しているため、JavaScriptはフォーカスされているオプションが表示されることを確認する必要があります。
+            したがって、キーボード又はポインタイベントが <code>aria-activedescendant</code> によって参照されるオプションを変更する場合、参照されるオプションが完全に表示されていない場合、JavaScriptはリストボックスをスクロールしてオプションを表示位置に配置します。
           </li>
-          <li>In example 1, since there are four action buttons, a toolbar widget is used to group all the action buttons into a single tab stop.</li>
-          <li>Live regions provide confirmation of completed actions.</li>
-        </ol>
+          <li>
+            リストボックスを操作する際の知覚性を向上させるため、視覚的なキーボードフォーカス及びホバーはCSSの <code>:hover</code> 及び <code>:focus</code> 疑似クラスを使用してスタイル付けされています:
+            <ul>
+              <li>視覚障害のある人々がリストボックスをインタラクティブな要素として特定するのを助けるため、リストにホバーするとカーソルがポインタに変わります。</li>
+              <li>選択されたリストボックスのオプションを他のオプションと区別しやすくするため、選択はオプションの上及び下に 2 ピクセルのボーダーを作成します。</li>
+            </ul>
+          </li>
+        </ul>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2 id="kbd_label">キーボードサポート</h2>
         <p>
-          The example listboxes on this page implement the following keyboard interface.
-          Other variations and options for the keyboard interface are described in the <a href="../listbox-pattern.html#keyboard_interaction">Keyboard Interaction section of the Listbox Pattern</a>.
+          このページの例のリストボックスは、以下のキーボードインターフェースを実装しています。
+          キーボードインターフェースのその他のバリエーション及びオプションは、<a href="../listbox-pattern.html#keyboard_interaction">リストボックスパターンのキーボードインタラクションセクション</a>で説明されています。
+        </p>
+        <p>
+          <strong>注記:</strong> これらのリストボックスの実装において視覚的なフォーカスがオプションにある場合、DOMフォーカスはリストボックス要素に留まり、リストボックスの<code>aria-activedescendant</code>の値は視覚的にフォーカスされていると指示されている子孫オプションを指します。
+          キーボードコマンドの以下の説明でフォーカスについて言及している場合、DOMフォーカスではなく視覚的なフォーカスインジケータを指しています。
+          このフォーカス管理テクニックに関する詳細は、
+          <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendantを使用したコンポジットのフォーカス管理</a>を参照してください。
         </p>
         <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
-              <th>Key</th>
-              <th>Function</th>
+              <th>キー</th>
+              <th>機能</th>
             </tr>
           </thead>
           <tbody>
+            <tr data-test-id="key-tab">
+              <th><kbd>Tab</kbd></th>
+              <td>
+                <ul>
+                  <li>リストボックス内へ及びリストボックスからのフォーカスを移動します。</li>
+                  <li>
+                    リストボックスがフォーカスを受け取ると、オプションが選択されていない場合は、最初のオプションがフォーカスを受け取ります。
+                    それ以外の場合は、最初に選択されたオプションがフォーカスを受け取ります。
+                  </li>
+                </ul>
+              </td>
+            </tr>
             <tr data-test-id="key-down-arrow">
               <th><kbd>Down Arrow</kbd></th>
               <td>
-              <ul>
-                <li>Moves focus to the next option.</li>
-                <li>In the example 1 single-select listboxes, also selects the focused option.</li>
-              </ul>
+                <ul>
+                  <li>次のオプションにフォーカスを移動する。</li>
+                  <li>例の 1 つの単一選択リストボックスでは、フォーカスされているオプションも選択する。</li>
+                </ul>
               </td>
             </tr>
             <tr data-test-id="key-up-arrow">
               <th><kbd>Up Arrow</kbd></th>
               <td>
                 <ul>
-                  <li>Moves focus to the previous option.</li>
-                  <li>In the example 1 single-select listboxes, also selects the focused option.</li>
+                  <li>前のオプションにフォーカスを移動する。</li>
+                  <li>例の 1 つの単一選択リストボックスでは、フォーカスされているオプションも選択する。</li>
                 </ul>
               </td>
             </tr>
@@ -244,8 +341,8 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <th><kbd>Home</kbd></th>
               <td>
                 <ul>
-                  <li>Moves focus to the first option.</li>
-                  <li>In the example 1 single-select listboxes, also selects the focused option.</li>
+                  <li>最初のオプションにフォーカスを移動する。</li>
+                  <li>例の 1 つの単一選択リストボックスでは、フォーカスされているオプションも選択する。</li>
                 </ul>
               </td>
             </tr>
@@ -253,56 +350,64 @@ <h2 id="kbd_label">Keyboard Support</h2>
               <th><kbd>End</kbd></th>
               <td>
                 <ul>
-                  <li>Moves focus to the last option.</li>
-                  <li>In the example 1 single-select listboxes, also selects the focused option.</li>
+                  <li>最後のオプションにフォーカスを移動する。</li>
+                  <li>例の 1 つの単一選択リストボックスでは、フォーカスされているオプションも選択する。</li>
+                </ul>
+              </td>
+            </tr>
+            <tr data-test-id="key-character">
+              <th>印刷可能な文字</th>
+              <td>
+                <ul>
+                  <li>文字を入力する: 入力した文字で始まる名前の次の項目にフォーカスが移動する。</li>
+                  <li>短時間のうちに複数の文字を入力する: 入力された文字列で始まる名前の次の項目にフォーカスが移動する。</li>
                 </ul>
               </td>
             </tr>
           </tbody>
         </table>
-        <h3 id="kbd_label_multiselect">Multiple selection keys supported in example 2</h3>
-        <div class="note">
-          <h4>Note</h4>
-          <p>The selection behavior demonstrated differs from the behavior provided by browsers for native HTML <code>&lt;select multiple&gt;</code> elements.
-          The HTML select element behavior is to alter selection with unmodified up/down arrow keys, requiring the use of modifier keys to select multiple options.
-          This example demonstrates the multiple selection interaction model recommended in the <a href="../listbox-pattern.html#keyboard_interaction">Keyboard Interaction section of the Listbox Pattern</a>, which does not require the use of modifier keys.</p>
-        </div>
+        <h3 id="kbd_label_multiselect">例2でサポートされる複数選択キー</h3>
+        <p>
+          <strong>注記:</strong> 示されている選択動作は、ネイティブHTMLの <code>&lt;select multiple&gt;</code> 要素のブラウザによる動作とは異なります。
+          HTML select 要素の動作は、変更キーなしの上/下の矢印キーで選択を変更し、複数のオプションを選択するために変更キーの使用が必要です。
+          この例は、変更キーの使用を必要としない<a href="../listbox-pattern.html#keyboard_interaction">リストボックスパターンのキーボードインタラクションセクション</a>で推奨される複数選択インタラクションモデルを示しています。
+        </p>
         <table aria-labelledby="kbd_label_multiselect" class="def">
           <thead>
             <tr>
-              <th>Key</th>
-              <th>Function</th>
+              <th>キー</th>
+              <th>機能</th>
             </tr>
           </thead>
           <tbody>
             <tr data-test-id="key-space">
-              <th><kbd>Space</kbd></th>
-              <td>changes the selection state of the focused option .</td>
+              <th><kbd>スペース</kbd></th>
+              <td>フォーカスされているオプションの選択ステートを変更します。</td>
             </tr>
             <tr data-test-id="key-shift-down-arrow">
-              <th><kbd>Shift + Down Arrow</kbd></th>
-              <td>Moves focus to and selects the next option.</td>
+              <th><kbd>Shift + 下矢印</kbd></th>
+              <td>フォーカスを移動し、次のオプションを選択します。</td>
             </tr>
             <tr data-test-id="key-shift-up-arrow">
-              <th><kbd>Shift + Up Arrow</kbd></th>
-              <td>Moves focus to and selects the previous option.</td>
+              <th><kbd>Shift + 上矢印</kbd></th>
+              <td>フォーカスを移動し、前のオプションを選択します。</td>
             </tr>
             <tr data-test-id="key-control-shift-home">
               <th><kbd>Control + Shift + Home</kbd></th>
-              <td>Selects from the focused option to the beginning of the list.</td>
+              <td>フォーカスされているオプションからリストの先頭までを選択します。</td>
             </tr>
             <tr data-test-id="key-control-shift-end">
               <th><kbd>Control + Shift + End</kbd></th>
-              <td>Selects from the focused option to the end of the list.</td>
+              <td>フォーカスされているオプションからリストの最後までを選択します。</td>
             </tr>
             <tr data-test-id="key-control-a">
               <th>
-                <kbd>Control + A</kbd> (All Platforms)<br>
+                <kbd>Control + A</kbd> (全プラットフォーム)<br>
                 <kbd>Command-A</kbd> (macOS)
               </th>
               <td>
-                Selects all options in the list.
-                If all options are selected, unselects all options.
+                リスト内のすべてのオプションを選択します。
+                すべてのオプションが選択されている場合、すべてのオプションの選択を解除します。
               </td>
             </tr>
           </tbody>
@@ -310,18 +415,18 @@ <h4>Note</h4>
       </section>
 
       <section>
-        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート及び tabindex 属性</h2>
         <p>
-          The example listboxes on this page implement the following ARIA roles, states, and properties.
-          Information about other ways of applying ARIA roles, states, and properties is available in the <a href="../listbox-pattern.html#roles_states_properties">Roles, States, and Properties section of the Listbox Pattern</a>.
+          このページの例示リストボックスは、次のARIA ロール、ステート、及びプロパティを実装しています。
+          ARIA ロール、ステート、及びプロパティの他の適用方法に関する情報は、<a href="../listbox-pattern.html#roles_states_properties">リストボックスパターンのロール、ステート、及びプロパティセクション</a>で利用可能です。
         </p>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
-              <th scope="col">Role</th>
-              <th scope="col">Attribute</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
+              <th scope="col">ロール</th>
+              <th scope="col">属性</th>
+              <th scope="col">要素</th>
+              <th scope="col">使用法</th>
             </tr>
           </thead>
           <tbody>
@@ -329,42 +434,43 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <th scope="row"><code>listbox</code></th>
               <td></td>
               <td><code>ul</code></td>
-              <td>Identifies the focusable element that has listbox behaviors and contains the listbox options.</td>
+              <td>リストボックスの動作を持ち、リストボックスのオプションを含むフォーカス可能な要素を特定する。</td>
             </tr>
             <tr data-test-id="listbox-aria-labelledby">
               <td></td>
-              <th scope="row"><code>aria-labelledby=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REF"</code></th>
               <td><code>ul</code></td>
-              <td>Applied to the element with the listbox role, it refers to the span containing its label.</td>
+              <td>リストボックス ロールを持つ要素に適用され、そのラベルを含むスパンを参照します。</td>
             </tr>
             <tr data-test-id="listbox-tabindex">
               <td></td>
-              <th scope="row"><code>tabindex=&quot;0&quot;</code></th>
+              <th scope="row"><code>tabindex="0"</code></th>
               <td><code>ul</code></td>
-              <td>Applied to the element with the listbox role, it puts the listbox in the tab sequence.</td>
+              <td>リストボックス ロールを持つ要素に適用され、タブ シーケンスにリストボックスを置きます。</td>
             </tr>
             <tr data-test-id="listbox-aria-multiselectable">
               <td></td>
-              <th scope="row"><code>aria-multiselectable=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-multiselectable="true"</code></th>
               <td><code>ul</code></td>
               <td>
                 <ul>
-                  <li><strong>Used only in example 2.</strong></li>
-                  <li>Applied to the element with the listbox role, tells assistive technologies that the list supports multiple selection.</li>
-                  <li>The default value is false so it is not specified in example 1.</li>
+                  <li><strong>例 2 でのみ使用。</strong></li>
+                  <li>リストボックス ロールを持つ要素に適用され、リストが複数選択をサポートしていることを支援技術に伝える。</li>
+                  <li>デフォルトの値は false なので、例 1 では指定されていません。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="listbox-aria-activedescendant">
               <td></td>
-              <th scope="row"><code>aria-activedescendant=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-activedescendant="ID_REF"</code></th>
               <td><code>ul</code></td>
               <td>
                 <ul>
-                  <li>Applied to the element with the listbox role, tells assistive technologies which of the options, if any, is visually indicated as having keyboard focus.</li>
-                  <li>DOM focus remains on the <code>ul</code> element and the idref specified for <code>aria-activedescendant</code> refers to the <code>li</code> element that is visually styled as focused.</li>
-                  <li>When navigation keys, such as <kbd>Down Arrow</kbd>, are pressed, the JavaScript changes the value.</li>
-                  <li>When the listbox is empty, <code>aria-activedescendant=&quot;&quot;</code>.</li>
+                  <li>リストボックス内のオプションがキーボードフォーカスを持っていると視覚的に示される場合、そのオプションを参照します。</li>
+                  <li>DOMのフォーカスがリストボックス要素に残っている間、アプリケーションがフォーカスしていると見なす要素を支援技術が知ることを可能にします。</li>
+                  <li><kbd>下矢印</kbd>のようなナビゲーションキーが押されると、JavaScriptが値を変更します。</li>
+                  <li>リストボックスが空の場合、<code>aria-activedescendant=""</code>です。</li>
+                  <li>このフォーカス管理テクニックに関する詳細は、<a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendantを使用したコンポジットのフォーカス管理</a>を参照してください。</li>
                 </ul>
               </td>
             </tr>
@@ -372,39 +478,47 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <th scope="row"><code>option</code></th>
               <td></td>
               <td><code>li</code></td>
-              <td>Identifies each selectable element containing the name of an option.</td>
+              <td>オプションの名前を含む選択可能な要素を特定する。</td>
             </tr>
             <tr data-test-id="option-aria-selected">
               <td></td>
-              <th scope="row"><code>aria-selected=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-selected="true"</code></th>
               <td><code>li</code></td>
               <td>
                 <ul>
-                  <li>Applied to elements with role option that are visually styled as selected to inform assistive technologies that the options are selected.</li>
-                  <li>In example 1, the option with this attribute is always the same as the option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus.</li>
-                  <li>In example 2, more than one option may be selected so the user can move focus among options without effecting which options have this attribute.</li>
-                  <li>Note that in example 2, the focus style and selection styles are distinctly different and independent.</li>
+                  <li>視覚的に選択されたとしてスタイルが適用されたロールオプションの要素に適用され、選択されたオプションであることを支援技術に通知します。</li>
+                  <li>例1では、この属性を持つオプションは常にaria-activedescendantによって参照されるオプションと同じです。これは、選択がフォーカスに従う単一選択リストボックスだからです。</li>
+                  <li>例2では、複数のオプションが選択される場合があるため、利用者は選択したオプションにこの属性があるかどうかに影響を与えずにオプション間でフォーカスを移動できます。</li>
+                  <li>例2では、フォーカスのスタイル及び選択のスタイルは明確に異なり、独立しています。</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="option-aria-selected">
               <td></td>
-              <th><code>aria-selected=&quot;false&quot;</code></th>
+              <th><code>aria-selected="false"</code></th>
               <td><code>li</code></td>
               <td>
                 <ul>
-                  <li><strong>Used only in example 2.</strong></li>
-                  <li>Applied to elements with role option that are <strong>not</strong> visually styled as selected to inform assistive technologies that the options are selectable but not selected.</li>
-                  <li>In example 1, this is unnecessary because the selection moves every time the focus moves.</li>
+                  <li><strong>例 2 でのみ使用。</strong></li>
+                  <li>選択として視覚的にスタイル設定されて<strong>いない</strong>ロール option の要素に適用し、そのオプションが選択可能であるが選択されていないことを支援技術に通知する。</li>
+                  <li>例 1 では、フォーカスが移動するたびに選択が移動するため、これは不要である。</li>
                 </ul>
               </td>
             </tr>
+            <tr data-test-id="span-aria-hidden">
+              <td></td>
+              <th><code>aria-hidden="true"</code></th>
+              <td><code>span</code></td>
+              <td>
+                チェックマーク、左矢印、及び右矢印のために使用される文字エンティティをアクセシビリティツリーから削除して、それらがオプション又はボタンのアクセシブルな名前に含まれるのを防ぐ。
+              </td>
+            </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
+        <h2>JavaScript 及び CSS ソースコード</h2>
         <ul id="css_js_files">
           <li>
             CSS:
@@ -412,28 +526,28 @@ <h2>JavaScript and CSS Source Code</h2>
           </li>
           <li>
             Javascript:
-            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/toolbar.js" type="text/javascript">toolbar.js</a>, <a href="js/listbox-rearrangeable.js" type="text/javascript">listbox-rearrangeable.js</a>, <a href="../../../shared/js/utils.js">utils.js</a>
+            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/toolbar.js" type="text/javascript">toolbar.js</a>, <a href="js/listbox-rearrangeable.js" type="text/javascript">listbox-rearrangeable.js</a>
           </li>
         </ul>
       </section>
 
       <section>
-        <h2>HTML Source Code</h2>
-        <h3 id="sc1_label">Example 1: Single-Select Listbox</h3>
-        <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
+        <h2>HTML ソースコード</h2>
+        <h3 id="sc1_label">例 1: シングルセレクト リストボックス</h3>
+        <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="HTML の開始"></div>
         <pre><code id="sc1"></code></pre>
-        <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
+        <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="HTML の終了"></div>
         <script>
           sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
         </script>
-        <h3 id="sc2_label">Example 2: Multi-Select Listbox</h3>
-        <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
+        <h3 id="sc2_label">例 2: マルチセレクト リストボックス</h3>
+        <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="HTML の開始"></div>
         <pre><code id="sc2"></code></pre>
-        <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
+        <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="HTML の終了"></div>
         <script>
           sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
         </script>
-        <!--  After all source has been added, run make to do the insert.  -->
+        <!--  全てのソースが追加された後、挿入を行うための make を実行します。  -->
         <script>
           sourceCode.make();
         </script>
diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html
index 1b54fd87..d6d91238 100644
--- a/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/content/patterns/listbox/examples/listbox-scrollable.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Scrollable Listbox Example</title>
+    <title>スクロール可能な Listbox の例</title>
 
     <!-- Core JS and CSS shared by all examples -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -15,7 +15,6 @@
 
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
-    <script src="../../../shared/js/utils.js"></script>
     <script src="js/listbox.js"></script>
     <script src="js/listbox-scrollable.js"></script>
   </head>
@@ -27,134 +26,226 @@
       </ul>
     </nav>
     <main>
-      <h1>Scrollable Listbox Example</h1>
+      <h1>スクロール可能な Listbox の例</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7fb7c8e28b55a2804bda682c36945a1154d1096a -->
 
       <section>
-        <h2>About This Example</h2>
+        <h2>この例について</h2>
         <p>
-          The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a scrollable single-select listbox widget.
-          This widget is functionally similar to an HTML <code>select</code> input where the <code>size</code> attribute has a value greater than one.
+          以下の例の実装は、スクロール可能な単一選択のリストボックスウィジェットの<a href="../listbox-pattern.html">Listbox パターン</a>を示しています。
+          このウィジェットは、HTML の <code>select</code> 入力で <code>size</code> 属性が一より大きい値を持つ場合と機能的に似ています。
         </p>
-        <p>Similar examples include:</p>
+        <p>類似の例には以下があります：</p>
         <ul>
-          <li><a href="listbox-rearrangeable.html">Example Listboxes with Rearrangeable Options</a>: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.</li>
-          <li><a href="listbox-grouped.html">Listbox Example with Grouped Options</a>: Single-select listbox with grouped options, similar to an HTML <code>select</code> with <code>optgroup</code> children.</li>
+          <li><a href="listbox-rearrangeable.html">再配置可能なオプションを持つ例のリストボックス</a>: オプションを追加、移動、及び削除できるツールバーを伴う単一選択及び複数選択のリストボックスの例。</li>
+          <li><a href="listbox-grouped.html">グループ化されたオプションを持つリストボックスの例</a>: グループ化されたオプションを持つ単一選択リストボックス、HTML の <code>select</code> における <code>optgroup</code> 子供と似ています。</li>
         </ul>
       </section>
 
       <section>
         <div class="example-header">
-          <h2 id="ex_label">Example</h2>
+          <h2 id="ex_label">例</h2>
         </div>
-        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="開始"></div>
         <div id="ex">
-          <p>Choose your favorite transuranic element (actinide or transactinide).</p>
+          <p>お好きな超ウラン元素（アクチニウム系またはトランスアクチニウム系）を選んでください。</p>
           <div class="listbox-area">
             <div>
               <span id="ss_elem" class="listbox-label">Transuranium elements:</span>
               <ul id="ss_elem_list" tabindex="0" role="listbox" aria-labelledby="ss_elem">
-                <li id="ss_elem_Np" role="option">Neptunium</li>
-                <li id="ss_elem_Pu" role="option">Plutonium</li>
-                <li id="ss_elem_Am" role="option">Americium</li>
-                <li id="ss_elem_Cm" role="option">Curium</li>
-                <li id="ss_elem_Bk" role="option">Berkelium</li>
-                <li id="ss_elem_Cf" role="option">Californium</li>
-                <li id="ss_elem_Es" role="option">Einsteinium</li>
-                <li id="ss_elem_Fm" role="option">Fermium</li>
-                <li id="ss_elem_Md" role="option">Mendelevium</li>
-                <li id="ss_elem_No" role="option">Nobelium</li>
-                <li id="ss_elem_Lr" role="option">Lawrencium</li>
-                <li id="ss_elem_Rf" role="option">Rutherfordium</li>
-                <li id="ss_elem_Db" role="option">Dubnium</li>
-                <li id="ss_elem_Sg" role="option">Seaborgium</li>
-                <li id="ss_elem_Bh" role="option">Bohrium</li>
-                <li id="ss_elem_Hs" role="option">Hassium</li>
-                <li id="ss_elem_Mt" role="option">Meitnerium</li>
-                <li id="ss_elem_Ds" role="option">Darmstadtium</li>
-                <li id="ss_elem_Rg" role="option">Roentgenium</li>
-                <li id="ss_elem_Cn" role="option">Copernicium</li>
-                <li id="ss_elem_Nh" role="option">Nihonium</li>
-                <li id="ss_elem_Fl" role="option">Flerovium</li>
-                <li id="ss_elem_Mc" role="option">Moscovium</li>
-                <li id="ss_elem_Lv" role="option">Livermorium</li>
-                <li id="ss_elem_Ts" role="option">Tennessine</li>
-                <li id="ss_elem_Og" role="option">Oganesson</li>
+                <li id="ss_elem_Np" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ネプツニウム
+                </li>
+                <li id="ss_elem_Pu" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  プルトニウム
+                </li>
+                <li id="ss_elem_Am" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  アメリシウム
+                </li>
+                <li id="ss_elem_Cm" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  キュリウム
+                </li>
+                <li id="ss_elem_Bk" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  バークリウム
+                </li>
+                <li id="ss_elem_Cf" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  カリフォルニウム
+                </li>
+                <li id="ss_elem_Es" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  アインスタイニウム
+                </li>
+                <li id="ss_elem_Fm" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  フェルミウム
+                </li>
+                <li id="ss_elem_Md" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  メンデレビウム
+                </li>
+                <li id="ss_elem_No" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ノーベリウム
+                </li>
+                <li id="ss_elem_Lr" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ローレンシウム
+                </li>
+                <li id="ss_elem_Rf" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ラザホーディウム
+                </li>
+                <li id="ss_elem_Db" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ドブニウム
+                </li>
+                <li id="ss_elem_Sg" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  シーボーギウム
+                </li>
+                <li id="ss_elem_Bh" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ボーリウム
+                </li>
+                <li id="ss_elem_Hs" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ハッシウム
+                </li>
+                <li id="ss_elem_Mt" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  マイトネリウム
+                </li>
+                <li id="ss_elem_Ds" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ダームスタット
+                </li>
+                <li id="ss_elem_Rg" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  レントゲニウム
+                </li>
+                <li id="ss_elem_Cn" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  コペルニシウム
+                </li>
+                <li id="ss_elem_Nh" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  ニホニウム
+                </li>
+                <li id="ss_elem_Fl" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  フレロビウム
+                </li>
+                <li id="ss_elem_Mc" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  モスコビウム
+                </li>
+                <li id="ss_elem_Lv" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  リバモリウム
+                </li>
+                <li id="ss_elem_Ts" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  テネシン
+                </li>
+                <li id="ss_elem_Og" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  オガネッソン
+                </li>
               </ul>
             </div>
           </div>
         </div>
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-        <h3>Notes</h3>
-        <p>This listbox is scrollable; it has more options than its height can accommodate.</p>
-        <ol>
-          <li>
-            Scrolling only works as expected if the listbox is the options' <code>offsetParent</code>.
-            The example uses <code>position: relative</code> on the listbox to that effect.
-          </li>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="終了"></div>
+      </section>
+
+      <section id="accessibility_features">
+        <h2>アクセシビリティの特徴</h2>
+        <ul>
           <li>
-            When an option is focused that isn't (fully) visible, the listbox's scroll position is updated:
-            <ol>
-              <li>If <kbd>Up Arrow</kbd> or <kbd>Down Arrow</kbd> is pressed, the previous or next option is scrolled into view.</li>
-              <li>If <kbd>Home</kbd> or <kbd>End</kbd> is pressed, the listbox scrolls all the way to the top or to the bottom.</li>
-              <li>If <code>focusItem</code> is called, the focused option will be scrolled to the top of the view if it was located above it or to the bottom if it was below it.</li>
-              <li>If the mouse is clicked on a partially visible option, it will be scrolled fully into view.</li>
-            </ol>
+            このリストボックスの実装はスクロール可能であり、どのオプションがフォーカスされているかを<a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendantを使用して</a>管理しているため、JavaScriptはフォーカスされているオプションが可視であることを確保しなければなりません。
+            したがって、キーボード又はポインタイベントが<code>aria-activedescendant</code>で参照されるオプションを変更する場合、参照されるオプションが完全に表示されていない場合、JavaScriptはリストボックスをスクロールしてオプションが表示される位置に配置します。
           </li>
-          <li>When a fully visible option is focused in any way, no scrolling occurs.</li>
           <li>
-            Normal scrolling through any scrolling mechanism (including <kbd>Page Up</kbd> and <kbd>Page Down</kbd>) works as expected.
-            The scroll position will jump as described for <code>focusItem</code> if a means other than a mouse click is used to change focus after scrolling.
+            リストボックスを操作するときの知覚性を高めるために、視覚的なキーボードのフォーカス及びホバーはCSSの<code>:hover</code> 及び <code>:focus</code> 疑似クラスを使用してスタイルされています:
+            <ul>
+              <li>視覚的な障害を持つ人々がリストボックスを対話的な要素として特定するのを助けるため、リストの上にホバーするとカーソルがポインタに変わります。</li>
+              <li>選択されたリストボックスのオプションを他のオプションと区別しやすくするため、選択はオプションの上下に2ピクセルの境界線を作成します。</li>
+            </ul>
           </li>
-        </ol>
+        </ul>
       </section>
 
       <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
+        <h2 id="kbd_label">キーボードサポート</h2>
+        <p>
+          このページの例示されたリストボックスは、以下のキーボードインターフェースを実装しています。
+          キーボードインターフェースのその他のバリエーション及びオプションについては、<a href="../listbox-pattern.html#keyboard_interaction">リストボックスパターンのキーボードインタラクションセクション</a>で説明されています。
+        </p>
         <p>
-          The example listboxes on this page implement the following keyboard interface.
-          Other variations and options for the keyboard interface are described in the <a href="../listbox-pattern.html#keyboard_interaction">Keyboard Interaction section of the Listbox Pattern</a>.
+          <strong>注記:</strong> このリストボックスの実装において視覚的なフォーカスがオプション上にある場合、DOMのフォーカスはリストボックス要素上に残り、リストボックス上の<code>aria-activedescendant</code>の値はフォーカスが指示されていると視覚的に示される子孫オプションを参照します。
+          以下のキーボードコマンドの説明でフォーカスについて言及している場合、それは視覚的なフォーカス指標を指しており、DOMのフォーカスを指していません。
+          このフォーカス管理テクニックについての詳細は、<a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendantを使用したコンポジット内のフォーカス管理</a>を参照してください。
         </p>
         <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
-              <th>Key</th>
-              <th>Function</th>
+              <th>キー</th>
+              <th>機能</th>
             </tr>
           </thead>
           <tbody>
+            <tr data-test-id="key-tab">
+              <th><kbd>Tab</kbd></th>
+              <td>リストボックス内への及びリストボックスからのフォーカスを移動する。</td>
+            </tr>
             <tr data-test-id="key-down-arrow">
-              <th><kbd>Down Arrow</kbd></th>
-              <td>Moves focus to and selects the next option.</td>
+              <th><kbd>下矢印</kbd></th>
+              <td>次のオプションへのフォーカスを移動し、選択する。</td>
             </tr>
             <tr data-test-id="key-up-arrow">
-              <th><kbd>Up Arrow</kbd></th>
-              <td>Moves focus to and selects the previous option.</td>
+              <th><kbd>上矢印</kbd></th>
+              <td>前のオプションへのフォーカスを移動し、選択する。</td>
             </tr>
             <tr data-test-id="key-home">
               <th><kbd>Home</kbd></th>
-              <td>Moves focus to and selects the first option.</td>
+              <td>最初のオプションへのフォーカスを移動し、選択する。</td>
             </tr>
             <tr data-test-id="key-end">
               <th><kbd>End</kbd></th>
-              <td>Moves focus to and selects the last option.</td>
+              <td>最後のオプションへのフォーカスを移動し、選択する。</td>
+            </tr>
+            <tr data-test-id="key-character">
+              <th>印刷可能な文字</th>
+              <td>
+                <ul>
+                  <li>文字を入力する: フォーカスは入力された文字で始まる名前の次のアイテムに移動する。</li>
+                  <li>短時間で複数の文字を入力する: フォーカスは入力された文字列で始まる名前の次のアイテムに移動する。</li>
+                </ul>
+              </td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
+        <h2 id="rps_label">ロール、プロパティ、ステート、及び tabindex 属性</h2>
         <p>
-          The example listboxes on this page implement the following ARIA roles, states, and properties.
-          Information about other ways of applying ARIA roles, states, and properties is available in the <a href="../listbox-pattern.html#roles_states_properties">Roles, States, and Properties section of the Listbox Pattern</a>.
+          このページの例示リストボックスは、以下の ARIA ロール、ステート、及びプロパティを実装しています。
+          ARIA ロール、ステート、及びプロパティの他の適用方法に関する情報は、<a href="../listbox-pattern.html#roles_states_properties">リストボックスパターンのロール、ステート、及びプロパティセクション</a>で利用可能です。
         </p>
         <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
-              <th scope="col">Role</th>
-              <th scope="col">Attribute</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
+              <th scope="col">ロール</th>
+              <th scope="col">属性</th>
+              <th scope="col">要素</th>
+              <th scope="col">使用法</th>
             </tr>
           </thead>
           <tbody>
@@ -162,29 +253,34 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <th scope="row"><code>listbox</code></th>
               <td></td>
               <td><code>ul</code></td>
-              <td>Identifies the focusable element that has listbox behaviors and contains the listbox options.</td>
+              <td>リストボックスの動作を持ち、リストボックスのオプションを含むフォーカス可能な要素を識別します。</td>
             </tr>
             <tr data-test-id="listbox-aria-labelledby">
               <td></td>
-              <th scope="row"><code>aria-labelledby=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REF"</code></th>
               <td><code>ul</code></td>
-              <td>Refers to the element containing the listbox label.</td>
+              <td>リストボックスのラベルを含む要素を参照します。</td>
             </tr>
             <tr data-test-id="listbox-tabindex">
               <td></td>
-              <th scope="row"><code>tabindex=&quot;0&quot;</code></th>
+              <th scope="row"><code>tabindex="0"</code></th>
               <td><code>ul</code></td>
-              <td>Includes the listbox in the page tab sequence.</td>
+              <td>ページのタブ順序にリストボックスを含めます。</td>
             </tr>
             <tr data-test-id="listbox-aria-activedescendant">
               <td></td>
-              <th scope="row"><code>aria-activedescendant=&quot;ID_REF&quot;</code></th>
+              <th scope="row"><code>aria-activedescendant="ID_REF"</code></th>
               <td><code>ul</code></td>
               <td>
                 <ul>
-                  <li>Tells assistive technologies which of the options, if any, is visually indicated as having keyboard focus.</li>
-                  <li>DOM focus remains on the <code>ul</code> element and the idref specified for <code>aria-activedescendant</code> refers to the <code>li</code> element that is visually styled as focused.</li>
-                  <li>When navigation keys, such as <kbd>Down Arrow</kbd>, are pressed, the JavaScript changes the value.</li>
+                  <li>リストボックス内のオプションがキーボードフォーカスを持っていると視覚的に示されている場合、そのオプションを参照します。</li>
+                  <li>DOMフォーカスがリストボックス要素に残っている間、アプリケーションがフォーカスしているとみなす要素を支援技術が知ることができます。</li>
+                  <li>ナビゲーションキー、たとえば<kbd>Down Arrow</kbd>が押されたとき、JavaScriptが値を変更します。</li>
+                  <li>
+                    このフォーカス管理技術に関する詳しい情報は、
+                    <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendantを使用したコンポジット内のフォーカスの管理</a>
+                    を参照してください。
+                  </li>
                 </ul>
               </td>
             </tr>
@@ -192,26 +288,34 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
               <th scope="row"><code>option</code></th>
               <td></td>
               <td><code>li</code></td>
-              <td>Identifies each selectable element containing the name of an option.</td>
+              <td>オプションの名前を含む選択可能な要素を特定する。</td>
             </tr>
             <tr data-test-id="option-aria-selected">
               <td></td>
-              <th scope="row"><code>aria-selected=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-selected="true"</code></th>
               <td><code>li</code></td>
               <td>
                 <ul>
-                  <li>Indicates that the option is selected.</li>
-                  <li>Applied to the element with role option that is visually styled as selected.</li>
-                  <li>The option with this attribute is always the same as the option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus.</li>
+                  <li>オプションが選択されていることを示す。</li>
+                  <li>選択されていると視覚的にスタイルされたロールオプションの要素に適用される。</li>
+                  <li>この属性を持つオプションは、フォーカスに続く選択がある単一選択リストボックスであるため、常にaria-activedescendantによって参照されるオプションと同じです。</li>
                 </ul>
               </td>
             </tr>
+            <tr data-test-id="span-aria-hidden">
+              <td></td>
+              <th><code>aria-hidden="true"</code></th>
+              <td><code>span</code></td>
+              <td>
+                チェックマークアイコンに使用される文字エンティティをアクセシビリティツリーから削除し、オプションのアクセシブルな名前に含められるのを防ぐ。
+              </td>
+            </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2>JavaScript and CSS Source Code</h2>
+        <h2>JavaScript 及び CSS ソースコード</h2>
         <ul id="css_js_files">
           <li>
             CSS:
@@ -219,16 +323,16 @@ <h2>JavaScript and CSS Source Code</h2>
           </li>
           <li>
             Javascript:
-            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/listbox-scrollable.js" type="text/javascript">listbox-scrollable.js</a>, <a href="../../../shared/js/utils.js">utils.js</a>
+            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/listbox-scrollable.js" type="text/javascript">listbox-scrollable.js</a>
           </li>
         </ul>
       </section>
 
       <section>
-        <h2 id="sc_label">HTML Source Code</h2>
-        <div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="Start of "></div>
+        <h2 id="sc_label">HTML ソースコード</h2>
+        <div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="開始"></div>
         <pre><code id="sc1"></code></pre>
-        <div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="End of"></div>
+        <div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="終了"></div>
         <script>
           sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files');
           sourceCode.make();
diff --git a/content/patterns/listbox/listbox-pattern.html b/content/patterns/listbox/listbox-pattern.html
index a85f5d6b..56a38f9f 100644
--- a/content/patterns/listbox/listbox-pattern.html
+++ b/content/patterns/listbox/listbox-pattern.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <title>Listbox Pattern</title>
+    <title>リストボックス パターン</title>
 
     <!-- Core JS and CSS shared by all patterns -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -14,137 +14,126 @@
   </head>
   <body>
     <main>
-      <h1>Listbox Pattern</h1>
+      <h1>リストボックス パターン</h1>
+      <!-- 翻訳元リビジョン: https://github.com/w3c/aria-practices/tree/7fb7c8e28b55a2804bda682c36945a1154d1096a -->
 
       <section id="about">
-        <h2>About This Pattern</h2>
+        <h2>このパターンについて</h2>
         <p>
-          A <a href="#listbox" class="role-reference">listbox</a> widget presents a list of options and allows a user to select one or more of them.
-          A listbox that allows a single option to be chosen is a single-select listbox; one that allows multiple options to be selected is a multi-select listbox.
+          <a href="#listbox" class="role-reference">listbox</a> ウィジェットは、オプションのリストを表示し、利用者が1つ又は複数のオプションを選択できるようにします。
+          単一のオプションのみを選択できるlistboxは、シングルセレクトlistboxと呼ばれ、複数のオプションを選択できるものはマルチセレクトlistboxと呼ばれます。
         </p>
         <p>
-          When screen readers present a listbox, they may render the name, state, and position of each option in the list.
-          The name of an option is a string calculated by the browser, typically from the content of the option element.
-          As a flat string, the name does not contain any semantic information.
-          Thus, if an option contains a semantic element, such as a heading, screen reader users will not have access to the semantics.
-          In addition, the interaction model conveyed by the listbox role to assistive technologies does not support interacting with elements inside of an option.
-          Because of these traits of the listbox widget, it does not provide an accessible way to present a list of interactive elements, such as links, buttons, or checkboxes.
-          To present a list of interactive elements, see the <a href="../grid/grid-pattern.html">Grid Pattern</a>.
+          スクリーンリーダーがlistboxを提示するとき、リスト内の各オプションの名前、ステート、及び位置をレンダリングすることができます。
+          オプションの名前は、通常オプション要素のコンテンツからブラウザによって計算される文字列です。
+          名前は平坦な文字列として、セマンティック情報を含んでいません。
+          したがって、オプションにセマンティック要素、たとえば見出しが含まれている場合、スクリーンリーダーの利用者はそのセマンティクスにアクセスすることができません。
+          加えて、listboxロールが支援技術に伝えるインタラクションモデルは、オプション内の要素との対話をサポートしていません。
+          listboxウィジェットのこれらの特性のため、リンク、ボタン、又はチェックボックスなどの対話的な要素のリストを提示するアクセス可能な方法を提供しません。
+          対話的な要素のリストを提示するには、<a href="../grid/grid-pattern.html">Grid パターン</a>を参照してください。
         </p>
         <p>
-          Avoiding very long option names facilitates understandability and perceivability for screen reader users.
-          The entire name of an option is spoken as a single unit of speech when the option is read.
-          When too much information is spoken as the result of a single key press, it is difficult to understand.
-          Long names inhibit perception by increasing the impact of interrupted speech because users typically have to re-read the entire option.
-          And, if the user does not understand what is spoken, reading the name by character, word, or phrase may be a difficult operation for many screen reader users in the context of a listbox widget.
+          非常に長いオプション名を避けることで、スクリーンリーダーの利用者の理解性及び知覚性が向上します。
+          オプションの名前全体が、オプションが読み上げられるときに1つの発話ユニットとして話されます。
+          1回のキー押下の結果として話される情報が多すぎると、理解するのが難しくなります。
+          長い名前は、通常、利用者がオプション全体を再読する必要があるため、中断された発話の影響を増大させ、知覚を阻害します。
+          また、利用者が話される内容を理解できない場合、listboxウィジェットの文脈で文字、単語、又はフレーズで名前を読むのは、多くのスクリーンリーダー利用者にとって難しい操作となることがあります。
         </p>
         <p>
-          Sets of options where each option name starts with the same word or phrase can also significantly degrade usability for keyboard and screen reader users.
-          Scrolling through the list to find a specific option becomes inordinately time consuming for a screen reader user who must listen to that word or phrase repeated before hearing what is unique about each option.
-          For example, if a listbox for choosing a city were to contain options where each city name were preceded by a country name, and if many cities were listed for each country, a screen reader user would have to listen to the country name before hearing each city name.
-          In such a scenario, it would be better to have 2 list boxes, one for country and one for city.
+          各オプション名が同じ単語又はフレーズで始まるオプションのセットも、キーボード及びスクリーンリーダーの利用者にとって使い勝手を大幅に低下させることができます。
+          特定のオプションを見つけるためにリストをスクロールすることは、その単語又はフレーズが各オプションについてのユニークな部分を聞く前に繰り返されるので、スクリーンリーダーの利用者にとって非常に時間がかかるようになります。
+          例えば、都市を選択するためのlistboxが、各都市名が国名で先行されるオプションを含む場合、多くの都市が各国でリストされている場合、スクリーンリーダーの利用者は各都市名を聞く前に国名を聞く必要があります。
+          このようなシナリオでは、国と都市の2つのlistboxを持つ方が良いでしょう。
         </p>
       </section>
 
       <section id="examples">
-        <h2>Examples</h2>
+        <h2>例</h2>
         <ul>
-          <li><a href="examples/listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
-          <li><a href="examples/listbox-rearrangeable.html">Example Listboxes with Rearrangeable Options</a>: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.</li>
-          <li><a href="examples/listbox-grouped.html">Listbox Example with Grouped Options</a>: Single-select listbox with grouped options, similar to an HTML <code>select</code> with <code>optgroup</code> children.</li>
+          <li><a href="examples/listbox-scrollable.html">スクロール可能な Listbox の例</a> : オプションを表示するためにスクロールするシングルセレクトlistbox、HTMLの <code>select</code> に <code>size</code> 属性が1より大きい場合と同様。</li>
+          <li><a href="examples/listbox-rearrangeable.html">並べ替え可能なオプションを持つ例のListboxes</a> : オプションを追加、移動、及び削除できるツールバーを伴うシングルセレクト及びマルチセレクトlistboxesの例。</li>
+          <li><a href="examples/listbox-grouped.html">グループ化されたオプションを持つ Listbox の例</a> : グループ化されたオプションを持つシングルセレクトlistbox、HTMLの <code>select</code> に <code>optgroup</code> 子供と同様。</li>
         </ul>
       </section>
 
       <section id="keyboard_interaction">
-        <h2>Keyboard Interaction</h2>
-        <p>For a vertically oriented listbox:</p>
+        <h2>キーボード操作</h2>
+        <p>縦方向のリストボックスの場合：</p>
         <ul>
           <li>
-            When a single-select listbox receives focus:
+            シングル選択リストボックスがフォーカスを受け取るとき：
             <ul>
               <li>
-                If none of the options are selected before the listbox receives focus, the first option receives focus.
-                Optionally, the first option may be automatically selected.
+                リストボックスがフォーカスを受け取る前に選択されているオプションがない場合、最初のオプションにフォーカスが移動します。
+                オプションで、最初の選択肢が自動的に選択される場合もあります。
               </li>
-              <li>If an option is selected before the listbox receives focus, focus is set on the selected option.</li>
+              <li>リストボックスがフォーカスを受け取る前に選択されているオプションがある場合、選択されているオプションにフォーカスが設定されます。</li>
             </ul>
           </li>
           <li>
-            When a multi-select listbox receives focus:
+            マルチ選択リストボックスがフォーカスを受け取るとき：
             <ul>
-              <li>If none of the options are selected before the listbox receives focus, focus is set on the first option and there is no automatic change in the selection state.</li>
-              <li>If one or more options are selected before the listbox receives focus, focus is set on the first option in the list that is selected.</li>
+              <li>リストボックスがフォーカスを受け取る前に選択されているオプションがない場合、最初のオプションにフォーカスが設定され、選択状態は自動的に変更されません。</li>
+              <li>リストボックスがフォーカスを受け取る前に一つまたはそれ以上のオプションが選択されている場合、リスト内で最初に選択されているオプションにフォーカスが設定されます。</li>
             </ul>
           </li>
           <li>
-            <kbd>Down Arrow</kbd>: Moves focus to the next option.
-            Optionally, in a single-select listbox, selection may also move with focus.
+            <kbd>下矢印</kbd>：次のオプションにフォーカスを移動します。
+            シングル選択リストボックスの場合、オプションで選択もフォーカスと共に移動することができます。
           </li>
           <li>
-            <kbd>Up Arrow</kbd>: Moves focus to the previous option.
-            Optionally, in a single-select listbox, selection may also move with focus.
+            <kbd>上矢印</kbd>：前のオプションにフォーカスを移動します。
+            シングル選択リストボックスの場合、オプションで選択もフォーカスと共に移動することができます。
           </li>
           <li>
-            <kbd>Home</kbd> (Optional): Moves focus to first option.
-            Optionally, in a single-select listbox, selection may also move with focus.
-            Supporting this key is strongly recommended for lists with more than five options.
+            <kbd>Home</kbd>（オプション）：最初のオプションにフォーカスを移動します。
+            シングル選択リストボックスの場合、オプションで選択もフォーカスと共に移動することができます。
+            5つ以上のオプションがあるリストでは、このキーをサポートすることが強く推奨されます。
           </li>
           <li>
-            <kbd>End</kbd> (Optional): Moves focus to last option.
-            Optionally, in a single-select listbox, selection may also move with focus.
-            Supporting this key is strongly recommended for lists with more than five options.
+            <kbd>End</kbd>（オプション）：最後のオプションにフォーカスを移動します。
+            シングル選択リストボックスの場合、オプションで選択もフォーカスと共に移動することができます。
+            5つ以上のオプションがあるリストでは、このキーをサポートすることが強く推奨されます。
           </li>
           <li>
-            Type-ahead is recommended for all listboxes, especially those with more than seven options:
+            タイプアヘッドは、特に7つ以上のオプションがあるリストボックスで推奨されます：
             <ul>
-              <li>Type a character: focus moves to the next item with a name that starts with the typed character.</li>
-              <li>Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.</li>
+              <li>文字を入力する：フォーカスは、入力された文字で始まる名前を持つ次の項目に移動します。</li>
+              <li>短時間で複数の文字を入力する：フォーカスは、入力された文字列で始まる名前を持つ次の項目に移動します。</li>
             </ul>
           </li>
           <li>
-            <strong>Multiple Selection</strong>: Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as <kbd>Shift</kbd> or <kbd>Control</kbd>, while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states.
+            <strong>複数選択</strong>：著者は、複数の選択をサポートするための2つのインタラクションモデルのいずれかを実装することができます。一つはリストをナビゲートしながら修飾キー（<kbd>Shift</kbd> や <kbd>Control</kbd> など）を保持する必要がない推奨モデル、もう一つは選択状態を失うのを防ぐためにナビゲーション中に修飾キーを保持する必要がある代替モデルです。
             <ul>
               <li>
-                Recommended selection model -- holding modifier keys is not necessary:
+                推奨される選択モデル - 修飾キーを保持する必要はありません：
                 <ul>
-                  <li><kbd>Space</kbd>: changes the selection state of the focused option.</li>
-                  <li><kbd>Shift + Down Arrow</kbd> (Optional): Moves focus to and toggles the selected state of the next option.</li>
-                  <li><kbd>Shift + Up Arrow</kbd> (Optional): Moves focus to and toggles the selected state of the previous option.</li>
-                  <li><kbd>Shift + Space</kbd> (Optional): Selects contiguous items from the most recently selected item to the focused item.</li>
-                  <li>
-                    <kbd>Control + Shift + Home</kbd> (Optional): Selects the focused option and all options up to the first option.
-                    Optionally, moves focus to the first option.
-                  </li>
-                  <li>
-                    <kbd>Control + Shift + End</kbd> (Optional): Selects the focused option and all options down to the last option.
-                    Optionally, moves focus to the last option.
-                  </li>
-                  <li>
-                    <kbd>Control + A</kbd> (Optional): Selects all options in the list.
-                    Optionally, if all options are selected, it may also unselect all options.
-                  </li>
+                  <li><kbd>Space</kbd>：フォーカスされているオプションの選択状態を変更します。</li>
+                  <li><kbd>Shift + 下矢印</kbd>（オプション）：フォーカスを次のオプションに移動し、その選択状態を切り替えます。</li>
+                  <li><kbd>Shift + 上矢印</kbd>（オプション）：フォーカスを前のオプションに移動し、その選択状態を切り替えます。</li>
+                  <li><kbd>Shift + Space</kbd>（オプション）：最も最近選択されたアイテムからフォーカスされているアイテムまでの範囲内のすべてのアイテムの選択状態を切り替えます。</li>
                 </ul>
               </li>
               <li>
-                Alternative selection model -- moving focus without holding a <kbd>Shift</kbd> or <kbd>Control</kbd> modifier unselects all selected options except the focused option:
+                代替の選択モデル -- <kbd>Shift</kbd>または<kbd>Control</kbd>修飾キーを保持せずにフォーカスを移動すると、フォーカスが当たっているオプションを除くすべての選択されたオプションの選択が解除されます：
                 <ul>
-                  <li><kbd>Shift + Down Arrow</kbd>: Moves focus to and toggles the selection state of the next option.</li>
-                  <li><kbd>Shift + Up Arrow</kbd>: Moves focus to and toggles the selection state of the previous option.</li>
-                  <li><kbd>Control + Down Arrow</kbd>: Moves focus to the next option without changing its selection state.</li>
-                  <li><kbd>Control + Up Arrow</kbd>: Moves focus to the previous option without changing its selection state.</li>
-                  <li><kbd>Control + Space</kbd> Changes the selection state of the focused option.</li>
-                  <li><kbd>Shift + Space</kbd> (Optional): Selects contiguous items from the most recently selected item to the focused item.</li>
+                  <li><kbd>Shift + 下矢印</kbd>: 次のオプションにフォーカスを移動し、その選択状態を切り替えます。</li>
+                  <li><kbd>Shift + 上矢印</kbd>: 前のオプションにフォーカスを移動し、その選択状態を切り替えます。</li>
+                  <li><kbd>Control + 下矢印</kbd>: その選択状態を変更せずに次のオプションにフォーカスを移動します。</li>
+                  <li><kbd>Control + 上矢印</kbd>: その選択状態を変更せずに前のオプションにフォーカスを移動します。</li>
+                  <li><kbd>Control + Space</kbd> フォーカスされているオプションの選択状態を変更します。</li>
+                  <li><kbd>Shift + Space</kbd> (オプション): 最も最近選択されたアイテムからフォーカスされているアイテムまでの範囲内のすべてのアイテムを選択します。</li>
                   <li>
-                    <kbd>Control + Shift + Home</kbd> (Optional): Selects the focused option and all options up to the first option.
-                    Optionally, moves focus to the first option.
+                    <kbd>Control + Shift + Home</kbd> (オプション): フォーカスされているオプションおよび最初のオプションまでのすべてのオプションを選択します。
+                    オプションで、最初のオプションにフォーカスを移動することもできます。
                   </li>
                   <li>
-                    <kbd>Control + Shift + End</kbd> (Optional): Selects the focused option and all options down to the last option.
-                    Optionally, moves focus to the last option.
+                    <kbd>Control + Shift + End</kbd> (オプション): フォーカスされているオプションおよび最後のオプションまでのすべてのオプションを選択します。
+                    オプションで、最後のオプションにフォーカスを移動することもできます。
                   </li>
                   <li>
-                    <kbd>Control + A</kbd> (Optional): Selects all options in the list.
-                    Optionally, if all options are selected, it may also unselect all options.
+                    <kbd>Control + A</kbd> (オプション): リスト内のすべてのオプションを選択します。
+                    オプションで、すべてのオプションが選択されている場合、すべてのオプションの選択を解除することもできます。
                   </li>
                 </ul>
               </li>
@@ -152,28 +141,28 @@ <h2>Keyboard Interaction</h2>
           </li>
         </ul>
         <div class="note">
-          <h3>Note</h3>
+          <h3>注記</h3>
           <ol>
             <li>
-              DOM focus (the active element) is functionally distinct from the selected state.
-              For more details, see <a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_vs_selection">this description of differences between focus and selection</a>.
+              DOM フォーカス（アクティブな要素）は、選択されたステートとは機能的に異なります。
+              詳細は、<a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_vs_selection">フォーカス 及び 選択の違いに関するこの説明</a>を参照してください。
             </li>
             <li>
-              The <code>listbox</code> role supports the <a class="property-reference" href="#aria-activedescendant">aria-activedescendant</a> property, which provides an alternative to moving DOM focus among <code>option</code> elements when implementing keyboard navigation. For details, see
-              <a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">Managing Focus in Composites Using aria-activedescendant</a>.
+              <code>listbox</code> ロールは、<a class="property-reference" href="#aria-activedescendant">aria-activedescendant</a> プロパティをサポートしており、キーボードナビゲーションを実装する際に、<code>option</code> 要素の間で DOM フォーカスを移動する代替手段を提供します。
+              詳細については、<a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">aria-activedescendant を使用したコンポジット内のフォーカスの管理</a>を参照してください。
             </li>
             <li>
-              In a single-select listbox, moving focus may optionally unselect the previously selected option and select the newly focused option.
-              This model of selection is known as &quot;selection follows focus&quot;.
-              Having selection follow focus can be very helpful in some circumstances and can severely degrade accessibility in others.
-              For additional guidance, see <a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_selection_follows_focus">Deciding When to Make Selection Automatically Follow Focus</a>.
+              単一選択の listbox では、フォーカスを移動することで、以前に選択されたオプションの選択を解除し、新しくフォーカスされたオプションを選択することができます。
+              この選択モデルは、&quot;選択がフォーカスに従う&quot;として知られています。
+              選択がフォーカスに従うことは、ある状況では非常に役立ちますが、他の状況ではアクセシビリティを大幅に低下させる可能性があります。
+              追加のガイダンスについては、<a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_selection_follows_focus">選択を自動的にフォーカスに従わせるかどうかを決定する</a>を参照してください。
             </li>
-            <li>If selecting or unselecting all options is an important function, implementing separate controls for these actions, such as buttons for &quot;Select All&quot; and &quot;Unselect All&quot;, significantly improves accessibility.</li>
+            <li>すべてのオプションを選択 又は 選択解除することが重要な機能である場合、これらのアクションのための別のコントロールを実装すること、例えば &quot;すべて選択&quot; 及び &quot;すべて選択解除&quot; のボタン、はアクセシビリティを大幅に向上させます。</li>
             <li>
-              If the options in a listbox are arranged horizontally:
+              listbox のオプションが水平に配置されている場合:
               <ol>
-                <li><kbd>Down Arrow</kbd> performs as <kbd>Right Arrow</kbd> is described above, and vice versa.</li>
-                <li><kbd>Up Arrow</kbd> performs as <kbd>Left Arrow</kbd> is described above, and vice versa.</li>
+                <li><kbd>下矢印</kbd> は、上記で説明されている <kbd>右矢印</kbd> として動作し、その逆も同様です。</li>
+                <li><kbd>上矢印</kbd> は、上記で説明されている <kbd>左矢印</kbd> として動作し、その逆も同様です。</li>
               </ol>
             </li>
           </ol>
@@ -181,86 +170,85 @@ <h3>Note</h3>
       </section>
 
       <section id="roles_states_properties">
-        <h2>WAI-ARIA Roles, States, and Properties</h2>
+        <h2>WAI-ARIA ロール、ステート、及びプロパティ</h2>
         <ul>
-          <li>An element that contains or owns all the listbox options has role <a href="#listbox" class="role-reference">listbox</a>.</li>
+          <li>すべての listbox オプションを含む又は所有する要素はロール<a href="#listbox" class="role-reference">listbox</a>を持っています。</li>
           <li>
-            Each option in the listbox has role <a href="#option" class="role-reference">option</a> and is contained in or owned by either:
+            listbox 内の各オプションはロール<a href="#option" class="role-reference">option</a>を持ち、以下のいずれかに含まれる又は所有されます:
             <ul>
-              <li>The element with role <code>listbox</code>.</li>
-              <li>An element with role <a href="#group" class="role-reference">group</a> that is contained in or owned by the element with role <code>listbox</code>.</li>
+              <li>ロール<code>listbox</code>を持つ要素。</li>
+              <li>ロール<a href="#group" class="role-reference">group</a>を持ち、ロール<code>listbox</code>を持つ要素に含まれる又はその要素によって所有される要素。</li>
             </ul>
           </li>
           <li>
-            Options contained in a <code>group</code> are referred to as <q>grouped options</q> and form what is called an <q>option group.</q>
-            If a listbox contains grouped options, then:
+            <code>group</code>内に含まれるオプションは<q>グループ化されたオプション</q>と呼ばれ、<q>オプショングループ</q>というものを形成します。
+            listbox がグループ化されたオプションを含む場合、以下が適用されます:
             <ul>
-              <li>All option groups contain at least one option.</li>
-              <li>Each option group has an accessible name provided via <a href="#aria-label" class="property-reference">aria-label</a> or <a href="#aria-labelledby" class="property-reference">aria-labelledby</a>.</li>
+              <li>すべてのオプショングループは少なくとも1つのオプションを含んでいます。</li>
+              <li>各オプショングループは<a href="#aria-label" class="property-reference">aria-label</a>又は<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>を通じてアクセス可能な名前を持っています。</li>
             </ul>
           </li>
-          <li>If the element with role <code>listbox</code> is not part of another widget, such as a combobox, then it has either a visible label referenced by <a href="#aria-labelledby" class="property-reference">aria-labelledby</a> or a value specified for <a href="#aria-label" class="property-reference">aria-label</a>.</li>
+          <li>ロール<code>listbox</code>を持つ要素が、例えば combobox のような他のウィジェットの一部でない場合、<a href="#aria-labelledby" class="property-reference">aria-labelledby</a>によって参照される表示ラベルを持つか、<a href="#aria-label" class="property-reference">aria-label</a>の値が指定されています。</li>
           <li>
-            If the listbox supports selection of more than one option, the element with role <code>listbox</code> has <a class="property-reference" href="#aria-multiselectable">aria-multiselectable</a> set to <code>true</code>.
-            Otherwise, <code>aria-multiselectable</code> is either set to <code>false</code> or the default value of <code>false</code> is implied.
+            listbox が複数のオプションの選択をサポートする場合、ロール<code>listbox</code>を持つ要素は<a class="property-reference" href="#aria-multiselectable">aria-multiselectable</a>を<code>true</code>に設定します。
+            それ以外の場合、<code>aria-multiselectable</code>は<code>false</code>に設定されるか、<code>false</code>のデフォルト値が暗黙的に設定されます。
           </li>
           <li>
-            The selection state of each selectable option is indicated with either <a href="#aria-selected" class="state-reference">aria-selected</a> or <a href="#aria-checked" class="state-reference">aria-checked</a>:
+            選択可能な各オプションの選択ステートは、<a href="#aria-selected" class="state-reference">aria-selected</a>又は<a href="#aria-checked" class="state-reference">aria-checked</a>のいずれかで示されます:
             <ul>
               <li>
-                If the selection state is indicated with <code>aria-selected</code>, then <code>aria-checked</code> is not specified for any options.
-                Alternatively, if the selection state is indicated with <code>aria-checked</code>, then <code>aria-selected</code> is not specified for any options.
-                See notes below regarding considerations for which property to use and for details of the unusual conditions that might allow for both properties in the same listbox.
+                選択ステートが<code>aria-selected</code>で示される場合、<code>aria-checked</code>はどのオプションにも指定されません。
+                逆に、選択ステートが<code>aria-checked</code>で示される場合、<code>aria-selected</code>はどのオプションにも指定されません。
+                どちらのプロパティを使用するかの考慮事項や、同じ listbox で両方のプロパティが許可される可能性のある珍しい条件の詳細については、以下の注記を参照してください。
               </li>
               <li>
-                If any options are selected, each selected option has either <a href="#aria-selected" class="state-reference">aria-selected</a> or <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>true</code>.
-                No more than one option is selected at a time if the element with role <code>listbox</code> does <em>not</em> have <a class="property-reference" href="#aria-multiselectable">aria-multiselectable</a> set to <code>true</code>.
+                オプションが選択されている場合、各選択されたオプションは、<a href="#aria-selected" class="state-reference">aria-selected</a>又は<a href="#aria-checked" class="state-reference">aria-checked</a>が<code>true</code>に設定されています。
+                ロール<code>listbox</code>が<code>true</code>に設定されていない<a class="property-reference" href="#aria-multiselectable">aria-multiselectable</a>を持つ場合、一度に選択されるオプションは1つだけです。
               </li>
-              <li>All options that are selectable but not selected have either <a href="#aria-selected" class="state-reference">aria-selected</a> or <a href="#aria-checked" class="state-reference">aria-checked</a> set to <code>false</code>.</li>
+              <li>選択可能でありながら選択されていないすべてのオプションは、<a href="#aria-selected" class="state-reference">aria-selected</a>又は<a href="#aria-checked" class="state-reference">aria-checked</a>が<code>false</code>に設定されています。</li>
               <li>
-                Note that except in listboxes where selection follows focus, the selected state is distinct from focus.
-                For more details, see <a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_vs_selection">this description of differences between focus and selection</a>
-                and <a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_selection_follows_focus">Deciding When to Make Selection Automatically Follow Focus</a>.
+                選択がフォーカスに従う listbox を除いて、選択ステートはフォーカスとは異なります。
+                詳細については、<a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_vs_selection">フォーカスと選択の違いの説明</a>及び<a href="../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_selection_follows_focus">選択が自動的にフォーカスに従うタイミングの決定</a>を参照してください。
               </li>
             </ul>
           </li>
-          <li>If the complete set of available options is not present in the DOM due to dynamic loading as the user scrolls, their <a href="#aria-setsize" class="property-reference">aria-setsize</a> and <a href="#aria-posinset" class="property-reference">aria-posinset</a> attributes are set appropriately.</li>
+          <li>利用可能なオプションの完全なセットがDOMに存在しない場合、ユーザーがスクロールすることで動的に読み込まれるため、<a href="#aria-setsize" class="property-reference">aria-setsize</a>及び<a href="#aria-posinset" class="property-reference">aria-posinset</a>属性が適切に設定されています。</li>
           <li>
-            If options are arranged horizontally, the element with role <code>listbox</code> has <a href="#aria-orientation" class="property-reference">aria-orientation</a> set to <code>horizontal</code>.
-            The default value of <code>aria-orientation</code> for <code>listbox</code> is <code>vertical</code>.
+            オプションが水平に配置されている場合、ロール<code>listbox</code>を持つ要素は<a href="#aria-orientation" class="property-reference">aria-orientation</a>を<code>horizontal</code>に設定しています。
+            <code>listbox</code>の<code>aria-orientation</code>のデフォルト値は<code>vertical</code>です。
           </li>
         </ul>
         <div class="note">
-          <h3>Note</h3>
+          <h3>注記</h3>
           <ol>
             <li>
-              Some factors to consider when choosing whether to indicate selection with <code>aria-selected</code> or <code>aria-checked</code> are:
+              <code>aria-selected</code> と <code>aria-checked</code> のどちらを使用して選択を示すかを選ぶ際の考慮事項は以下の通りです:
               <ul>
                 <li>
-                  Some design systems use <code>aria-selected</code> for single-select widgets and <code>aria-checked</code> for multi-select widgets.
-                  In the absence of factors that would make an alternative convention more appropriate, this is a recommended convention.
+                  一部のデザインシステムは、シングルセレクトウィジェットに<code>aria-selected</code>を、マルチセレクトウィジェットに<code>aria-checked</code>を使用しています。
+                  他の慣習がより適切であるとする要因がない場合、これは推奨される慣習です。
                 </li>
                 <li>
-                  The language of instructions and the appearance of the interface might suggest one attribute is more appropriate than the other.
-                  For instance, do instructions say to <q>select</q> items?
-                  Or, is the visual indicator of selection a check mark?
+                  指示の言葉やインターフェースの外観が、一方の属性が他方よりも適切であることを示唆するかもしれません。
+                  例えば、指示はアイテムを<q>選択</q>するようにと言っていますか？
+                  また、選択の視覚的な指標はチェックマークですか？
                 </li>
-                <li>It is important to adopt a consistent convention for selection models across a site or app.</li>
+                <li>サイトやアプリ全体での選択モデルに一貫した慣習を採用することが重要です。</li>
               </ul>
             </li>
             <li>
-              Conditions that would permit a listbox to include both <code>aria-selected</code> and <code>aria-checked</code> are extremely rare.
-              It is strongly recommended to avoid designing a listbox widget that would have the need for more than one type of state.
-              If both states were to be used within a listbox, all the following conditions need to be satisfied:
+              listboxが<code>aria-selected</code>と<code>aria-checked</code>の両方を含む条件は非常にまれです。
+              一つの状態よりも多いニーズがあるlistboxウィジェットの設計を避けることを強く推奨します。
+              listbox内で両方の状態を使用する場合、以下の条件すべてが満たされる必要があります:
               <ul>
-                <li>The meaning and purpose of <code>aria-selected</code> is different from the meaning and purpose of <code>aria-checked</code> in the user interface.</li>
-                <li>The user interface makes the meaning and purpose of each state apparent.</li>
-                <li>The user interface provides a separate method for controlling each state.</li>
+                <li>ユーザーインターフェースにおける<code>aria-selected</code>の意味と目的は、<code>aria-checked</code>の意味と目的とは異なります。</li>
+                <li>ユーザーインターフェースは、各状態の意味と目的を明確にします。</li>
+                <li>ユーザーインターフェースは、各状態を制御するための別々の方法を提供します。</li>
               </ul>
             </li>
             <li>
-              If <a href="#aria-owns" class="property-reference">aria-owns</a> is set on the listbox element to include elements that are not DOM children of the container, those elements will appear in the reading order in the sequence they are referenced and after any items that are DOM children.
-              Scripts that manage focus need to ensure the visual focus order matches this assistive technology reading order.
+              listbox要素に<a href="#aria-owns" class="property-reference">aria-owns</a>が設定され、コンテナのDOM子要素でない要素を含む場合、それらの要素は参照された順序で読み取り順序に表示され、DOM子要素であるアイテムの後に表示されます。
+              フォーカスを管理するスクリプトは、視覚的なフォーカスの順序がこの支援技術の読み取り順序と一致するように確認する必要があります。
             </li>
           </ol>
         </div>