Free Accessibility Widget for EU and World

Developers
1

Hello everyone I created a simple js css snippet to customize the sienna accessibility widget.

Maybe some of you already know this widget is a opensource project.

But it doesnt give customization color options sadly.

Thats why I decided to code something simple to make the widget easily customizable.

do not pay hundreds of dolars to scam widgets this widget is good enough for most needs.
Ofcourse for 100% accessibility and compliance use the lighthouse test for simple checks and use this wave webaim test for advance html and color checks. and here w3 scan tool list free or paid pro tools list always use multiple tools to make good scans and html fixes for your site.

Depending on the website type you may need to create more compliance. These scan tools will only give you automated results and sometimes the lack of UX may even create issues. So ofcourse scan tools cant know what they cant scan so be sure you are creating a proper compliant sites in the first place.

Bricks Builder allows you to do 100% compliance btw but you may need some basic html and css knowledge too :wink:

Good luck.

<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>

<script>
const mainColor = '#07757f';

function applyStylesToMenuBtn(button) {
    if (!button) return;
    button.style.setProperty('outline', `5px solid ${mainColor}`, 'important');
    button.style.setProperty('background', mainColor, 'important');
    button.style.setProperty('background', `linear-gradient(96deg, ${mainColor} 0, ${mainColor} 100%)`, 'important');
}

function applyStylesToMenuHeader(header) {
    if (!header) return;
    header.style.setProperty('background-color', mainColor, 'important');
}

function checkAndStyleElements() {
    const menuBtn = document.querySelector('.asw-menu-btn');
    const menuHeader = document.querySelector('.asw-menu-header');

    if (menuBtn) applyStylesToMenuBtn(menuBtn);
    if (menuHeader) applyStylesToMenuHeader(menuHeader);

    if (menuBtn && menuHeader) {
        observer.disconnect(); // Stop observing when both are styled
    }
}

const observer = new MutationObserver(checkAndStyleElements);

observer.observe(document.body, {
    childList: true,
    subtree: true
});

document.addEventListener("DOMContentLoaded", checkAndStyleElements);
</script>

<style>
:root {
    --main-color: #07757f;
}

.asw-footer {
    display: none !important;
}

.asw-menu-content {
    max-height: 100% !important;
    padding-bottom: 40px !important;
}

.asw-menu-header svg,
.asw-menu-header svg path {
    fill: var(--main-color) !important;
}
</style>
1 Like
2

Anyone using Lighthouse or automated testing for accessibility NEEDS to read this:

3

that is why I wrote wave webaim as well

https://wave.webaim.org/

almost all the pro accessibility experts using this wave

lighthouse only makes very basic html and contrast checks thats it and I dont think thats bad btw most of the sites only needs basics lighthouse checks.

4

Wave (and any automated tool) misses around 80% of potential issues, and false flags a fair amount of non-issues. Automation has its place, but you still need to understand WCAG to actually use automation correctly. Running something through Wave and saying “yup, accessible” is a guaranteed way to ensure a non-compliant website

2 Likes