` ou le tag ``. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu.
+La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag `
` ou le tag ``. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu.
_Exemple 1: Code d_’_une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions._
@@ -44,13 +44,13 @@ _Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuv
## ARIA
-[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus.
+[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus.
> **Attention :** Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et **les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA**.
Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué.
-Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène.
+Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène.
_Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes._
@@ -77,15 +77,15 @@ _Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà p
```
-Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit.
+Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit.
### Les changement représentationnels
-Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre.
+Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre.
#### Les Changements d'états
-Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :
+Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :
- **`aria-checked`** indique l’état d'une case à cocher ou d'un bouton radio,
- **`aria-disabled`** indique qu’un élément est visible, mais désactivé,
@@ -137,7 +137,7 @@ var showTip = function(el) {
ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un **`role`** de `menubar` et chaque {{ HTMLElement("li") }} devrait avoir un **`role`** de `menuitem`. Le **`role`** d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau **`role`**.
-Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le **`role`** ARIA à `button`, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le **`role`** attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique).
+Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le **`role`** ARIA à `button`, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le **`role`** attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique).
Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un **`role`** de `button`, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}.
diff --git a/files/fr/web/accessibility/aria/aria_guides/index.md b/files/fr/web/accessibility/aria/aria_guides/index.md
index cc9585dc68..d4bc6707fb 100644
--- a/files/fr/web/accessibility/aria/aria_guides/index.md
+++ b/files/fr/web/accessibility/aria/aria_guides/index.md
@@ -14,7 +14,7 @@ original_slug: Accessibilité/ARIA/Guides_ARIA
- Labelliser les composants composés (Composite Widgets) et des zones (Regions)
- Gérer le focus dans les composants composés (`aria-activedescendant` vs roving tabindex)
- Utiliser les rôles de points de repère (Landmark Roles)
-- Traiter les actualisations dynamiques & des zones « Live »
+- Traiter les actualisations dynamiques & des zones « Live »
- Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance
- Utiliser le Glisser & déposer
- Notifier les utilisateurs sur les lecteurs d’écran non-ARIA
diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.md b/files/fr/web/accessibility/aria/aria_live_regions/index.md
index 65b9feb178..b84f8b63fe 100644
--- a/files/fr/web/accessibility/aria/aria_live_regions/index.md
+++ b/files/fr/web/accessibility/aria/aria_live_regions/index.md
@@ -10,25 +10,25 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA
---
## Introduction
-Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.
+Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.
-## Zones « live » basiques
+## Zones « live » basiques
-Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.
+Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.
-- aria-live :
- - : L’attribut `aria-live=VALEUR_POLITESSE` est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : `off`/`polite`/`assertive`. La valeur par défaut est `off`. Cet attribut est de loin le plus important.
-- aria-controls :
+- aria-live :
+ - : L’attribut `aria-live=VALEUR_POLITESSE` est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : `off`/`polite`/`assertive`. La valeur par défaut est `off`. Cet attribut est de loin le plus important.
+- aria-controls :
- - : L’attribut `aria-controls=[LISTE_IDs]` est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un `ID` dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : `aria-controls="maZoneID1 maZoneID2"`.
+ - : L’attribut `aria-controls=[LISTE_IDs]` est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un `ID` dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : `aria-controls="maZoneID1 maZoneID2"`.
- > **Attention :** Nous ne savons pas si `aria-controls` pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.
+ > **Attention :** Nous ne savons pas si `aria-controls` pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.
Normalement, seul `aria-live="polite"` est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé.
Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec `aria-live="off"`.
-### Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran
+### Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran
Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie.
@@ -40,22 +40,22 @@ Un site web spécialisé dans l’ornithologie fournit une liste déroulante ave
Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur `polite`, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi.
-## Préférences de rôles pour les zones « live » spécialisées
+## Préférences de rôles pour les zones « live » spécialisées
-Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :
+Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :
| Rôle | Description | Compatibilité |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| log | Chat, erreur, jeux ou autres types de journalisation | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. |
| status | Une barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant. | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. |
| alert | Message d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes) | Pour maximiser la compatibilité, ajouter un `aria-live="assertive"` redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS. |
-| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | |
-| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | |
-| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | |
+| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | |
+| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | |
+| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | |
-## Zones « live » avancées
+## Zones « live » avancées
-(TBD : Qu'est-ce qui est pris en charge par qui ?)
+(TBD : Qu'est-ce qui est pris en charge par qui ?)
Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML).
@@ -64,13 +64,13 @@ The Paciello Group propose des [informations sur l'état du support des zones "L
- aria-atomic :
- : L’attribut `aria-atomic=BOOLÉEN` est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont `false`/`true`. La valeur par défaut est `false`.
- aria-relevant :
- - : L’attribut `aria-relevant=[LISTE_DES_CHANGEMENTS]` est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont `additions` (addition)/`removals` (suppression)/`text` (texte)/`all` (tous). La valeur par défaut est « `additions text`. »
+ - : L’attribut `aria-relevant=[LISTE_DES_CHANGEMENTS]` est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont `additions` (addition)/`removals` (suppression)/`text` (texte)/`all` (tous). La valeur par défaut est « `additions text`. »
- aria-labelledby :
- - : L’attribut `aria-labelledby=[LISTE_ID]` est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace.
+ - : L’attribut `aria-labelledby=[LISTE_ID]` est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace.
- aria-describedby :
- : L'attribut `aria-describedby=[LISTE_ID]` est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'identifiant pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace.
-### Cas d’étude avancé : liste de contacts
+### Cas d’étude avancé : liste de contacts
Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page).
@@ -80,10 +80,10 @@ Un site de chat voudrait afficher la liste des utilisateurs actuellement connect
```
-#### Détails des propriétés « live » d’ARIA :
+#### Détails des propriétés « live » d’ARIA :
-- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture.
+- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture.
- L’attribut `aria-atomic` n’est pas défini (`false` par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour.
- L’attribut `aria-relevant="additions removals"` assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus.
-TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".
+TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".
diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.md b/files/fr/web/accessibility/aria/aria_techniques/index.md
index 74687a3930..b5215fc235 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/index.md
+++ b/files/fr/web/accessibility/aria/aria_techniques/index.md
@@ -97,7 +97,7 @@ Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôle
- [aria-valuenow](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow)
- [aria-valuetext](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext)
-#### Attributs de zones « live »
+#### Attributs de zones « live »
- aria-live
- aria-relevant
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md
index 3a9521f0a3..38bf80ffa9 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md
@@ -13,7 +13,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog
Cette technique présente l’utilisation du rôle [`alertdialog`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog) role.
-Le rôle `alertdialog` est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, `alertdialog` est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’[utilisation du rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` :
+Le rôle `alertdialog` est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, `alertdialog` est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’[utilisation du rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` :
- La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de `aria-labelledby` ou de `aria-label`) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut `aria-describedby`).
- Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue.
@@ -27,7 +27,7 @@ Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujo
### Effets possibles sur les agents utilisateurs et les technologies d’assistance
-Lorsque le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :
+Lorsque le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :
- Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation.
- Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.
@@ -40,7 +40,7 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus se pl
### Exemples
-#### Exemple 1 : Une boîte de dialogue d’alerte
+#### Exemple 1 : Une boîte de dialogue d’alerte
L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton `OK`.
@@ -54,7 +54,7 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial
```
-#### Exemples concrets :
+#### Exemples concrets :
À définir
@@ -62,11 +62,11 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial
### Attributs ARIA utilisés
-- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ;
-- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ;
+- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ;
+- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ;
- [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby).
### Techniques ARIA connexes
-- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ;
+- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ;
- [Utiliser le rôle `alert`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert).
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md
index ff0906e7fa..6a1b71f031 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md
@@ -14,7 +14,7 @@ Cette technique présente l’utilisation de l’attribut [`aria-invalid`](http:
L’attribut `aria-invalid` est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. `aria-invalid` peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation.
-Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un `rôle` ARIA.
+Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un `rôle` ARIA.
### Valeurs
@@ -39,7 +39,7 @@ Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n
### Exemples
-#### Exemple 1 : validation d’un formulaire de base
+#### Exemple 1 : validation d’un formulaire de base
L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de `aria-required` étant `false`, il n’est pas strictement nécessaire d’ajouter à entrer.
@@ -51,9 +51,9 @@ L’extrait de code suivant décrit une version simplifiée de deux champs de fo
onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/>
```
-Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé).
+Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé).
-L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) :
+L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) :
```js
function checkValidity(aID, aSearchTerm, aMsg){
@@ -69,7 +69,7 @@ function checkValidity(aID, aSearchTerm, aMsg){
}
```
-L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :
+L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :
```js
function updateAlert(msg) {
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md
index 2dd44fb491..f19dcd5bfa 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md
@@ -25,7 +25,7 @@ Les lecteurs d'écran lisent le contenu textuel de cet attribut.
## Usage
-L’attribut `aria-label` ne doit être utilisé que lorsque le texte d’un label _n’est pas_ visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut [aria-labelledby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby).
+L’attribut `aria-label` ne doit être utilisé que lorsque le texte d’un label _n’est pas_ visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut [aria-labelledby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby).
Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément `
```
-#### Exemple 6 : Listes de définitions
+#### Exemple 6 : Listes de définitions
-Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut `aria-labelledby` :
+Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut `aria-labelledby` :
```html
anathème
une interdiction ou une condamnation prononcée par une autorité ecclésiastique
- et accompagnée de l’excommunication
+ et accompagnée de l’excommunication
une dénonciation vigoureuse : condamnation
homélie
@@ -116,9 +116,9 @@ Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu
```
-#### Exemple 7 : Menus
+#### Exemple 7 : Menus
-Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` :
+Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` :
```html
@@ -143,7 +143,7 @@ Tous les éléments de balisage de base.
### Techniques ARIA connexes
-- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ;
+- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ;
- [Utiliser l’attribut `aria-describedby`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby).
### Autres ressources
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md
index b69d64990b..4b1e1a436f 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md
@@ -29,7 +29,7 @@ Vocabulaire
### Exemples
-#### Exemple 1 :
+#### Exemple 1 :
L’extrait de code ci-dessous présente un curseur simple orienté verticalement.
@@ -48,8 +48,8 @@ L’extrait de code ci-dessous présente un curseur simple orienté verticalemen
### Utilisé avec les rôles ARIA
-- scrollbar ;
-- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ;
+- scrollbar ;
+- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ;
- separator.
### Autres ressources
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md
index f29b625d53..91cdfe0ba3 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md
@@ -7,7 +7,7 @@ tags:
translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute
original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant
---
-L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé.
+L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé.
L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée.
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md
index 3779f56201..0582f73e61 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md
@@ -18,7 +18,7 @@ L’attribut `aria-required` est utilisé pour indiquer que l’utilisateur doit
### Valeurs
-`true` ou `false` (Valeur par défaut : `false`)
+`true` ou `false` (Valeur par défaut : `false`)
### Effets possibles sur les agents utilisateurs et les technologies d’assistance
@@ -30,7 +30,7 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c
### Exemples
-#### Exemple 1 : un formulaire simple
+#### Exemple 1 : un formulaire simple
```html
```
-#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML
+#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML
L’extrait de code ci-dessous montre comment le rôle `group` est ajouté directement au code source HTML.
@@ -92,7 +92,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc
```
-#### Exemples concrets :
+#### Exemples concrets :
-
@@ -110,4 +110,4 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc
### Autres ressources
-- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading)
+- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading)
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md
index 08b116042f..aa7ef0900e 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md
@@ -18,12 +18,12 @@ L’attribut [tabindex](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex)
### Effets possibles sur les agents utilisateurs et les technologies d’assistance
-Lorsque le rôle `link` est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :
+Lorsque le rôle `link` est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :
- Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation.
- Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.
-Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :
+Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :
- Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle `link`reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (_List Links_) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires.
- Les loupes d’écran devraient agrandir le lien.
@@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme
### Exemples
-#### Exemple 1 : **Ajoute le rôle dans le code HTML**
+#### Exemple 1 : **Ajoute le rôle dans le code HTML**
L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans le code source HTML.
@@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans l
Un lien
```
-#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \**
+#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \**
```html
```
-La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas):
+La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas):
```js
ctx.addHitRegion({control: element});
```
-Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK).
+Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK).
## Focus rings
-Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée.
+Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée.
- {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
- : Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.
-De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.
+De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.
- {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
- : Affiche le chemin courant ou le chemin donné.
diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
index 7b3b723efb..ded7ba9431 100644
--- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
@@ -6,13 +6,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas
---
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
-L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.
+L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.
## Conseils sur les performances
Ceci est une liste de conseils pour améliorer les performances
-### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ
+### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ
Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.
@@ -72,7 +72,7 @@ Si comme pour la plupart des jeux, vous utilisez une image de fond statique, pr
### Redimensionner les canvas avec CSS transform
-[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.
+[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.
```js
var scaleX = window.innerWidth / canvas.width;
@@ -85,7 +85,7 @@ stage.style.transformOrigin = "0 0"; //scale from top left
stage.style.transform = "scale(" + scaleToFit + ")";
```
-### Utiliser l'attribut `moz-opaque` (Gecko only)
+### Utiliser l'attribut `moz-opaque` (Gecko only)
Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.
diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
index 7c6fadf160..49b70c9c31 100644
--- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
@@ -13,29 +13,29 @@ Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels d
L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :
- `width`
- - : La largeur de l'image en pixels.
+ - : La largeur de l'image en pixels.
- `height`
- - : La hauteur de l'image en pixels.
+ - : La hauteur de l'image en pixels.
- `data`
- - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus).
+ - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus).
-La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.
+La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.
-Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1.
+Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1.
-Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit :
+Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit :
```js
composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
```
-Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` :
+Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` :
```js
var nbOctets = imageData.data.length;
```
-## Création d'un objet `ImageData`
+## Création d'un objet `ImageData`
Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode [`createImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/createImageData). Il existe deux versions de la méthode `createImageData()` :
@@ -43,9 +43,9 @@ Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode
var monImageData = ctx.createImageData(largeur, hauteur);
```
-Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.
+Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.
-Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !**
+Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !**
```js
var monImageData = ctx.createImageData(autreImageData);
@@ -53,17 +53,17 @@ var monImageData = ctx.createImageData(autreImageData);
## Obtention des données pixel pour un contexte
-Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` :
+Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` :
```js
var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);
```
-Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.
+Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.
-> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant.
+> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant.
-Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas).
+Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas).
### Une pipette à couleur
@@ -105,9 +105,9 @@ Vous pouvez utiliser la méthode [`putImageData()`](/fr/docs/Web/API/CanvasRende
ctx.putImageData(monImageData, dx, dy);
```
-Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.
+Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.
-Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :
+Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :
```js
ctx.putImageData(monImageData, 0, 0);
@@ -115,7 +115,7 @@ ctx.putImageData(monImageData, 0, 0);
### Niveaux de gris et inversion de couleurs
-Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations.
+Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations.
```html hidden
@@ -189,8 +189,8 @@ zoomctx.drawImage(canvas,
```
diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md
index 490e52c4fe..fa45263a14 100644
--- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md
@@ -190,7 +190,7 @@ Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons
### Un exemple `scale`
-Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle.
+Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle.
```js
function draw() {
diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md
index b4a77e50dc..dcacbfbe6e 100644
--- a/files/fr/web/api/canvasgradient/addcolorstop/index.md
+++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md
@@ -11,7 +11,7 @@ translation_of: Web/API/CanvasGradient/addColorStop
---
{{APIRef("Canvas API")}}
-La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée.
+La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée.
## Syntaxe
@@ -26,9 +26,9 @@ La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini pa
## Exemples
-### Utilisation de la méthode `addColorStop`
+### Utilisation de la méthode `addColorStop`
-Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}.
+Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}.
#### HTML
@@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d
```html hidden