UPDATED:
https://www.jsdelivr.com/package/npm/accessibility-widgets
This is my own widget. ıt is better and has premium features for free start using this. just add this to your footer add it from a snippet or if you know add it manualy right before your </body> tag and thats it.
If you need customizations visit the jsdelivery page or npm page to read the full readme.
<script src="https://cdn.jsdelivr.net/npm/accessibility-widgets@2.0.13/widget.min.js"></script>
🎨 Visual Enhancements
- High Contrast Mode – 3 levels (Medium 1.3x, High 1.5x, Ultra 2.0x) for improved visibility
- Text Size Control – 4 size options (Default, Medium 20px, Large 24px, X-Large 28px)
- Line Height Adjustment – 3 spacing levels (2em, 3em, 4em) for better readability
- Text Spacing – Enhanced letter (0.2em) and word spacing (0.3em)
- Text Alignment – Left, Center, or Right alignment options
- Bigger Cursor – High-contrast 48x72px cursor with SVG rendering
- Hide Images – Text-only mode for focused reading or bandwidth saving
🧠 Cognitive Support
- Dyslexia-Friendly Font – Comic Sans MS and other dyslexia-optimized fonts
- Font Selection – Choose between Arial, Times New Roman, or Verdana
- Animation Control – Pause all animations and transitions
- Reduced Motion – Motion sensitivity support for vestibular disorders
♿ Assistive Technology
- Screen Reader – Built-in text-to-speech using Web Speech API
- Voice Control – Hands-free navigation with 15+ voice commands
- Color Blindness Filters – Protanopia, Deuteranopia, Tritanopia, and Grayscale modes
- Keyboard Navigation – Full Tab/Arrow key support with proper focus indicators
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.
