1<!DOCTYPE html> 2<html lang="fr"> 3<head> 4<meta charset="utf-8"/> 5<meta name="viewport" content="width=device-width, initial-scale=1"/> 6<title>Back-offices accessibles par la conversation â audit-web.ai</title> 7<meta name="description" content="Plutôt que refondre un back-office inaccessible, on déploie une couche conversationnelle IA. Chaque action de votre back-office devient accessible par le dialogue."/> 8 9 10<link rel="canonical" href="https://www.audit-web.ai/service-a11y-backoffices.html"> 11<link rel="icon" type="image/svg+xml" href="favicon.svg"> 12<link rel="manifest" href="/manifest.json"> 13<meta name="theme-color" content="#0F6E6F"> 14<link rel="author" href="/humans.txt"> 15<meta property="og:type" content="website"> 16<meta property="og:url" content="https://www.audit-web.ai/service-a11y-backoffices.html"> 17<meta property="og:title" content="Back-offices accessibles par la conversation â audit-web.ai"> 18<meta property="og:description" content="Plutôt que refondre un back-office inaccessible, on déploie une couche conversationnelle IA. Chaque action de votre back-office devient accessible par le dialogue."> 19<meta property="og:image" content="https://www.audit-web.ai/og-image.png"> 20<meta property="og:site_name" content="audit-web.ai"> 21<meta name="twitter:card" content="summary_large_image"> 22<meta name="twitter:title" content="Back-offices accessibles par la conversation â audit-web.ai"> 23<meta name="twitter:description" content="Plutôt que refondre un back-office inaccessible, on déploie une couche conversationnelle IA. Chaque action de votre back-office devient accessible par le dialogue."> 24<meta name="twitter:image" content="https://www.audit-web.ai/og-image.png"> 25<link rel="preconnect" href="https://fonts.googleapis.com"> 26<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 27<link rel="preconnect" href="https://api.fontshare.com"> 28<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap"> 29<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500;1,9..144,600&family=JetBrains+Mono:wght@400;500&display=swap"> 30<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap"> 31 32<style> 33:root{ 34 --teal-50:#E4F2F1; --teal-100:#C5E4E2; --teal-200:#A7D4D3; 35 --teal-400:#199392; --teal-500:#0F6E6F; --teal-600:#0A5A5B; --teal-700:#074647; --teal-light:#6FE0DD; 36 --bg:#FAFAF8; --bg-elev:#FFFFFF; --bg-tint:#F2F1ED; 37 --ink:#0E1821; --ink-2:#1E2A33; --text-muted:#3F4A54; --text-dim:#5A6670; 38 --line:#D5DDE0; --line-strong:#B3BDC4; 39 --dark:#0B1420; --dark-2:#111D2B; --dark-line:#27374A; 40 --on-dark:#EAF0F4; --on-dark-2:#BCC7D0; --on-dark-3:#8B98A3; 41 --amber:#FBBF4E; --violet:#D6B5F0; --rose:#F5A0AC; 42 --red:#C44A52; --red-tint:#FCE7E9; 43 --ease:cubic-bezier(.2,.8,.2,1); 44 --t-fast:180ms; --t-med:280ms; 45 --fs-micro:11px; --fs-xs:13px; --fs-sm:15px; --fs-base:17px; --fs-lg:19px; 46 --fs-display:clamp(48px, 7vw, 96px); 47 --shadow-sm:0 4px 12px -4px rgba(14,24,33,0.08); 48 --shadow-md:0 12px 30px -12px rgba(14,24,33,0.12); 49 --shadow-lg:0 28px 60px -20px rgba(14,24,33,0.18); 50} 51*,*::before,*::after{box-sizing:border-box} 52html{scroll-behavior:smooth} 53@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} 54body{margin:0;font-family:'General Sans','Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'ss01','kern','liga'} 55h1,h2,h3,h4{font-family:'General Sans',sans-serif;font-weight:600;letter-spacing:-0.02em;line-height:1.08;margin:0;color:var(--ink);text-wrap:balance} 56h1{font-size:var(--fs-display);letter-spacing:-0.04em;line-height:0.94} 57h2{font-size:clamp(30px,3.4vw,48px);letter-spacing:-0.025em;line-height:1.04} 58h3{font-size:clamp(20px,1.6vw,24px);letter-spacing:-0.015em} 59p{margin:0;text-wrap:pretty} 60a{color:inherit;text-decoration:none} 61button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} 62ul,ol{list-style:none;padding:0;margin:0} 63img,svg{max-width:100%;display:block} 64.mat{font-family:'Material Symbols Outlined';font-size:20px;line-height:1;display:inline-block;vertical-align:middle;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24} 65.ital{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;font-variation-settings:'opsz' 144;letter-spacing:-0.02em;font-size:1.08em;line-height:0.94} 66.wrap{max-width:1280px;margin:0 auto;padding:0 32px} 67.eyebrow{font-family:'JetBrains Mono',monospace;font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--teal-600);font-weight:500} 68.skip{position:absolute;
68left:-9999px;top:0;background:var(--ink);color:#fff;padding:14px 20px;border-radius:0 0 12px 0;z-index:200;font-weight:600;font-size:14px} 69.skip:focus{left:0;outline:3px solid var(--teal-light);outline-offset:2px} 70:focus{outline:none} 71a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--teal-500);outline-offset:3px;border-radius:6px} 72.dark-ctx :focus-visible{outline-color:var(--teal-light)} 73 74/* NAV */ 75.nav{position:sticky;top:16px;z-index:50;margin:16px auto 0;width:calc(100% - 32px);max-width:1280px;background:rgba(250,250,248,0.92);backdrop-filter:saturate(1.4) blur(20px);-webkit-backdrop-filter:saturate(1.4) blur(20px);border:1px solid var(--line);border-radius:999px;padding:10px 10px 10px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm)} 76.nav .brand{font-weight:600;font-size:18px;letter-spacing:-0.01em;min-height:44px;display:inline-flex;align-items:center} 77.nav .brand em{font-style:normal;color:var(--teal-500)} 78.nav ul.main{display:flex;gap:28px} 79.nav ul.main a{color:var(--text-muted);font-weight:500;font-size:15px;padding:12px 4px;border-bottom:1px solid transparent;min-height:44px;display:inline-flex;align-items:center;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} 80.nav ul.main a:hover,.nav ul.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--teal-500)} 81.nav .cta{background:var(--ink);color:#fff;padding:11px 22px;border-radius:999px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;transition:background var(--t-fast) var(--ease)} 82.nav .cta:hover{background:var(--teal-600)} 83.nav .burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);align-items:center;justify-content:center} 84@media (max-width:900px){.nav ul.main,.nav .cta{display:none}.nav .burger{display:inline-flex}} 85/* Mobile menu */ 86.mobile-menu{position:fixed;inset:0;background:var(--bg);z-index:60;padding:24px;transform:translateY(-100%);transition:transform var(--t-med) var(--ease);display:none;flex-direction:column;overflow:auto} 87.mobile-menu.open{transform:translateY(0)} 88@media (max-width:900px){.mobile-menu{display:flex}} 89.mobile-menu .top{display:flex;justify-content:space-between;align-items:center} 90.mobile-menu .top .brand{font-family:'General Sans',sans-serif;font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-0.01em} 91.mobile-menu .top .brand em{font-style:normal;color:var(--teal-500)} 92.mobile-menu ul{margin-top:48px;display:flex;flex-direction:column;gap:4px;list-style:none;padding:0} 93.mobile-menu ul a{font-family:'General Sans',sans-serif;font-size:32px;font-weight:500;color:var(--ink);letter-spacing:-0.02em;padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;min-height:44px;text-decoration:none} 94.mobile-menu ul a .mat{color:var(--teal-500);font-size:24px} 95.mobile-menu .cta{margin-top:auto;background:var(--ink);color:#fff;padding:18px 24px;border-radius:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center;font-size:17px;text-decoration:none} 96@media (prefers-reduced-motion:reduce){.mobile-menu{transition:none}} 97 98/* BREADCRUMB */ 99.crumb{padding:40px 0 0;font-family:'JetBrains Mono',monospace;font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim)} 100.crumb a{color:var(--text-muted)} 101.crumb a:hover{color:var(--teal-600)} 102.crumb .sep{color:var(--teal-200);margin:0 14px} 103 104/* HERO */ 105.hero{padding:56px 0 80px} 106.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center} 107.hero h1{margin-top:20px} 108.hero h1 .ital{color:var(--teal-600);font-weight:400} 109.hero-lede{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.6;margin-top:28px;max-width:580px} 110.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px} 111.btn-primary{background:var(--ink);color:#fff;padding:16px 26px;border-radius:999px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:10px;min-height:52px;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} 112.btn-primary:hover{background:var(--teal-600);transform:translateY(-1px)} 113.btn-ghost{background:transparent;color:var(--ink);padding:16px 26px;border-radius:999px;font-weight:600;font-size:15px;
113display:inline-flex;align-items:center;gap:10px;min-height:52px;border:1.5px solid var(--line-strong);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)} 114.btn-ghost:hover{border-color:var(--ink);background:var(--bg-tint)} 115 116/* HERO ILLUSTRATION â Inaccessible UI â Chat */ 117.a11y-canvas{position:relative;aspect-ratio:1/1;width:100%;max-width:540px;margin-left:auto;border-radius:32px;background:transparent;border:0} 118.a11y-canvas svg{position:relative;width:100%;height:100%;display:block} 119 120/* PARADIGME */ 121.paradigm{padding:clamp(72px,8vw,120px) 0;background:var(--bg-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} 122.paradigm-head{margin-bottom:56px;max-width:760px} 123.paradigm-head h2 .ital{color:var(--teal-600);font-weight:400} 124.paradigm-head p{color:var(--text-muted);font-size:var(--fs-base);margin-top:18px;max-width:580px} 125.paradigm-grid{display:grid;grid-template-columns:1fr 1.8fr;gap:20px} 126.classic{background:var(--bg-elev);border:1px solid var(--line);border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:18px} 127.classic .ico{width:44px;height:44px;border-radius:12px;background:var(--bg-tint);color:var(--text-dim);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)} 128.classic h3{font-size:22px;letter-spacing:-0.015em} 129.classic ul{display:flex;flex-direction:column;gap:14px;margin-top:10px} 130.classic li{display:flex;align-items:flex-start;gap:12px;color:var(--text-muted);font-size:14.5px;line-height:1.55} 131.classic li .mat{color:var(--red);font-size:18px;flex-shrink:0;margin-top:1px} 132.classic .tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim);align-self:flex-start;padding:5px 10px;border:1px solid var(--line);border-radius:999px} 133 134.modern{background:var(--dark);color:var(--on-dark);border-radius:24px;padding:44px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:20px} 135.modern::before{content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(111,224,221,0.15) 0%,transparent 70%);pointer-events:none} 136.modern .tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal-light);align-self:flex-start;padding:5px 10px;border:1px solid rgba(111,224,221,0.3);border-radius:999px;background:rgba(111,224,221,0.08)} 137.modern .ico{width:44px;height:44px;border-radius:12px;background:rgba(111,224,221,0.15);color:var(--teal-light);display:flex;align-items:center;justify-content:center;border:1px solid rgba(111,224,221,0.25);position:relative;z-index:1} 138.modern h3{color:#fff;font-size:28px;letter-spacing:-0.02em;line-height:1.1;max-width:520px;position:relative;z-index:1} 139.modern h3 .ital{color:var(--teal-light)} 140.modern p{color:var(--on-dark-2);font-size:15.5px;line-height:1.6;max-width:540px;position:relative;z-index:1} 141.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:14px;border-top:1px solid var(--dark-line);padding-top:24px;position:relative;z-index:1} 142.stats .stat{padding-right:20px;border-right:1px solid var(--dark-line)} 143.stats .stat:last-child{border-right:0;padding-right:0} 144.stats .stat .num{font-family:'Fraunces',Georgia,serif;font-style:italic;font-variation-settings:'opsz' 144;font-size:42px;line-height:1;color:var(--teal-light);letter-spacing:-0.02em;margin-bottom:6px} 145.stats .stat .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-3);line-height:1.4} 146 147/* SYNTHESIS bar below */ 148.synthesis{margin-top:20px;background:linear-gradient(90deg,var(--teal-600) 0%,var(--teal-500) 100%);border-radius:20px;padding:4px} 149.synthesis-inner{background:var(--bg-elev);border-radius:16px;padding:24px 32px;display:flex;align-items:center;gap:32px;flex-wrap:wrap} 150.synthesis-inner h3{font-size:18px;letter-spacing:-0.015em;margin:0} 151.synthesis-inner h3 .ital{color:var(--teal-600);font-weight:400} 152.synthesis-inner p{color:var(--text-muted);font-size:14px;line-height:1.5;flex:1;min-width:240px} 153.synthesis-tags{display:flex;gap:10px;flex-wrap:wrap} 154.synthesis-tags span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal-700);background:var(--teal-50);border:1px solid var(--teal-200);padding:6px 12px;border-radius:999px} 155 156/* PROCESS */ 157.process{padding:clamp(72px,8vw,120px) 0} 158.process-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start} 159.process-left{position:sticky;top:120px} 160.process-left .eyebrow{margin-bottom:14px;display:block} 161.process-left h2 .ital{color:var(--teal-600);font-weight:400} 162.process-left p{color:var(--text-muted);font-size:var(--fs-base);line-height:1.65;margin-top:20px} 163.process-steps{display:flex;flex-direction:column;gap:20px} 164.pstep{position:relative;padding:32px 36px;background:var(--bg-elev);border:1px solid var(--line);border-radius:24px;display:flex;gap:24px;align-items:flex-start;transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} 165.pstep:hover{border-color:var(--teal-500);transform:translateX(4px)} 166.pstep.featured{background:var(--teal-700);color:var(--on-dark);border-color:var(--teal-700)} 167.pstep.featured h3{color:#fff} 168.pstep.featured p{color:var(--teal-50)} 169.pstep.featured .num{background:rgba(111,224,221,0.15);color:var(--teal-light);border-color:rgba(111,224,221,0.3)} 170.pstep.featured .ico-wrap{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.2)} 171.pstep.featured .tags span{background:rgba(111,224,221,0.12);color:var(--teal-light);border-color:rgba(111,224,221,0.3)} 172.pstep .num{flex-shrink:0;width:56px;height:56px;border-radius:16px;background:var(--bg-tint);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',Georgia,serif;font-style:italic;font-variation-settings:'opsz' 144;font-size:26px;color:var(--teal-600);letter-spacing:-0.02em} 173.pstep .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px} 174.pstep .head{display:flex;align-items:center;gap:14px;flex-wrap:wrap} 175.pstep .ico-wrap{width:36px;height:36px;border-radius:10px;background:var(--teal-50);color:var(--teal-700);border:1px solid var(--teal-200);display:flex;align-items:center;justify-content:center;flex-shrink:0} 176.pstep h3{font-size:22px;letter-spacing:-0.015em;line-height:1.2} 177.pstep p{color:var(--text-muted);font-size:14.5px;line-height:1.6} 178.pstep .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} 179.pstep .tags span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--teal-700);background:var(--teal-50);border:1px solid var(--teal-200);padding:5px 10px;border-radius:999px} 180 181/* AUDIENCE */ 182.audience{padding:clamp(72px,8vw,120px) 0;background:var(--bg-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} 183.audience-head{display:flex;justify-content:space-between;align-items:flex-end;
183gap:32px;margin-bottom:48px;flex-wrap:wrap} 184.audience-head h2 .ital{color:var(--teal-600);font-weight:400} 185.audience-head p{color:var(--text-muted);max-width:440px;font-size:var(--fs-base);margin-top:14px} 186.aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} 187.acard{background:var(--bg-elev);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:border-color var(--t-fast) var(--ease),transform var(--t-med) var(--ease);min-height:240px} 188.acard:hover{border-color:var(--teal-500);transform:translateY(-3px)} 189.acard .ico{width:44px;height:44px;border-radius:12px;background:var(--teal-50);color:var(--teal-700);border:1px solid var(--teal-200);display:flex;align-items:center;justify-content:center} 190.acard h3{font-size:18px;letter-spacing:-0.01em;line-height:1.2} 191.acard p{color:var(--text-muted);font-size:13.5px;line-height:1.55} 192.acard .obli{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim)} 193.acard .obli .mat{font-size:14px;color:var(--teal-600)} 194 195/* CASE â a11y-billing dark */ 196.case{padding:clamp(72px,8vw,120px) 0} 197.case-inner{background:var(--dark);color:var(--on-dark);border-radius:32px;padding:clamp(48px,6vw,72px);position:relative;overflow:hidden} 198.case-inner::before{content:'';position:absolute;top:-50%;left:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(111,224,221,0.1) 0%,transparent 70%);pointer-events:none} 199.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:1} 200.case-left .case-head{display:flex;align-items:center;gap:12px;margin-bottom:28px;flex-wrap:wrap} 201.case-left .case-logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--teal-500),var(--teal-700));color:var(--teal-light);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px} 202.case-left .case-name{color:#fff;font-size:18px;font-weight:600;letter-spacing:-0.01em} 203.case-left .case-name em{font-style:normal;color:var(--teal-light)} 204.case-left .case-badge{background:rgba(74,222,128,0.15);color:#86EFAC;border:1px solid rgba(74,222,128,0.3);padding:4px 10px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px} 205.case-left .case-badge::before{content:'';width:6px;height:6px;border-radius:999px;background:#86EFAC} 206.case-inner h2{color:#fff} 207.case-inner h2 .ital{color:var(--teal-light);font-weight:400} 208.case-left p.case-lede{color:var(--on-dark-2);font-size:var(--fs-base);line-height:1.65;margin-top:20px;margin-bottom:32px} 209.case-checks{display:flex;flex-direction:column;gap:14px} 210.case-checks li{display:flex;align-items:flex-start;gap:14px;color:var(--on-dark);font-size:15px;line-height:1.5} 211.case-checks li .mat{color:var(--teal-light);font-variation-settings:'FILL' 1;flex-shrink:0;margin-top:1px} 212 213/* CODE compare */ 214.code-compare{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:20px;padding:24px;box-shadow:var(--shadow-lg)} 215.code-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--dark-line)} 216.code-head .left-label,.code-head .right-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-dark-3)} 217.code-head .right-label{color:var(--teal-light)} 218.code-block{background:#06101B;border:1px solid var(--dark-line);border-radius:12px;padding:18px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.6;color:var(--on-dark-2);overflow-x:auto;white-space:pre-wrap;word-break:break-word} 219.code-block.bad{color:var(--on-dark-3)} 220.code-block.good{color:var(--teal-light);background:rgba(15,110,111,0.12);border-color:rgba(111,224,221,0.25)} 221.code-block .tag-ch{color:#D6B5F0} 222.code-block .attr{color:var(--teal-light)} 223.code-block .val{color:#FBBF4E} 224.code-block .txt{color:#fff} 225.code-arrow{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-dark-3)} 226.code-arrow .line{flex:1;height:1px;background:var(--dark-line);position:relative} 227.code-arrow .mat{color:var(--teal-light);font-size:18px} 228 229/* FAQ */ 230.faq{padding:clamp(72px,8vw,120px) 0;background:var(--bg-tint);border-top:1px solid var(--line)} 231.faq-head{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:end;margin-bottom:48px} 232.faq-head h2 .ital{color:var(--teal-600);font-weight:400} 233.faq-head p{color:var(--text-muted);font-size:var(--fs-base);line-height:1.65} 234.faq-list{background:var(--bg-elev);border:1px solid var(--line);border-radius:24px;overflow:hidden}
235details.faq-item{border-bottom:1px solid var(--line)} 236details.faq-item:last-child{border-bottom:0} 237details.faq-item summary{padding:26px 32px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:17px;font-weight:500;color:var(--ink);list-style:none;letter-spacing:-0.01em;transition:background var(--t-fast) var(--ease)} 238details.faq-item summary::-webkit-details-marker{display:none} 239details.faq-item summary:hover{background:var(--bg)} 240details.faq-item summary::after{content:'+';font-family:'Fraunces',Georgia,serif;font-size:28px;color:var(--teal-600);font-weight:400;line-height:0.8;transition:transform var(--t-fast) var(--ease);flex-shrink:0} 241details.faq-item[open] summary::after{content:'â'} 242details.faq-item .answer{padding:0 32px 28px;color:var(--text-muted);font-size:15px;line-height:1.7;max-width:880px} 243details.faq-item .answer p+p{margin-top:12px} 244 245/* CTA BAND */ 246.cta-band{padding:clamp(72px,8vw,120px) 0} 247.cta-inner{background:var(--ink);color:#fff;border-radius:32px;padding:clamp(56px,7vw,88px) clamp(32px,5vw,72px);text-align:center;position:relative;overflow:hidden} 248.cta-inner::before{content:'';position:absolute;top:-40%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(111,224,221,0.12) 0%,transparent 70%);pointer-events:none} 249.cta-inner h2{color:#fff;max-width:780px;margin:0 auto} 250.cta-inner h2 .ital{color:var(--teal-light);font-weight:400} 251.cta-inner p{color:var(--on-dark-2);font-size:var(--fs-lg);margin:20px auto 36px;max-width:620px} 252.cta-inner .btn-primary{background:var(--teal-light);color:var(--ink);position:relative;z-index:1} 253.cta-inner .btn-primary:hover{background:#fff} 254 255/* FOOTER */ 256.footer{background:var(--bg-tint);border-top:1px solid var(--line);padding:80px 0 48px;color:var(--text-muted);font-size:var(--fs-sm)} 257.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} 258.footer .h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink);margin-bottom:20px;display:block} 259.footer ul{display:flex;flex-direction:column;gap:12px} 260.footer a{color:var(--text-muted);min-height:44px;display:inline-flex;align-items:center} 261.footer a:hover{color:var(--teal-600)} 262.footer .brand{font-weight:600;font-size:22px;color:var(--ink);display:block;margin-bottom:14px;letter-spacing:-0.01em} 263.footer .brand em{font-style:normal;color:var(--teal-500)} 264.footer .contact-link{color:var(--teal-600)} 265.footer .bot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--text-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} 266 267@media (max-width:1199px){ 268 .paradigm-grid{grid-template-columns:1fr} 269 .process-grid{grid-template-columns:1fr;gap:40px} 270 .process-left{position:static} 271 .aud-grid{grid-template-columns:repeat(2,1fr)} 272 .case-grid{grid-template-columns:1fr;gap:40px} 273} 274@media (max-width:1023px){ 275 .wrap{padding:0 24px} 276 .nav{width:calc(100% - 24px)} 277 .hero-grid,.faq-head{grid-template-columns:1fr;gap:40px} 278 .a11y-canvas{max-width:100%;margin:0 auto} 279 .footer-grid{grid-template-columns:1fr 1fr} 280 .synthesis-inner{flex-direction:column;align-items:flex-start;gap:20px} 281} 282@media (max-width:767px){ 283 :root{--fs-base:16px;--fs-lg:17px;--fs-display:clamp(40px,11vw,64px)} 284 .wrap{padding:0 20px} 285 .aud-grid{grid-template-columns:1fr} 286 .footer-grid{grid-template-columns:1fr} 287 .pstep{flex-direction:column;padding:24px} 288 .stats{grid-template-columns:1fr} 289 .stats .stat{border-right:0;border-bottom:1px solid var(--dark-line);padding:16px 0} 290 .stats .stat:last-child{border-bottom:0;padding-bottom:0} 291} 292@media (prefers-reduced-motion:reduce){ 293 *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important} 294} 295/* Source-order fix: heading before kicker in DOM, kicker visually above via flex order */ 296div:has(> :is(h1,h2,h3) ~ :is(.eyebrow,.count)){display:flex;flex-direction:column} 297div:has(> :is(h1,h2,h3) ~ :is(.eyebrow,.count)) > :is(.eyebrow,.count){order:-1} 298</style>
299<script type="application/ld+json"> 300{ 301 "@context": "https://schema.org", 302 "@graph": [ 303 { 304 "@type": "Service", 305 "name": "Agents d'accessibilité pour back-offices", 306 "description": "Plutôt que refondre un back-office inaccessible, on déploie une couche conversationnelle IA. Chaque action de votre back-office devient accessible par le dialogue.", 307 "serviceType": "Accessibilité numérique par IA", 308 "url": "https://www.audit-web.ai/service-a11y-backoffices.html", 309 "provider": { 310 "@id": "https://www.audit-web.ai/#organization" 311 }, 312 "areaServed": { 313 "@type": "Country", 314 "name": "France" 315 }, 316 "availableLanguage": [ 317 "fr" 318 ] 319 }, 320 { 321 "@type": "BreadcrumbList", 322 "itemListElement": [ 323 { 324 "@type": "ListItem", 325 "position": 1, 326 "name": "Accueil", 327 "item": "https://www.audit-web.ai/" 328 }, 329 { 330 "@type": "ListItem", 331 "position": 2, 332 "name": "Services", 333 "item": "https://www.audit-web.ai/#services" 334 }, 335 { 336 "@type": "ListItem", 337 "position": 3, 338 "name": "Back-offices accessibles par la conversation" 339 } 340 ] 341 } 342 ] 343} 344</script>
344 345</head> 346<body> 347<a href="#main" class="skip">Aller au contenu</a> 348 349<header role="banner"> 350<nav class="nav" role="navigation" aria-label="Navigation principale"> 351 <a class="brand" href="index.html" aria-label="audit-web.ai â accueil">audit-web<em>.ai</em></a> 352 <ul class="main"> 353 <li><a href="index.html#services" aria-current="page">Services</a></li> 354 <li><a href="index.html#works">Réalisations</a></li> 355 <li><a href="index.html#sovereign">Souveraineté</a></li> 356 </ul> 357 <a class="cta" href="contact.html">Nous contacter <span class="mat" aria-hidden="true">arrow_outward</span></a> 358 <button class="burger" id="burger" aria-label="Ouvrir le menu" aria-controls="mobileMenu"><span class="mat" aria-hidden="true">menu</span></button> 359</nav> 360 361<!-- Mobile menu --> 362<div class="mobile-menu" id="mobileMenu" inert> 363 <div class="top"> 364 <a class="brand" href="index.html">audit-web<em>.ai</em></a> 365 <button class="burger" id="burgerClose" aria-label="Fermer le menu"> 366 <span class="mat" aria-hidden="true">close</span> 367 </button> 368 </div> 369 <ul> 370 <li><a href="index.html#services">Services <span class="mat" aria-hidden="true">arrow_outward</span></a></li> 371 <li><a href="index.html#works">Réalisations <span class="mat" aria-hidden="true">arrow_outward</span></a></li> 372 <li><a href="index.html#sovereign">Souveraineté <span class="mat" aria-hidden="true">arrow_outward</span></a></li> 373 </ul> 374 <a href="contact.html" class="cta">Nous contacter <span class="mat" aria-hidden="true">arrow_forward</span></a> 375</div> 376 377 378</header> 379<main id="main" role="main"> 380 381<div class="wrap crumb" aria-label="Fil d'Ariane"> 382 <a href="index.html">audit-web.ai</a> 383 <span class="sep" aria-hidden="true">/</span> 384 <a href="index.html#services">Services</a> 385 <span class="sep" aria-hidden="true">/</span> 386 <span aria-current="page" style="color:var(--ink)">Back-offices accessibles par la conversation</span> 387</div> 388 389<!-- HERO --> 390<section class="hero" aria-labelledby="hero-title"> 391 <div class="wrap"> 392 <div class="hero-grid"> 393 <div> 394 <h1 id="hero-title">Votre back-office est inaccessible. On le rend <span class="ital">parlant.</span></h1> 395 <p class="eyebrow">â Pôle Garantir · Accessibilité + IA</p> 396 <p class="hero-lede">Plutôt que refondre une interface d'administration complexe et coûteuse à rendre accessible, on déploie une couche conversationnelle IA qui donne accès à chaque action par le dialogue. Chaque action, zéro écran à refaire.</p> 397 <div class="hero-ctas"> 398 <a href="contact.html" class="btn-primary">Ãvaluer la faisabilité <span class="mat" aria-hidden="true">arrow_forward</span></a> 399 <a href="#paradigm" class="btn-ghost">Voir l'approche <span class="mat" aria-hidden="true">arrow_downward</span></a> 400 </div> 401 </div> 402 <div class="a11y-canvas" aria-hidden="true"> 403 <svg viewBox="64 55 304 304" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> 404 <style> 405 .s-ink{fill:none;stroke:#16222C;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} 406 .s-ink2{fill:none;stroke:#41505C;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round} 407 .s-gd{fill:none;stroke:#C2CAD0;stroke-width:.9;stroke-dasharray:2.5 5} 408 .s-tl{fill:none;stroke:#0F6E6F;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} 409 .s-rs{fill:none;stroke:#E8949F;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} 410 .s-ft{fill:#0F6E6F} 411 </style> 412 <rect x="80" y="124" width="128" height="166" rx="12" class="s-ink"/> 413 <line x1="98" y1="154" x2="192" y2="154" class="s-ink2"/> 414 <line x1="98" y1="172" x2="192" y2="172" class="s-ink2"/> 415 <line x1="98" y1="190" x2="170" y2="190" class="s-ink2"/> 416 <rect x="98" y="212" width="58" height="22" rx="7" class="s-gd"/> 417 <g class="s-rs"><circle cx="182" cy="256" r="12"/><line x1="177.5" y1="251.5" x2="186.5" y2="260.5"/><line x1="186.5" y1="251.5" x2="177.5" y2="260.5"/></g> 418 <line x1="224" y1="206" x2="262" y2="206" class="s-tl"/> 419 <path d="M254 200 L262 206 L254 212" class="s-tl"/> 420 <path d="M278 130 h62 a12 12 0 0 1 12 12 v94 a12 12 0 0 1 -12 12 h-38 l-15 16 v-16 h-9 a12 12 0 0 1 -12 -12 v-94 a12 12 0 0 1 12 -12 Z" class="s-ink"/> 421 <line x1="292" y1="162" x2="340" y2="162" class="s-ink2"/> 422 <line x1="292" y1="180" x2="326" y2="180" class="s-ink2"/> 423 <rect x="292" y="206" width="48" height="22" rx="11" class="s-tl"/> 424 <circle cx="304" cy="217" r="6.5" class="s-ft"/> 425 <path d="M300.5 217 l2.6 2.6 l4.4 -5.4" fill="none" stroke="#FAFAF8" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> 426 </svg> 427 </div> 428 </div> 429 </div> 430</section> 431 432<!-- PARADIGME --> 433<section id="paradigm" class="paradigm" aria-labelledby="paradigm-title"> 434 <div class="wrap"> 435 <div class="paradigm-head"> 436 <h2 id="paradigm-title" style="margin-top:14px">Deux approches. <span class="ital">Un ratio</span> coût/bénéfice sans appel.</h2> 437 <p class="eyebrow">
437â 01 · Le changement de paradigme</p> 438 <p>L'accessibilité d'un back-office ne passe pas forcément par la refonte. Parfois, il suffit de changer la couche par laquelle on y accède.</p> 439 </div> 440 <div class="paradigm-grid"> 441 <article class="classic"> 442 <span class="tag">â Approche classique</span> 443 <div class="ico" aria-hidden="true"><span class="mat">history</span></div> 444 <h3>Refondre l'interface, écran par écran</h3> 445 <ul> 446 <li><span class="mat" aria-hidden="true">close</span><span>Refonte complète du code, coûteuse et longue (6 à 18 mois).</span></li> 447 <li><span class="mat" aria-hidden="true">close</span><span>Maintenance continue à chaque évolution de l'interface.</span></li> 448 <li><span class="mat" aria-hidden="true">close</span><span>Résultat souvent partiel â certains composants complexes restent inaccessibles.</span></li> 449 <li><span class="mat" aria-hidden="true">close</span><span>Impact dépendant de l'adoption des nouvelles pratiques par toute l'équipe dev.</span></li> 450 </ul> 451 </article> 452 <article class="modern"> 453 <span class="tag">â Notre approche</span> 454 <div class="ico" aria-hidden="true"><span class="mat" style="font-variation-settings:'FILL' 1">auto_awesome</span></div> 455 <h3>Une couche <span class="ital">conversationnelle</span> posée par-dessus. Les actions passent par le dialogue.</h3> 456 <p>On connecte un agent aux mêmes outils que l'interface : <span lang="en">API</span>, base de données, <span lang="en">workflows</span> métier. Chaque action réalisable par un administrateur est réalisable par l'agent, via du texte. L'interface de chat, elle, est nativement accessible.</p> 457 <div class="stats"> 458 <div class="stat"> 459 <div class="num">100 %</div> 460 <div class="lbl">Actions accessibles<br>via conversation</div> 461 </div> 462 <div class="stat"> 463 <div class="num">0</div> 464 <div class="lbl">Ãcran à refondre<br>dans votre back-office</div> 465 </div> 466 <div class="stat"> 467 <div class="num">6-8</div> 468 <div class="lbl">Semaines pour<br>un premier déploiement</div> 469 </div> 470 </div> 471 </article> 472 </div> 473 <div class="synthesis"> 474 <div class="synthesis-inner"> 475 <h3>Une couche invisible, un impact <span class="ital">total.</span></h3> 476 <p>L'agent suit l'évolution de vos outils, pas celle de 200 écrans. La maintenance accessibilité est drastiquement simplifiée.</p> 477 <div class="synthesis-tags" role="list"> 478 <span role="listitem">Lecteurs d'écran</span> 479 <span role="listitem">Navigation clavier</span> 480 <span role="listitem">RGAA · <span lang="en">WCAG</span></span> 481 </div> 482 </div> 483 </div> 484 </div> 485</section> 486 487<!-- PROCESS --> 488<section class="process" aria-labelledby="process-title"> 489 <div class="wrap"> 490 <div class="process-grid"> 491 <div class="process-left"> 492 <h2 id="process-title" style="margin-top:14px">Trois temps, adaptés à la <span class="ital">complexité</span> de votre back-office.</h2> 493 <p class="eyebrow">â 02 · Le processus</p> 494 <p>De la cartographie des actions à la mise en production documentée, on livre un agent testé avec de vrais utilisateurs de technologies d'assistance.</p> 495 </div> 496 <div class="process-steps"> 497 <article class="pstep"> 498 <div class="num" aria-hidden="true">01</div> 499 <div class="body"> 500 <div class="head"> 501 <div class="ico-wrap" aria-hidden="true"><span class="mat">map</span></div> 502 <h3>Cartographie des actions</h3> 503 </div> 504 <p>On recense toutes les actions réalisables dans votre administration : CRUD, exports, paramétrages, <span lang="en">workflows</span>, actions de masse. Chaque action devient un « outil » potentiel exposé à l'agent.</p> 505 <div class="tags" role="list"> 506 <span role="listitem">1 à 2 semaines</span>
507 <span role="listitem">Audit d'actions</span> 508 </div> 509 </div> 510 </article> 511 <article class="pstep"> 512 <div class="num" aria-hidden="true">02</div> 513 <div class="body"> 514 <div class="head"> 515 <div class="ico-wrap" aria-hidden="true"><span class="mat">code_blocks</span></div> 516 <h3>Développement de l'agent</h3> 517 </div> 518 <p>On connecte l'agent aux <span lang="en">API</span> de votre <span lang="en">back-office</span> â ou directement à l'interface via automation. On définit les permissions, les garde-fous et les confirmations pour les actions sensibles (suppressions, paiements, exports de données).</p> 519 <div class="tags" role="list"> 520 <span role="listitem">3 à 5 semaines</span> 521 <span role="listitem"><span lang="en">API</span> + permissions</span> 522 <span role="listitem">Garde-fous</span> 523 </div> 524 </div> 525 </article> 526 <article class="pstep featured"> 527 <div class="num" aria-hidden="true">03</div> 528 <div class="body"> 529 <div class="head"> 530 <div class="ico-wrap" aria-hidden="true"><span class="mat">rocket_launch</span></div> 531 <h3>Déploiement & tests utilisateurs</h3> 532 </div> 533 <p>L'agent est déployé avec une interface de chat conforme RGAA 4.1. Tests réels avec des utilisateurs de <span lang="en">NVDA</span>, <span lang="en">JAWS</span> et <span lang="en">VoiceOver</span>. Ajustements, documentation, transfert aux équipes.</p> 534 <div class="tags" role="list"> 535 <span role="listitem">2 semaines</span> 536 <span role="listitem">Tests <span lang="en">NVDA</span> · <span lang="en">JAWS</span></span> 537 <span role="listitem">RGAA 4.1</span> 538 </div> 539 </div> 540 </article> 541 </div> 542 </div> 543 </div> 544</section> 545 546<!-- AUDIENCE --> 547<section class="audience" aria-labelledby="audience-title"> 548 <div class="wrap"> 549 <div class="audience-head"> 550 <div> 551 <h2 id="audience-title" style="margin-top:14px">Pensé pour les structures dont la refonte <span class="ital">coûterait plus</span> que l'agent.</h2> 552 <p class="eyebrow">â 03 · Pour qui</p> 553 </div> 554 <p>Ce service s'adresse aux organisations avec un back-office complexe, ancien ou à forte surface fonctionnelle, soumises à des obligations d'accessibilité.</p> 555 </div> 556 <div class="aud-grid"> 557 <article class="acard"> 558 <div class="ico" aria-hidden="true"><span class="mat">account_balance</span></div> 559 <h3>Administrations publiques</h3> 560 <p>Soumises à l'obligation légale d'accessibilité, mais outillées par des applications métier anciennes, développées sur 10 ou 15 ans.</p> 561 <div class="obli"><span class="mat" aria-hidden="true">gavel</span>RGAA · obligation</div> 562 </article> 563 <article class="acard"> 564 <div class="ico" aria-hidden="true"><span class="mat">location_city</span></div> 565 <h3>Collectivités</h3> 566 <p>Des dizaines d'applications métier â urbanisme, état civil, finances â rarement auditées et lourdes à remettre à niveau écran par écran.</p> 567 <div class="obli"><span class="mat" aria-hidden="true">gavel</span>RGAA · obligation</div> 568 </article> 569 <article class="acard"> 570 <div class="ico" aria-hidden="true"><span class="mat">school</span></div> 571 <h3>Universités & enseignement</h3> 572 <p>Portails de gestion des étudiants, des notes, des plannings. Des interfaces critiques, souvent anciennes, utilisées aussi par des personnels en situation de handicap.</p> 573 <div class="obli"><span class="mat" aria-hidden="true">gavel</span>RGAA · obligation</div> 574 </article> 575 <article class="acard"> 576 <div class="ico" aria-hidden="true"><span class="mat">business_center</span></div> 577 <h3>Grandes entreprises</h3> 578 <p><span lang="en">ERP</span>, <span lang="en">CRM</span>, outils RH internes dont la refonte accessibilité coûterait sensiblement plus que le déploiement d'une couche agent â pour un résultat fonctionnel plus large.</p> 579 <div class="obli"><span class="mat" aria-hidden="true">groups</span>Inclusion interne</div> 580 </article> 581 </div> 582 </div> 583</section> 584 585<!-- PASSERELLE .COM â filiation secteur public --> 586<section aria-labelledby="filiation-title" style="padding:28px 0"> 587 <div class="wrap"> 588 <aside style="border:1px solid var(--line);border-left:3px solid var(--teal-500);border-radius:14px;padding:24px 28px;background:var(--bg-elev);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between"> 589 <div style="max-width:640px"> 590 <h2 id="filiation-title" style="font-size:20px;margin:0 0 8px">Près de 20 ans d'audit pour le secteur public</h2> 591 <p style="color:var(--text-muted);margin:0">Ce service vise exactement le portefeuille d'<a href="https://audit-web.com" style="color:var(--teal-600);text-decoration:underline">audit-web.com</a> : Paris Musées, la RTM, des universités, des centres de gestion. Des structures publiques aux back-offices métier lourds â et une obligation de conformité.</p> 592 </div> 593 <a href="https://audit-web.com" style="display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:11px 20px;min-height:44px">Voir les références <span class="mat" aria-hidden="true">arrow_outward</span></a> 594 </aside> 595 </div> 596</section> 597 598<!-- CASE STUDY --> 599<section class="case" aria-labelledby="case-title"> 600 <div class="wrap"> 601 <div class="case-inner dark-ctx"> 602 <div class="case-grid"> 603 <div class="case-left"> 604 <div class="case-head"> 605 <div class="case-logo" aria-hidden="true">a11y</div>
606 <span class="case-name">a11y-billing</span> 607 <span class="case-badge">En production</span> 608 </div> 609 <h2 id="case-title" style="margin-top:14px">On utilise cette approche <span class="ital">nous-mêmes.</span></h2> 610 <p class="eyebrow" style="color:var(--teal-light)">â Cas d'école interne</p> 611 <p class="case-lede">Notre propre agent de facturation et <span lang="en">CRM</span> fonctionne entièrement par conversation. Créer un devis, relancer un client, exporter un bilan, mettre à jour un statut â chaque action administrative est une commande en langage naturel.</p> 612 <ul class="case-checks"> 613 <li><span class="mat" aria-hidden="true">check_circle</span><span>100 % des actions accessibles par conversation</span></li> 614 <li><span class="mat" aria-hidden="true">check_circle</span><span>Testé en production avec <span lang="en">NVDA</span> et <span lang="en">VoiceOver</span></span></li> 615 <li><span class="mat" aria-hidden="true">check_circle</span><span>Interface chat conforme RGAA 4.1 niveau AA</span></li> 616 <li><span class="mat" aria-hidden="true">check_circle</span><span>Déployé en 7 semaines sur une stack métier existante</span></li> 617 </ul> 618 </div> 619 <div class="code-compare" aria-label="Exemple de transformation d'un élément inaccessible en action accessible"> 620 <div class="code-head"> 621 <span class="left-label">â HTML d'origine</span> 622 <span class="right-label">â Exposé par l'agent â</span> 623 </div> 624 <div class="code-block bad"><span class="tag-ch"><div</span> <span class="attr">class</span>=<span class="val">"tbl-cell"</span> 625 <span class="attr">onclick</span>=<span class="val">"editRow(42)"</span><span class="tag-ch">></span> 626 <span class="txt">⬠1,240.00</span> 627<span class="tag-ch"></div></span></div> 628 <div class="code-arrow"> 629 <span class="line"></span> 630 <span class="mat" aria-hidden="true">arrow_downward</span> 631 <span>Traduction conversationnelle</span> 632 <span class="mat" aria-hidden="true">arrow_downward</span> 633 <span class="line"></span> 634 </div> 635 <div class="code-block good">â <span class="txt">Utilisateur :</span> « Ãdite la facture n°42 » 636 637â <span class="txt">Agent :</span> Facture Acme Corp · 1 240,00 ⬠638 émise le 12/02/2026. Voulez-vous 639 <span class="attr">[ouvrir]</span> · <span class="attr">[éditer]</span> · <span class="attr">[marquer payée]</span> ?</div> 640 </div> 641 </div> 642 </div> 643 </div> 644</section> 645 646<!-- FAQ --> 647<section class="faq" aria-labelledby="faq-title"> 648 <div class="wrap"> 649 <div class="faq-head"> 650 <div> 651 <h2 id="faq-title" style="margin-top:14px">Ce que <span class="ital">les équipes</span> techniques nous demandent.</h2> 652 <p class="eyebrow">â 05 · Questions fréquentes</p> 653 </div> 654 <p>Les objections concrètes â sécurité, périmètre, pérennité â qui reviennent quand on présente cette approche à des DSI.</p> 655 </div> 656 <div class="faq-list"> 657 <details class="faq-item"> 658 <summary role="button">Et si on veut quand même un écran visuel accessible ?</summary> 659 <div class="answer"> 660 <p>Les deux approches ne s'excluent pas. On livre souvent l'agent en premier â parce qu'il est plus rapide à déployer et donne une accessibilité immédiate à 100 % â puis on accompagne les chantiers de refonte visuelle sur les écrans les plus critiques. L'agent devient alors un complément permanent, pas un substitut.</p> 661 </div> 662 </details> 663 <details class="faq-item"> 664 <summary role="button">Quelles garanties sur les actions sensibles (suppressions, paiements) ?</summary> 665 <div class="answer"> 666 <p>Chaque action est classée en trois niveaux â lecture, modification, irréversible â avec des règles de confirmation adaptées. Les actions irréversibles demandent une double confirmation explicite. Un journal d'audit trace chaque commande, chaque validation, chaque résultat.</p> 667 <p>On intègre systématiquement un mode « dry run » pour simuler l'impact d'une action complexe avant exécution.</p> 668 </div> 669 </details> 670 <details class="faq-item"> 671 <summary role="button">L'agent remplace-t-il vraiment une interface graphique ?</summary> 672 <div class="answer"> 673 <p>Pour 100 % des actions, oui. Pour l'ergonomie de certains usages â comparaisons visuelles, tri manuel de listes longues, validation d'une mise en page â une interface graphique reste plus efficace pour des utilisateurs voyants. L'agent est <strong>le</strong> chemin d'accès pour les utilisateurs de technologies d'assistance ; un chemin <strong>parmi d'autres</strong> pour les autres.</p> 674 </div> 675 </details> 676 <details class="faq-item"> 677 <summary role="button">Comment on conforme cela au RGAA 4.1 et aux CRPA ?</summary> 678 <div class="answer"> 679 <p>L'interface de chat elle-même est auditée et conforme RGAA 4.1 niveau AA. Les réponses de l'agent sont structurées (ARIA live regions, rôles, labels). On livre la déclaration d'accessibilité et la liste des cas testés. Notre activité historique est l'audit d'accessibilité depuis 2007 â on connaît le référentiel par cÅur.</p> 680 </div> 681 </details> 682 <details class="faq-item"> 683 <summary role="button">Que se passe-t-il si votre studio disparaît ?</summary> 684 <div class="answer"> 685 <p>
685L'agent est architecturé autour de vos propres <span lang="en">API</span> et modèles. Le code source est livré ouvert, documenté, sans dépendance à notre infrastructure. Les modèles utilisés (<span lang="en">Claude</span>, <span lang="en">GPT</span>, Mistral ou <span lang="en">open source</span> selon le cas) sont remplaçables. Vous gardez la main, définitivement.</p> 686 </div> 687 </details> 688 </div> 689 </div> 690</section> 691 692<!-- CTA --> 693<section class="cta-band" aria-labelledby="cta-title"> 694 <div class="wrap"> 695 <div class="cta-inner"> 696 <h2 id="cta-title" style="margin-top:14px">Un back-office sur lequel <span class="ital">ça coince ?</span></h2> 697 <p class="eyebrow" style="color:var(--teal-light)">â Prochaine étape</p> 698 <p>Cartographiez vos actions avec nous sur un échange d'une heure â on vous dit si une couche agent est la bonne réponse à votre contexte, et à quel coût estimé. Réponse argumentée sous 48 h.</p> 699 <a href="contact.html" class="btn-primary">Ãvaluer la faisabilité <span class="mat" aria-hidden="true">arrow_outward</span></a> 700 </div> 701 </div> 702</section> 703 704</main> 705 706<footer class="footer" role="contentinfo"> 707 <div class="wrap"> 708 <div class="footer-grid"> 709 <div> 710 <span class="brand" role="heading" aria-level="2">audit-web<em>.ai</em></span> 711 <p>Studio d'intelligence artificielle né de près de 20 ans d'expertise en accessibilité numérique. Le studio IA de la SARL Audit-Web (<a href="https://audit-web.com" class="contact-link">audit-web.com</a>).</p> 712 <p style="margin-top:16px"><a href="mailto:[email protected]" class="contact-link">[email protected]</a></p> 713 </div> 714 <div> 715 <span class="h4" role="heading" aria-level="2">Services</span> 716 <ul class="footer-poles"> 717 <li> 718 <span class="footer-pole" style="display:block;margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)">Construire</span> 719 <ul> 720 <li><a href="service-agents-sur-mesure.html">Agents IA sur mesure</a></li> 721 <li><a href="service-developpement-web.html">Sites web par IA</a></li> 722 <li><a href="service-design-ia.html">Design : le studio</a></li> 723 <li><a href="service-environnements-ia.html">Environnements IA pro</a></li> 724 </ul> 725 </li> 726 <li> 727 <span class="footer-pole" style="display:block;margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)">Rendre lisible</span> 728 <ul> 729 <li><a href="service-visibilite-ia.html">Lisibilité IA</a></li> 730 </ul> 731 </li> 732 <li> 733 <span class="footer-pole" style="display:block;margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)">Garantir</span> 734 <ul> 735 <li><a href="service-a11y-backoffices.html" aria-current="page">Back-offices accessibles par la conversation</a></li> 736 <li><a href="service-design-md-a11y-ready.html">Revue de spec design.md</a></li> 737 </ul> 738 </li> 739 <li> 740 <span class="footer-pole" style="display:block;margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)">Transversal</span> 741 <ul> 742 <li><a href="service-conseil-strategie.html">Conseil stratégie IA</a></li> 743 </ul> 744 </li> 745 </ul> 746 </div> 747 <div> 748 <span class="h4" role="heading" aria-level="2">Réalisations</span> 749 <ul> 750 <li><a href="realisation-a11y-assistant.html">a11y-assistant.ai</a></li> 751 <li><a href="realisation-a11y-engine.html">a11y-engine.ai</a></li> 752 <li><a href="realisation-a11y-billing.html">a11y-billing</a></li> 753 <li><a href="realisation-pilot-agent.html">Pilot Agent</a></li> 754 <li><a href="realisation-wraite.html">wrAIte</a></li> 755 <li><a href="realisation-agent-immo.html">agent-immo.ai</a></li> 756 </ul> 757 </div> 758 <div>
759 <span class="h4" role="heading" aria-level="2">Liens</span> 760 <ul> 761 <li><a href="https://audit-web.com">audit-web.com</a></li> 762 <li><a href="contact.html">Contact</a></li> 763 <li><a href="informations-legales.html">Informations légales</a></li> 764 <li><a href="plan-du-site.html">Plan du site</a></li> 765 </ul> 766 </div> 767 </div> 768 <div class="bot"> 769 <p>© 2026 SARL Audit-Web · audit-web.ai, studio IA d'audit-web.com</p> 770 <p>Fait à Nice · hébergé en Europe</p> 771 </div> 772 </div> 773</footer> 774 775
776<script> 777(function(){ 778 var burger = document.getElementById('burger'); 779 var burgerClose = document.getElementById('burgerClose'); 780 var mobileMenu = document.getElementById('mobileMenu'); 781 if(!burger || !mobileMenu) return; 782 var lastFocus = null; 783 function openMenu(){ 784 lastFocus = document.activeElement; 785 mobileMenu.classList.add('open'); 786 mobileMenu.removeAttribute('inert'); 787 788 var first = mobileMenu.querySelector('a,button'); 789 if(first) first.focus(); 790 document.body.style.overflow='hidden'; 791 } 792 function closeMenu(){ 793 mobileMenu.classList.remove('open'); 794 mobileMenu.setAttribute('inert',''); 795 796 document.body.style.overflow=''; 797 if(lastFocus) lastFocus.focus(); 798 } 799 burger.addEventListener('click', openMenu); 800 if(burgerClose) burgerClose.addEventListener('click', closeMenu); 801 mobileMenu.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', closeMenu); }); 802 document.addEventListener('keydown', function(e){ 803 if(e.key==='Escape' && mobileMenu.classList.contains('open')) closeMenu(); 804 }); 805 mobileMenu.addEventListener('keydown', function(e){ 806 if(e.key!=='Tab') return; 807 var focusables = mobileMenu.querySelectorAll('a,button'); 808 var first = focusables[0], last = focusables[focusables.length-1]; 809 if(e.shiftKey && document.activeElement===first){ last.focus(); e.preventDefault(); } 810 else if(!e.shiftKey && document.activeElement===last){ first.focus(); e.preventDefault(); } 811 }); 812})(); 813</script>
813 814
815<script src="js/webmcp.js" defer></script>
815 816</body> 817</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.