Improving Avada for Accessible Websites

Logo Avada

From 2025, there will be new legal regulations in the EU. These concern the accessibility of websites. I only use WordPress for the websites in our companies with Avada. Avada is an excellent page builder. Unfortunately, as with all other page builders, accessibility is little or not at all taken into account.
That's why I wrote this article and I can share the link here with the developers of Avada.

Dear Avada Team,

First Check this


Here are a few suggestions on how accessibility for WordPress websites could be improved with Avada.

Enhancing Avada Page Builder with Additional Accessibility Features

To improve accessibility and user customization in the Avada Page Builder, you can implement the following features:

1. Keyboard Navigation:
   • Implement keyboard navigation to allow users to navigate through focusable elements using shortcuts.
     
     
2. Font Size Adjustment:
   • Allow users to change the font size on the website.
     
     
3. Grayscale Mode for Images:
   • Provide an option to display all images in grayscale.
     
     
4. Night Mode for the Entire Website:
   • Enable a night mode that changes the website's color scheme for better readability in low light conditions.
     
     
5. Color Contrast Adjustment:
   • Allow users to adjust the contrast of colors on the entire website to enhance readability.
     
     
6. Accessibility Widget:
   • Create a widget with a menu where users can adjust these settings.

Implementation Steps

1. Keyboard Navigation:

Integrate keyboard navigation by adding JavaScript code to manage focus between elements. Here’s a sample implementation:

document.addEventListener('DOMContentLoaded', function() {
    let focusableElements = 'a, button, input, [tabindex], .fusion-builder-element, .fusion-button';
    document.addEventListener('keydown', function(e) {
        let keyCode = e.keyCode || e.which;
        let focusableContent = document.querySelectorAll(focusableElements);
        let focusArray = Array.prototype.slice.call(focusableContent);
        let index = focusArray.indexOf(document.activeElement);

        if (e.altKey && keyCode === 78) { // Alt + N for next element
            if (index > -1 && index < focusArray.length - 1) {
                focusArray[index + 1].focus();
                e.preventDefault();
            }
        } else if (e.altKey && keyCode === 80) { // Alt + P for previous element
            if (index > 0) {
                focusArray[index - 1].focus();
                e.preventDefault();
            }
        }
    });
});

2. Font Size Adjustment:

Add a control to change the font size. Include this CSS and JavaScript:

CSS:

:root {
    --font-size: 16px;
}
body {
    font-size: var(--font-size);
}

JavaScript:

function changeFontSize(size) {
    document.documentElement.style.setProperty('--font-size', size + 'px');
}

document.getElementById('font-size-selector').addEventListener('change', function(e) {
    changeFontSize(e.target.value);
});

3. Grayscale Mode for Images:

Add an option to toggle grayscale mode for images.

CSS:

.grayscale img {
    filter: grayscale(100%);
}

JavaScript:

function toggleGrayscale() {
    document.body.classList.toggle('grayscale');
}

document.getElementById('grayscale-toggle').addEventListener('click', toggleGrayscale);

4. Night Mode:

Enable a night mode with a color scheme change.

CSS:

.night-mode {
    background-color: #333;
    color: #ccc;
}

JavaScript:

function toggleNightMode() {
    document.body.classList.toggle('night-mode');
}

document.getElementById('night-mode-toggle').addEventListener('click', toggleNightMode);

5. Color Contrast Adjustment:

Allow users to adjust the color contrast.

CSS:

.high-contrast {
    background-color: #000;
    color: #FFF;
}

JavaScript:

function toggleHighContrast() {
    document.body.classList.toggle('high-contrast');
}

document.getElementById('contrast-toggle').addEventListener('click', toggleHighContrast);

6. Accessibility Widget:

Create a widget with controls for these features.

HTML:

<div id="accessibility-widget">
    <button id="font-size-selector" data-size="16">Font Size: Medium</button>
    <button id="grayscale-toggle">Toggle Grayscale</button>
    <button id="night-mode-toggle">Toggle Night Mode</button>
    <button id="contrast-toggle">Toggle High Contrast</button>
</div>

CSS for Widget:

#accessibility-widget {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    z-index: 1000;
}

JavaScript for Widget Integration:

// Example of attaching events to the widget buttons.
document.getElementById('font-size-selector').addEventListener('click', function() {
    let newSize = prompt("Enter new font size in px:", "16");
    if (newSize) {
        changeFontSize(newSize);
    }
});

Summary

By implementing these features, you can significantly enhance the accessibility and customization options for users in the Avada Page Builder. These additions will help users personalize their browsing experience, improve readability, and ensure a more inclusive web experience.

Since Avada also offers its own form editor, some improvements must also be included here so that forms can also be read by screen readers.