CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-16 21:27:57 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat(curriculum): add interactive examples to accessible keyboards lesson (#62880)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Diem-Trang Pham 2025-10-17 17:57:48 -05:00 committed by GitHub
parent 43ca857727
commit 62fbac1111
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
curriculum/challenges/english/blocks/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-some-ways-to-make-web-applications-keyboard-accessible
---
# --description--
# --interactive--
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.
Keyboard accessibility ensures these users can navigate web applications effectively without barriers.
@ -24,45 +24,45 @@ Here is the basic syntax:
The value of `tabindex` determines how the element behaves in keyboard navigation:
- `tabindex="0"`: Adds the element to the natural tab order. For example:
`tabindex="0"` adds the element to the natural tab order.
```html
<button>First</button>
<div tabindex="0">Second</div>
<a href="#">Third</a>
```
Tabbing will move focus from the `button` to the `div`, then to the link, following their order in the HTML.
Tabbing will move focus from the `button` to the `div`, then to the link, following their order in the HTML.
Click anywhere in the whitespace of the preview window. Then use the `Tab` key to see the focus move between the different elements.
- `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:
:::interactive_editor
```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>
```
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 lessons.
:::
- `tabindex` greater than `0`: Sets a custom tab order, so elements with lower positive values are focused first:
`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
<input tabindex="2">
<input tabindex="1">
<input tabindex="3">
```
```html
<p tabindex="-1">Sorry, there was an error with your submission.</p>
```
In this example, tabbing will focus the `input` with `tabindex="1"` first, then `2`, then `3`, regardless of their order in the HTML.
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 lessons.
When the `tabindex` is greater than `0` it sets a custom tab order. So elements with lower positive values are focused first.
In this example, tabbing will focus the `input` with `tabindex="1"` first, then `2`, then `3`, regardless of their order in the HTML.
```html
<input tabindex="2">
<input tabindex="1">
<input tabindex="3">
```
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:
`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.
```html
<button accesskey="s">Save</button>
<button accesskey="c">Cancel</button>
<a href="index.html" accesskey="h">Home</a>
```
In the above code:
Here is an interactive example you can try out following the suggestions below:
- `accesskey="s"` assigns the key `S` to the `Save` button. On most browsers, pressing `ALT + S` (on Windows) and `CTRL + Option + S` (on Mac) will activate this button.
- `accesskey="c"` sets the key `C` to the `Cancel` button, allowing users to activate it using `ALT + C` (Windows) and `CTRL + Option + C` (Mac).
@ -70,16 +70,36 @@ In the above code:
Please note that the exact key combination to activate the accesskey might vary depending on the browser and operating system. It's typically `ALT + Specified Key` on Windows and `CTRL + Option + Specified Key` on Mac.
:::interactive_editor
```html
<button accesskey="s">Save</button>
<button accesskey="c">Cancel</button>
<a href="index.html" accesskey="h">Home</a>
```
:::
Another way to make the keyboard accessible in your apps is to make sure you provide clear focus indicators. If you feel the default browser focus indicator is not enough, you can override it by targeting the focus state of the element.
Here is an example of styling the focus state for an HTML element:
Here is an example of styling the focus state for a `button` element. Click anywhere in the whitespace of the preview window followed by pressing the `Tab` key to focus the button.
:::interactive_editor
```html
<link href="styles.css" rel="stylesheet">
<button>Example button</button>
```
```css
element:focus {
button:focus {
outline: 2px solid #005fcc;
}
```
:::
The `outline` property is used to define the outline around the element. This example sets the outline to a solid blue line with 2 pixels set for the thickness. The focus indicator should be styled in a way that makes it obvious which element currently has focus. In order to be accessible, the indicator must have a minimum color contrast of at least 3:1 with the background color it covers.
You should also avoid keyboard traps, which occur when a user cannot move focus away from a certain element in components like modals and popups.