fix(curriculum): Update description for tabindex clarification (#61384)

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:
 <element tabindex="number">Element Text</element>
 ```
 
-It is important to never use the `tabindex` attribute with a value greater than `0`. Instead, you should either use a value of `0` or `-1`.
+The value of `tabindex` determines how the element behaves in keyboard navigation:
 
-You can set the `tabindex` to `-1` to allow it to receive programmatic focus. This is used in a variety of situations for "focus management", such as when you need to set the focus on a heading, error message, or dialog, or you are building custom components such as tabbing interfaces or tree components.
+- `tabindex="0"`: Adds the element to the natural tab order. For example:
 
-```html
-<p tabindex="-1">Sorry, there was an error with your submission.</p>
-```
+  ```html
+  <button>First</button>
+  <div tabindex="0">Second</div>
+  <a href="#">Third</a>
+  ```
 
-Setting `tabindex` to `0` allows you to add an element that does not receive keyboard focus by default into the page's natural tab order. This allows keyboard users to `Tab` to the element. This is primarily used when building custom elements that need keyboard functionality. 
+  Tabbing will move focus from the `button` to the `div`, then to the link, following their order in the HTML.
 
-```html
-<div role="combobox" tabindex="0">
-```    
+- `tabindex="-1"`: Makes an element focusable programmatically. This is useful for managing focus in elements that are not normally focusable, such as headings, containers, dialogs, or error messages:
+
+  ```html
+  <p tabindex="-1">Sorry, there was an error with your submission.</p>
+  ```
+
+  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
+  <input tabindex="2">
+  <input tabindex="1">
+  <input tabindex="3">
+  ```
+
+  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: