From 64c2deb5a470bdb03191564075f86cbab77ead68 Mon Sep 17 00:00:00 2001 From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com> Date: Wed, 25 Jun 2025 17:04:04 +0200 Subject: [PATCH 01/16] FR update --- src/fr/articles/desactiver-des-elements.md | 57 +++++++++++++++++++--- 1 file changed, 51 insertions(+), 6 deletions(-) diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md index cca152375e..121cc06ac8 100644 --- a/src/fr/articles/desactiver-des-elements.md +++ b/src/fr/articles/desactiver-des-elements.md @@ -3,22 +3,40 @@ title: "Désactiver des éléments HTML" abstract: "Comment désactiver des éléments d'une page ?" titleBeforeTag: true date: "2021-07-01" +updateDate: "2025-09-01" tags: - web - beginner --- -## Désactiver un champ de formulaire +En règle générale, la désactivation d'un élément interactif est utilisée pour empêcher l'utilisateur d'interagir avec ce composant ou avec ses descendants. + +Cette technique est à utiliser avec parcimonie, en fonction des composants et du contexte d'utilisation. + +## Désactiver un bouton -Pour désactiver un champ de formulaire il suffit de lui attribuer l'attribut `disabled` : +Il est possible de désactiver un bouton en lui ajoutant simplement l'attribut `disabled` : ```html +``` + +Cependant, cette technique n'est pas recommandée pour un bouton de soumission de formulaire pour diverses raisons, notamment : faible contraste, bouton non focusable, aucune information donnée à l'utilisateur. + +## Désactiver un champ de formulaire + +Comme pour un bouton, un champ de formulaire est désactivé avec l'attribut `disabled`. + +Il est ainsi possible de désactiver un champ ``input`` ou une zone de saisie ``textarea`` : +```html + ``` -Si `disable` est utilisé sur un `
`, les éléments enfants sont désactivés. + +Si `disabled` est utilisé sur un `
`, les éléments enfants sont également désactivés. +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`` : ```html -
+
+ + + + + +``` + +Il est aussi possible de désactiver une seule ``option`` présent dans le ``select`` : +```html + + +``` + ## Désactiver un lien -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 : +Pour désactiver un lien, 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 : - supprimer l'attribut `href` pour qu'il ne puisse plus recevoir le focus - ajouter un `role="link"` pour qu'il soit toujours considéré comme un lien par les lecteurs d'écran - ajouter un attribut `aria-disabled="true"` pour qu'il soit indiqué comme étant désactivé 
<a role="link" aria-disabled="true">Lien désactivé</a>
-Consultez l'excellent article de Scott O'Hara sur le sujet : Disabling a link. +## Webographie + From 7e3c1a1f2a1f05dcee360eee131348bd4a5f22bb Mon Sep 17 00:00:00 2001 From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com> Date: Wed, 25 Jun 2025 18:00:51 +0200 Subject: [PATCH 02/16] cancel changes from another PR --- src/en/articles/single-page-app.md | 30 ++++++++++++++---------------- src/fr/articles/single-page-app.md | 24 +++++++++++------------- 2 files changed, 25 insertions(+), 29 deletions(-) diff --git a/src/en/articles/single-page-app.md b/src/en/articles/single-page-app.md index aa7f6c3123..e2b212216b 100644 --- a/src/en/articles/single-page-app.md +++ b/src/en/articles/single-page-app.md @@ -3,7 +3,6 @@ title: "Recommendations for Single Page Applications" abstract: "Recommendations for Single Page Applications" titleBeforeTag: true date: "2021-06-25" -updateDate: "2025-09-01" tags: - web - advanced @@ -11,40 +10,39 @@ tags: A single-page web application (SPA) is a web application in which page refresh never occurs. During navigation, only portions of the page are dynamically updated using JavaScript code. -SPAs have met with enthusiasm since the advent of JavaScript frameworks: Angular, React or Vue to name only the most popular. In this article, the idea is not to take sides for or against SPAs. It must be recognized that used correctly, this type of framework can solve problems, especially when it is used in the design of large web applications. We will focus here on the difficulties that this can bring in terms of accessibility. +SPAs have met with enthusiasm since the advent of JavaScript frameworks: Angular, React or Vue to name only the most popular. In this article, the idea is not to take sides for or against PPS. It must be recognized that used correctly, this type of framework can solve problems, especially when it is used in the design of large web applications. We will focus here on the difficulties that this can bring in terms of accessibility. **Warning:** SPAs should never become the norm. If your need can be met with the help of a standard site you don't need to succumb to the hype. A standard website natively offers accessibility support and spares you the need to get started with a complex framework, skills training, maintenance or compatibility problems with old browsers. ## Update page title -Browsing through an SPA does not cause the browser to reload the page. No reloading means no modification of the page title (`title` tag). However, it is important that [each page has a unique title](https://a11y-guidelines.orange.com/en/web/develop/textual-content/#set-a-title-for-each-page). +Browsing through an SPA does not cause the browser to reload the page. However, it is important that [each page has a unique title](https://a11y-guidelines.orange.com/en/web/develop/textual-content/#set-a-title-for-each-page). -It will therefore be necessary to update the page title via Javascript (`document.title`). Refer to the documentation of the framework used to know if an implementation of this mechanism is proposed or if it must be created from scratch. +It will therefore be necessary to update the title of the page via Javascript (`document.title`). Refer to the documentation of the framework used to know if an implementation of this mechanism is proposed or if it must be created from scratch. ## Notify user of page changes -Screen readers used by visually impaired people automatically inform the user when a new page is loaded by the browser. With a SPA, page changes do not lead the browser to reload, a screen reader therefore has no way of warning the user. +Screen readers used by visually impaired people inform the user automatically when a new page is loaded by the browser. In the context of an SPA, page changes do not lead to reloading by the browser. The screen reader therefore has no way of warning the user. An acceptable solution is to move the focus to the first heading `

` of the current page. This will cause it to be read by the screen reader, so the user will be warned that a new page is displayed. Note that by default an `

` tag is not focusable. To allow it to receive focus via Javascript, you must add a `tabindex="-1"` attribute to it. ## Notify the user of updates inside the page -If some information is dynamically updated in the page (confirmation message, loading in progress, error display, etc., it is important to ensure that screen readers announce these changes. Several methods are available depending on the case: +If the information is dynamically updated in the page (confirmation message, loading in progress, error display, etc.). It is important to have screen readers announce these changes. Several methods are available depending on the case: - Move the focus to an element that has just been updated. -- Use ARIA as indicated in the following articles: [Use ARIA for status messages](https://a11y-guidelines.orange.com/en/articles/aria-status-messages/) and [The aria-live attribute and the role alert](https://a11y-guidelines.orange.com/en/articles/aria-live-alert/). +- Use ARIA as indicated in the following articles: [Use ARIA status, status or contextual messages](https://a11y-guidelines.orange.com/en/articles/aria-status-messages/) and [The aria-live attribute and the role alert](https://a11y-guidelines.orange.com/en/articles/aria-live-alert/). ## Move focus -On a classic website, when a user clicks on a link and a new page is displayed, the focus is automatically moved to the top of the page (on the `body`). So, for users who navigate using the keyboard, just use the `TAB` key to move around the page. +On a classic website, when a user clicks on a link and a new page is displayed, the focus is automatically repositioned at the top of the page (on the `body`). So for users who navigate using the keyboard, just use the `TAB` key to move around the page. -In a SPA, if a user clicks on a button that causes a content update, the focus is not moved (it remains on the button). -More importantly, if the page change makes the focused element disappear, the user will no longer know where he is on the page. This can also cause vocalization issues for screen reader users. +In a SPA, if a user clicks on a button that causes a content update, the focus is not moved (it remains on the button). More importantly, if the page change made the element that was in focus disappear, the user will no longer know where he is on the page. It can also cause vocalization issues for people who navigate using a screen reader. -It is therefore important to make sure to move the focus via Javascript when necessary. Likewise, if a modal dialog box is displayed on the screen, the focus must be positioned in the modal when it appears and then returned to the trigger element (a button for example) when it disappears. +It is therefore important to make sure to move the focus via Javascript when necessary. Likewise if a modal dialog box is displayed on the screen, the focus must be positioned in the box when it appears and then replaced on the original element (a button for example) when it disappears. -## Use HTML5 semantics +## Use HTML 5 semantics -SPA are often used in web applications. Sometimes the user has to deal with an interface that looks more like a native application than a website. It is important to ensure that the different areas are correctly identified: navigation, content, search area, etc. +SPA are often used in web applications. The user sometimes has to deal with an interface that looks more like a native application than that of a website. It is important to ensure that the different areas are correctly identified: navigation, content, search area, etc. If your application has specific areas, it is recommended to assign them a `label` so that they are quickly identifiable. For example using a `` tag and an `aria-label` or` aria-labelledby` attribute. @@ -60,11 +58,11 @@ If your application has specific areas, it is recommended to assign them a `labe </div> -See the article: [Landmarks ARIA](https://a11y-guidelines.orange.com/en/web/components-examples/landmarks/), to get more information on the use of these tags. +See the article: [ARIA regions or landmarks](https://a11y-guidelines.orange.com/en/web/components-examples/landmarks/), to get more information on the use of these tags. ## Manage browser history -Nothing could be more annoying than exiting an application when you simply wanted to return to the previous page using the browser's `previous` button. However, this is what sometimes happens in SPA. +Nothing could be more annoying than exiting an application when you simply wanted to go back to the previous page using the browser's `previous` button. However, this is what sometimes happens in SPA. The solution is to manipulate the browser history in Javascript using the [History API](https://developer.mozilla.org/en/docs/Web/API/History_API). This allows you to store the different states of the application and return to them using the `previous` and `next` buttons of the browser. @@ -74,7 +72,7 @@ The solution is to manipulate the browser history in Javascript using the [Histo - Notify the user of page changes - Notify the user of updates inside the page (ARIA) - Move focus -- Use HTML5 semantics +- Use HTML 5 semantics - Manage browser history (History API) ## Useful links diff --git a/src/fr/articles/single-page-app.md b/src/fr/articles/single-page-app.md index bc4d5a4eba..1e528b058b 100644 --- a/src/fr/articles/single-page-app.md +++ b/src/fr/articles/single-page-app.md @@ -3,7 +3,6 @@ title: "Recommandations pour les Single Page Applications (SPA)" abstract: "Recommandations pour les Single Page Applications" titleBeforeTag: true date: "2021-06-16" -updateDate: "2025-09-01" tags: - web - advanced @@ -23,31 +22,30 @@ Il faudra donc veiller à mettre à jour le titre de la page via Javascript (`do ## Prévenir l'utilisateur des changements de page -Les lecteurs d'écran utilisés par les personnes malvoyantes informent l'utilisateur automatiquement dès qu'une nouvelle page est chargée par le navigateur. Dans le cadre d'une SPA, les changements de page n'entraînent pas de rechargement par le navigateur, un lecteur d'écran n'a donc aucun moyen de prévenir l'utilisateur. +Les lecteurs d'écran utilisés par les personnes malvoyantes informent l'utilisateur automatiquement dès qu'une nouvelle page est chargée par le navigateur. Dans le cadre d'une SPA, les changements de page n'entraînent pas de rechargement par le navigateur. Le lecteur d'écran n'a donc aucun moyen de prévenir l'utilisateur. -Une solution acceptable consiste à déplacer le focus sur le premier titre `

` de la page courante. Ceci entraînera sa lecture par le lecteur d'écran, ainsi l'utilisateur sera prévenu qu'une nouvelle page est affichée. -À noter que par défaut une balise `

` n'est pas focusable. Pour l'autoriser à recevoir le focus via Javascript, il suffit de lui ajouter un attribut `tabindex="-1"`. +Une solution acceptable consiste à déplacer le focus sur le premier titre `

` de la page courante. Ceci entraînerra sa lecture par le lecteur d'écran, ainsi l'utilisateur sera prévenu qu'une nouvelle page est affichée. +À noter que par défaut une balise `

` n'est pas focusable. Pour L'autoriser à recevoir le focus via Javascript, il suffit de lui ajouter un attribut `tabindex="-1"`. ## Prévenir l'utilisateur des mises à jour à l'intérieur de la page -Si certaines informations sont mises à jour dynamiquement dans la page (message de confirmation, chargement en cours, affichage d'erreur…), il est important de faire en sorte que les lecteurs d'écran annoncent ces modifications. Plusieurs méthodes sont disponibles selon les cas : +Si certaines informations sont mises à jour dynamiquement dans la page (message de confirmation, chargement en cours, affichage d'erreur…). Il est important de faire en sorte que les lecteurs d'écran annoncent ces modifications. Plusieurs méthodes sont disponibles selon les cas : - Déplacer le focus sur un élément qui vient d'être mis à jour. -- Utiliser de l'ARIA comme indiqué dans les articles suivants : [Utiliser ARIA, les messages d'état, de statut ou contextuel](https://a11y-guidelines.orange.com/fr/articles/messages-de-statut-aria/) et [L'attribut aria-live et le role alert](https://a11y-guidelines.orange.com/fr/articles/aria-live-alert/). +- Utiliser de l'ARIA comme indiqué dans les articles suivants : [Utiliser ARIA les messages d'état, de statut ou contextuel](https://a11y-guidelines.orange.com/fr/articles/messages-de-statut-aria/) et [L'attribut aria-live et le role alert](https://a11y-guidelines.orange.com/fr/articles/aria-live-alert/). ## Déplacer le focus -Sur un site web classique, lorsqu'un utilisateur clique sur un lien et qu'une nouvelle page s'affiche, le focus est automatiquement repositionné en haut de page (sur le `body`). Ainsi, pour les utilisateurs qui naviguent à l'aide du clavier, il suffit d'utiliser la touche `TAB` pour se déplacer dans la page. +Sur un site web classique, lorsqu'un utilisateur clique sur un lien et qu'une nouvelle page s'affiche, le focus est automatiquement repositionné en haut de page (sur le `body`). Ainsi pour les utilisateurs qui naviguent à l'aide du clavier, il suffit d'utiliser la touche `TAB` pour se déplacer dans la page. -Dans une SPA, si un utilisateur clique sur un bouton qui entraîne une mise jour du contenu, le focus n'est pas déplacé (il reste sur le bouton). -Plus important encore, si le changement de contenu fait disparaître l'élément sur lequel était positionné le focus, l'utilisateur ne sait plus où il se trouve dans la page. Cela peut également entraîner des problèmes de vocalisation pour les utilisateurs de lecteur d'écran. +Dans une SPA, si un utilisateur clique sur un bouton qui entraîne une mise jour du contenu, le focus n'est pas déplacé (il reste sur le bouton). Plus important encore, si le changement de page a fait disparaître l'élément sur lequel était positionné le focus, l'utilisateur ne sait plus où il est dans la page. Cela peut également entraîner des problèmes de vocalisation pour les personnes qui naviguent à l'aide d'un lecteur d'écran. -Il est donc important de veiller à déplacer le focus via Javascript lorsque cela est nécessaire. De même, si une boite de dialogue (fenêtre modale) est affichée à l'écran, le focus doit être positionné dans la modale lors de son apparition puis replacé sur l'élément déclencheur (un bouton par exemple) lors de sa disparition. +Il est donc important de veiller à déplacer le focus via Javascript lorsque cela est nécessaire. De même si une boite de dialogue modale est affichée à l'écran, le focus doit être positionné dans la boite lors de son apparition puis replacé sur l'élément d'origine (un bouton par exemple) lors de sa disparition. -## Utiliser la sémantique HTML5 +## Utiliser la sémantique HTML 5 Les SPA sont souvent utilisées dans le cadre d'applications Web. L'utilisateur doit composer parfois avec une interface qui s'apparente plus a une application native qu'à celle d'un site Web. Il est important de veiller à identifier correctement les différentes zones : navigation, contenu, zone de recherche… -Si votre application possède des zones spécifiques, il est recommandé de leur attribuer un `label` afin qu'elles soient rapidement identifiables. Par exemple, à l'aide d'une balise `` et d'un attribut `aria-label` ou `aria-labelledby`. +Si votre application possèdent des zones spécifiques, il est recommandé de leur attribuer un `label` afin qu'elles soient rapidement identifiables. Par exemple à l'aide d'une balise `` et d'un attribut `aria-label` ou `aria-labelledby`. 

 <div role="region" aria-label="moniteur d'activité">
@@ -75,7 +73,7 @@ La solution consiste à manipuler l'historique du navigateur en Javascript à l'
 - Prévenir l'utilisateur des changements de page 
 - Prévenir l'utilisateur des mises à jour à l'intérieur de la page (ARIA)
 - Déplacer le focus
-- Utiliser la sémantique HTML5
+- Utiliser la sémantique HTML 5
 - Gérer l'historique du navigateur (History API)
 
 ## Liens utiles 

From e0425c0381c0b40f279bfd9400ddbe89fd20d5ce Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:28:20 +0200
Subject: [PATCH 03/16] Update src/fr/articles/desactiver-des-elements.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index 121cc06ac8..04c5a64604 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -9,7 +9,7 @@ tags:
   - beginner
 ---
 
-En règle générale, la désactivation d'un élément interactif est utilisée pour empêcher l'utilisateur d'interagir avec ce composant ou avec ses descendants.
+En règle générale, la désactivation d'un élément interactif sert à empêcher l'utilisateur d'interagir avec ce composant ou avec ses descendants.
 
 Cette technique est à utiliser avec parcimonie, en fonction des composants et du contexte d'utilisation.
 

From e7e239748b8997ddbc16633e309a079d2a8f4ee0 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:29:45 +0200
Subject: [PATCH 04/16] Update src/fr/articles/desactiver-des-elements.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index 04c5a64604..f08de0a3aa 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -34,7 +34,7 @@ Il est ainsi possible de désactiver un champ ``input`` ou une zone de saisie ``
 ```
 
 Si `disabled` est utilisé sur un `
`, les éléments enfants sont également désactivés. 
-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`` :
+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` :
 ```html
 

      

From 2b83931e57eeff62b8884431c314a6257f917c41 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:29:57 +0200
Subject: [PATCH 05/16] Update src/fr/articles/desactiver-des-elements.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index f08de0a3aa..e0ad3f1abf 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -27,7 +27,7 @@ Cependant, cette technique n'est pas recommandée pour un bouton de soumission d
 
 Comme pour un bouton, un champ de formulaire est désactivé avec l'attribut `disabled`.
 
-Il est ainsi possible de désactiver un champ ``input`` ou une zone de saisie ``textarea`` :
+Il est ainsi possible de désactiver un champ `input` ou une zone de saisie `textarea` :
 ```html
 
 

From 8f6f0ffed882a2a2a35e34e10f92c84fc5f348c0 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:30:18 +0200
Subject: [PATCH 06/16] Update src/fr/articles/desactiver-des-elements.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index e0ad3f1abf..e03ba51849 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -58,7 +58,7 @@ De la même manière, sur un ``select``, l'attribut ``disabled`` aura un effet s
 
 ```
 
-Il est aussi possible de désactiver une seule ``option`` présent dans le ``select`` :
+Il est aussi possible de désactiver une seule `option` présent dans le `select` :
 ```html
 
 
@@ -71,7 +71,7 @@ Il est aussi possible de désactiver une seule `option` présent dans le `select
 
 ## Désactiver un lien
 
-Pour désactiver un lien, 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 : 
+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 : 
 - supprimer l'attribut `href` pour qu'il ne puisse plus recevoir le focus
 - ajouter un `role="link"` pour qu'il soit toujours considéré comme un lien par les lecteurs d'écran
 - ajouter un attribut `aria-disabled="true"` pour qu'il soit indiqué comme étant désactivé  
@@ -80,7 +80,7 @@ Pour désactiver un lien, l'utilisation de l'attribut `disabled` n'est pas autor
 
 ## Webographie
 

From 5e1cc7ee62531238410f6497d20947f9063095f3 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Mon, 30 Jun 2025 13:55:24 +0200
Subject: [PATCH 08/16] Update src/fr/articles/desactiver-des-elements.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index 49d8760f07..f618b9cdce 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -9,7 +9,7 @@ tags:
   - beginner
 ---
 
-En règle générale, la désactivation d'un élément interactif sert à empêcher l'utilisateur d'interagir avec ce composant ou avec ses descendants.
+La désactivation d'un élément interactif sert à empêcher l'utilisateur d'interagir avec ce composant ou avec ses descendants.
 
 Cette technique est à utiliser avec parcimonie, en fonction des composants et du contexte d'utilisation.
 

From bc80d8fbf115c6d4b94758b2a89b087dc3e3ff70 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Mon, 30 Jun 2025 17:08:51 +0200
Subject: [PATCH 09/16] Update src/fr/articles/desactiver-des-elements.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mewen Le Hô <92363071+MewenLeHo@users.noreply.github.com>
---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index f618b9cdce..8d10c10dfd 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -82,5 +82,5 @@ Pour désactiver un lien, l'utilisation de l'attribut `disabled` n'est pas autor
 

From e92760dc20916e7ac11425110d141f59ce010925 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Wed, 9 Jul 2025 13:59:07 +0200
Subject: [PATCH 10/16] add read-only paragraph

---
 src/fr/articles/desactiver-des-elements.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index 8d10c10dfd..81c8bddc7a 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -78,9 +78,19 @@ Pour désactiver un lien, l'utilisation de l'attribut `disabled` n'est pas autor
 
 
<a role="link" aria-disabled="true">Lien désactivé</a>

 
+
+## L'attribut de lecture seule `read-only`
+
+L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un champ texte.
+
+Il ne faut pas utiliser cet attribut pour désactiver d'autres éléments (notamment les cases à cocher ou les boutons radio), car cela est justement le rôle de l'attribut `disabled`.
+
+La principale différence entre les 2 techniques réside dans le fait qu'un élément en lecture 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.).
+
 ## Webographie
 

From 7ffc5ff3fe6144c16ef693b31e1238eff4ec1dcb Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Tue, 15 Jul 2025 15:22:59 +0200
Subject: [PATCH 11/16] remove file from PR

---
 src/en/articles/single-page-app.md | 31 +++++++++++++++---------------
 src/fr/articles/single-page-app.md | 25 ++++++++++++------------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/en/articles/single-page-app.md b/src/en/articles/single-page-app.md
index a1700f9c15..958dd2deaa 100644
--- a/src/en/articles/single-page-app.md
+++ b/src/en/articles/single-page-app.md
@@ -3,7 +3,7 @@ title: "Recommendations for Single Page Applications"
 abstract: "Recommendations for Single Page Applications"
 titleBeforeTag: true
 date: "2021-06-25"
-updateDate: "2025-09-15"
+updateDate: "2025-07-04"
 tags:
   - web
   - advanced
@@ -11,39 +11,40 @@ tags:
    
 A single-page web application (SPA) is a web application in which page refresh never occurs. During navigation, only portions of the page are dynamically updated using JavaScript code. 
 
-SPAs have met with enthusiasm since the advent of JavaScript frameworks: Angular, React or Vue to name only the most popular. In this article, the idea is not to take sides for or against PPS. It must be recognized that used correctly, this type of framework can solve problems, especially when it is used in the design of large web applications. We will focus here on the difficulties that this can bring in terms of accessibility. 
+SPAs have met with enthusiasm since the advent of JavaScript frameworks: Angular, React or Vue to name only the most popular. In this article, the idea is not to take sides for or against SPAs. It must be recognized that used correctly, this type of framework can solve problems, especially when it is used in the design of large web applications. We will focus here on the difficulties that this can bring in terms of accessibility. 
 
 **Warning:** SPAs should never become the norm. If your need can be met with the help of a standard site you don't need to succumb to the hype. A standard website natively offers accessibility support and spares you the need to get started with a complex framework, skills training, maintenance or compatibility problems with old browsers. 
 
 ## Update page title
-Browsing through an SPA does not cause the browser to reload the page. However, it is important that [each page has a unique title](https://a11y-guidelines.orange.com/en/web/develop/textual-content/#set-a-title-for-each-page).
+Browsing through an SPA does not cause the browser to reload the page. No reloading means no modification of the page title (`title` tag). However, it is important that [each page has a unique title](https://a11y-guidelines.orange.com/en/web/develop/textual-content/#set-a-title-for-each-page).
 
-It will therefore be necessary to update the title of the page via Javascript (`document.title`). Refer to the documentation of the framework used to know if an implementation of this mechanism is proposed or if it must be created from scratch. 
+It will therefore be necessary to update the page title via Javascript (`document.title`). Refer to the documentation of the framework used to know if an implementation of this mechanism is proposed or if it must be created from scratch. 
 
 ## Notify user of page changes 
 
-Screen readers used by visually impaired people inform the user automatically when a new page is loaded by the browser. In the context of an SPA, page changes do not lead to reloading by the browser. The screen reader therefore has no way of warning the user.
+Screen readers used by visually impaired people automatically inform the user when a new page is loaded by the browser. With a SPA, page changes do not lead the browser to reload, a screen reader therefore has no way of warning the user.
 
 An acceptable solution is to move the focus to the first heading `
` of the current page. This will cause it to be read by the screen reader, so the user will be warned that a new page is displayed.
 Note that by default an `
` tag is not focusable. To allow it to receive focus via Javascript, you must add a `tabindex="-1"` attribute to it. 
 
 ## Notify the user of updates inside the page 
 
-If the information is dynamically updated in the page (confirmation message, loading in progress, error display, etc.). It is important to have screen readers announce these changes. Several methods are available depending on the case:
+If some information is dynamically updated in the page (confirmation message, loading in progress, error display, etc., it is important to ensure that screen readers announce these changes. Several methods are available depending on the case:
 - Move the focus to an element that has just been updated.
-- Use ARIA as indicated in the following articles: [Use ARIA status, status or contextual messages](https://a11y-guidelines.orange.com/en/articles/aria-status-messages/) and [The aria-live attribute and the role alert](https://a11y-guidelines.orange.com/en/articles/aria-live-alert/). 
+- Use ARIA as indicated in the following articles: [Use ARIA for status messages](https://a11y-guidelines.orange.com/en/articles/aria-status-messages/) and [The aria-live attribute and the role alert](https://a11y-guidelines.orange.com/en/articles/aria-live-alert/). 
 
 ## Move focus
 
-On a classic website, when a user clicks on a link and a new page is displayed, the focus is automatically repositioned at the top of the page (on the `body`). So for users who navigate using the keyboard, just use the `TAB` key to move around the page.
+On a classic website, when a user clicks on a link and a new page is displayed, the focus is automatically moved to the top of the page (on the `body`). So, for users who navigate using the keyboard, just use the `TAB` key to move around the page.
 
-In a SPA, if a user clicks on a button that causes a content update, the focus is not moved (it remains on the button). More importantly, if the page change made the element that was in focus disappear, the user will no longer know where he is on the page. It can also cause vocalization issues for people who navigate using a screen reader.
+In a SPA, if a user clicks on a button that causes a content update, the focus is not moved (it remains on the button). 
+More importantly, if the page change makes the focused element disappear, the user will no longer know where he is on the page. This can also cause vocalization issues for screen reader users.
 
-It is therefore important to make sure to move the focus via Javascript when necessary. Likewise if a modal dialog box is displayed on the screen, the focus must be positioned in the box when it appears and then replaced on the original element (a button for example) when it disappears. 
+It is therefore important to make sure to move the focus via Javascript when necessary. Likewise, if a modal dialog box is displayed on the screen, the focus must be positioned in the modal when it appears and then returned to the trigger element (a button for example) when it disappears. 
 
-## Use HTML 5 semantics
+## Use HTML5 semantics
 
-SPA are often used in web applications. The user sometimes has to deal with an interface that looks more like a native application than that of a website. It is important to ensure that the different areas are correctly identified: navigation, content, search area, etc.
+SPA are often used in web applications. Sometimes the user has to deal with an interface that looks more like a native application than a website. It is important to ensure that the different areas are correctly identified: navigation, content, search area, etc.
 
 If your application has specific areas, it is recommended to assign them a `label` so that they are quickly identifiable. For example using a `` tag and an `aria-label` or` aria-labelledby` attribute. 
 
@@ -59,11 +60,11 @@ If your application has specific areas, it is recommended to assign them a `labe
 </div>
-See the article: [ARIA regions or landmarks](https://a11y-guidelines.orange.com/en/web/components-examples/landmarks/), to get more information on the use of these tags. +See the article: [Landmarks ARIA](https://a11y-guidelines.orange.com/en/web/components-examples/landmarks/), to get more information on the use of these tags. ## Manage browser history -Nothing could be more annoying than exiting an application when you simply wanted to go back to the previous page using the browser's `previous` button. However, this is what sometimes happens in SPA. +Nothing could be more annoying than exiting an application when you simply wanted to return to the previous page using the browser's `previous` button. However, this is what sometimes happens in SPA. The solution is to manipulate the browser history in Javascript using the [History API](https://developer.mozilla.org/en/docs/Web/API/History_API). This allows you to store the different states of the application and return to them using the `previous` and `next` buttons of the browser. @@ -73,7 +74,7 @@ The solution is to manipulate the browser history in Javascript using the [Histo - Notify the user of page changes - Notify the user of updates inside the page (ARIA) - Move focus -- Use HTML 5 semantics +- Use HTML5 semantics - Manage browser history (History API) ## Useful links diff --git a/src/fr/articles/single-page-app.md b/src/fr/articles/single-page-app.md index a4225d24eb..2766385c7d 100644 --- a/src/fr/articles/single-page-app.md +++ b/src/fr/articles/single-page-app.md @@ -3,7 +3,7 @@ title: "Recommandations pour les Single Page Applications (SPA)" abstract: "Recommandations pour les Single Page Applications" titleBeforeTag: true date: "2021-06-16" -updateDate: "2025-09-15" +updateDate: "2025-07-04" tags: - web - advanced @@ -23,30 +23,31 @@ Il faudra donc veiller à mettre à jour le titre de la page via Javascript (`do ## Prévenir l'utilisateur des changements de page -Les lecteurs d'écran utilisés par les personnes malvoyantes informent l'utilisateur automatiquement dès qu'une nouvelle page est chargée par le navigateur. Dans le cadre d'une SPA, les changements de page n'entraînent pas de rechargement par le navigateur. Le lecteur d'écran n'a donc aucun moyen de prévenir l'utilisateur. +Les lecteurs d'écran utilisés par les personnes malvoyantes informent l'utilisateur automatiquement dès qu'une nouvelle page est chargée par le navigateur. Dans le cadre d'une SPA, les changements de page n'entraînent pas de rechargement par le navigateur, un lecteur d'écran n'a donc aucun moyen de prévenir l'utilisateur. -Une solution acceptable consiste à déplacer le focus sur le premier titre `

` de la page courante. Ceci entraînerra sa lecture par le lecteur d'écran, ainsi l'utilisateur sera prévenu qu'une nouvelle page est affichée. -À noter que par défaut une balise `

` n'est pas focusable. Pour L'autoriser à recevoir le focus via Javascript, il suffit de lui ajouter un attribut `tabindex="-1"`. +Une solution acceptable consiste à déplacer le focus sur le premier titre `

` de la page courante. Ceci entraînera sa lecture par le lecteur d'écran, ainsi l'utilisateur sera prévenu qu'une nouvelle page est affichée. +À noter que par défaut une balise `

` n'est pas focusable. Pour l'autoriser à recevoir le focus via Javascript, il suffit de lui ajouter un attribut `tabindex="-1"`. ## Prévenir l'utilisateur des mises à jour à l'intérieur de la page -Si certaines informations sont mises à jour dynamiquement dans la page (message de confirmation, chargement en cours, affichage d'erreur…). Il est important de faire en sorte que les lecteurs d'écran annoncent ces modifications. Plusieurs méthodes sont disponibles selon les cas : +Si certaines informations sont mises à jour dynamiquement dans la page (message de confirmation, chargement en cours, affichage d'erreur…), il est important de faire en sorte que les lecteurs d'écran annoncent ces modifications. Plusieurs méthodes sont disponibles selon les cas : - Déplacer le focus sur un élément qui vient d'être mis à jour. -- Utiliser de l'ARIA comme indiqué dans les articles suivants : [Utiliser ARIA les messages d'état, de statut ou contextuel](https://a11y-guidelines.orange.com/fr/articles/messages-de-statut-aria/) et [L'attribut aria-live et le role alert](https://a11y-guidelines.orange.com/fr/articles/aria-live-alert/). +- Utiliser de l'ARIA comme indiqué dans les articles suivants : [Utiliser ARIA, les messages d'état, de statut ou contextuel](https://a11y-guidelines.orange.com/fr/articles/messages-de-statut-aria/) et [L'attribut aria-live et le role alert](https://a11y-guidelines.orange.com/fr/articles/aria-live-alert/). ## Déplacer le focus -Sur un site web classique, lorsqu'un utilisateur clique sur un lien et qu'une nouvelle page s'affiche, le focus est automatiquement repositionné en haut de page (sur le `body`). Ainsi pour les utilisateurs qui naviguent à l'aide du clavier, il suffit d'utiliser la touche `TAB` pour se déplacer dans la page. +Sur un site web classique, lorsqu'un utilisateur clique sur un lien et qu'une nouvelle page s'affiche, le focus est automatiquement repositionné en haut de page (sur le `body`). Ainsi, pour les utilisateurs qui naviguent à l'aide du clavier, il suffit d'utiliser la touche `TAB` pour se déplacer dans la page. -Dans une SPA, si un utilisateur clique sur un bouton qui entraîne une mise jour du contenu, le focus n'est pas déplacé (il reste sur le bouton). Plus important encore, si le changement de page a fait disparaître l'élément sur lequel était positionné le focus, l'utilisateur ne sait plus où il est dans la page. Cela peut également entraîner des problèmes de vocalisation pour les personnes qui naviguent à l'aide d'un lecteur d'écran. +Dans une SPA, si un utilisateur clique sur un bouton qui entraîne une mise jour du contenu, le focus n'est pas déplacé (il reste sur le bouton). +Plus important encore, si le changement de contenu fait disparaître l'élément sur lequel était positionné le focus, l'utilisateur ne sait plus où il se trouve dans la page. Cela peut également entraîner des problèmes de vocalisation pour les utilisateurs de lecteur d'écran. -Il est donc important de veiller à déplacer le focus via Javascript lorsque cela est nécessaire. De même si une boite de dialogue modale est affichée à l'écran, le focus doit être positionné dans la boite lors de son apparition puis replacé sur l'élément d'origine (un bouton par exemple) lors de sa disparition. +Il est donc important de veiller à déplacer le focus via Javascript lorsque cela est nécessaire. De même, si une boite de dialogue (fenêtre modale) est affichée à l'écran, le focus doit être positionné dans la modale lors de son apparition puis replacé sur l'élément déclencheur (un bouton par exemple) lors de sa disparition. -## Utiliser la sémantique HTML 5 +## Utiliser la sémantique HTML5 Les SPA sont souvent utilisées dans le cadre d'applications Web. L'utilisateur doit composer parfois avec une interface qui s'apparente plus a une application native qu'à celle d'un site Web. Il est important de veiller à identifier correctement les différentes zones : navigation, contenu, zone de recherche… -Si votre application possèdent des zones spécifiques, il est recommandé de leur attribuer un `label` afin qu'elles soient rapidement identifiables. Par exemple à l'aide d'une balise `` et d'un attribut `aria-label` ou `aria-labelledby`. +Si votre application possède des zones spécifiques, il est recommandé de leur attribuer un `label` afin qu'elles soient rapidement identifiables. Par exemple, à l'aide d'une balise `` et d'un attribut `aria-label` ou `aria-labelledby`. 

 <div role="region" aria-label="moniteur d'activité">
@@ -74,7 +75,7 @@ La solution consiste à manipuler l'historique du navigateur en Javascript à l'
 - Prévenir l'utilisateur des changements de page 
 - Prévenir l'utilisateur des mises à jour à l'intérieur de la page (ARIA)
 - Déplacer le focus
-- Utiliser la sémantique HTML 5
+- Utiliser la sémantique HTML5
 - Gérer l'historique du navigateur (History API)
 
 ## Liens utiles 

From 8166b1b0b0974fc74f7afe6db2d10c2436827926 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Tue, 15 Jul 2025 15:26:06 +0200
Subject: [PATCH 12/16] update

---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index 81c8bddc7a..c80327acc1 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -85,7 +85,7 @@ L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un ch
 
 Il ne faut pas utiliser cet attribut pour désactiver d'autres éléments (notamment les cases à cocher ou les boutons radio), car cela est justement le rôle de l'attribut `disabled`.
 
-La principale différence entre les 2 techniques réside dans le fait qu'un élément en lecture 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.).
+La principale différence entre les 2 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.).
 
 ## Webographie
 
    

From 7d7818c38b340660f1c484b78309313fd410340d Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Wed, 23 Jul 2025 15:05:43 +0200
Subject: [PATCH 13/16] update after review

---
 src/fr/articles/desactiver-des-elements.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index c80327acc1..ff2cc9c334 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -81,9 +81,7 @@ Pour désactiver un lien, l'utilisation de l'attribut `disabled` n'est pas autor
 
 ## L'attribut de lecture seule `read-only`
 
-L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un champ texte.
-
-Il ne faut pas utiliser cet attribut pour désactiver d'autres éléments (notamment les cases à cocher ou les boutons radio), car cela est justement le rôle de l'attribut `disabled`.
+L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un champ texte. 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`.
 
 La principale différence entre les 2 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.).
 

From 01a514c79fc070ffb46d15a4efc2e7589014c456 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Wed, 23 Jul 2025 15:09:32 +0200
Subject: [PATCH 14/16] update after review

---
 src/fr/articles/desactiver-des-elements.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index ff2cc9c334..a5880ccaa8 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -81,7 +81,8 @@ Pour désactiver un lien, l'utilisation de l'attribut `disabled` n'est pas autor
 
 ## L'attribut de lecture seule `read-only`
 
-L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un champ texte. 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`.
+L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un champ texte. 
+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`.
 
 La principale différence entre les 2 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.).
 

From 61bbb0c441349b83952e6578e5dc3bd9686d7cd6 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Ayoul <105045667+pya35@users.noreply.github.com>
Date: Wed, 23 Jul 2025 15:12:54 +0200
Subject: [PATCH 15/16] add source link author

---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index a5880ccaa8..0313ad9a12 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -91,5 +91,5 @@ La principale différence entre les 2 techniques réside dans le fait qu'un él
   
  • Disabling a link - Scott O'Hara (en)
    • 
   
  • The problem with disabled buttons and what to do instead - Adam Silver (en)
    • 
   
  • Don’t Disable Form Controls - Adrian Roselli (en)
    • 
-  
  • Avoid Read-only Controls (en)
    • 
+  
  • Avoid Read-only Controls - Adrian Roselli  (en)
    • 
 


From 149808f00c8baff3bd243460ee29aea2055d5cd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mewen=20Le=20H=C3=B4?=
 <92363071+MewenLeHo@users.noreply.github.com>
Date: Fri, 25 Jul 2025 09:16:41 +0200
Subject: [PATCH 16/16] Update src/fr/articles/desactiver-des-elements.md

---
 src/fr/articles/desactiver-des-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fr/articles/desactiver-des-elements.md b/src/fr/articles/desactiver-des-elements.md
index 0313ad9a12..767a2ee88d 100644
--- a/src/fr/articles/desactiver-des-elements.md
+++ b/src/fr/articles/desactiver-des-elements.md
@@ -84,7 +84,7 @@ Pour désactiver un lien, l'utilisation de l'attribut `disabled` n'est pas autor
 L'attribut booléen `read-only` contrôle la possibilité ou non d'éditer un champ texte. 
 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`.
 
-La principale différence entre les 2 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.).
+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.).
 
 ## Webographie