{"sha":"5b6b5ec3ac20eaffe960c8626b36a444ea05d565","node_id":"MDY6Q29tbWl0NjM2NzMwMTk6NWI2YjVlYzNhYzIwZWFmZmU5NjBjODYyNmIzNmE0NDRlYTA1ZDU2NQ==","commit":{"author":{"name":"vincent","email":"vincent.aniort@orange.com","date":"2018-07-13T14:42:11Z"},"committer":{"name":"vincent","email":"vincent.aniort@orange.com","date":"2018-07-13T14:42:11Z"},"message":"correction\n Changes to be committed:\n\tmodified: web/inputs/md/label_ledby_describedby.md","tree":{"sha":"ab0020b6761dc61b346001c4cac7ecaf676d46b4","url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/git/trees/ab0020b6761dc61b346001c4cac7ecaf676d46b4"},"url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/git/commits/5b6b5ec3ac20eaffe960c8626b36a444ea05d565","comment_count":0,"verification":{"verified":false,"reason":"unsigned","signature":null,"payload":null}},"url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/commits/5b6b5ec3ac20eaffe960c8626b36a444ea05d565","html_url":"https://github.com/Orange-OpenSource/a11y-guidelines/commit/5b6b5ec3ac20eaffe960c8626b36a444ea05d565","comments_url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/commits/5b6b5ec3ac20eaffe960c8626b36a444ea05d565/comments","author":{"login":"Aniort","id":13222389,"node_id":"MDQ6VXNlcjEzMjIyMzg5","avatar_url":"https://avatars.githubusercontent.com/u/13222389?v=4","gravatar_id":"","url":"https://api.github.com/users/Aniort","html_url":"https://github.com/Aniort","followers_url":"https://api.github.com/users/Aniort/followers","following_url":"https://api.github.com/users/Aniort/following{/other_user}","gists_url":"https://api.github.com/users/Aniort/gists{/gist_id}","starred_url":"https://api.github.com/users/Aniort/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Aniort/subscriptions","organizations_url":"https://api.github.com/users/Aniort/orgs","repos_url":"https://api.github.com/users/Aniort/repos","events_url":"https://api.github.com/users/Aniort/events{/privacy}","received_events_url":"https://api.github.com/users/Aniort/received_events","type":"User","site_admin":false},"committer":{"login":"Aniort","id":13222389,"node_id":"MDQ6VXNlcjEzMjIyMzg5","avatar_url":"https://avatars.githubusercontent.com/u/13222389?v=4","gravatar_id":"","url":"https://api.github.com/users/Aniort","html_url":"https://github.com/Aniort","followers_url":"https://api.github.com/users/Aniort/followers","following_url":"https://api.github.com/users/Aniort/following{/other_user}","gists_url":"https://api.github.com/users/Aniort/gists{/gist_id}","starred_url":"https://api.github.com/users/Aniort/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Aniort/subscriptions","organizations_url":"https://api.github.com/users/Aniort/orgs","repos_url":"https://api.github.com/users/Aniort/repos","events_url":"https://api.github.com/users/Aniort/events{/privacy}","received_events_url":"https://api.github.com/users/Aniort/received_events","type":"User","site_admin":false},"parents":[{"sha":"3ea44c9d6dc6073c094a9cd5a731881b229e3260","url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/commits/3ea44c9d6dc6073c094a9cd5a731881b229e3260","html_url":"https://github.com/Orange-OpenSource/a11y-guidelines/commit/3ea44c9d6dc6073c094a9cd5a731881b229e3260"}],"stats":{"total":40,"additions":29,"deletions":11},"files":[{"sha":"b5f7471baf8355de3370ff2bc0749c0b3c9a9425","filename":"web/inputs/md/label_ledby_describedby.md","status":"modified","additions":29,"deletions":11,"changes":40,"blob_url":"https://github.com/Orange-OpenSource/a11y-guidelines/blob/5b6b5ec3ac20eaffe960c8626b36a444ea05d565/web%2Finputs%2Fmd%2Flabel_ledby_describedby.md","raw_url":"https://github.com/Orange-OpenSource/a11y-guidelines/raw/5b6b5ec3ac20eaffe960c8626b36a444ea05d565/web%2Finputs%2Fmd%2Flabel_ledby_describedby.md","contents_url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/contents/web%2Finputs%2Fmd%2Flabel_ledby_describedby.md?ref=5b6b5ec3ac20eaffe960c8626b36a444ea05d565","patch":"@@ -1,39 +1,57 @@\n-# HTML5 & ARIA\n+# Les attributs ARIA qui peuvent vous sauver : `aria-label`, `aria-labelledby` et `aria-describedby` \n \n \n \n ## Introduction\n ### Nom et description accessible\n \n-Un nom accessible est l'information qui permet à l'AT d'identifier l'élément en question. Il peut être fourni par l'intitulé ou le contenu d'un élément, un attribut (par exemple, un attribut `alt` pour une image) ou par un élément associé (par exemple, une balise `label` pour un champ `input`).\n+Un nom accessible est l'information qui permet à l'aide technique (AT), par exemple, un lecteur d'écranou un:e loupe logicielle, d'identifier l'élément (tag HTML) en question. Il peut être fourni par l'intitulé ou le contenu d'un élément, un attribut (par exemple, un attribut `alt` pour une image) ou par un élément associé (par exemple, une balise `label` pour un champ `input`).\n \n Une description accessible est une information plus étendue qui est utilisée par l'AT lui permettant de compléter le nom accessible en précisant et rajoutant du sens là ou le nom accessible n'est pas suffisant.\n \n-Le nom accessible comme la description accessible peuvent être visuellement perceptible ou pas (intitulé de lien : visible, alternative d'image : cachée et utilisable que par une AT)\n+Le nom accessible comme la description accessible peuvent être visuellement perceptible ou pas (intitulé de lien : visible, alternative d'image : cachée et utilisable que par une AT...)\n \n ### Les attributs ARIA : `aria-label`, `aria-labelledby` et `aria-describedby`\n \n Trois attributs ARIA sont très bien supportés par les navigateurs et les AT: `aria-label`, `aria-labelledby` et `aria-describedby`. Ils permettent de rajouter de l'information à un élément HTML :\n - `aria-label`, `aria-labelledby` permettent de donner un nom accessible à un élément\n-- `aria-describedby` permet de rajouter, si besoin, une description accessible à un élément\n-\n-Lorsque les deux attributs aria-labelledby et aria-label sont utilisés, les agents utilisateurs donnent la priorité à aria-labelledby lors du calcul de la propriété de nom accessible.\n+- `aria-describedby` permet de rajouter au nom accessible, si besoin, en sus, une description accessible à un élément\n \n Cependant, ils ne fonctionnent bien qu'avec certains éléments :\n - les éléments interactifs : `a` (avec un attribut `href`), `audio` et `video` (avec un attribut `controls`), `input` (sauf si `type=\"hidden\"`), `select`, `button` et `textarea`\n - les éléments `img` et `iframe`\n - les éléments possédant un rôle de landmark explicite, donc, avec un attribut `role` ou un landmark implicite (une balise de structure HTML5 : `header`, `footer`, `main`, `nav`, `aside` et `section`) \n-- les éléments avec un des rôles de widget d'ARIA (27 pour ARIA 1.1)\n+- les éléments avec un des rôles de widget d'ARIA (27 pour ARIA 1.1).\n+\n+Pour tout autre élément HTML, ces trois attributs ARIA ont un support peu robuste voire aléatoire selon les couple AT/navigateur, donc ne pas l'utiliser comme seul moyen de passer une information nécessaire.\n \n-## Faut-il l’utiliser ?\n+## Faut-il l’utiliser et comment ?\n \t\n+Oui, on peut utiliser ces trois attributs ARIA sur les éléments avec lesquels cela fonctionne (voir ci-dessus) pour passer une information essentielle, spécifiquement aux AT.\n+\n+Il faut savoir que `aria-label` doit contenir, comme valeur, une chaîne de caractères qui sera le nom accessible. Alors que pour `aria-labelledby` et `aria-describedby`, la valeur de cet attribut référence l'`id` dun élément de la page dont le contenu sera utilisé le nom accessible de l'élément.\n+\n+Lorsqu'on utilise `aria-label` ou `aria-labelledby` sur un élément, le contenu ou l'intitulé de cet élément n'est plus restitué au AT mais remplacé par le nom accessible (pour `aria-label` le contenu de cet attribut, pour `aria-labelledby` le contenu de l'élément référencé). Donc, seul, le nom accessible doit donner l'ensemble des informations nécessaires à at et donc à l'utilisateur.\n+\n+Lorsque les deux attributs `aria-labelledby` et `aria-label` sont utilisés, les agents utilisateurs donnent la priorité à aria-labelledby lors du calcul de la propriété de nom accessible.\n+\n+Quant à lui, `aria-describedby\" va rajouter au nom accessible de l'élément, une description accessible en plus. \n+\n+###Exemples###\n \n-If you use aria-label, aria-labelledby, or aria-describedby with any other elements (like div, span, p, blockquote, or strong etc.), they generally won’t work across all browser/assistive technology combinations.\n+\n+sortie pour un lecteur d'écran : \"accéder au code Hypertext markup language\"\n \n+