Test Accessibilit\u00e9 – Contexte des Liens et Boutons<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n line-height: 1.6;\n }\n .test-section {\n margin: 40px 0;\n border: 1px solid #ccc;\n padding: 20px;\n background-color: #f9f9f9;\n }\n .test-title {\n font-size: 18px;\n font-weight: bold;\n margin-bottom: 15px;\n color: #333;\n }\n table {\n border-collapse: collapse;\n width: 100%;\n margin: 15px 0;\n }\n th, td {\n border: 1px solid #ddd;\n padding: 12px;\n text-align: left;\n }\n th {\n background-color: #e8e8e8;\n font-weight: bold;\n }\n a, button {\n color: #0066cc;\n text-decoration: underline;\n cursor: pointer;\n border: none;\n background: none;\n padding: 0;\n font: inherit;\n }\n \n button {\n color: red;\n text-decoration: underline;\n }\n a:hover, button:hover {\n text-decoration: none;\n }\n h2 {\n margin-top: 0;\n color: #333;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Test Accessibilit\u00e9 – Contexte des Liens et Boutons<\/h1>\n <p>Page de test pour comparer le comportement des lecteurs d’\u00e9cran entre les liens <a href=#><link><\/a> et les <button><button><\/button> au niveau de la prise en compte de leur contexte.<\/p>\n\n \n <section class=\"test-section\">\n <h2>Test 1 – Contexte: Contenu de la phrase<\/h2>\n <p>Pour plus d’informations sur les techniques de programmation accessible, consultez notre <a href=\"#\">guide complet<\/a> qui couvre tous les standards WCAG.<\/p>\n <p>Pour plus d’informations sur les techniques de programmation accessible, consultez notre <button>guide complet<\/button> qui couvre tous les standards WCAG.<\/p>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 2 – Contexte: Contenu du paragraphe<\/h2>\n <p>\n L’accessibilit\u00e9 web est essentielle pour permettre \u00e0 tous les utilisateurs d’acc\u00e9der au contenu, y compris les personnes en situation de handicap. \n Vous pouvez <a href=\"#\">en savoir plus<\/a> en consultant nos ressources.\n <\/p>\n <p>\n L’accessibilit\u00e9 web est essentielle pour permettre \u00e0 tous les utilisateurs d’acc\u00e9der au contenu, y compris les personnes en situation de handicap. \n Vous pouvez <button>en savoir plus<\/button> en consultant nos ressources.\n <\/p>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 3 – Contexte: Contenu de l’item de liste<\/h2>\n <ul>\n <li>HTML s\u00e9mantique: <a href=\"#\">documentation<\/a><\/li>\n <li>CSS avanc\u00e9: <button>documentation<\/button><\/li>\n <li>JavaScript accessible: <a href=\"#\">tutoriel<\/a><\/li>\n <\/ul>\n <ul>\n <li>\n Techniques ARIA:\n <ul>\n <li><a href=\"#\">attributs ARIA<\/a><\/li>\n <li><button>r\u00f4les ARIA<\/button><\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 4 – Contexte: Titre pr\u00e9c\u00e9dent<\/h2>\n \n <h3>Principes fondamentaux d’accessibilit\u00e9<\/h3>\n <p>Comprendre les principes de base de l’accessibilit\u00e9 web. <a href=\"#\">En savoir plus<\/a><\/p>\n <p>Comprendre les principes de base de l’accessibilit\u00e9 web. <button>En savoir plus<\/button><\/p>\n\n <h3>Outils et ressources de test<\/h3>\n <p>Utilisez l’assistant d’accessibilit\u00e9 pour tester la conformit\u00e9 RGAA. <a href=\"#\">Aller voir l’assistant<\/a><\/p>\n <p>Utilisez l’assistant d’accessibilit\u00e9 pour tester la conformit\u00e9 RGAA. <button>Ouvrir l’assistant<\/button><\/p>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 5 – Contexte: En-t\u00eates et cellules de tableau<\/h2>\n <table>\n <thead>\n <tr>\n <th>Fonctionnalit\u00e9<\/th>\n <th>Description<\/th>\n <th>Action<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Contraste des couleurs<\/td>\n <td>V\u00e9rifier le ratio de contraste WCAG<\/td>\n <td><a href=\"#\">D\u00e9tails<\/a><\/td>\n <\/tr>\n <tr>\n <td>Textes alternatifs<\/td>\n <td>Ajouter des descriptions aux images<\/td>\n <td><button>D\u00e9tails<\/button><\/td>\n <\/tr>\n <tr>\n <td>Structure HTML<\/td>\n <td>Utiliser une hi\u00e9rarchie de titres correcte<\/td>\n <td><a href=\"#\">D\u00e9tails<\/a><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 6 – Contexte: Contenu de la cellule de donn\u00e9e<\/h2>\n <table>\n <thead>\n <tr>\n <th>Documentation<\/th>\n <th>Version<\/th>\n <th>Action<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Guide d’accessibilit\u00e9 WCAG 2.1 – <a href=\"#\">T\u00e9l\u00e9charger<\/a><\/td>\n <td>2.1<\/td>\n <td>Actuelle<\/td>\n <\/tr>\n <tr>\n <td>Specifications HTML5 – <button>Consulter<\/button><\/td>\n <td>5.0<\/td>\n <td>Actuelle<\/td>\n <\/tr>\n <tr>\n <td>Guide ARIA – <a href=\"#\">Acc\u00e9der<\/a><\/td>\n <td>1.2<\/td>\n <td>Actuelle<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n\n <section class=\"test-section\">\n <h2>Note<\/h2>\n <p>L’un des 6 contextes de lien combin\u00e9 \u00e0 l’intitul\u00e9 du lien doit permettre de comprendre la fonction et la destination du lien.<\/p>\n <\/section>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Test Accessibilit\u00e9 – Contexte des Liens et Boutons Test Accessibilit\u00e9 – Contexte des Liens et Boutons Page de test pour comparer le comportement des lecteurs d’\u00e9cran entre les liens <link> et les <button> au niveau de la prise en compte de leur contexte. Test 1 – Contexte: Contenu de la phrase Pour plus d’informations sur […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":1,"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2026-09-30T14:06:08","date_gmt":"2026-09-30T14:06:08","guid":{"rendered":"https:\/\/sandbox-a11y.boscop.io\/?page_id=6"},"modified":"2026-09-30T14:06:08","modified_gmt":"2026-09-30T14:06:08","slug":"6-2","status":"publish","type":"page","link":"https:\/\/sandbox-a11y.boscop.io\/?page_id=6","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Test Accessibilit\u00e9 – Contexte des Liens et Boutons<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n line-height: 1.6;\n }\n .test-section {\n margin: 40px 0;\n border: 1px solid #ccc;\n padding: 20px;\n background-color: #f9f9f9;\n }\n .test-title {\n font-size: 18px;\n font-weight: bold;\n margin-bottom: 15px;\n color: #333;\n }\n table {\n border-collapse: collapse;\n width: 100%;\n margin: 15px 0;\n }\n th, td {\n border: 1px solid #ddd;\n padding: 12px;\n text-align: left;\n }\n th {\n background-color: #e8e8e8;\n font-weight: bold;\n }\n a, button {\n color: #0066cc;\n text-decoration: underline;\n cursor: pointer;\n border: none;\n background: none;\n padding: 0;\n font: inherit;\n }\n \n button {\n color: red;\n text-decoration: underline;\n }\n a:hover, button:hover {\n text-decoration: none;\n }\n h2 {\n margin-top: 0;\n color: #333;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Test Accessibilit\u00e9 – Contexte des Liens et Boutons<\/h1>\n <p>Page de test pour comparer le comportement des lecteurs d’\u00e9cran entre les liens <a href=#><link><\/a> et les <button><button><\/button> au niveau de la prise en compte de leur contexte.<\/p>\n\n \n <section class=\"test-section\">\n <h2>Test 1 – Contexte: Contenu de la phrase<\/h2>\n <p>Pour plus d’informations sur les techniques de programmation accessible, consultez notre <a href=\"#\">guide complet<\/a> qui couvre tous les standards WCAG.<\/p>\n <p>Pour plus d’informations sur les techniques de programmation accessible, consultez notre <button>guide complet<\/button> qui couvre tous les standards WCAG.<\/p>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 2 – Contexte: Contenu du paragraphe<\/h2>\n <p>\n L’accessibilit\u00e9 web est essentielle pour permettre \u00e0 tous les utilisateurs d’acc\u00e9der au contenu, y compris les personnes en situation de handicap. \n Vous pouvez <a href=\"#\">en savoir plus<\/a> en consultant nos ressources.\n <\/p>\n <p>\n L’accessibilit\u00e9 web est essentielle pour permettre \u00e0 tous les utilisateurs d’acc\u00e9der au contenu, y compris les personnes en situation de handicap. \n Vous pouvez <button>en savoir plus<\/button> en consultant nos ressources.\n <\/p>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 3 – Contexte: Contenu de l’item de liste<\/h2>\n <ul>\n <li>HTML s\u00e9mantique: <a href=\"#\">documentation<\/a><\/li>\n <li>CSS avanc\u00e9: <button>documentation<\/button><\/li>\n <li>JavaScript accessible: <a href=\"#\">tutoriel<\/a><\/li>\n <\/ul>\n <ul>\n <li>\n Techniques ARIA:\n <ul>\n <li><a href=\"#\">attributs ARIA<\/a><\/li>\n <li><button>r\u00f4les ARIA<\/button><\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 4 – Contexte: Titre pr\u00e9c\u00e9dent<\/h2>\n \n <h3>Principes fondamentaux d’accessibilit\u00e9<\/h3>\n <p>Comprendre les principes de base de l’accessibilit\u00e9 web. <a href=\"#\">En savoir plus<\/a><\/p>\n <p>Comprendre les principes de base de l’accessibilit\u00e9 web. <button>En savoir plus<\/button><\/p>\n\n <h3>Outils et ressources de test<\/h3>\n <p>Utilisez l’assistant d’accessibilit\u00e9 pour tester la conformit\u00e9 RGAA. <a href=\"#\">Aller voir l’assistant<\/a><\/p>\n <p>Utilisez l’assistant d’accessibilit\u00e9 pour tester la conformit\u00e9 RGAA. <button>Ouvrir l’assistant<\/button><\/p>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 5 – Contexte: En-t\u00eates et cellules de tableau<\/h2>\n <table>\n <thead>\n <tr>\n <th>Fonctionnalit\u00e9<\/th>\n <th>Description<\/th>\n <th>Action<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Contraste des couleurs<\/td>\n <td>V\u00e9rifier le ratio de contraste WCAG<\/td>\n <td><a href=\"#\">D\u00e9tails<\/a><\/td>\n <\/tr>\n <tr>\n <td>Textes alternatifs<\/td>\n <td>Ajouter des descriptions aux images<\/td>\n <td><button>D\u00e9tails<\/button><\/td>\n <\/tr>\n <tr>\n <td>Structure HTML<\/td>\n <td>Utiliser une hi\u00e9rarchie de titres correcte<\/td>\n <td><a href=\"#\">D\u00e9tails<\/a><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n\n \n <section class=\"test-section\">\n <h2>Test 6 – Contexte: Contenu de la cellule de donn\u00e9e<\/h2>\n <table>\n <thead>\n <tr>\n <th>Documentation<\/th>\n <th>Version<\/th>\n <th>Action<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Guide d’accessibilit\u00e9 WCAG 2.1 – <a href=\"#\">T\u00e9l\u00e9charger<\/a><\/td>\n <td>2.1<\/td>\n <td>Actuelle<\/td>\n <\/tr>\n <tr>\n <td>Specifications HTML5 – <button>Consulter<\/button><\/td>\n <td>5.0<\/td>\n <td>Actuelle<\/td>\n <\/tr>\n <tr>\n <td>Guide ARIA – <a href=\"#\">Acc\u00e9der<\/a><\/td>\n <td>1.2<\/td>\n <td>Actuelle<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n\n <section class=\"test-section\">\n <h2>Note<\/h2>\n <p>L’un des 6 contextes de lien combin\u00e9 \u00e0 l’intitul\u00e9 du lien doit permettre de comprendre la fonction et la destination du lien.<\/p>\n <\/section>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Test Accessibilit\u00e9 – Contexte des Liens et Boutons Test Accessibilit\u00e9 – Contexte des Liens et Boutons Page de test pour comparer le comportement des lecteurs d’\u00e9cran entre les liens <link> et les <button> au niveau de la prise en compte de leur contexte. Test 1 – Contexte: Contenu de la phrase Pour plus d’informations sur […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":1,"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/sandbox-a11y.boscop.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}