diff --git a/curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md b/curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md
index bb150f51de6..7ef64b51146 100644
--- a/curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md
+++ b/curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md
@@ -1,17 +1,12 @@
---
id: 672a55fbc2d95a9453151caf
title: What Are Some Ways to Make Web Applications Keyboard Accessible?
-challengeType: 11
-videoId: UE7rKhSKfHs
+challengeType: 19
dashedName: what-are-some-ways-to-make-web-applications-keyboard-accessible
---
# --description--
-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
What are some ways to make web applications keyboard accessible?
Many users rely on keyboards instead of mice due to physical disabilities, repetitive strain injuries, or personal preference. This includes users of screen readers and those who may not have a working mouse.
@@ -19,7 +14,9 @@ Keyboard accessibility ensures these users can navigate web applications effecti
Let's look at some practical techniques you can employ to make web applications keyboard accessible.
-Many users use the `Tab` key to navigate through interactive elements on a webpage. The `tabindex` attribute is used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It takes a numerical value, which can be positive, zero, or negative.
+Many users rely on the `Tab` key to move through interactive elements on a webpage. By default, browsers let users tab through elements like links, buttons, and form fields in the order they appear in the HTML. This is called the natural tab order.
+
+Sometimes, you may want to adjust which elements are focusable or change their focus order. The `tabindex` attribute allows you do this.
Here is the basic syntax:
@@ -27,19 +24,37 @@ Here is the basic syntax:
Sorry, there was an error with your submission.
-``` + ```html + +Sorry, there was an error with your submission.
+ ``` + + In this example, the paragraph is not part of the normal tab order, so users cannot reach it by pressing the `Tab` key. However, if you set focus to this element via a script, the message will be brought to the user's attention. You'll learn more about this technique in JavaScript lectures. + +- `tabindex` greater than `0`: Sets a custom tab order, so elements with lower positive values are focused first: + + ```html + + + + ``` + + In this example, tabbing will focus the `input` with `tabindex="1"` first, then `2`, then `3`, regardless of their order in the HTML. + +Custom positive values are sometimes used in complex widgets, such as a toolbar where you want a specific navigation order. However, this approach is discouraged because it can make navigation confusing and hard to maintain, especially as the page grows or changes. `accesskey` is another attribute you can use to make your web project keyboard accessible. It allows you to define a key that focuses on or activates a particular element: