Skip to content

Commit fd659ce

Browse files
pya35pya35
authored
Merge pull request #737 from Orange-OpenSource/update-article-disable-html
Update article disable html
2 parents c2d7e7a + 6eaf9f8 commit fd659ce

File tree

2 files changed

+120
-17
lines changed

2 files changed

+120
-17
lines changed

‎src/en/articles/disable-elements.md‎

Lines changed: 60 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,37 @@ title: "Disable HTML elements"
33
abstract: "How to disable HTML elements in the page?"
44
titleBeforeTag: true
55
date: "2021-07-01"
6+
updateDate: "2025-10-31"
67
tags:
78
- web
89
- beginner
910
---
1011

11-
## Disable form elements
12+
The deactivation of an interactive element is used to prevent the user from interacting with that component or its descendants.
1213

13-
The `disabled` attribute is used to disable form elements
14+
This technique should be used sparingly, depending on the components and the context of use.
1415

16+
## Disable a button
17+
18+
It is possible to disable a button by simply adding the `disabled` attribute:
1519
```html
1620
<button disabled>Delete</button>
17-
<input type="text" name="address" disabled>
1821
```
1922

20-
If a `<fieldset>` is disabled, the descendant form controls are all disabled.
23+
However, this technique is not recommended for a form submission button for various reasons, including low contrast, a button being unreachable via keyboard, and no information being provided to the user.
24+
25+
## Disable a form field
2126

27+
Like a button, a form field is disabled using the `disabled` attribute.
28+
29+
It is thus possible to disable an `input` field or a `textarea`:
2230
```html
23-
<fieldset id="group" disabled>
31+
<input type="text" name="address" disabled>
32+
<textarea id="area" name="comment" disabled>This is a disabled comment</textarea>
33+
```
34+
In the following example, the `input`, the `checkbox` and the `select` are disabled because they inherit the disabled state from the `<fieldset>`:
35+
```html
36+
<fieldset id="groupe" disabled>
2437
<input name="foo">
2538
<input type="checkbox" name="bar">
2639
<select name="values">
@@ -31,13 +44,49 @@ If a `<fieldset>` is disabled, the descendant form controls are all disabled.
3144
</fieldset>
3245
```
3346

47+
Similarly, on a `select`, the `disabled` attribute will affect all options within it:
48+
```html
49+
<label for="fruit-select" >Choose a fruit:</label>
50+
<select name="fruit" id="fruit-select" disabled>
51+
<option value="">Select a fruit</option>
52+
<option value="apple" disabled>Apple</option>
53+
<option value="banane">Banana</option>
54+
<option value="orange">Orange</option>
55+
</select>
56+
```
57+
58+
It is also possible to disable a single `option` within a `select`:
59+
```html
60+
<label for="fruit-select" >Choose a fruit:</label>
61+
<select name="fruits" id="fruit-select">
62+
<option value="">Select a fruit</option>
63+
<option value="apple" disabled>Apple</option>
64+
<option value="banana">Banane</option>
65+
<option value="orange">Orange</option>
66+
</select>
67+
```
68+
3469
## Disable a link
3570

36-
To disable a link, unlike the previous technique, the use of the `disabled` attribute is not allowed. It is still possible to disable a link by following 3 steps:
37-
- remove the `href` attribute so that it can no longer receive the focus
38-
- add a `role="link"` so that it is always considered a link by screen readers
39-
- add an attribute `aria-disabled="true"` so that it is indicated as being disabled
71+
To disable a link, the use of the `disabled` attribute is not allowed. However, it is possible to simulate a disabled state by following these three steps:
72+
- remove the `href` attribute so it can no longer receive focus
73+
- add `role="link"` so it is still recognized as a link by screen readers
74+
- add an `aria-disabled="true"` attribute to indicate that it is disabled.
75+
76+
<pre><code class="html">&lt;a role="link" aria-disabled="true"&gt;Disabled link&lt;/a&gt;</code></pre>
77+
78+
79+
## `read-only` attribute
80+
81+
The boolean attribute `read-only` controls whether a text field can be edited or not.
82+
It should not be used to disable other elements (such as buttons and other interactive components), as that is precisely the role of the `disabled` attribute.
4083

41-
<pre><code class="html">&lt;a role="link" aria-disabled="true"&gt; Disabled link &lt;/a&gt;</code></pre>
84+
The main difference between the two techniques is that a read-only element remains accessible via keyboard and is announced by assistive technologies; this can be useful for verifying information that has been previously entered (for example: an email, date of birth, phone number, etc.) without allowing modifications.
4285

43-
Check out Scott O'Hara's excellent article on the subject: <a href="https://www.scottohara.me/blog/2021/05/28/disabled-links.html">Disabling a link</a>.
86+
## Webography
87+
<ul>
88+
<li><a href="https://www.scottohara.me/blog/2021/05/28/disabled-links.html">Disabling a link - Scott O'Hara</a></li>
89+
<li><a href="https://adamsilver.io/blog/the-problem-with-disabled-buttons-and-what-to-do-instead/">The problem with disabled buttons and what to do instead - Adam Silver</a></li>
90+
<li><a href="https://adrianroselli.com/2024/02/dont-disable-form-controls.html">Don’t Disable Form Controls - Adrian Roselli</a></li>
91+
<li><a href="https://adrianroselli.com/2024/11/avoid-read-only-controls.html"">Avoid Read-only Controls - Adrian Roselli</a></li>
92+
</ul>

‎src/fr/articles/desactiver-des-elements.md‎

Lines changed: 60 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,40 @@ title: "Désactiver des éléments HTML"
33
abstract: "Comment désactiver des éléments d'une page ?"
44
titleBeforeTag: true
55
date: "2021-07-01"
6+
updateDate: "2025-10-31"
67
tags:
78
- web
89
- beginner
910
---
1011

11-
## Désactiver un champ de formulaire
12+
La désactivation d'un élément interactif sert à empêcher l'utilisateur d'interagir avec ce composant ou avec ses descendants.
13+
14+
Cette technique est à utiliser avec parcimonie, en fonction des composants et du contexte d'utilisation.
15+
16+
## Désactiver un bouton
1217

13-
Pour désactiver un champ de formulaire il suffit de lui attribuer l'attribut `disabled` :
18+
Il est possible de désactiver un bouton en lui ajoutant simplement l'attribut `disabled`&nbsp;:
1419

1520
```html
1621
<button disabled>Supprimer</button>
22+
```
23+
24+
Cependant, cette technique n'est pas recommandée pour un bouton de soumission de formulaire pour diverses raisons, notamment : faible contraste, bouton non atteignable au clavier, aucune information donnée à l'utilisateur.
25+
26+
## Désactiver un champ de formulaire
27+
28+
Comme pour un bouton, un champ de formulaire est désactivé avec l'attribut `disabled`.
29+
30+
Il est ainsi possible de désactiver un champ `input` ou une zone de saisie `textarea`&nbsp;:
31+
```html
1732
<input type="text" name="address" disabled>
33+
<textarea id="area" name="comment" disabled>This is a disabled comment</textarea>
1834
```
19-
Si `disable` est utilisé sur un `<fieldset>`, les éléments enfants sont désactivés.
35+
36+
Si `disabled` est utilisé sur un `<fieldset>`, les éléments enfants sont également désactivés.
37+
Dans l'exemple ci-dessous, l'`input`, la `checkbox` et le `select` sont désactivés car ils héritent de la désactivation sur le `fieldset`&nbsp;:
2038
```html
21-
<fieldset id="groupe" disabled>
39+
<fieldset id="groupe" disabled>
2240
<input name="foo">
2341
<input type="checkbox" name="bar">
2442
<select name="values">
@@ -29,13 +47,49 @@ Si `disable` est utilisé sur un `<fieldset>`, les éléments enfants sont désa
2947
</fieldset>
3048
```
3149

50+
De la même manière, sur un `select`, l'attribut `disabled` aura un effet sur tous les choix&nbsp;:
51+
```html
52+
<label for="fruit-select" >Choisir un fruit :</label>
53+
<select name="fruit" id="fruit-select" disabled>
54+
<option value="">Sélectionner un fruit</option>
55+
<option value="pomme" disabled>Pomme</option>
56+
<option value="banane">Banane</option>
57+
<option value="orange">Orange</option>
58+
</select>
59+
```
60+
61+
Il est aussi possible de désactiver une seule `option` présent dans le `select`&nbsp;:
62+
```html
63+
<label for="fruit-select" >Choisir un fruit :</label>
64+
<select name="fruits" id="fruit-select">
65+
<option value="">Sélectionner un fruit</option>
66+
<option value="pomme" disabled>Pomme</option>
67+
<option value="banane">Banane</option>
68+
<option value="orange">Orange</option>
69+
</select>
70+
```
71+
3272
## Désactiver un lien
3373

34-
Pour désactiver un lien, contrairement à la technique précédente, l'utilisation de l'attribut `disabled` n'est pas autorisée. Il est tout de même possible de désactiver un lien en suivant les 3 étapes suivantes :
74+
Pour désactiver un lien, l'utilisation de l'attribut `disabled` n'est pas autorisée. Cependant, il est possible de simuler une désactivation en suivant ces trois étapes&nbsp;:
3575
- supprimer l'attribut `href` pour qu'il ne puisse plus recevoir le focus
3676
- ajouter un `role="link"` pour qu'il soit toujours considéré comme un lien par les lecteurs d'écran
3777
- ajouter un attribut `aria-disabled="true"` pour qu'il soit indiqué comme étant désactivé
3878

3979
<pre><code class="html">&lt;a role="link" aria-disabled="true"&gt;Lien désactivé&lt;/a&gt;</code></pre>
4080

41-
Consultez l'excellent article de Scott O'Hara sur le sujet : <a href="https://www.scottohara.me/blog/2021/05/28/disabled-links.html" hreflang="en" lang="en">Disabling a link</a>.
81+
82+
## L'attribut de lecture seule `read-only`
83+
84+
L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un champ texte.
85+
Il ne faut pas utiliser cet attribut pour désactiver d'autres éléments (boutons et autres éléments interactifs), car cela est justement le rôle de l'attribut `disabled`.
86+
87+
La principale différence entre les deux techniques réside dans le fait qu'un élément en lecture seule sera toujours atteignable au clavier et restitué par les aides techniques ; cela peut avoir un intérêt pour vérifier, sans pouvoir modifier, une information précédemment renseignée (par exemple : un email, une date de naissance, un numéro de téléphone, etc.).
88+
89+
## Webographie
90+
<ul>
91+
<li><a href="https://www.scottohara.me/blog/2021/05/28/disabled-links.html" hreflang="en">Disabling a link - Scott O'Hara (en)</a></li>
92+
<li><a href="https://adamsilver.io/blog/the-problem-with-disabled-buttons-and-what-to-do-instead/" hreflang="en">The problem with disabled buttons and what to do instead - Adam Silver (en)</a></li>
93+
<li><a href="https://adrianroselli.com/2024/02/dont-disable-form-controls.html" hreflang="en">Don’t Disable Form Controls - Adrian Roselli (en)</a></li>
94+
<li><a href="https://adrianroselli.com/2024/11/avoid-read-only-controls.html" hreflang="en">Avoid Read-only Controls - Adrian Roselli (en)</a></li>
95+
</ul>

0 commit comments

Comments
 (0)