>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3593705. --> Reported by: [gwenweb](https://www.drupal.org/user/3547308) Related to !134 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The `#klaro` element is appended to the end of <code>`&lt;body&gt;`</code> by the Klaro JavaScript library when `klaro.setup()` is called. For sighted users this is invisible &mdash; the consent dialog visually overlays everything. But for screen reader users navigating the page linearly (browse mode in NVDA/JAWS, swipe navigation in VoiceOver), the consent dialog is encountered *last*, after all the page content.</p> <p>A cookie consent dialog is by design the first thing a user must interact with before accessing the page. Its DOM position should reflect that.</p> <p>Note: the existing toggle button is already correctly inserted via <code>`insertAdjacentHTML('afterbegin', ...)`</code> (klaro.drupal.js line 85).</p> <p>The problem is specifically `#klaro` itself. </p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Enable the module on a Drupal site</li> <li>Open the page with a screen reader in browse/reading mode (NVDA + Firefox, or VoiceOver + Safari)</li> <li>Navigate linearly through the page (arrow keys / swipe)</li> <li>Observe: the consent dialog is announced *after* all page content </li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>After `klaro.setup()` is called, move `#klaro` to be the first child of `</p><body>`: <pre>&nbsp; ```diff&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp; klaro.setup(Drupal.behaviors.klaro.config);<br>&nbsp; +// Move #klaro to top of &lt;body&gt; so screen readers encounter it first.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp; +var klaroEl = document.getElementById('klaro');<br>&nbsp; +if (klaroEl) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp; +&nbsp; document.body.prepend(klaroEl);<br>&nbsp; +}&nbsp; </pre><p>This has no visual effect for sighted users and does not interfere with the existing focus management (issues #3560135 and #3530971).</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Manual test with NVDA + Firefox and VoiceOver + Safari</li> <li>Verify no regression on the toggle button placement</li> </ul> </body>