Follow the steps below to integrate the Accessibility Widget into your website.
Copy and paste the following code immediately before the closing
</body> tag on every page (or theme footer page) where you want the widget to appear.
Loading the script at the end of the page helps ensure that your website content
loads first while the widget initializes after the page has been rendered.
The first script loads the latest version of the Accessibility Widget from the official CDN. The second script updates the default accessibility widget link so that it points to your website's home page instead of the default destination. It also monitors dynamically added content to ensure the link remains updated, making it suitable for modern websites that load content asynchronously.
<script defer='defer' src='https://cdn.jsdelivr.net/npm/sienna-accessibility@latest/dist/sienna-accessibility.umd.js'></script>
<script>
(function () {
function fixLink() {
document
.querySelectorAll('a[href="https://accessibility-widget.pages.dev"]')
.forEach(link => {
link.setAttribute("href", "/");
link.removeAttribute("target"); // optional: keeps navigation in same tab
link.setAttribute("rel", "noopener"); // optional safety
});
}
// Run once after load
document.addEventListener("DOMContentLoaded", fixLink);
// Watch for dynamically added elements
const observer = new MutationObserver(fixLink);
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
</script>Note: If your website uses a Content Security Policy (CSP), ensure that
https://cdn.jsdelivr.net is included in the script-src directive.
After installation, refresh your browser and verify that the Accessibility Widget
is displayed correctly and functions as expected on all pages.
Also I recommend to apply below CSS
/* ===========================================================
WCAG 2.2 AA Accessibility CSS Best Practices
=========================================================== */
/* 1. Keyboard Focus Indicator */
:focus-visible {
outline: 3px solid #005fcc !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 4px rgba(255,255,255,.9) !important;
border-radius: 4px !important;
position: relative !important;
z-index: 9999 !important;
}
/* Legacy browser fallback */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[role="button"]:focus,
[tabindex]:focus {
outline: 3px solid #005fcc !important;
outline-offset: 3px !important;
}
/* Remove outline only when :focus-visible is supported */
:focus:not(:focus-visible) {
outline: none !important;
}
/* ===========================================================
2. Links
=========================================================== */
a {
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-thickness: 1.5px !important;
}
a:hover,
a:focus-visible {
text-decoration-thickness: 3px !important;
}
/* ===========================================================
3. Buttons
=========================================================== */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
min-width: 44px !important;
min-height: 44px !important;
}
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
[role="button"]:focus-visible {
outline: 3px solid #005fcc !important;
}
/* ===========================================================
4. Form Controls
=========================================================== */
input,
select,
textarea,
button {
font: inherit !important;
line-height: 1.5 !important;
}
/* Placeholder */
::placeholder {
opacity: .8 !important;
}
/* ===========================================================
5. Reduced Motion
=========================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
html {
scroll-behavior: auto !important;
}
}
/* ===========================================================
6. Typography
=========================================================== */
body {
line-height: 1.5 !important;
overflow-wrap: break-word !important;
text-rendering: optimizeLegibility !important;
}
/* ===========================================================
7. Text Selection
=========================================================== */
::selection {
background: #005fcc !important;
color: #ffffff !important;
}
/* ===========================================================
8. Disabled Controls
=========================================================== */
:disabled {
cursor: not-allowed !important;
opacity: .65 !important;
}
/* ===========================================================
9. Images
=========================================================== */
img,
svg,
video,
canvas {
max-width: 100% !important;
height: auto !important;
}
/* ===========================================================
10. Tables
=========================================================== */
table {
border-collapse: collapse !important;
}
th,
td {
padding: .5rem !important;
}
/* ===========================================================
11. Skip Link
=========================================================== */
.skip-link {
position: absolute !important;
left: -9999px !important;
top: 0 !important;
}
.skip-link:focus {
left: 10px !important;
top: 10px !important;
padding: 10px 15px !important;
background: #005fcc !important;
color: #ffffff !important;
z-index: 999999 !important;
}
/* ===========================================================
12. Summary
=========================================================== */
summary {
cursor: pointer !important;
}
/* ===========================================================
13. tabindex=-1
=========================================================== */
[tabindex="-1"]:focus {
outline: none !important;
}
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.