diff --git a/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md b/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md
index 00d05e0f6919379..471e395f6056ac0 100644
--- a/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md
+++ b/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md
@@ -32,24 +32,24 @@ let upPressed = false;
 let downPressed = false;
 ```
 
-Then we will listen for the `keydown` and `keyup` events and act accordingly in both handler functions. Inside them we can get the code of the key that was pressed from the [keyCode](/en-US/docs/Web/API/KeyboardEvent/keyCode) property of the event object, see which key it is, and then set the proper variable. There are no helpers so you have to remember what the given codes are (or [look them up](/en-US/docs/Web/API/KeyboardEvent/keyCode#value_of_keycode)); `37` is the left arrow:
+Then we will listen for the `keydown` and `keyup` events and act accordingly in both handler functions. Inside them we can get the code of the key that was pressed from the [`code`](/en-US/docs/Web/API/KeyboardEvent/code) property of the event object, see which key it is, and then set the proper variable. The codes are all readable string names, but you can [look them up](/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values) to be sure; `"ArrowLeft"` is the left arrow:
 
 ```js
 function keyDownHandler(event) {
-  if (event.keyCode === 39) {
+  if (event.code === "ArrowRight") {
     rightPressed = true;
-  } else if (event.keyCode === 37) {
+  } else if (event.code === "ArrowLeft") {
     leftPressed = true;
   }
-  if (event.keyCode === 40) {
+  if (event.code === "ArrowDown") {
     downPressed = true;
-  } else if (event.keyCode === 38) {
+  } else if (event.code === "ArrowUp") {
     upPressed = true;
   }
 }
 ```
 
-The `keyUpHandler` looks almost exactly the same as the `keyDownHandler` above, but instead of setting the pressed variables to `true`, we would set them to `false`. If the left arrow is pressed (<kbd>⬅︎</kbd>; key code 37), we can set the `leftPressed` variable to `true` and in the `draw` function perform the action assigned to it — move the ship left:
+The `keyUpHandler` looks almost exactly the same as the `keyDownHandler` above, but instead of setting the pressed variables to `true`, we would set them to `false`. If the left arrow is pressed (<kbd>⬅︎</kbd>; `"ArrowLeft"`), we can set the `leftPressed` variable to `true` and in the `draw` function perform the action assigned to it — move the ship left:
 
 ```js
 function draw() {
@@ -73,20 +73,6 @@ function draw() {
 
 The `draw` function first clears the whole Canvas — we draw everything from scratch on every single frame. Then the pressed key variables are checked and the `playerX` and `playerY` variables (that we define earlier just after `leftPressed` and the others) holding the position of the ship are adjusted by a given amount, let's say 5 pixels. Then the player's ship is drawn on the screen and the next draw is called from within the [requestAnimationFrame](/en-US/docs/Web/API/Window/requestAnimationFrame).
 
-We could write our own `KeyCode` object containing the key codes. For example:
-
-```js
-const KeyboardHelper = { left: 37, up: 38, right: 39, down: 40 };
-```
-
-That way instead of using the codes to compare the input in the handler functions, we could do something like this, which is arguably easier to remember:
-
-```js
-leftPressed = event.keyCode === KeyboardHelper.left;
-```
-
-> **Note:** You can also find a list of the different keycodes and what keys they relate to in the [keyCode](/en-US/docs/Web/API/KeyboardEvent/keyCode) reference page.
-
 ![Pure JavaScript demo containing player's ship (with stars in the background) that can be controlled with keyboard and mouse.](controls-purejsgame.png)
 
 You can see this example in action online at [end3r.github.io/JavaScript-Game-Controls](https://end3r.github.io/JavaScript-Game-Controls/) and the full source code can be found at [github.com/end3r/JavaScript-Game-Controls](https://github.com/end3r/JavaScript-Game-Controls/).
diff --git a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 4b5c46a05def521..742355c9ad64dd2 100644
--- a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -196,12 +196,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -427,12 +427,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -586,12 +586,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md
index b256f8a724b0679..4b6fcfeb29d1d04 100644
--- a/files/en-us/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/en-us/learn/html/introduction_to_html/getting_started/index.md
@@ -150,12 +150,12 @@ window.addEventListener("load", updateCode);
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -350,12 +350,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -622,12 +622,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md
index c76a12afd5e0400..ecc742ee4b7da44 100644
--- a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -198,12 +198,12 @@ window.addEventListener("load", updateCode);
 // Stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -393,12 +393,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -552,12 +552,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -714,12 +714,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -933,12 +933,12 @@ window.addEventListener("load", updateCode);
 // Stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index 4ffed4a68baab77..fd7e0ef8a6ffb3c 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -278,12 +278,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = function (e) {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md
index 9da7de79bcb7165..f5cdadca4eee4b9 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -302,12 +302,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -547,12 +547,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 4ed9a5fd02033df..b24d9efaaef95db 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -151,12 +151,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = function (e) {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/javascript/building_blocks/conditionals/index.md b/files/en-us/learn/javascript/building_blocks/conditionals/index.md
index 604edfb6dfbbe42..c2be47e4442ac75 100644
--- a/files/en-us/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/en-us/learn/javascript/building_blocks/conditionals/index.md
@@ -636,12 +636,12 @@ solution.addEventListener("click", () => {
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -826,12 +826,12 @@ solution.addEventListener("click", () => {
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/javascript/building_blocks/looping_code/index.md b/files/en-us/learn/javascript/building_blocks/looping_code/index.md
index 5a359ed276a0236..cb935f8e28bc1f0 100644
--- a/files/en-us/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/en-us/learn/javascript/building_blocks/looping_code/index.md
@@ -710,12 +710,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = function (e) {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -891,12 +891,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = function (e) {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/javascript/first_steps/arrays/index.md b/files/en-us/learn/javascript/first_steps/arrays/index.md
index daacdd3093dac1c..cd820d99c0c9f8d 100644
--- a/files/en-us/learn/javascript/first_steps/arrays/index.md
+++ b/files/en-us/learn/javascript/first_steps/arrays/index.md
@@ -392,15 +392,12 @@ window.addEventListener("load", updateCode);
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-const KEY_TAB = 9;
-const KEY_ESC = 27;
-
 textarea.onkeydown = (event) => {
-  if (event.keyCode === KEY_TAB) {
+  if (event.code === "Tab") {
     event.preventDefault();
     insertAtCaret("\t");
   }
-  if (event.keyCode === KEY_ESC) {
+  if (event.code === "Escape") {
     textarea.blur();
   }
 };
@@ -626,15 +623,12 @@ window.addEventListener("load", updateCode);
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-const KEY_TAB = 9;
-const KEY_ESC = 27;
-
 textarea.onkeydown = (event) => {
-  if (event.keyCode === KEY_TAB) {
+  if (event.code === "Tab") {
     event.preventDefault();
     insertAtCaret("\t");
   }
-  if (event.keyCode === KEY_ESC) {
+  if (event.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/javascript/first_steps/useful_string_methods/index.md b/files/en-us/learn/javascript/first_steps/useful_string_methods/index.md
index 2fe503db898e8c5..f970452d89b0099 100644
--- a/files/en-us/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/en-us/learn/javascript/first_steps/useful_string_methods/index.md
@@ -342,12 +342,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = (e) => {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -506,12 +506,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = function (e) {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
@@ -689,12 +689,12 @@ window.addEventListener("load", updateCode);
 // make it write a tab at the caret position instead
 
 textarea.onkeydown = function (e) {
-  if (e.keyCode === 9) {
+  if (e.code === "Tab") {
     e.preventDefault();
     insertAtCaret("\t");
   }
 
-  if (e.keyCode === 27) {
+  if (e.code === "Escape") {
     textarea.blur();
   }
 };
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
index bd51a7689512b2f..6882b01fd499416 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
@@ -164,14 +164,14 @@ Sometimes it is not possible to avoid losing keyboard accessibility. You might h
 
    ```js
    document.onkeydown = (e) => {
-     if (e.keyCode === 13) {
+     if (e.code === "Enter") {
        // The Enter/Return key
        document.activeElement.onclick(e);
      }
    };
    ```
 
-   Here we add a listener to the `document` object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's [keyCode](/en-US/docs/Web/API/KeyboardEvent/keyCode) property; if it is the keycode that matches Return/Enter, we run the function stored in the button's `onclick` handler using `document.activeElement.onclick()`. [`activeElement`](/en-US/docs/Web/API/Document/activeElement) gives us the element that is currently focused on the page.
+   Here we add a listener to the `document` object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's [`code`](/en-US/docs/Web/API/KeyboardEvent/code) property; if it is the code that matches Return/Enter, we run the function stored in the button's `onclick` handler using `document.activeElement.onclick()`. [`activeElement`](/en-US/docs/Web/API/Document/activeElement) gives us the element that is currently focused on the page.
 
 > **Note:** This technique will only work if you set your original event handlers via event handler properties (e.g. `onclick`). `addEventListener` won't work. This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. Better to just use the right element for the right job in the first place.
 
diff --git a/files/en-us/web/accessibility/aria/roles/checkbox_role/index.md b/files/en-us/web/accessibility/aria/roles/checkbox_role/index.md
index 57885fcee300f6e..b7d67b346dd1693 100644
--- a/files/en-us/web/accessibility/aria/roles/checkbox_role/index.md
+++ b/files/en-us/web/accessibility/aria/roles/checkbox_role/index.md
@@ -98,13 +98,13 @@ The following example creates an otherwise non-semantic checkbox element using C
   id="chkPref"
   aria-checked="false"
   onclick="changeCheckbox()"
-  onKeyDown="changeCheckbox(event.keyCode)"
+  onKeyDown="changeCheckbox(event.code)"
   tabindex="0"
   aria-labelledby="chk1-label"></span>
 <label
   id="chk1-label"
   onclick="changeCheckbox()"
-  onKeyDown="changeCheckbox(event.keyCode)"
+  onKeyDown="changeCheckbox(event.code)"
   >Remember my preferences</label
 >
 ```
@@ -132,12 +132,11 @@ The following example creates an otherwise non-semantic checkbox element using C
 ### JavaScript
 
 ```js
-function changeCheckbox(keyCode) {
-  const spacebarKeyCode = 32;
+function changeCheckbox(code) {
   const item = document.getElementById("chkPref");
   const checked = item.getAttribute("aria-checked");
 
-  if (keyCode && keyCode !== spacebarKeyCode) {
+  if (code && code !== "Space") {
     return;
   } else if (checked === "true") {
     item.setAttribute("aria-checked", "false");
diff --git a/files/en-us/web/accessibility/aria/roles/radio_role/index.md b/files/en-us/web/accessibility/aria/roles/radio_role/index.md
index f912fef7ec5ffc7..c1cbbdb3bb0941b 100644
--- a/files/en-us/web/accessibility/aria/roles/radio_role/index.md
+++ b/files/en-us/web/accessibility/aria/roles/radio_role/index.md
@@ -227,19 +227,19 @@ let handleClick = function (event) {
 
 // handle key presses
 let handleKeydown = function (event) {
-  switch (event.keyCode) {
-    case 32: // space
-    case 12: // return
+  switch (event.code) {
+    case "Space":
+    case "Enter":
       currentChecked();
       break;
 
-    case 38: // up
-    case 37: // left
+    case "ArrowUp":
+    case "ArrowLeft":
       previousRadioChecked();
       break;
 
-    case 40: // down
-    case 39: // right
+    case "ArrowDown":
+    case "ArrowRight":
       nextItemChecked();
       break;
 
diff --git a/files/en-us/web/accessibility/keyboard-navigable_javascript_widgets/index.md b/files/en-us/web/accessibility/keyboard-navigable_javascript_widgets/index.md
index b69fb31d1bf21cc..55dafed064ae2bb 100644
--- a/files/en-us/web/accessibility/keyboard-navigable_javascript_widgets/index.md
+++ b/files/en-us/web/accessibility/keyboard-navigable_javascript_widgets/index.md
@@ -146,7 +146,7 @@ To ensure that the user experience is consistent regardless of input device, key
 
 ### Ensure that the keyboard can be used to activate element
 
-To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an `onclick="doSomething()"`, you should bind `doSomething()` to the key down event as well: `onkeydown="return event.keyCode !== 13 || doSomething();"`.
+To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an `onclick="doSomething()"`, you should bind `doSomething()` to the key down event as well: `onkeydown="event.code === "Enter" && doSomething();"`.
 
 ### Always draw the focus for tabindex="-1" items and elements that receive focus programmatically
 
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/arcto/index.md b/files/en-us/web/api/canvasrenderingcontext2d/arcto/index.md
index 534f58143a87bff..5b5da3bcb6ee7ff 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/arcto/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/arcto/index.md
@@ -372,15 +372,15 @@ can be used to change an underlined element that is in focus.
       this.setStateValue = setStateValue;
       this.#callbackKeydown = (evt) => {
         let valueInput;
-        switch (evt.keyCode) {
-          case 13: // enter -- do not allow since adds <br> nodes
+        switch (evt.code) {
+          case "Enter": // Do not allow since adds <br> nodes
             evt.preventDefault();
             return;
-          case 38: // up arrow
+          case "ArrowUp":
             valueInput = Number(this.elementText.textContent) + 1;
             evt.preventDefault();
             break;
-          case 40: // down arrow
+          case "ArrowDown":
             valueInput = Number(this.elementText.textContent) - 1;
             evt.preventDefault();
             break;
@@ -812,20 +812,20 @@ can be used to change an underlined element that is in focus.
     elem.addEventListener("keydown", (evt) => {
       let valueNew;
       let indexActive = indexTextInput;
-      switch (evt.keyCode) {
-        case 37: // left arrow -- dec x by 1
+      switch (evt.code) {
+        case "ArrowLeft": // left arrow -- dec x by 1
           valueNew = textInputs[indexActive].getStateValue() - 1;
           evt.preventDefault();
           break;
-        case 38: // up arrow -- dec y by 1
+        case "ArrowUp": // up arrow -- dec y by 1
           valueNew = textInputs[++indexActive].getStateValue() - 1;
           evt.preventDefault();
           break;
-        case 39: // right arrow -- inc x by 1
+        case "ArrowRight": // right arrow -- inc x by 1
           valueNew = textInputs[indexActive].getStateValue() + 1;
           evt.preventDefault();
           break;
-        case 40: // down arrow -- inc y by 1
+        case "ArrowDown": // down arrow -- inc y by 1
           valueNew = textInputs[++indexActive].getStateValue() + 1;
           evt.preventDefault();
           break;
diff --git a/files/en-us/web/api/element/keydown_event/index.md b/files/en-us/web/api/element/keydown_event/index.md
index e99dbc61e1315f7..317802e49977671 100644
--- a/files/en-us/web/api/element/keydown_event/index.md
+++ b/files/en-us/web/api/element/keydown_event/index.md
@@ -16,17 +16,6 @@ The `keydown` and [`keyup`](/en-US/docs/Web/API/Element/keyup_event) events prov
 
 Keyboard events are only generated by `<input>`, `<textarea>`, `<summary>` and anything with the `contentEditable` or `tabindex` attribute. If not caught, they [bubble](/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling) up the [DOM tree](/en-US/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model#what_is_a_dom_tree) until they reach {{domxref("Document")}}.
 
-Since Firefox 65, the `keydown` and [`keyup`](/en-US/docs/Web/API/Element/keyup_event) events are now fired during {{glossary("IME")}} composition, to improve cross-browser compatibility for CJKT users ([Firefox bug 354358](https://bugzil.la/354358)). To ignore all `keydown` events that are part of composition, do something like this (229 is a special value set for a `keyCode` relating to an event that has been processed by an IME):
-
-```js
-eventTarget.addEventListener("keydown", (event) => {
-  if (event.isComposing || event.keyCode === 229) {
-    return;
-  }
-  // do something
-});
-```
-
 ## Syntax
 
 Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
@@ -101,12 +90,21 @@ function logKey(e) {
 
 {{EmbedLiveSample("addEventListener_keydown_example")}}
 
-### onkeydown equivalent
+### keydown events with IME
+
+Since Firefox 65, the `keydown` and [`keyup`](/en-US/docs/Web/API/Element/keyup_event) events are now fired during {{glossary("IME")}} composition, to improve cross-browser compatibility for CJKT users ([Firefox bug 354358](https://bugzil.la/354358)). To ignore all `keydown` events that are part of composition, do something like this (229 is a special value set for a `keyCode` relating to an event that has been processed by an IME):
 
 ```js
-input.onkeydown = logKey;
+eventTarget.addEventListener("keydown", (event) => {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // do something
+});
 ```
 
+> **Note:** `compositionstart` may fire _after_ `keydown` when typing the first character that opens up the IME, and `compositionend` may fire _before_ `keydown` when typing the last character that closes the IME. In these cases, `isComposing` is false even when the event is part of composition. However, {{domxref("KeyboardEvent.keyCode")}} is still `229` in these cases, so it's still advisable to check `keyCode` as well, although it's deprecated.
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/element/keypress_event/index.md b/files/en-us/web/api/element/keypress_event/index.md
index 6c979d69f0c2a21..87e5615747917da 100644
--- a/files/en-us/web/api/element/keypress_event/index.md
+++ b/files/en-us/web/api/element/keypress_event/index.md
@@ -44,8 +44,6 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
 
   - : Returns a string with the code value of the physical key represented by the event.
 
-    > **Warning:** This ignores the user's keyboard layout, so that if the user presses the key at the "Y" position in a QWERTY keyboard layout (near the middle of the row above the home row), this will always return "KeyY", even if the user has a QWERTZ keyboard (which would mean the user expects a "Z" and all the other properties would indicate a "Z") or a Dvorak keyboard layout (where the user would expect an "F"). If you want to display the correct keystrokes to the user, you can use {{domxref("Keyboard.getLayoutMap()")}}.
-
 - {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
   - : Returns a boolean value that is `true` if the <kbd>Ctrl</kbd> key was active when the key event was generated.
diff --git a/files/en-us/web/api/element/keyup_event/index.md b/files/en-us/web/api/element/keyup_event/index.md
index 55aad42e98a6683..b2f2434df24d6e7 100644
--- a/files/en-us/web/api/element/keyup_event/index.md
+++ b/files/en-us/web/api/element/keyup_event/index.md
@@ -14,17 +14,6 @@ The [`keydown`](/en-US/docs/Web/API/Element/keydown_event) and `keyup` events pr
 
 Keyboard events are only generated by `<input>`, `<textarea>`, `<summary>` and anything with the `contentEditable` or `tabindex` attribute.
 
-Since Firefox 65, the `keyup` and [`keydown`](/en-US/docs/Web/API/Element/keydown_event) events are now fired during {{glossary("IME")}} composition, to improve cross-browser compatibility for CJKT users ([Firefox bug 354358](https://bugzil.la/354358). To ignore all `keyup` events that are part of composition, do something like this (229 is a special value set for a `keyCode` relating to an event that has been processed by an input-method editor ([IME](https://www.w3.org/TR/ime-api/#IME))):
-
-```js
-eventTarget.addEventListener("keyup", (event) => {
-  if (event.isComposing || event.keyCode === 229) {
-    return;
-  }
-  // do something
-});
-```
-
 ## Syntax
 
 Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
@@ -99,12 +88,21 @@ function logKey(e) {
 
 {{EmbedLiveSample("addEventListener_keyup_example")}}
 
-### onkeyup equivalent
+### keyup events with IME
+
+Since Firefox 65, the [`keydown`](/en-US/docs/Web/API/Element/keydown_event) and `keyup` events are now fired during {{glossary("IME")}} composition, to improve cross-browser compatibility for CJKT users ([Firefox bug 354358](https://bugzil.la/354358)). To ignore all `keyup` events that are part of composition, do something like this:
 
 ```js
-input.onkeyup = logKey;
+eventTarget.addEventListener("keyup", (event) => {
+  if (event.isComposing) {
+    return;
+  }
+  // do something
+});
 ```
 
+> **Note:** Unlike `keydown`, `keyup` events do not have special {{domxref("KeyboardEvent/keyCode", "keyCode")}} values for IME events. However, like `keydown`, `compositionstart` may fire _after_ `keyup` when typing the first character that opens up the IME, and `compositionend` may fire _before_ `keyup` when typing the last character that closes the IME. In these cases, `isComposing` is false even when the event is part of composition.
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md
index 75551655aa48a54..09a1058dbb7316b 100644
--- a/files/en-us/web/api/eventtarget/addeventlistener/index.md
+++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md
@@ -328,11 +328,11 @@ class SomeClass {
 
   someMethod(e) {
     console.log(this.name);
-    switch (e.keyCode) {
-      case 5:
+    switch (e.code) {
+      case "ArrowUp":
         // some code here…
         break;
-      case 6:
+      case "ArrowDown":
         // some code here…
         break;
     }
diff --git a/files/en-us/web/api/htmltextareaelement/index.md b/files/en-us/web/api/htmltextareaelement/index.md
index 06b8fd6e65f018f..c64bbc50f4b595a 100644
--- a/files/en-us/web/api/htmltextareaelement/index.md
+++ b/files/en-us/web/api/htmltextareaelement/index.md
@@ -101,9 +101,9 @@ Make a textarea autogrow while typing:
 #### JavaScript
 
 ```js
-function autoGrow(oField) {
-  if (oField.scrollHeight > oField.clientHeight) {
-    oField.style.height = `${oField.scrollHeight}px`;
+function autoGrow(field) {
+  if (field.scrollHeight > field.clientHeight) {
+    field.style.height = `${field.scrollHeight}px`;
   }
 }
 ```
@@ -212,71 +212,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vita
 
 {{EmbedLiveSample('Insert_HTML_tags_example', 600, 300)}}
 
-### Maximum length and number of lines example
-
-Create a textarea with a maximum number of characters per line and a maximum number of lines:
-
-First, create a function that takes the text field and a key event as input and determines if any of the limits have been reached. If the limit has not been reached, it will return the key.
-
-```js
-function checkRows(oField, oKeyEvent) {
-  let nKey = (
-      oKeyEvent ||
-      /* old IE */ window.event || /* check is not supported! */ { keyCode: 38 }
-    ).keyCode,
-    // put here the maximum number of characters per line:
-    nCols = 30,
-    // put here the maximum number of lines:
-    nRows = 5,
-    nSelS = oField.selectionStart,
-    nSelE = oField.selectionEnd,
-    sVal = oField.value,
-    nLen = sVal.length,
-    nBackward = nSelS >= nCols ? nSelS - nCols : 0,
-    nDeltaForw =
-      sVal
-        .substring(nBackward, nSelS)
-        .search(new RegExp(`\\n(?!.{0,${String(nCols - 2)}}\\n)`)) + 1,
-    nRowStart = nBackward + nDeltaForw,
-    aReturns = (
-      sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)
-    ).match(/\n/g),
-    nRowEnd = nSelE + nRowStart + nCols - nSelS,
-    sRow =
-      sVal.substring(nRowStart, nSelS) +
-      sVal.substring(nSelE, nRowEnd > nLen ? nLen : nRowEnd),
-    bKeepCols =
-      nKey === 13 ||
-      nLen + 1 < nCols ||
-      /\n/.test(sRow) ||
-      ((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) &&
-        (sRow.length < nCols ||
-          (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));
-
-  return (
-    (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) &&
-    ((nKey > 32 && nKey < 41) || bKeepCols)
-  );
-}
-```
-
-In the HTML we just need to hook our function to the `onkeypress` event and specify that our textarea does not accept pasting:
-
-```html
-<form>
-  <p>
-    Textarea with fixed number of characters per line:<br />
-    <textarea
-      cols="50"
-      rows="10"
-      onkeypress="return checkRows(this, event);"
-      onpaste="return false;"></textarea>
-  </p>
-</form>
-```
-
-{{EmbedLiveSample('Maximum_length_and_number_of_lines_example', 600, 300)}}
-
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/keyboardevent/index.md b/files/en-us/web/api/keyboardevent/index.md
index 53690f335290d9d..d231348397c2ed0 100644
--- a/files/en-us/web/api/keyboardevent/index.md
+++ b/files/en-us/web/api/keyboardevent/index.md
@@ -143,14 +143,10 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
 
   - : Returns a number representing the Unicode reference number of the key; this property is used only by the `keypress` event. For keys whose `char` property contains multiple characters, this is the Unicode value of the first character in that property. In Firefox 26 this returns codes for printable characters.
 
-    > **Warning:** This property is deprecated; you should use {{domxref("KeyboardEvent.key")}} instead, if available.
-
 - {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}} {{ReadOnlyInline}}
 
   - : Returns a number representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
 
-    > **Warning:** This property is deprecated; you should use {{domxref("KeyboardEvent.key")}} instead, if available.
-
 - {{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}} {{deprecated_inline}} {{ReadOnlyInline}}
   - : This property is non-standard and has been deprecated in favor of {{domxref("KeyboardEvent.key")}}. It was part of an old version of DOM Level 3 Events.
 
diff --git a/files/en-us/web/api/keyboardevent/keycode/index.md b/files/en-us/web/api/keyboardevent/keycode/index.md
index 2d5f7d7106e9c69..6bfa190a7bf3e80 100644
--- a/files/en-us/web/api/keyboardevent/keycode/index.md
+++ b/files/en-us/web/api/keyboardevent/keycode/index.md
@@ -14,45 +14,9 @@ The deprecated **`KeyboardEvent.keyCode`** read-only property represents a syste
 
 This is usually the decimal ASCII ({{RFC(20)}}) or Windows 1252 code corresponding to the key. If the key can't be identified, this value is `0`.
 
-You should avoid using this if possible; it's been deprecated for some time. Instead, you should use {{domxref("KeyboardEvent.code")}}, if it's implemented. Unfortunately, some browsers still don't have it, so you'll have to be careful to make sure you use one which is supported on all target browsers.
+You should avoid using this if possible; it's been deprecated for some time. Instead, you should use {{domxref("KeyboardEvent.code")}} (for the physical key pressed) or {{domxref("KeyboardEvent.key")}} (for the character the key maps to). Check compatibility for either property if you target very old browsers.
 
-> **Note:** Web developers shouldn't use the `keyCode` attribute for printable characters when handling `keydown` and `keyup` events. As described above, the `keyCode` attribute is not useful for printable characters, especially those input with the <kbd>Shift</kbd> or <kbd>Alt</kbd> key pressed. When implementing a shortcut key handler, the {{domxref("Element/keypress_event", "keypress")}} event is usually better (at least when Gecko is the runtime in use).
-
-## Examples
-
-```js
-window.addEventListener(
-  "keydown",
-  (event) => {
-    if (event.defaultPrevented) {
-      return; // Should do nothing if the default action has been cancelled
-    }
-
-    let handled = false;
-    if (event.key !== undefined) {
-      // Handle the event with KeyboardEvent.key
-      handled = true;
-    } else if (event.keyCode !== undefined) {
-      // Handle the event with KeyboardEvent.keyCode
-      handled = true;
-    }
-
-    if (handled) {
-      // Suppress "double action" if event handled
-      event.preventDefault();
-    }
-  },
-  true,
-);
-```
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
+> **Note:** Web developers shouldn't use the `keyCode` attribute for printable characters when handling `keydown` and `keyup` events. As described above, the `keyCode` attribute is not useful for printable characters, especially those input with the <kbd>Shift</kbd> or <kbd>Alt</kbd> key pressed.
 
 ## Value of keyCode
 
@@ -3299,6 +3263,42 @@ Gecko defines a lot of `keyCode` values in `KeyboardEvent` for making the mappin
   </tbody>
 </table>
 
+## Examples
+
+```js
+window.addEventListener(
+  "keydown",
+  (event) => {
+    if (event.defaultPrevented) {
+      return; // Should do nothing if the default action has been cancelled
+    }
+
+    let handled = false;
+    if (event.key !== undefined) {
+      // Handle the event with KeyboardEvent.key
+      handled = true;
+    } else if (event.keyCode !== undefined) {
+      // Handle the event with KeyboardEvent.keyCode
+      handled = true;
+    }
+
+    if (handled) {
+      // Suppress "double action" if event handled
+      event.preventDefault();
+    }
+  },
+  true,
+);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
 ### OEM specific keys on Windows
 
 On Windows, some values of virtual keycode are defined (reserved) for OEM specific key. They are available for special keys on non-standard keyboard. In other words, some values are used for different meaning by two or more vendors (or hardware).
diff --git a/files/en-us/web/media/audio_and_video_delivery/index.md b/files/en-us/web/media/audio_and_video_delivery/index.md
index f6d2eaddf23dfcd..a72152a70462a87 100644
--- a/files/en-us/web/media/audio_and_video_delivery/index.md
+++ b/files/en-us/web/media/audio_and_video_delivery/index.md
@@ -282,7 +282,7 @@ window.onload = () => {
   }
 
   function checkKey(e) {
-    if (e.keycode === 32) {
+    if (e.code === "Space") {
       // space bar
       switchState();
     }