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 if you need more w3 scan tool list free or paid pro tools list and service providers as well. 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. This is changing depending on the country and the region so cant say for sure what is what for you. Thats why use the scan tools to have some idea what you need to do or where you need to start first. Read about these compliance needs.
These scan tools will only give you automated results and sometimes the lack of some elements or user experience may even create issues. Of course scan tools cant know what they cant see or scan so be sure you are creating a proper structures and compliant sites in the first place. just common sense site html knowledge and site building all you need.
Enjoy.
You can set the widget color custom.
just change your hex color here : const mainColor = ‘#07757f’;
and here: –main-color: #07757f;
these color sets changes most of the widget colors and looks better on your site.
<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-menu-btn{
width: 45px !important;
height: 45px !important;
}
.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;
}
.asw-btn{
aspect-ratio: 6 / 4 !important;
}
</style>
Check this scan tool list from W3.
