{"id":90159,"date":"2026-06-21T12:34:00","date_gmt":"2026-06-21T07:04:00","guid":{"rendered":"https:\/\/showcase.ananyoo.com\/?page_id=90159"},"modified":"2026-09-25T07:50:45","modified_gmt":"2026-09-25T02:20:45","slug":"accessible-forms","status":"publish","type":"page","link":"https:\/\/showcase.ananyoo.com\/fr\/accessible-forms\/","title":{"rendered":"Accessible Forms"},"content":{"rendered":"<p><!-- Accessible Forms showcase \u00b7 real plugin forms \u00b7 Author: Shivaji Mitra \u00b7 Company: M\/S. Anblik (Ananyoo) --><\/p>\n\n\n<style>\n.aaf-demo{--ink:#14213a;\n\t--muted:#46566f;\n\t--line:#dbe3ef;\n\t--bg:#ffffff;\n\t--card:#ffffff;\n\t--primary:#1d4ed8;\n\t--primary-strong:#16329c;\n\t--teal:#0f766e;\n\t--teal-soft:#e6f4f2;\n\t--success:#146c2e;\n\t--success-bg:#f0fdf4;\n\t--error:#b00020;\n\t--error-bg:#fff5f5;\n\n\t\n\t--aaf-target:44px;\n\t--aaf-focus-width:3px;\n\n\t--radius:12px;\n\t--maxw:1160px;\n\t--sans:system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;\n\t--mono:ui-monospace,SFMono-Regular,\"SF Mono\",Menlo,Consolas,\"Liberation Mono\",monospace;}\n.aaf-demo *, .aaf-demo *::before, .aaf-demo *::after{box-sizing:border-box;}\n.aaf-demo{scroll-behavior:smooth;}\n@media (prefers-reduced-motion:reduce){\n.aaf-demo{scroll-behavior:auto;}\n}\n.aaf-demo{margin:0;\n\tfont-family:var(--sans);\n\tfont-size:1.0625rem;\n\tline-height:1.6;\n\tcolor:var(--ink);\n\tbackground:var(--bg);\n\t-webkit-font-smoothing:antialiased;}\n.aaf-demo .skip-link{position:absolute;\n\tleft:-9999px;\n\ttop:0;\n\tz-index:100;\n\tbackground:var(--ink);\n\tcolor:#fff;\n\tpadding:.65rem 1rem;\n\tborder-radius:0 0 8px 8px;\n\tfont-weight:600;\n\ttext-decoration:none;}\n.aaf-demo .skip-link:focus{left:1rem;}\n@media (prefers-reduced-motion:reduce){\n.aaf-demo .skip-link{transition:none;}\n}\n.aaf-demo :focus-visible{outline:var(--aaf-focus-width) solid var(--primary);outline-offset:2px;}\n.aaf-demo a:focus-visible, .aaf-demo button:focus-visible{outline-offset:3px;}\n.aaf-demo a{color:var(--primary-strong);}\n.aaf-demo a:hover{color:var(--primary);}\n.aaf-demo .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem);}\n.aaf-demo .eyebrow{display:inline-block;\n\tfont-size:.78rem;\n\tfont-weight:700;\n\tletter-spacing:.12em;\n\ttext-transform:uppercase;\n\tcolor:var(--teal);\n\tmargin:0 0 .75rem;}\n.aaf-demo .site-header{background:var(--card);}\n.aaf-demo .site-header .wrap{display:flex;\n\tflex-wrap:wrap;\n\tgap:.75rem 1.5rem;\n\talign-items:center;\n\tjustify-content:center;\n\tpadding-block:2.25rem 1.25rem;}\n.aaf-demo .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-size:1.15rem;}\n.aaf-demo .brand .mark{display:grid;place-items:center;\n\twidth:2.1rem;height:2.1rem;border-radius:8px;\n\tbackground:var(--ink);color:#fff;font-size:1.1rem;font-weight:800;}\n.aaf-demo .brand small{display:block;font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.02em;}\n.aaf-demo .header-links{display:flex;gap:.6rem .7rem;flex-wrap:wrap;justify-content:center;font-size:.95rem;}\n.aaf-demo .header-links a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.15rem;border-radius:999px;font-weight:700;text-decoration:none;border:1.5px solid transparent;transition:background-color .15s ease,color .15s ease,border-color .15s ease;}\n.aaf-demo .hbtn-indigo{background:#e8edfb;color:#16329c;border-color:#cdd9f7;}\n.aaf-demo .hbtn-indigo:hover, .aaf-demo .hbtn-indigo:focus-visible{background:#1d4ed8;color:#fff;border-color:#1d4ed8;}\n.aaf-demo .hbtn-teal{background:#e3f3ef;color:#0c5e4a;border-color:#bfe5db;}\n.aaf-demo .hbtn-teal:hover, .aaf-demo .hbtn-teal:focus-visible{background:#0f766e;color:#fff;border-color:#0f766e;}\n.aaf-demo .hbtn-violet{background:#ece8fb;color:#4c1d95;border-color:#d7cdf6;}\n.aaf-demo .hbtn-violet:hover, .aaf-demo .hbtn-violet:focus-visible{background:#6d28d9;color:#fff;border-color:#6d28d9;}\n.aaf-demo .hbtn-amber{background:#fbeede;color:#9a3412;border-color:#f3d9bd;}\n.aaf-demo .hbtn-amber:hover, .aaf-demo .hbtn-amber:focus-visible{background:#c2410c;color:#fff;border-color:#c2410c;}\n.aaf-demo .header-links a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}\n.aaf-demo .hero{padding-block:clamp(2.5rem,7vw,4.5rem) clamp(1.5rem,4vw,2.5rem);}\n.aaf-demo .hero-center{max-width:760px;margin-inline:auto;text-align:center;}\n.aaf-demo .hero-emblem{display:block;width:64px;height:64px;margin:0 auto 1.1rem;}\n.aaf-demo .hero h2{font-size:clamp(1.9rem,4.6vw,3.1rem);\n\tline-height:1.1;\n\tletter-spacing:-.02em;\n\tmargin:.2rem 0 1rem;\n\tmax-width:none;}\n.aaf-demo .hero .lede{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--muted);max-width:54ch;margin:0 auto 1.75rem;}\n.aaf-demo .facts{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0;justify-content:center;}\n.aaf-demo .facts li{background:var(--card);\n\tborder:1px solid var(--line);\n\tborder-radius:999px;\n\tpadding:.4rem .9rem;\n\tfont-size:.9rem;\n\tfont-weight:600;\n\tcolor:var(--ink);}\n.aaf-demo .facts li span{color:var(--teal);margin-right:.35rem;font-weight:800;}\n.aaf-demo .tryhint{display:flex;gap:.75rem;align-items:flex-start;\n\tbackground:var(--teal-soft);\n\tborder:1px solid #bfe0db;\n\tborder-left:5px solid var(--teal);\n\tborder-radius:10px;\n\tpadding:1rem 1.15rem;\n\tmax-width:62ch;\n\tcolor:#0b3d39;\n\tfont-size:.98rem;}\n.aaf-demo .tryhint strong{color:var(--teal);}\n.aaf-demo .hero-inner{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center;}\n@media (min-width:60rem){\n.aaf-demo .hero-inner{grid-template-columns:1.25fr .85fr;gap:2.75rem;}\n}\n.aaf-demo .hero-copy{min-width:0;}\n.aaf-demo .hero-media{display:flex;justify-content:center;}\n.aaf-demo .hero-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.9rem 1.6rem;text-align:center;width:100%;max-width:400px;box-shadow:0 1px 2px rgba(20,33,58,.05),0 10px 30px rgba(20,33,58,.07);}\n.aaf-demo .hero-card-icon{display:block;width:64px;height:64px;margin:0 auto 1.1rem;}\n.aaf-demo .hero-card-title{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 .4rem;}\n.aaf-demo .hero-card-sub{font-size:.97rem;color:var(--muted);margin:0 0 1.2rem;line-height:1.5;}\n.aaf-demo .hero-card-foot{font-size:.92rem;font-weight:700;color:var(--primary-strong);margin:0;padding-top:1.1rem;border-top:1px solid var(--line);}\n.aaf-demo .prose{max-width:none;}\n.aaf-demo .prose p{margin:0 0 1rem;}\n.aaf-demo .faq{max-width:none;}\n.aaf-demo .faq h3{margin:1.5rem 0 .35rem;font-size:1.12rem;}\n.aaf-demo .faq p{margin:0;color:var(--muted);}\n.aaf-demo section[id]{scroll-margin-top:1.5rem;}\n.aaf-demo .band{padding-block:clamp(2rem,5vw,3.5rem);}\n.aaf-demo .band--alt{}\n\n\/* Dark-band text-contrast override: the ARIADE theme's .band rule\n   (theme.css line 171) sets background:var(--ink) with color:#fff. Inside\n   .band sections the page's --muted eyebrow \/ section-head paragraph text\n   falls to about 2.15:1 on that dark ink background, which AXE and\n   Lighthouse both flag as a serious color-contrast fail (WCAG 1.4.3 AA).\n   These overrides lift the .eyebrow and .section-head p colors to #cdd6ea\n   inside .band and .band--alt, giving roughly 10.9:1 on --ink. Matches the\n   colour palette the .aaf-demo .site-footer already uses on the same dark\n   background, so the page keeps a consistent look. *\/\n.aaf-demo .band .eyebrow,\n.aaf-demo .band--alt .eyebrow,\n.aaf-demo .band .section-head p,\n.aaf-demo .band--alt .section-head p { color: #cdd6ea; }\n\n\/* Redefine --muted and --primary CSS variables INSIDE .band scope only.\n   Because the theme flips .band to a dark background, every element inside\n   .band that inherits a colour from these variables (paragraphs styled with\n   var(--muted), links styled with var(--primary-strong)) would otherwise\n   render dark-on-dark. Redefining the variables inside .band keeps the CSS\n   elsewhere on the page unchanged while making every band-scoped colour\n   automatically flip. --muted becomes #cdd6ea (10.9:1 on --ink), and the\n   link palette moves to indigo-300 \/ indigo-200 which give roughly 8:1 and\n   9:1 on --ink respectively. AAA passes. *\/\n.aaf-demo .band,\n.aaf-demo .band--alt {\n\t--muted: #cdd6ea;\n\t--primary-strong: #a5b4fc;\n\t--primary: #c7d2fe;\n}\n\/* Direct colour rules for headings and card body text inside .band. We\n   cannot redefine --ink here because .band { background: var(--ink) } is\n   set on the band element itself (via the theme), and CSS variables\n   cascade to the element that redefines them, so overriding --ink inside\n   .band would flip the band's OWN background from #14213a to whatever we\n   set. Instead we target the specific text elements that inherit their\n   colour from --ink or --body in the theme, and set them to white or\n   light-slate directly. *\/\n.aaf-demo .band h1, .aaf-demo .band h2, .aaf-demo .band h3, .aaf-demo .band h4,\n.aaf-demo .band--alt h1, .aaf-demo .band--alt h2, .aaf-demo .band--alt h3, .aaf-demo .band--alt h4 { color: #ffffff; }\n\/* Cards inside bands have a white background (background:var(--card)),\n   so headings INSIDE .card must NOT inherit the white text colour above.\n   Restore them to --ink (dark navy) which is 7.4:1 on white. Higher\n   specificity than the band-white rule so this always wins for cards. *\/\n.aaf-demo .band .card h1, .aaf-demo .band .card h2, .aaf-demo .band .card h3, .aaf-demo .band .card h4,\n.aaf-demo .band--alt .card h1, .aaf-demo .band--alt .card h2, .aaf-demo .band--alt .card h3, .aaf-demo .band--alt .card h4 { color: var(--ink); }\n\/* Note: .card elements inside .band have their own white background\n   (background:var(--card) = #ffffff on .card), so card paragraphs are on\n   a light card, not on the dark band directly. They keep their default\n   theme colour and contrast normally. No override needed here. *\/\n.aaf-demo .section-head{max-width:none;margin-bottom:1.75rem;}\n.aaf-demo .try-intro{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.75rem;}\n@media (min-width:60rem){\n.aaf-demo .try-intro{grid-template-columns:1.55fr .85fr;gap:2rem;align-items:start;}\n}\n.aaf-demo .try-intro .section-head{max-width:none;margin-bottom:0;}\n.aaf-demo .try-intro .tryhint{max-width:none;margin:0;}\n.aaf-demo .section-head h2{font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.15;letter-spacing:-.015em;margin:.25rem 0 .6rem;}\n.aaf-demo .section-head p{color:var(--muted);margin:0;}\n.aaf-demo .demo-grid{display:grid;gap:1.75rem;grid-template-columns:1fr;}\n@media (min-width:64rem){\n.aaf-demo .demo-grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:start;}\n}\n.aaf-demo .card{background:var(--card);\n\tborder:1px solid var(--line);\n\tborder-radius:var(--radius);\n\tpadding:clamp(1.25rem,3vw,2rem);\n\tbox-shadow:0 1px 2px rgba(20,33,58,.04),0 8px 24px rgba(20,33,58,.05);}\n.aaf-demo .card > h3:first-child, .aaf-demo .card > .card-head:first-child{margin-top:0;}\n.aaf-demo .card-head{margin-bottom:1.25rem;}\n.aaf-demo .card-head h3{font-size:1.3rem;margin:0 0 .35rem;letter-spacing:-.01em;}\n.aaf-demo .card-head p{margin:0;color:var(--muted);font-size:.95rem;}\n.aaf-demo .rail{position:static;}\n@media (min-width:64rem){\n.aaf-demo .rail{position:sticky;top:1.5rem;}\n}\n.aaf-demo .rail h3{font-size:1.05rem;margin:0 0 .25rem;}\n.aaf-demo .rail .rail-sub{color:var(--muted);font-size:.9rem;margin:0 0 1rem;}\n.aaf-demo .sc-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}\n.aaf-demo .sc-list li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;}\n.aaf-demo .sc-num{font-family:var(--mono);\n\tfont-size:.8rem;\n\tfont-weight:700;\n\tcolor:var(--teal);\n\tbackground:var(--teal-soft);\n\tborder-radius:6px;\n\tpadding:.2rem .45rem;\n\twhite-space:nowrap;\n\tmargin-top:.1rem;}\n.aaf-demo .sc-list b{font-weight:700;}\n.aaf-demo .sc-list span{color:var(--muted);font-size:.92rem;display:block;}\n.aaf-demo .form-pair{display:grid;gap:1.75rem;grid-template-columns:1fr;}\n@media (min-width:48rem){\n.aaf-demo .form-pair{grid-template-columns:1fr 1fr;}\n}\n.aaf-demo .demo-controls{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.25rem;}\n.aaf-demo .btn-ghost{font:inherit;font-weight:600;\n\tmin-height:var(--aaf-target);\n\tpadding:.5rem 1rem;\n\tbackground:var(--card);\n\tcolor:var(--primary-strong);\n\tborder:2px solid var(--primary);\n\tborder-radius:8px;\n\tcursor:pointer;}\n.aaf-demo .btn-ghost:hover{background:#eef3ff;}\n.aaf-demo .how-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;}\n@media (min-width:48rem){\n.aaf-demo .how-grid{grid-template-columns:1fr 1fr;}\n}\n.aaf-demo code, .aaf-demo kbd{font-family:var(--mono);}\n.aaf-demo .code{display:block;\n\tbackground:#0f1830;\n\tcolor:#e7ecfb;\n\tborder-radius:10px;\n\tpadding:1rem 1.1rem;\n\tfont-size:.92rem;\n\toverflow-x:auto;\n\tmargin:.75rem 0 0;}\n.aaf-demo .code .tok{color:#9ec1ff;}\n.aaf-demo .site-footer{background:var(--ink);color:#cdd6ea;padding-block:2.5rem;margin-top:.5rem;}\n.aaf-demo .site-footer a{color:#fff;}\n.aaf-demo .site-footer .wrap{display:grid;gap:1.25rem;grid-template-columns:1fr;}\n@media (min-width:48rem){\n.aaf-demo .site-footer .wrap{grid-template-columns:2fr 1fr;align-items:center;}\n}\n.aaf-demo .site-footer h2{font-size:1.15rem;margin:0 0 .4rem;color:#fff;}\n.aaf-demo .site-footer p{margin:.25rem 0;font-size:.95rem;}\n.aaf-demo .foot-links{display:flex;gap:1.25rem;flex-wrap:wrap;font-weight:600;}\n.aaf-demo .visually-hidden{position:absolute!important;width:1px;height:1px;\n\tpadding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}\n.aaf-demo .aaf-form{max-width:100%;}\n.aaf-demo .aaf-form-title{margin:0 0 1rem;font-size:1.15rem;line-height:1.3;}\n.aaf-demo .aaf-field{margin:0 0 1.25rem;}\n.aaf-demo .aaf-label, .aaf-demo .aaf-group legend{display:block;margin:0 0 .25rem;line-height:1.3;font-weight:600;color:var(--ink);}\n.aaf-demo .aaf-required{color:var(--error);}\n.aaf-demo .aaf-help{display:block;margin:0 0 .3rem;font-size:.9rem;color:var(--muted);line-height:1.4;}\n.aaf-demo .aaf-form input[type=\"text\"], .aaf-demo .aaf-form input[type=\"email\"], .aaf-demo .aaf-form input[type=\"tel\"], .aaf-demo .aaf-form input[type=\"url\"], .aaf-demo .aaf-form input[type=\"number\"], .aaf-demo .aaf-form textarea, .aaf-demo .aaf-form select{width:100%;\n\tmin-height:var(--aaf-target);\n\tpadding:.55rem .7rem;\n\tfont:inherit;\n\tfont-size:1rem;\n\tcolor:var(--ink);\n\tbackground:#fff;\n\tborder:2px solid #4b5563;\n\tborder-radius:8px;}\n.aaf-demo .aaf-form textarea{min-height:calc(var(--aaf-target) * 2.5);resize:vertical;}\n.aaf-demo .aaf-form :focus-visible{outline:var(--aaf-focus-width) solid var(--primary);outline-offset:2px;}\n.aaf-demo .aaf-form .aaf-field{display:flex;flex-direction:column;gap:.35rem;}\n.aaf-demo .aaf-form .aaf-field > label, .aaf-demo .aaf-form .aaf-field > .aaf-help, .aaf-demo .aaf-form .aaf-field > input, .aaf-demo .aaf-form .aaf-field > select, .aaf-demo .aaf-form .aaf-field > textarea, .aaf-demo .aaf-form .aaf-field > .aaf-choice, .aaf-demo .aaf-form .aaf-field > .aaf-error{margin:0 !important;}\n.aaf-demo .aaf-form .aaf-group legend{margin:0 0 .35rem !important;}\n.aaf-demo .aaf-form .aaf-group .aaf-choice{margin-top:0 !important;}\n.aaf-demo .aaf-choice{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .4rem;}\n.aaf-demo .aaf-choice input{width:1.25rem;height:1.25rem;min-width:1.25rem;margin-top:.2rem;}\n.aaf-demo .aaf-choice label{font-weight:400;margin:0;}\n.aaf-demo .aaf-group{margin:0;padding:0;border:0;}\n.aaf-demo .aaf-error{display:block;margin:.35rem 0 0;font-weight:600;color:var(--error);}\n.aaf-demo .aaf-error::before{content:\"\\26A0\";margin-right:.35rem;}\n.aaf-demo .aaf-has-error input, .aaf-demo .aaf-has-error textarea, .aaf-demo .aaf-has-error select{border-color:var(--error);border-width:3px;}\n.aaf-demo .aaf-errors{margin:0 0 1.5rem;padding:1rem 1.25rem;border:3px solid var(--error);border-radius:8px;background:var(--error-bg);}\n.aaf-demo .aaf-errors-title{margin:0 0 .5rem;font-size:1.05rem;color:var(--error);}\n.aaf-demo .aaf-errors ul{margin:0;padding-left:1.25rem;}\n.aaf-demo .aaf-errors a{color:var(--error);font-weight:700;}\n.aaf-demo .aaf-success{padding:1.1rem 1.25rem;border:3px solid var(--success);border-radius:8px;background:var(--success-bg);color:#14532d;font-weight:600;}\n.aaf-demo .aaf-success::before{content:\"\\2713\";margin-right:.5rem;font-weight:800;}\n.aaf-demo .aaf-success .btn-ghost{margin-top:1rem;border-color:var(--success);color:var(--success);}\n.aaf-demo .aaf-success .btn-ghost:hover{background:#e3f8ea;}\n.aaf-demo .aaf-actions{margin:.5rem 0 0;}\n.aaf-demo .aaf-submit{min-height:var(--aaf-target);min-width:var(--aaf-target);\n\tpadding:.6rem 1.5rem;font:inherit;font-size:1rem;font-weight:700;\n\tcolor:#fff;background:var(--primary);border:2px solid var(--primary);border-radius:8px;cursor:pointer;}\n.aaf-demo .aaf-submit:hover{background:var(--primary-strong);border-color:var(--primary-strong);}\n@media (prefers-reduced-motion:reduce){\n.aaf-demo *{transition:none!important;animation:none!important;}\n}\n@media (forced-colors:active){\n.aaf-demo :focus-visible, .aaf-demo .aaf-form :focus-visible{outline:3px solid CanvasText;}\n.aaf-demo .card, .aaf-demo .facts li, .aaf-demo .tryhint{border:1px solid CanvasText;}\n\n}\n\n\/* wrapper: full-width breakout + base reset *\/\n.aaf-demo{box-sizing:border-box;}\n.aaf-demo img{max-width:100%;height:auto;}\n\n\/* Real plugin forms (Shortcode\/Columns blocks, outside .aaf-demo) - same card look. This page only. *\/\n.aaf-form{background:#ffffff;border:1px solid #dbe3ef;border-radius:12px;padding:clamp(1.25rem,3vw,2rem);box-shadow:0 1px 2px rgba(20,33,58,.04),0 8px 24px rgba(20,33,58,.05);max-width:100%;font-size:1rem;line-height:1.6;}\n.aaf-success,.aaf-errors{font-size:1rem;line-height:1.6;}\n.wp-block-columns{margin-top:clamp(2rem,5vw,3.25rem);margin-bottom:clamp(2rem,5vw,3.25rem);}\n.wp-block-column > .aaf-form{height:100%;}\n<\/style>\n<div class=\"aaf-demo\">\n<header class=\"site-header\">\n\t<div class=\"wrap\">\n\t\t<nav class=\"header-links\" aria-label=\"Accessible Forms demo sections\">\n\t\t\t<a class=\"hbtn-indigo\" href=\"#try\">Try it<\/a>\n\t\t\t<a class=\"hbtn-teal\" href=\"#more\">More forms<\/a>\n\t\t\t<a class=\"hbtn-violet\" href=\"#how\">Add a form<\/a>\n\t\t\t<a class=\"hbtn-amber\" href=\"https:\/\/ananyoo.com\/web-accessibility-case-study\/\" target=\"_blank\" rel=\"noopener\">Case study<\/a>\n\t\t<\/nav>\n\t<\/div>\n<\/header>\n<section class=\"hero wrap\" aria-labelledby=\"hero-h\">\n\t\t<div class=\"hero-center\">\n\t\t\t<img loading=\"lazy\" decoding=\"async\" class=\"hero-emblem\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0IiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkFjY2Vzc2libGUgZm9ybSI+CjxyZWN0IHg9IjE0IiB5PSI3IiB3aWR0aD0iMzYiIGhlaWdodD0iNTAiIHJ4PSI1IiBmaWxsPSIjZWVmMmZmIiBzdHJva2U9IiMxZDRlZDgiIHN0cm9rZS13aWR0aD0iMyIvPgo8bGluZSB4MT0iMjEiIHkxPSIyMyIgeDI9IjQzIiB5Mj0iMjMiIHN0cm9rZT0iIzBmNzY2ZSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPGxpbmUgeDE9IjIxIiB5MT0iMzEiIHgyPSI0MyIgeTI9IjMxIiBzdHJva2U9IiMwZjc2NmUiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxyZWN0IHg9IjIxIiB5PSI0MCIgd2lkdGg9IjkiIGhlaWdodD0iOSIgcng9IjEuNSIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMGY3NjZlIiBzdHJva2Utd2lkdGg9IjIuNSIvPgo8cGF0aCBkPSJNMjMuMiA0NC41IGwyLjMgMi4zIGw0IC00LjgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE2YTM0YSIgc3Ryb2tlLXdpZHRoPSIyLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8bGluZSB4MT0iMzQiIHkxPSI0NC41IiB4Mj0iNDQiIHkyPSI0NC41IiBzdHJva2U9IiMwZjc2NmUiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=\" width=\"64\" height=\"64\" alt=\"Accessible forms - WCAG 2.2 AA by Ananyoo\">\n\t\t\t<p class=\"eyebrow\">Accessible Forms \u00b7 Live demo<\/p>\n\t\t\t<h2 id=\"hero-h\">Accessible forms that work for everyone.<\/h2>\n\t\t\t<p class=\"lede\">Built to WCAG 2.2 AA by construction - try every form by keyboard or screen reader, on any device.<\/p>\n\t\t\t<ul class=\"facts\">\n\t\t\t\t<li><span>\u2713<\/span>WCAG 2.2 AA<\/li>\n\t\t\t\t<li><span>\u2713<\/span>Block &amp; shortcode<\/li>\n\t\t\t\t<li><span>\u2713<\/span>Keyboard &amp; screen-reader ready<\/li>\n\t\t\t\t<li><span>\u2713<\/span>Reflows to 320px<\/li>\n\t\t\t\t<li><span>\u2713<\/span>No third-party scripts<\/li>\n\t\t\t<\/ul>\n\t\t<\/div>\n\t<\/section>\n<section id=\"try\" class=\"band wrap\" aria-labelledby=\"try-h\">\n\t\t<div class=\"try-intro\">\n\t\t\t<div class=\"section-head\">\n\t\t\t<p class=\"eyebrow\">Full example<\/p>\n\t\t\t<h2 id=\"try-h\">Enquiry form - every field type<\/h2>\n\t\t\t<p>One form showing text, email, telephone, web address, number, dropdown, radio buttons, checkboxes,\n\t\t\t\ta paragraph field and a consent checkbox - each correctly labelled and grouped.<\/p>\n\t\t<\/div>\n\t\t\t<p class=\"tryhint\">\n\t\t\t<strong>Tip:<\/strong>\n\t\t\t<span>Submit the enquiry form empty. Watch the error summary appear, take\n\t\t\tfocus, and link straight to each field - the behaviour a screen-reader user depends on.<\/span>\n\t\t<\/p>\n\t\t<\/div>\n\t<\/section>\n<\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:58%\">\t\t\t\t<form class=\"aaf-form\" id=\"aaf-90303\" method=\"post\"\n\t\t\tnovalidate\t\t\taria-labelledby=\"aaf-90303-title\"\n\t\t\tdata-aaf-sub-level=\"3\">\n\n\t\t\t<h2 class=\"aaf-form-title\" id=\"aaf-90303-title\">Enquiry Form<\/h2>\n\t\t\t\t\t\t\t<p class=\"aaf-required-note\">\n\t\t\t\t\tFields marked with an asterisk (*) are required.\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t\n\t\t\t<div class=\"aaf-field aaf-field-text\"><label class=\"aaf-label\" for=\"aaf-90303-your_name\">Your name <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><input type=\"text\" id=\"aaf-90303-your_name\" name=\"aaf_field[your_name]\" value=\"\" aria-required=\"true\" autocomplete=\"name\"><\/div><div class=\"aaf-field aaf-field-email\"><label class=\"aaf-label\" for=\"aaf-90303-your_email\">Your email <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><span class=\"aaf-help\" id=\"aaf-90303-your_email-help\">We will reply to this address.<\/span><input type=\"email\" id=\"aaf-90303-your_email\" name=\"aaf_field[your_email]\" value=\"\" aria-required=\"true\" aria-describedby=\"aaf-90303-your_email-help\" autocomplete=\"email\" inputmode=\"email\"><\/div><div class=\"aaf-field aaf-field-tel\"><label class=\"aaf-label\" for=\"aaf-90303-phone\">Phone<\/label><input type=\"tel\" id=\"aaf-90303-phone\" name=\"aaf_field[phone]\" value=\"\" autocomplete=\"tel\" inputmode=\"tel\"><\/div><div class=\"aaf-field aaf-field-url\"><label class=\"aaf-label\" for=\"aaf-90303-website\">Website<\/label><input type=\"url\" id=\"aaf-90303-website\" name=\"aaf_field[website]\" value=\"\" autocomplete=\"url\" inputmode=\"url\"><\/div><div class=\"aaf-field aaf-field-number\"><label class=\"aaf-label\" for=\"aaf-90303-budget_usd\">Budget (USD)<\/label><input type=\"number\" id=\"aaf-90303-budget_usd\" name=\"aaf_field[budget_usd]\" value=\"\" inputmode=\"numeric\"><\/div><div class=\"aaf-field aaf-field-select\"><label class=\"aaf-label\" for=\"aaf-90303-subject\">Subject<\/label><select id=\"aaf-90303-subject\" name=\"aaf_field[subject]\"><option value=\"\">Please choose\u2026<\/option><option value=\"General enquiry\">General enquiry<\/option><option value=\"Accessibility audit\">Accessibility audit<\/option><option value=\"Remediation\">Remediation<\/option><option value=\"Training\">Training<\/option><\/select><\/div><div class=\"aaf-field aaf-field-radio\"><fieldset class=\"aaf-group\" id=\"aaf-90303-how_did_you_hear\"><legend class=\"aaf-label\">How did you hear about us?<\/legend><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90303-how_did_you_hear-0\" name=\"aaf_field[how_did_you_hear]\" value=\"Search engine\"><label for=\"aaf-90303-how_did_you_hear-0\">Search engine<\/label><\/span><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90303-how_did_you_hear-1\" name=\"aaf_field[how_did_you_hear]\" value=\"A referral\"><label for=\"aaf-90303-how_did_you_hear-1\">A referral<\/label><\/span><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90303-how_did_you_hear-2\" name=\"aaf_field[how_did_you_hear]\" value=\"Social media\"><label for=\"aaf-90303-how_did_you_hear-2\">Social media<\/label><\/span><\/fieldset><\/div><div class=\"aaf-field aaf-field-checkboxes\"><fieldset class=\"aaf-group\" id=\"aaf-90303-services\"><legend class=\"aaf-label\">Services you are interested in<\/legend><span class=\"aaf-choice\"><input type=\"checkbox\" id=\"aaf-90303-services-0\" name=\"aaf_field[services][]\" value=\"Accessibility audit\"><label for=\"aaf-90303-services-0\">Accessibility audit<\/label><\/span><span class=\"aaf-choice\"><input type=\"checkbox\" id=\"aaf-90303-services-1\" name=\"aaf_field[services][]\" value=\"Remediation\"><label for=\"aaf-90303-services-1\">Remediation<\/label><\/span><span class=\"aaf-choice\"><input type=\"checkbox\" id=\"aaf-90303-services-2\" name=\"aaf_field[services][]\" value=\"Team training\"><label for=\"aaf-90303-services-2\">Team training<\/label><\/span><\/fieldset><\/div><div class=\"aaf-field aaf-field-textarea\"><label class=\"aaf-label\" for=\"aaf-90303-message\">Message <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><textarea id=\"aaf-90303-message\" name=\"aaf_field[message]\" rows=\"5\" aria-required=\"true\"><\/textarea><\/div><div class=\"aaf-field aaf-field-consent\"><label class=\"aaf-label\" for=\"aaf-90303-consent\">I agree to be contacted about my enquiry. <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><span class=\"aaf-choice aaf-consent\"><input type=\"checkbox\" id=\"aaf-90303-consent\" name=\"aaf_field[consent]\" value=\"1\" aria-required=\"true\"><\/span><\/div>\n\t\t\t<input type=\"hidden\" name=\"aaf_nonce\" value=\"f46b209ca4\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/fr\/wp-json\/wp\/v2\/pages\/90159\" \/><div class=\"aaf-hp\" aria-hidden=\"true\"><label for=\"aaf_hp_url-aaf-90303\">Leave this field empty<\/label><input type=\"text\" id=\"aaf_hp_url-aaf-90303\" name=\"aaf_hp_url\" value=\"\" tabindex=\"-1\" autocomplete=\"off\"><\/div><input type=\"hidden\" name=\"aaf_ts\" value=\"1793870584\">\t\t\t<input type=\"hidden\" name=\"aaf_action\" value=\"aaf_submit\">\n\t\t\t<input type=\"hidden\" name=\"aaf_form_id\" value=\"90303\">\n\t\t\t\t\t\t<input type=\"hidden\" name=\"aaf_source_url\" value=\"https:\/\/showcase.ananyoo.com\/fr\/fr\/wp-json\/wp\/v2\/pages\/90159\">\n\t\t\t<input type=\"hidden\" name=\"aaf_source_title\" value=\"Ananyoo Accessible Themes and Plugins Showcase\">\n\n\t\t\t\n\t\t\t<p class=\"aaf-actions\">\n\t\t\t\t<button type=\"submit\" class=\"aaf-submit\">\n\t\t\t\t\tSend enquiry\t\t\t\t<\/button>\n\t\t\t<\/p>\n\t\t<\/form>\n\t\t\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:42%\">\n<div class=\"aaf-demo\">\n<aside class=\"card rail\" aria-labelledby=\"rail-h\">\n\t\t\t\t<p class=\"eyebrow\">The point<\/p>\n\t\t\t\t<h3 id=\"rail-h\">WCAG 2.2 AA, demonstrated<\/h3>\n\t\t\t\t<p class=\"rail-sub\">Each behaviour you can see and feel on this page maps to a real success criterion.<\/p>\n\t\t\t\t<ul class=\"sc-list\">\n\t\t\t\t\t<li><span class=\"sc-num\">1.3.1<\/span><span><b>Info &amp; relationships.<\/b> Every field has a real label; radio and checkbox sets use fieldset and legend.<\/span><\/li>\n\t\t\t\t\t<li><span class=\"sc-num\">2.4.3<\/span><span><b>Focus order.<\/b> Tab moves through the form in a logical, predictable order.<\/span><\/li>\n\t\t\t\t\t<li><span class=\"sc-num\">2.4.7<\/span><span><b>Focus visible.<\/b> A thick, high-contrast focus ring is never removed.<\/span><\/li>\n\t\t\t\t\t<li><span class=\"sc-num\">2.5.8<\/span><span><b>Target size.<\/b> Controls are at least 44\u00d744px - comfortable on touch.<\/span><\/li>\n\t\t\t\t\t<li><span class=\"sc-num\">3.3.1<\/span><span><b>Error identification.<\/b> Problems are listed in a summary and beside each field, in words, not colour alone.<\/span><\/li>\n\t\t\t\t\t<li><span class=\"sc-num\">3.3.7<\/span><span><b>Redundant entry.<\/b> Your answers are kept when an error occurs - no retyping.<\/span><\/li>\n\t\t\t\t\t<li><span class=\"sc-num\">4.1.3<\/span><span><b>Status messages.<\/b> Success and errors are announced to screen readers without moving the page on you.<\/span><\/li>\n\t\t\t\t<\/ul>\n\t\t\t<\/aside>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"aaf-demo\">\n<section id=\"more\" class=\"band band--alt wrap\" aria-labelledby=\"more-h\">\n\t\t<div class=\"section-head\">\n\t\t\t<p class=\"eyebrow\">Reusable<\/p>\n\t\t\t<h2 id=\"more-h\">The same engine, different jobs<\/h2>\n\t\t\t<p>Each form is stored once and placed by ID, so a short newsletter sign-up and a longer feedback form share\n\t\t\t\tthe same accessible foundation.<\/p>\n\t\t<\/div>\n\t<\/section>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\t\t\t\t<form class=\"aaf-form\" id=\"aaf-90304\" method=\"post\"\n\t\t\tnovalidate\t\t\taria-labelledby=\"aaf-90304-title\"\n\t\t\tdata-aaf-sub-level=\"3\">\n\n\t\t\t<h2 class=\"aaf-form-title\" id=\"aaf-90304-title\">Newsletter Sign-up<\/h2>\n\t\t\t\t\t\t\t<p class=\"aaf-required-note\">\n\t\t\t\t\tFields marked with an asterisk (*) are required.\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t\n\t\t\t<div class=\"aaf-field aaf-field-email\"><label class=\"aaf-label\" for=\"aaf-90304-email_address\">Email address <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><span class=\"aaf-help\" id=\"aaf-90304-email_address-help\">One short email a month. Unsubscribe any time.<\/span><input type=\"email\" id=\"aaf-90304-email_address\" name=\"aaf_field[email_address]\" value=\"\" aria-required=\"true\" aria-describedby=\"aaf-90304-email_address-help\" autocomplete=\"email\" inputmode=\"email\"><\/div><div class=\"aaf-field aaf-field-consent\"><label class=\"aaf-label\" for=\"aaf-90304-news_consent\">I agree to receive the newsletter. <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><span class=\"aaf-choice aaf-consent\"><input type=\"checkbox\" id=\"aaf-90304-news_consent\" name=\"aaf_field[news_consent]\" value=\"1\" aria-required=\"true\"><\/span><\/div>\n\t\t\t<input type=\"hidden\" name=\"aaf_nonce\" value=\"f64ccc384c\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/fr\/wp-json\/wp\/v2\/pages\/90159\" \/><div class=\"aaf-hp\" aria-hidden=\"true\"><label for=\"aaf_hp_url-aaf-90304\">Leave this field empty<\/label><input type=\"text\" id=\"aaf_hp_url-aaf-90304\" name=\"aaf_hp_url\" value=\"\" tabindex=\"-1\" autocomplete=\"off\"><\/div><input type=\"hidden\" name=\"aaf_ts\" value=\"1793870584\">\t\t\t<input type=\"hidden\" name=\"aaf_action\" value=\"aaf_submit\">\n\t\t\t<input type=\"hidden\" name=\"aaf_form_id\" value=\"90304\">\n\t\t\t\t\t\t<input type=\"hidden\" name=\"aaf_source_url\" value=\"https:\/\/showcase.ananyoo.com\/fr\/fr\/wp-json\/wp\/v2\/pages\/90159\">\n\t\t\t<input type=\"hidden\" name=\"aaf_source_title\" value=\"Ananyoo Accessible Themes and Plugins Showcase\">\n\n\t\t\t\n\t\t\t<p class=\"aaf-actions\">\n\t\t\t\t<button type=\"submit\" class=\"aaf-submit\">\n\t\t\t\t\tSubscribe\t\t\t\t<\/button>\n\t\t\t<\/p>\n\t\t<\/form>\n\t\t\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\t\t\t\t<form class=\"aaf-form\" id=\"aaf-90305\" method=\"post\"\n\t\t\tnovalidate\t\t\taria-labelledby=\"aaf-90305-title\"\n\t\t\tdata-aaf-sub-level=\"3\">\n\n\t\t\t<h2 class=\"aaf-form-title\" id=\"aaf-90305-title\">Quick Feedback<\/h2>\n\t\t\t\t\t\t\t<p class=\"aaf-required-note\">\n\t\t\t\t\tFields marked with an asterisk (*) are required.\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t\n\t\t\t<div class=\"aaf-field aaf-field-radio\"><fieldset class=\"aaf-group\" id=\"aaf-90305-experience\"><legend class=\"aaf-label\">How was your experience? <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/legend><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90305-experience-0\" name=\"aaf_field[experience]\" value=\"Excellent\" aria-required=\"true\"><label for=\"aaf-90305-experience-0\">Excellent<\/label><\/span><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90305-experience-1\" name=\"aaf_field[experience]\" value=\"Good\" aria-required=\"true\"><label for=\"aaf-90305-experience-1\">Good<\/label><\/span><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90305-experience-2\" name=\"aaf_field[experience]\" value=\"Okay\" aria-required=\"true\"><label for=\"aaf-90305-experience-2\">Okay<\/label><\/span><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90305-experience-3\" name=\"aaf_field[experience]\" value=\"Poor\" aria-required=\"true\"><label for=\"aaf-90305-experience-3\">Poor<\/label><\/span><\/fieldset><\/div><div class=\"aaf-field aaf-field-textarea\"><label class=\"aaf-label\" for=\"aaf-90305-improve\">What can we improve?<\/label><textarea id=\"aaf-90305-improve\" name=\"aaf_field[improve]\" rows=\"5\"><\/textarea><\/div>\n\t\t\t<input type=\"hidden\" name=\"aaf_nonce\" value=\"1eb65d168a\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/fr\/wp-json\/wp\/v2\/pages\/90159\" \/><div class=\"aaf-hp\" aria-hidden=\"true\"><label for=\"aaf_hp_url-aaf-90305\">Leave this field empty<\/label><input type=\"text\" id=\"aaf_hp_url-aaf-90305\" name=\"aaf_hp_url\" value=\"\" tabindex=\"-1\" autocomplete=\"off\"><\/div><input type=\"hidden\" name=\"aaf_ts\" value=\"1793870584\">\t\t\t<input type=\"hidden\" name=\"aaf_action\" value=\"aaf_submit\">\n\t\t\t<input type=\"hidden\" name=\"aaf_form_id\" value=\"90305\">\n\t\t\t\t\t\t<input type=\"hidden\" name=\"aaf_source_url\" value=\"https:\/\/showcase.ananyoo.com\/fr\/fr\/wp-json\/wp\/v2\/pages\/90159\">\n\t\t\t<input type=\"hidden\" name=\"aaf_source_title\" value=\"Ananyoo Accessible Themes and Plugins Showcase\">\n\n\t\t\t\n\t\t\t<p class=\"aaf-actions\">\n\t\t\t\t<button type=\"submit\" class=\"aaf-submit\">\n\t\t\t\t\tSend feedback\t\t\t\t<\/button>\n\t\t\t<\/p>\n\t\t<\/form>\n\t\t\n<\/div>\n<\/div>\n\n\n\n<div class=\"aaf-demo\">\n<section id=\"how\" class=\"band wrap\" aria-labelledby=\"how-h\">\n\t\t<div class=\"section-head\">\n\t\t\t<p class=\"eyebrow\">Not block-only<\/p>\n\t\t\t<h2 id=\"how-h\">Two ways to place a form<\/h2>\n\t\t\t<p>Use the block in the editor, or the shortcode anywhere shortcodes work - the Classic Editor, widgets,\n\t\t\t\tand page builders such as Elementor, Beaver Builder and Divi. Both render the identical accessible markup.<\/p>\n\t\t<\/div>\n\t\t<div class=\"how-grid\">\n\t\t\t<div class=\"card\">\n\t\t\t\t<h3 style=\"margin-top:0;\">Shortcode (works everywhere)<\/h3>\n\t\t\t\t<p>Paste this into any page, post, widget or page-builder shortcode element.<\/p>\n\t\t\t\t<code class=\"code\"><span class=\"tok\">&#091;ananyoo_form<\/span> id=<span class=\"tok\">\"123\"<\/span><span class=\"tok\">&#093;<\/span><\/code>\n\t\t\t<\/div>\n\t\t\t<div class=\"card\">\n\t\t\t\t<h3 style=\"margin-top:0;\">Block (Gutenberg)<\/h3>\n\t\t\t\t<p>Add the <strong>Accessible Form<\/strong> block and pick your form from the dropdown. No code, same result.<\/p>\n\t\t\t\t<code class=\"code\">Insert block \u2192 <span class=\"tok\">\u201cAccessible Form\u201d<\/span> \u2192 choose form<\/code>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/section>\n<section id=\"why\" class=\"band band--alt wrap\" aria-labelledby=\"why-h\">\n\t\t<div class=\"section-head\">\n\t\t\t<p class=\"eyebrow\">Background<\/p>\n\t\t\t<h2 id=\"why-h\">Why accessible forms matter<\/h2>\n\t\t<\/div>\n\t\t<div class=\"prose\">\n\t\t\t<p>A form is usually where a visitor becomes a customer - an enquiry, a sign-up, a support request. When a\n\t\t\t\tform is hard to use, that visitor simply leaves. Accessible forms remove the common barriers: an input\n\t\t\t\twith no real label, an error shown only in red, a control too small to tap, or a focus order that jumps\n\t\t\t\taround. Built well, the same form serves a mouse user, a keyboard-only user and a screen-reader user\n\t\t\t\tequally.<\/p>\n\t\t\t<p>These accessible forms follow the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/\" target=\"_blank\" rel=\"noopener\">WCAG 2.2 guidelines<\/a>\n\t\t\t\tfrom the start rather than as an afterthought. Every field is labelled and programmatically associated,\n\t\t\t\tgrouped controls use a fieldset and legend, errors are described in words next to the field and in a\n\t\t\t\tsummary that takes focus, and your answers are preserved when something needs fixing - so nobody retypes\n\t\t\t\ta whole form because of one mistake.<\/p>\n\t\t\t<p>You can see this approach applied in real projects in our\n\t\t\t\t<a href=\"https:\/\/ananyoo.com\/web-accessibility-case-study\/\" target=\"_blank\" rel=\"noopener\">web accessibility case study<\/a>, read more\n\t\t\t\tabout the <a href=\"https:\/\/ananyoo.com\/ananyoo-accessible-forms-plugin\/\" target=\"_blank\" rel=\"noopener\">Accessible Forms plugin<\/a>, or\n\t\t\t\t<a href=\"https:\/\/ananyoo.com\/contact-us\/\" target=\"_blank\" rel=\"noopener\">contact M\/S. Anblik<\/a> to discuss your own site. You can also\n\t\t\t\tbrowse <a href=\"\/\">more accessible plugin demos on this site<\/a>.<\/p>\n\t\t<\/div>\n\t<\/section>\n<section id=\"faq\" class=\"band wrap\" aria-labelledby=\"faq-h\">\n\t\t<div class=\"section-head\">\n\t\t\t<p class=\"eyebrow\">Questions<\/p>\n\t\t\t<h2 id=\"faq-h\">Accessible forms: common questions<\/h2>\n\t\t<\/div>\n\t\t<div class=\"faq\">\n\t\t\t<h3>Do accessible forms need a CAPTCHA?<\/h3>\n\t\t\t<p>No. A puzzle CAPTCHA is itself a barrier. These forms stop most bots with an invisible honeypot and a\n\t\t\t\tsubmission-time check, which add no effort for real visitors and meet WCAG 2.2 Accessible\n\t\t\t\tAuthentication.<\/p>\n\n\t\t\t<h3>Will these forms work without JavaScript?<\/h3>\n\t\t\t<p>Yes. On a live site the server validates and re-shows the form with your values kept and the errors\n\t\t\t\tlisted. JavaScript only enhances focus handling and adds an early check. Accessible forms should never\n\t\t\t\tdepend on scripts to be usable.<\/p>\n\n\t\t\t<h3>Can I use these forms outside the block editor?<\/h3>\n\t\t\t<p>Yes. A shortcode places any form in the Classic Editor, in widgets, and in page builders such as\n\t\t\t\tElementor, Beaver Builder and Divi. The block and the shortcode produce the same accessible markup.<\/p>\n\t\t<\/div>\n\t<\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Con\u00e7us pour respecter les WCAG 2.2 AA d\u00e8s la base\u00a0: essayez chaque formulaire au clavier ou avec un lecteur d\u2019\u00e9cran, sur n\u2019importe quel appareil.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-90159","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages\/90159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/comments?post=90159"}],"version-history":[{"count":35,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages\/90159\/revisions"}],"predecessor-version":[{"id":94693,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages\/90159\/revisions\/94693"}],"wp:attachment":[{"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/media?parent=90159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}