[Update] Article HTML5 & ARIA

src/en/articles/html5-aria.md

@@ -8,25 +8,27 @@ tags:
   - beginner
 ---
 
+Update: December 2024
+
 ## Introduction
 
 Web sites are increasingly dynamic (asynchronous loading, dynamic content generation) and interactive (rich interface components: slider, datepicker…). So it is very difficult or impossible to make these components accessible with conventional <abbr>HTML</abbr>.
 
 Even with the <abbr>HTML5</abbr> change, we still lack semantics to provide technical aids (screen readers, magnifiying software, …), keyboard navigation is often impossible, complex handling of the keyboard focus is missing and live regions are not notified to the user, in particular for the screenreaders.
 
-## What is it ?
+## What is it?
 
 To overcome these limitations, the W3C&nbsp;/ WAI has officially issued a recommendation called <abbr>ARIA</abbr>, standing for Accessible Rich Internet Applications, and several documents on the use of <abbr>ARIA</abbr>. We are currently at the 1.1 version of <abbr>ARIA</abbr> et for the Authoring Practices, an <abbr>ARIA</abbr>best practices.
 
 <abbr>ARIA</abbr> is a semantic wrapper based on the attribute&nbsp;/ value combination used in markup languages such as <abbr>HTML</abbr>, <abbr>SVG</abbr>, <abbr>XML</abbr>, etc. This recommendation consists of roles, states and properties that will specifically interact with assistive technologies (<abbr>AT</abbr>). With <abbr>ARIA</abbr>, one can describe elements and behaviours with simple HTML when they do not exist natively, for example tabs, drop-downs, live regions, tooltips, modal windows, etc. <abbr>ARIA</abbr> also defines how an interface component has to behave with the keyboard in order to standardize the user experience with keyboard navigation. **<abbr>ARIA</abbr> makes sense and delivers its full potential when used with <abbr>HTML5</abbr>**.
 
-<abbr>ARIA</abbr> does not add any particular behaviour or any style to <abbr>UI</abbr> components as it is only descriptive. So always make sure presentation is done through <abbr>CSS</abbr>, content control and interaction via Javascript.
+<abbr>ARIA</abbr> does not add any particular behaviour or any style to <abbr>UI</abbr> components as it is only descriptive. So always make sure presentation is done through <abbr>CSS</abbr>, content control and interaction via JavaScript.
 
 ## Support
 
-<abbr>ARIA</abbr> support improves quickly and is already supported :
+<abbr>ARIA</abbr> support improves quickly and is already supported:
 - in modern browsers (Firefox >=3.0, Chrome >=16, Safari >=4, Opera 9.5>=, Internet Explorer 8 for a basic support, Internet Explorer >=9 and Edge for advanced support);
-- in assistive technologies (<abbr>NVDA</abbr> >=2010, Orca >=2 + Firefox only, VoiceOver <abbr>OSX</abbr> >=10.5, iOS >=4, JAWS >=8, Window-Eyes >=7, ZoomText 10 for a basic support, ZoomText >=11 for advanced support). 
+- in assistive technologies (<abbr>NVDA</abbr> >=2010, Orca >=2 + Firefox only, VoiceOver <abbr>OSX</abbr> >=10.5, iOS >=4, JAWS >=8, Window-Eyes >=7, ZoomText 10 for a basic support, ZoomText >=11 for advanced support).
 
 Moreover, the optimal efficiency of the <abbr>ARIA</abbr> compatibility depends heavily on the browser/assistive technology combination: Firefox with <abbr>NVDA</abbr>, Jaws with Internet Explorer or Safari with VoiceOver, for example.
 
@@ -42,7 +44,7 @@ In a well-defined environment (e.g. intranet), target environments are known and
 * W3C:
   * [<abbr>ARIA</abbr> specification](http://www.w3.org/TR/wai-aria/)
   * [<abbr>ARIA</abbr> implementation](http://www.w3.org/TR/wai-aria-practices/)
-  * [Use <abbr>ARIA</abbr> HTML (5)](http://www.w3.org/TR/aria-in-html/)
+  * [Use <abbr>ARIA</abbr> with HTML5](http://www.w3.org/TR/aria-in-html/)
   * [<abbr>ARIA</abbr> techniques in <abbr>WCAG</abbr> 2](https://www.w3.org/WAI/GL/wiki/Category:ARIA_Techniques)
 * [Introduction to <abbr>ARIA</abbr> by Site Point](http://www.sitepoint.com/introduction-wai-aria/)
 * [Introduction and link list to <abbr>ARIA</abbr> sources](http://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA)

src/fr/articles/html5-et-aria.md

@@ -8,42 +8,43 @@ tags:
   - beginner
 ---
 
+Mise à jour : décembre 2024
 
 ## Introduction
 
-Les sites internet sont de plus en plus dynamiques (chargement asynchrone, génération dynamique de contenu) et interactifs (composants d’interface complexes&nbsp;: <i lang="en">slider</i>, <i lang="en">datepicker</i>…). Il est donc très difficile voire impossible de rendre ce genre de composants accessibles avec le <abbr>HTML</abbr> classique. 
+Les sites internet sont de plus en plus dynamiques (chargement asynchrone, génération dynamique de contenu) et interactifs (composants d'interface complexes&nbsp;: <span lang="en">slider</span>, <span lang="en">datepicker</span>…). Il est donc très difficile voire impossible de rendre ce genre de composants accessibles avec le <abbr>HTML</abbr> classique.
 
-Même avec l’évolution due au <abbr>HTML5</abbr>, on manque encore d’informations sémantiques à fournir aux aides techniques (lecteurs d’écran, loupes logicielles…), la navigation clavier est souvent impossible, la gestion complexe du focus clavier est absente et les mises à jour des régions dynamiques ne sont pas signalées, notamment aux lecteurs d'écran.
+Même avec l'évolution due au <abbr>HTML5</abbr>, on manque encore d'informations sémantiques à fournir aux aides techniques (lecteurs d'écran, loupes logicielles…), la navigation clavier est souvent impossible, la gestion complexe du focus clavier est absente et les mises à jour des régions dynamiques ne sont pas signalées, notamment aux lecteurs d'écran.
 
-## Qu’est-ce que c’est&nbsp;?
+## Qu'est-ce que c'est&nbsp;?
 
-Pour remédier à ces limitations, le <abbr>W3c</abbr>/<abbr>WAI</abbr> a publié une recommandation appelée <abbr>ARIA</abbr>, pour <i lang="en">Accessible Rich Internet Applications</i>, ainsi qu’une suite de documents traitant de l’utilisation d’<abbr>ARIA</abbr>. Nous sommes à la version 1.1 d'<abbr>ARIA</abbr> et des Authoring Practices, bonnes pratiques d'utilisation d'<abbr>ARIA</abbr>.
+Pour remédier à ces limitations, le <abbr>W3C</abbr>/<abbr>WAI</abbr> a publié une recommandation appelée <abbr>ARIA</abbr>, pour <span lang="en">Accessible Rich Internet Applications</span>, ainsi qu'une suite de documents traitant de l'utilisation d'<abbr>ARIA</abbr>. Nous sommes à la version 1.1 d'<abbr>ARIA</abbr> et des Authoring Practices, bonnes pratiques d'utilisation d'<abbr>ARIA</abbr>.
 
-<abbr>ARIA</abbr> est une sur-couche sémantique à base de couples attribut/valeur utilisables dans les langages de balisage tels que <abbr>HTML</abbr>, <abbr>SVG</abbr>, <abbr>XML</abbr>, etc. Cette recommandation est composée de rôles, d’états et de propriétés qui vont spécifiquement interagir avec les aides techniques (<abbr>AT</abbr>). Grâce à <abbr>ARIA</abbr>, on peut décrire des éléments et leurs comportements en <abbr>HTML</abbr> lorsqu’ils sont nativement non sémantiquement explicites, par exemple, des onglets, les arbres dépliants, des régions dynamiques, les info-bulles, les fenêtres modales. <abbr>ARIA</abbr> définit également comment doit se comporter un composant d’interface avec le clavier afin d’homogénéiser l’expérience des utilisateurs qui naviguent au clavier. **<abbr>ARIA</abbr> prend tout son sens et exprime tout son potentiel lorsqu’il est utilisé dans du <abbr>HTML5</abbr>**.
+<abbr>ARIA</abbr> est une sur-couche sémantique à base de couples attribut/valeur utilisables dans les langages de balisage tels que <abbr>HTML</abbr>, <abbr>SVG</abbr>, <abbr>XML</abbr>, etc. Cette recommandation est composée de rôles, d'états et de propriétés qui vont spécifiquement interagir avec les aides techniques (<abbr>AT</abbr>). Grâce à <abbr>ARIA</abbr>, on peut décrire des éléments et leurs comportements en <abbr>HTML</abbr> lorsqu'ils sont nativement non sémantiquement explicites, par exemple, des onglets, les arbres dépliants, des régions dynamiques, les info-bulles, les fenêtres modales. <abbr>ARIA</abbr> définit également comment doit se comporter un composant d'interface avec le clavier afin d'homogénéiser l'expérience des utilisateurs qui naviguent au clavier. **<abbr>ARIA</abbr> prend tout son sens et exprime tout son potentiel lorsqu'il est utilisé dans du <abbr>HTML5</abbr>**.
 
-Aria ne rajoute aucun comportement particulier ni aucune présentation visuelle aux composants d’interface. Il faut donc toujours assurer la mise en forme grâce aux <abbr>CSS</abbr>, le contrôle du contenu et la gestion de l’interactivité via Javascript.
+<abbr>ARIA</abbr> ne rajoute aucun comportement particulier ni aucune présentation visuelle aux composants d'interface. Il faut donc toujours assurer la mise en forme grâce aux <abbr>CSS</abbr>, le contrôle du contenu et la gestion de l'interactivité via JavaScript.
 
 ## Le support
 
-Le support d’<abbr>ARIA</abbr> s’améliore constamment et est déjà présent depuis longtemps&nbsp;:
+Le support d'<abbr>ARIA</abbr> s'améliore constamment et est déjà présent depuis longtemps&nbsp;:
 - Dans les navigateurs modernes (Firefox >=3.0, Chrome >=16, Safari >=4, Opera >=9.5, Internet Explorer 8 pour un support basique, Internet Explorer >=9 et Edge pour un support avancé).
-- Dans les aides techniques (<abbr>NVDA</abbr> >=2010, Orca >= 2 + Firefox uniquement, VoiceOver <abbr>OSX</abbr> >=10.5, <abbr>iOS</abbr> >=4, <abbr>JAWS</abbr> >=8, Window-Eyes >=7, ZoomText 10 pour un support basique, ZoomText >=11 pour un support avancé).  
+- Dans les aides techniques (<abbr>NVDA</abbr> >=2010, Orca >= 2 + Firefox uniquement, VoiceOver <abbr>OSX</abbr> >=10.5, <abbr>iOS</abbr> >=4, <abbr>JAWS</abbr> >=8, Window-Eyes >=7, ZoomText 10 pour un support basique, ZoomText >=11 pour un support avancé).
 
-De plus, l’efficacité optimale de la prise en charge d’<abbr>ARIA</abbr> dépend du couple navigateur&nbsp;/ aide technique&nbsp;: Firefox avec <abbr>NVDA</abbr>, Jaws avec Internet Explorer et Safari avec VoiceOver, par exemple.
+De plus, l'efficacité optimale de la prise en charge d'<abbr>ARIA</abbr> dépend du couple navigateur&nbsp;/ aide technique&nbsp;: Firefox avec <abbr>NVDA</abbr>, Jaws avec Internet Explorer et Safari avec VoiceOver, par exemple.
 
-## Faut-il l’utiliser&nbsp;?
+## Faut-il l'utiliser&nbsp;?
 
-Globalement, <abbr>ARIA</abbr> améliore l’accessibilité pour des composants pas nativement présents dans le <abbr>HTML</abbr> (ou pas accessibles notamment certains éléments <abbr>HTML5</abbr>). La robustesse et l’interopérabilité d’<abbr>ARIA</abbr> sont maintenant suffisantes pour qu’[une quarantaine de techniques WCAG 2.1 soient spécifiques à <abbr>ARIA</abbr>](https://www.w3.org/WAI/GL/wiki/Category:ARIA_Techniques) (contre 10 techniques <abbr>HTML5</abbr>). En conséquence, pour des applications Internet riches, l’<abbr>ARIA</abbr> est incontournable pour leur mise en accessibilité.
+Globalement, <abbr>ARIA</abbr> améliore l'accessibilité pour des composants qui ne sont pas nativement présents dans le <abbr>HTML</abbr> (ou pas accessibles notamment certains éléments <abbr>HTML5</abbr>). La robustesse et l'interopérabilité d'<abbr>ARIA</abbr> sont maintenant suffisantes pour qu'[une quarantaine de techniques WCAG 2.1 soient spécifiques à <abbr>ARIA</abbr>](https://www.w3.org/WAI/GL/wiki/Category:ARIA_Techniques) (contre 10 techniques <abbr>HTML5</abbr>). En conséquence, pour des applications Internet riches, l'<abbr>ARIA</abbr> est incontournable pour leur mise en accessibilité.
 
-Dans tous les cas, il faut tester les développements sur les environnements cibles (couple navigateurs&nbsp;/ aides techniques). C’est un gros travail absolument nécessaire pour les cas complexes car sur un site ou une application internet classique, il faut, à minima, tester avec Safari/VoiceOver, Jaws/Internet Explorer et Firefox/<abbr>NVDA</abbr>.
+Dans tous les cas, il faut tester les développements sur les environnements cibles (couple navigateurs&nbsp;/ aides techniques). C'est un gros travail absolument nécessaire pour les cas complexes car sur un site ou une application internet classique, il faut, à minima, tester avec Safari/VoiceOver, Jaws/Internet Explorer et Firefox/<abbr>NVDA</abbr>.
 
 Dans un environnement maîtrisé (intranet), les environnements cibles sont connus et en nombre fini, on peut donc statuer plus facilement&nbsp;!
 
 ## Webographie
-* <abbr>W3c</abbr>&nbsp;:
+* <abbr>W3C</abbr>&nbsp;:
   * [Spécification <abbr>ARIA</abbr>](http://www.w3.org/TR/wai-aria/)
   * [Mettre en place <abbr>ARIA</abbr>](http://www.w3.org/TR/wai-aria-practices/)
-  * [Utiliser <abbr>ARIA</abbr> en <abbr>HTML</abbr> (5)](http://www.w3.org/TR/aria-in-html/)
+  * [Utiliser <abbr>ARIA</abbr> en <abbr>HTML</abbr>5](http://www.w3.org/TR/aria-in-html/)
   * [Techniques <abbr>ARIA</abbr> dans le wiki du <abbr>W3c</abbr>](https://www.w3.org/WAI/GL/wiki/Category:ARIA_Techniques)
 * [Introduction à <abbr>ARIA</abbr> chez Site Point](http://www.sitepoint.com/introduction-wai-aria/)
 * [Introduction et liste de liens vers des sources sur <abbr>ARIA</abbr>](http://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA)