opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-08-31 01:14:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): use kbd elements for keyboard shortcuts (#69713)

Browse Source 
Co-authored-by: Venkat <venkat@Venkats-MacBook-Pro.local>
This commit is contained in:
Venkataramana Devathoti
2026-08-24 21:05:17 +05:30
committed by GitHub
parent 56af925fb5
commit 0a30d37f10
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md
+8 -8
View File
@@ -12,7 +12,7 @@ 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 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.
Many users rely on the <kbd>Tab</kbd> 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 to do this.
@@ -28,7 +28,7 @@ The value of `tabindex` determines how the element behaves in keyboard navigatio
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. To interact with the example, you will need to enable the interactive editor.
Click anywhere in the whitespace of the preview window. Then use the <kbd>Tab</kbd> key to see the focus move between the different elements. To interact with the example, you will need to enable the interactive editor.
:::interactive_editor
@@ -46,7 +46,7 @@ Click anywhere in the whitespace of the preview window. Then use the `Tab` key t
<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 lessons.
In this example, the paragraph is not part of the normal tab order, so users cannot reach it by pressing the <kbd>Tab</kbd> 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.
@@ -64,11 +64,11 @@ Custom positive values are sometimes used in complex widgets, such as a toolbar
Here is an interactive example you can try out following the suggestions below (enable the interactive editor first):
- `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).
- `accesskey="h"` assigns the key `H` to the `Home` link, allowing users to navigate to the homepage using `ALT + H` (Windows) and `CTRL + Option + H` (Mac).
- `accesskey="s"` assigns the key <kbd>S</kbd> to the `Save` button. On most browsers, pressing <kbd>ALT</kbd> + <kbd>S</kbd> (on Windows) and <kbd>CTRL</kbd> + <kbd>Option</kbd> + <kbd>S</kbd> (on Mac) will activate this button.
- `accesskey="c"` sets the key <kbd>C</kbd> to the `Cancel` button, allowing users to activate it using <kbd>ALT</kbd> + <kbd>C</kbd> (Windows) and <kbd>CTRL</kbd> + <kbd>Option</kbd> + <kbd>C</kbd> (Mac).
- `accesskey="h"` assigns the key <kbd>H</kbd> to the `Home` link, allowing users to navigate to the homepage using <kbd>ALT</kbd> + <kbd>H</kbd> (Windows) and <kbd>CTRL</kbd> + <kbd>Option</kbd> + <kbd>H</kbd> (Mac).
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.
Please note that the exact key combination to activate the `accesskey` might vary depending on the browser and operating system. It's typically <kbd>ALT</kbd> + <kbd>Specified Key</kbd> on Windows and <kbd>CTRL</kbd> + <kbd>Option</kbd> + <kbd>Specified Key</kbd> on Mac.
The `accesskey` attribute can be problematic because it may conflict with existing shortcuts or behave inconsistently across devices and keyboards, and is often not intuitive for users to discover or remember.
@@ -86,7 +86,7 @@ If you choose to use `accesskey`, it should be done with clear guidance to users
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 a `button` element. Click anywhere in the whitespace of the preview window followed by pressing the `Tab` key to focus the button. To interact with the example, you will need to enable the interactive editor.
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 <kbd>Tab</kbd> key to focus the button. To interact with the example, you will need to enable the interactive editor.
:::interactive_editor