Page non accessible \u2013 Commande vocale<\/title>\n <style>\n .big-button {\n font-size: 24px;\n padding: 1rem 2rem;\n margin: 1rem 0;\n background-color: #008cba;\n color: white;\n border: none;\n cursor: pointer;\n display: block;\n width: 300px;\n text-align: center;\n }\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\n .big-button:disabled {\n background-color: #a0a0a0;\n cursor: not-allowed;\n }\n\n #message-container {\n margin-top: 2rem;\n position: relative;\n display: flex;\n align-items: center;\n gap: 1rem;\n font-size: 20px;\n font-weight: bold;\n color: green;\n }\n\n #progress-circle {\n width: 24px;\n height: 24px;\n border: 3px solid #ccc;\n border-radius: 50%;\n position: relative;\n flex-shrink: 0;\n }\n\n #progress-fill {\n position: absolute;\n top: 0;\n left: 0;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: conic-gradient(#008cba 0deg, #008cba 0deg, transparent 0deg);\n transition: background 0.3s;\n pointer-events: none;\n }\n\n #message-text {\n flex: 1;\n }\n <\/style>\n<\/head>\n<body>\n\n <h2>Actions disponibles<\/h1>\n<table>\n<tr>\n<td><button class=\"big-button\" title=\"Cr\u00e9er un profil\" aria-label=\"Cr\u00e9er un profil\" onclick=\"showMessage('Inscription envoy\u00e9e')\">S\u2019inscrire<\/button><\/td>\n<td><p>title=\u00a0\u00bbCr\u00e9er un profil\u00a0\u00bb aria-label=\u00a0\u00bbCr\u00e9er un profil\u00a0\u00bb<\/p><\/td>\n<\/tr>\n<tr>\n<td><button class=\"big-button\" title=\"Annuler\" aria-label=\"Annuler\" onclick=\"showMessage('R\u00e9servation confirm\u00e9e')\">R\u00e9server<\/button><\/td>\n<td><p>title=\u00a0\u00bbAnnuler\u00a0\u00bb aria-label=\u00a0\u00bbAnnuler\u00a0\u00bb<\/p><\/td>\n<\/tr>\n<tr>\n<td><button class=\"big-button\" onclick=\"showMessage('Action annul\u00e9e')\">\n <span style=\"display:inline-block; font-weight:bold;\">Annuler<\/span>\n <\/button><\/td>\n<td><p><\/p><\/td>\n<\/tr>\n<tr>\n<td><button class=\"big-button\" aria-label=\"\" onclick=\"showMessage('T\u00e9l\u00e9chargement lanc\u00e9')\">T\u00e9l\u00e9charger<\/button><\/td>\n<td><p>aria-label=\u00a0\u00bb\u00a0\u00bb<\/p><\/td>\n<\/tr>\n<\/table>\n\n <div id=\"message-container\" style=\"display: none;\" aria-live=\"polite\">\n <div id=\"progress-circle\">\n <div id=\"progress-fill\"><\/div>\n <\/div>\n <div id=\"message-text\"><\/div>\n <\/div>\n\n <script>\n function disableButtons(disabled) {\n const buttons = document.querySelectorAll('.big-button');\n buttons.forEach(btn => btn.disabled = disabled);\n }\n\n function showMessage(text) {\n const messageContainer = document.getElementById('message-container');\n const messageText = document.getElementById('message-text');\n const fill = document.getElementById('progress-fill');\n\n \/\/ D\u00e9sactiver les boutons\n disableButtons(true);\n\n \/\/ R\u00e9initialisation\n fill.style.background = 'conic-gradient(#008cba 0deg, #008cba 0deg, transparent 0deg)';\n messageText.textContent = text;\n messageContainer.style.display = 'flex';\n\n let progress = 0;\n const duration = 3000;\n const interval = 30;\n const step = 360 \/ (duration \/ interval);\n\n const timer = setInterval(() => {\n progress += step;\n if (progress >= 360) progress = 360;\n fill.style.background = `conic-gradient(#008cba ${progress}deg, transparent ${progress}deg)`;\n }, interval);\n\n setTimeout(() => {\n clearInterval(timer);\n messageContainer.style.display = 'none';\n disableButtons(false); \/\/ R\u00e9activer les boutons\n }, duration);\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<h3 class=\"wp-block-heading\">Ce que cela provoque :<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Texte visible<\/th><th>Ce que dit la commande vocale<\/th><th>Ce que comprend l\u2019assistance vocale<\/th><\/tr><\/thead><tbody><tr><td><strong>S\u2019inscrire<\/strong><\/td><td>\u201cCliquer sur \u2018S\u2019inscrire\u2019\u201d<\/td><td>Le bouton s\u2019appelle \u201cCr\u00e9er un profil\u201d<\/td><\/tr><tr><td><strong>R\u00e9server<\/strong><\/td><td>\u201cCliquer sur \u2018R\u00e9server\u2019\u201d<\/td><td>Le bouton s\u2019appelle \u201cAnnuler\u201d<\/td><\/tr><tr><td><strong>Annuler<\/strong><\/td><td>\u201cCliquer sur \u2018Annuler\u2019\u201d<\/td><td>Le bouton est anonyme (aucun label)<\/td><\/tr><tr><td><strong>T\u00e9l\u00e9charger<\/strong><\/td><td>\u201cCliquer sur \u2018T\u00e9l\u00e9charger\u2019\u201d<\/td><td>Le bouton est vide (label vide)<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Page non accessible \u2013 Commande vocale Actions disponibles S\u2019inscrire title=\u00a0\u00bbCr\u00e9er un profil\u00a0\u00bb aria-label=\u00a0\u00bbCr\u00e9er un profil\u00a0\u00bb R\u00e9server title=\u00a0\u00bbAnnuler\u00a0\u00bb aria-label=\u00a0\u00bbAnnuler\u00a0\u00bb Annuler T\u00e9l\u00e9charger aria-label=\u00a0\u00bb\u00a0\u00bb Ce que cela provoque : Texte visible Ce que dit la commande vocale Ce que comprend l\u2019assistance vocale S\u2019inscrire \u201cCliquer sur \u2018S\u2019inscrire\u2019\u201d Le bouton s\u2019appelle \u201cCr\u00e9er un profil\u201d R\u00e9server \u201cCliquer sur \u2018R\u00e9server\u2019\u201d Le bouton […]<\/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-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":13,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":12,"date":"2025-07-16T16:36:42","date_gmt":"2025-07-16T14:36:42","guid":{"rendered":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/?page_id=12"},"modified":"2025-07-17T11:20:50","modified_gmt":"2025-07-17T09:20:50","slug":"boutons-non-explicites","status":"publish","type":"page","link":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/?page_id=12","title":{"rendered":"Boutons non explicites"},"content":{"rendered":"\n\n\n\n Page non accessible \u2013 Commande vocale<\/title>\n <style>\n .big-button {\n font-size: 24px;\n padding: 1rem 2rem;\n margin: 1rem 0;\n background-color: #008cba;\n color: white;\n border: none;\n cursor: pointer;\n display: block;\n width: 300px;\n text-align: center;\n }\n\ntable {\n border-collapse: collapse;\n border: 2px solid rgb(140 140 140);\n font-family: sans-serif;\n font-size: 0.8rem;\n letter-spacing: 1px;\n}\n\nth,\ntd {\n border: 1px solid rgb(160 160 160);\n padding: 8px 10px;\n}\n\n .big-button:disabled {\n background-color: #a0a0a0;\n cursor: not-allowed;\n }\n\n #message-container {\n margin-top: 2rem;\n position: relative;\n display: flex;\n align-items: center;\n gap: 1rem;\n font-size: 20px;\n font-weight: bold;\n color: green;\n }\n\n #progress-circle {\n width: 24px;\n height: 24px;\n border: 3px solid #ccc;\n border-radius: 50%;\n position: relative;\n flex-shrink: 0;\n }\n\n #progress-fill {\n position: absolute;\n top: 0;\n left: 0;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: conic-gradient(#008cba 0deg, #008cba 0deg, transparent 0deg);\n transition: background 0.3s;\n pointer-events: none;\n }\n\n #message-text {\n flex: 1;\n }\n <\/style>\n<\/head>\n<body>\n\n <h2>Actions disponibles<\/h1>\n<table>\n<tr>\n<td><button class=\"big-button\" title=\"Cr\u00e9er un profil\" aria-label=\"Cr\u00e9er un profil\" onclick=\"showMessage('Inscription envoy\u00e9e')\">S\u2019inscrire<\/button><\/td>\n<td><p>title=\u00a0\u00bbCr\u00e9er un profil\u00a0\u00bb aria-label=\u00a0\u00bbCr\u00e9er un profil\u00a0\u00bb<\/p><\/td>\n<\/tr>\n<tr>\n<td><button class=\"big-button\" title=\"Annuler\" aria-label=\"Annuler\" onclick=\"showMessage('R\u00e9servation confirm\u00e9e')\">R\u00e9server<\/button><\/td>\n<td><p>title=\u00a0\u00bbAnnuler\u00a0\u00bb aria-label=\u00a0\u00bbAnnuler\u00a0\u00bb<\/p><\/td>\n<\/tr>\n<tr>\n<td><button class=\"big-button\" onclick=\"showMessage('Action annul\u00e9e')\">\n <span style=\"display:inline-block; font-weight:bold;\">Annuler<\/span>\n <\/button><\/td>\n<td><p><\/p><\/td>\n<\/tr>\n<tr>\n<td><button class=\"big-button\" aria-label=\"\" onclick=\"showMessage('T\u00e9l\u00e9chargement lanc\u00e9')\">T\u00e9l\u00e9charger<\/button><\/td>\n<td><p>aria-label=\u00a0\u00bb\u00a0\u00bb<\/p><\/td>\n<\/tr>\n<\/table>\n\n <div id=\"message-container\" style=\"display: none;\" aria-live=\"polite\">\n <div id=\"progress-circle\">\n <div id=\"progress-fill\"><\/div>\n <\/div>\n <div id=\"message-text\"><\/div>\n <\/div>\n\n <script>\n function disableButtons(disabled) {\n const buttons = document.querySelectorAll('.big-button');\n buttons.forEach(btn => btn.disabled = disabled);\n }\n\n function showMessage(text) {\n const messageContainer = document.getElementById('message-container');\n const messageText = document.getElementById('message-text');\n const fill = document.getElementById('progress-fill');\n\n \/\/ D\u00e9sactiver les boutons\n disableButtons(true);\n\n \/\/ R\u00e9initialisation\n fill.style.background = 'conic-gradient(#008cba 0deg, #008cba 0deg, transparent 0deg)';\n messageText.textContent = text;\n messageContainer.style.display = 'flex';\n\n let progress = 0;\n const duration = 3000;\n const interval = 30;\n const step = 360 \/ (duration \/ interval);\n\n const timer = setInterval(() => {\n progress += step;\n if (progress >= 360) progress = 360;\n fill.style.background = `conic-gradient(#008cba ${progress}deg, transparent ${progress}deg)`;\n }, interval);\n\n setTimeout(() => {\n clearInterval(timer);\n messageContainer.style.display = 'none';\n disableButtons(false); \/\/ R\u00e9activer les boutons\n }, duration);\n }\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<h3 class=\"wp-block-heading\">Ce que cela provoque :<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Texte visible<\/th><th>Ce que dit la commande vocale<\/th><th>Ce que comprend l\u2019assistance vocale<\/th><\/tr><\/thead><tbody><tr><td><strong>S\u2019inscrire<\/strong><\/td><td>\u201cCliquer sur \u2018S\u2019inscrire\u2019\u201d<\/td><td>Le bouton s\u2019appelle \u201cCr\u00e9er un profil\u201d<\/td><\/tr><tr><td><strong>R\u00e9server<\/strong><\/td><td>\u201cCliquer sur \u2018R\u00e9server\u2019\u201d<\/td><td>Le bouton s\u2019appelle \u201cAnnuler\u201d<\/td><\/tr><tr><td><strong>Annuler<\/strong><\/td><td>\u201cCliquer sur \u2018Annuler\u2019\u201d<\/td><td>Le bouton est anonyme (aucun label)<\/td><\/tr><tr><td><strong>T\u00e9l\u00e9charger<\/strong><\/td><td>\u201cCliquer sur \u2018T\u00e9l\u00e9charger\u2019\u201d<\/td><td>Le bouton est vide (label vide)<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Page non accessible \u2013 Commande vocale Actions disponibles S\u2019inscrire title=\u00a0\u00bbCr\u00e9er un profil\u00a0\u00bb aria-label=\u00a0\u00bbCr\u00e9er un profil\u00a0\u00bb R\u00e9server title=\u00a0\u00bbAnnuler\u00a0\u00bb aria-label=\u00a0\u00bbAnnuler\u00a0\u00bb Annuler T\u00e9l\u00e9charger aria-label=\u00a0\u00bb\u00a0\u00bb Ce que cela provoque : Texte visible Ce que dit la commande vocale Ce que comprend l\u2019assistance vocale S\u2019inscrire \u201cCliquer sur \u2018S\u2019inscrire\u2019\u201d Le bouton s\u2019appelle \u201cCr\u00e9er un profil\u201d R\u00e9server \u201cCliquer sur \u2018R\u00e9server\u2019\u201d Le bouton […]<\/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-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":13,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/sandbox.wp-a11y.coolify.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}