{"id":2804,"date":"2024-03-07T10:30:09","date_gmt":"2024-03-07T15:30:09","guid":{"rendered":"https:\/\/accessibility.ecampusontario.ca\/accessibilite\/bonnes-pratiques\/rendez-le-contenu-accessible-au-clavier\/"},"modified":"2024-03-19T14:29:24","modified_gmt":"2024-03-19T18:29:24","slug":"clavier","status":"publish","type":"page","link":"https:\/\/accessibility.ecampusontario.ca\/fr\/accessibilite\/bonnes-pratiques\/clavier\/","title":{"rendered":"Rendre le contenu accessible au clavier"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00a0\u00bb1&Prime; fullwidth=\u00a0\u00bbon\u00a0\u00bb module_class=\u00a0\u00bbec-content\u00a0\u00bb _builder_version=\u00a0\u00bb4.23.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb background_color=\u00a0\u00bbRGBA(255,255,255,0)\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_fullwidth_code _builder_version=\u00a0\u00bb4.23.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n<div class=\"ec-banner-main\"><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"ec-banner-content\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<h1>Rendre le contenu accessible par clavier<\/h1>\n<p><!-- [et_pb_line_break_holder] -->    <pee>Assurez-vous que tout le contenu est accessible uniquement avec le clavier et que les utilisateurs qui n\u2019utilisent pas de souris ou de pav\u00e9 tactile peuvent naviguer dans votre contenu.<\/pee><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"ec-banner-img\"><!-- [et_pb_line_break_holder] -->    <img decoding=\"async\" alt=\"\" src=\"\/wp-content\/uploads\/2024\/02\/best-practices-keyboard-nav.jpg\"><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"ec-breadcrumbs\"><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"ec-heading-row\"><!-- [et_pb_line_break_holder] -->  <\/p>\n<h2>Clavier accessible<\/h2>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"ec-row\"><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"ec-col ec-col-1w\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"ec-callout ec-callout-right\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h3>R\u00e9f\u00e9rence WCAG associ\u00e9e<\/h3>\n<p><!-- [et_pb_line_break_holder] -->      <pee><a class=\"ec-external-link\" href=\"https:\/\/www.w3.org\/Translations\/WCAG21-fr\/#keyboard-accessible\">Directive WCAG 2.1 2.1 accessible au clavier<\/a><\/pee><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <pee>L\u2019accessibilit\u00e9 du clavier signifie que toutes les fonctionnalit\u00e9s pouvant \u00eatre compl\u00e9t\u00e9es avec une souris ou un pav\u00e9 tactile peuvent \u00e9galement \u00eatre compl\u00e9t\u00e9es avec un clavier. De nombreuses personnes handicap\u00e9es, comme celles qui sont aveugles ou \u00e0 mobilit\u00e9 r\u00e9duite, s\u2019appuient sur le clavier pour naviguer dans le contenu num\u00e9rique.<\/pee><!-- [et_pb_line_break_holder] -->    <pee>Voici les \u00e9tapes \u00e0 suivre pour garantir que votre document num\u00e9rique est accessible au clavier&nbsp;:<\/pee><!-- [et_pb_line_break_holder] -->    <\/p>\n<ul><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>V\u00e9rifier l\u2019ordre de lecture<\/strong>&nbsp;: V\u00e9rifier que la structure de lecture du contenu est logique lors de la navigation avec le clavier. L\u2019ordre doit suivre la pr\u00e9sentation visuelle et avoir un sens lorsque vous utilisez uniquement la touche de tabulation pour progresser dans le document.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>Fournissez des raccourcis clavier<\/strong>&nbsp;: si votre document comprend des \u00e9l\u00e9ments interactifs, assurez-vous qu\u2019ils sont utilisables via le clavier. Communiquez clairement tous les raccourcis clavier aux utilisateurs.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>Utiliser un texte de lien descriptif<\/strong>&nbsp;: si votre document contient des hyperliens, utiliser un texte de lien descriptif qui indique le but ou la destination du lien. \u00c9vitez les termes g\u00e9n\u00e9riques comme \u00ab&nbsp;cliquez ici&nbsp;\u00bb.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>Ajouter des styles de focus<\/strong>&nbsp;: assurez-vous que les \u00e9l\u00e9ments interactifs des pages Web, tels que les liens et les champs de formulaire, ont des styles de focus visibles. Cela aide les utilisateurs \u00e0 comprendre quel \u00e9l\u00e9ment est actuellement actif lors de la navigation avec le clavier. Les approches courantes incluent la modification de la bordure, la couleur d\u2019arri\u00e8re-plan ou l\u2019ajout d\u2019un contour aux \u00e9l\u00e9ments cibl\u00e9s.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>Tester avec le clavier uniquement<\/strong>&nbsp;: tester r\u00e9guli\u00e8rement votre document en utilisant uniquement le clavier pour la navigation. Cela inclut la navigation dans les liens, les champs de formulaire et les \u00e9l\u00e9ments interactifs pour garantir une exp\u00e9rience fluide.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>Passer au lien de contenu<\/strong>&nbsp;: incluez un lien \u00ab&nbsp;Passer au contenu&nbsp;\u00bb au d\u00e9but d\u2019une page Web. Cela permet aux utilisateurs de clavier de contourner les liens de navigation r\u00e9p\u00e9titifs et d\u2019acc\u00e9der directement au contenu principal.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>V\u00e9rifiez les formulaires et les champs de saisie<\/strong>&nbsp;: assurez-vous que tous les \u00e9l\u00e9ments du formulaire sont accessibles via le clavier. Les utilisateurs doivent pouvoir naviguer, s\u00e9lectionner et soumettre les champs du formulaire en utilisant uniquement les saisies au clavier.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>Pour les pages Web, attribuez des r\u00f4les ARIA (<span lang=\"en\">Accessible Rich Internet Applications<\/span>)<\/strong>&nbsp;: si votre document inclut du contenu interactif, utilisez les r\u00f4les ARIA pour am\u00e9liorer l\u2019accessibilit\u00e9 de ces \u00e9l\u00e9ments. Les r\u00f4les ARIA peuvent fournir des informations suppl\u00e9mentaires aux technologies d\u2019assistance en identifiant diff\u00e9rents \u00e9l\u00e9ments de la page tels que la barre d\u2019outils, la r\u00e9gion de la banni\u00e8re, la bo\u00eete de dialogue d\u2019alerte, le menu, la r\u00e9gion du pied de page. Voir <a href=\"\/wp-content\/uploads\/2024\/03\/Lignes-directrices-ARIA-20240318.pdf\">Lignes directrices ARIA<\/a> pour plus d\u2019informations.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>\u00c9vitez les pi\u00e8ges du clavier<\/strong>&nbsp;: assurez-vous que le focus du clavier n\u2019est coinc\u00e9 dans aucune partie de votre document. Les utilisateurs doivent pouvoir naviguer librement \u00e0 l\u2019aide de la touche de tabulation sans \u00eatre bloqu\u00e9s dans une zone particuli\u00e8re.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><strong>Fournissez des instructions claires<\/strong>&nbsp;: inclure des instructions claires sur la mani\u00e8re dont les utilisateurs peuvent naviguer et interagir avec votre document \u00e0 l\u2019aide du clavier. Ces informations peuvent \u00eatre utiles \u00e0 tous les utilisateurs, y compris ceux sans invalidit\u00e9s.<\/li>\n<p><!-- [et_pb_line_break_holder] -->    <\/ul>\n<p><!-- [et_pb_line_break_holder] -->    <pee>Pour plus d\u2019informations, consultez&nbsp;:<\/pee><!-- [et_pb_line_break_holder] -->    <\/p>\n<ul><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><a class=\"ec-external-link\" href=\"https:\/\/webaim.org\/techniques\/keyboard\/\"><span lang=\"en\">WebAim Keyboard Accessibility<\/span><span class=\"visually-hidden\"> (Offert en anglais seulement)<\/span><\/a> <span aria-hidden=\"true\">(Offert en anglais seulement)<\/span>.<\/li>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<li><a class=\"ec-external-link\" href=\"https:\/\/www.w3.org\/WAI\/perspective-videos\/keyboard\/\"><span lang=\"en\">W3C, Keyboard Compatibility<\/span><span class=\"visually-hidden\"> (Offert en anglais seulement)<\/span><\/a> <span aria-hidden=\"true\">(Offert en anglais seulement)<\/span>.<\/li>\n<p><!-- [et_pb_line_break_holder] -->    <\/ul>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1059,"featured_media":0,"parent":2768,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-2804","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/pages\/2804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/users\/1059"}],"replies":[{"embeddable":true,"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/comments?post=2804"}],"version-history":[{"count":10,"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/pages\/2804\/revisions"}],"predecessor-version":[{"id":3249,"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/pages\/2804\/revisions\/3249"}],"up":[{"embeddable":true,"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/pages\/2768"}],"wp:attachment":[{"href":"https:\/\/accessibility.ecampusontario.ca\/fr\/wp-json\/wp\/v2\/media?parent=2804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}