Dynamic Theme Switching and Font Size Control for Better Accessibility

Introduction

In today's web development landscape, providing users with customization options such as dynamic themes and font size control significantly improves the accessibility and overall user experience of a website. The following code snippet demonstrates how these functionalities can be implemented effectively. It includes dynamic theme switching, font size adjustments, and accessibility enhancements to create a more inclusive web experience.

1. Dynamic Theme Switching

Introduction

Websites often provide theme customization options so users can choose a visual appearance that suits their preferences. The ability to switch between light and dark modes, or use custom color themes, can be a game-changer, especially for users with visual impairments or those browsing in different environments (like low-light settings).

Implementation

In this example, you have implemented multiple color themes (Light, Dark, Yellow, Blue, and Orange) using JavaScript and CSS. The code provides buttons that let users change the website’s appearance dynamically. Additionally, the theme preference is saved in the browser’s local storage, ensuring that the user’s choice persists across page reloads.

HTML Structure for Theme Buttons

<div class="darktheme">
    <div>
        <span><a tabindex="1" href="#" class="TopLink" id="increase-font" title="Increase">A+</a>|</span>
        <span><a tabindex="2" href="#" class="TopLink" id="DefaultSize" title="defaultsize">A</a>|</span>
        <span><a tabindex="3" href="#" class="TopLink" id="decrease-font" title="Decrease">A-</a> |</span>
        <span><a tabindex="4" href="#" class="TopLink" id="SkipTomainContent">Skip to main content</a> |</span>
    </div>
    <div class="Font_Size-Control">
        <span tabindex="5" class="no-bg-change bg-btn bg-white" title="Light" id="whitebg" style="background-color: white !important" onclick="togglecolorMode(this)"></span>
        <span tabindex="6" class="no-bg-change bg-btn bg-black" title="Dark" id="darkbg" onclick="return togglecolorMode(this)" style="background-color: #000 !important"></span>
        <span tabindex="7" class="no-bg-change bg-btn bg-yellow" title="Yellow" onclick="return togglecolorMode(this)" id="yellowbg" style="background-color: yellow !important"></span>
        <span tabindex="8" class="no-bg-change bg-btn bg-blue" title="Blue" onclick="return togglecolorMode(this)" id="bluebg" style="background-color: #DAEBFF !important"></span>
        <span tabindex="9" class="no-bg-change bg-btn bg-orange" title="Orange" onclick="return togglecolorMode(this)" id="orangebg" style="background-color: #FFD1B9 !important"></span>
    </div>
</div>

JavaScript for Theme Switching

The togglecolorMode function switches the theme when the user clicks on a button. It removes any existing theme classes from the body and adds the class corresponding to the selected theme.

function togglecolorMode(el) {
    let theme = el.title.toLowerCase();
    localStorage.setItem("theme", theme);

    $("body").removeClass("itidarkmode theme-yellow theme-blue theme-orange");

    if (theme === "yellow") {
        DarkReader.disable();
        $("body").addClass("theme-yellow");
    }
    else if (theme === "blue") {
        DarkReader.disable();
        $("body").addClass("theme-blue");
    }
    else if (theme === "orange") {
        DarkReader.disable();
        $("body").addClass("theme-orange");
    }
    else if (theme === "dark") {
        $("body").addClass("itidarkmode");
        DarkReader.enable();
    }
    else {
        DarkReader.disable();
    }
}

In the script above:

The togglecolorMode function checks the title of the clicked element to determine which theme to apply.
If the selected theme is “dark,” the DarkReader library is enabled, which adjusts the website to a dark mode layout.
The theme is saved to localStorage so that the user’s preference persists even after the page reloads.

CSS for Themes

Each theme’s specific styles are defined in CSS. For instance:

body.theme-yellow {
    background-color: #ffface !important;
}

body.theme-blue {
    background-color: #daebff !important;
}

body.theme-orange {
    background-color: #ffd1b9 !important;
}

body.itidarkmode {
    background-color: black;
    color: white;
}

In this case:

The theme-yellow, theme-blue, and theme-orange classes change the background color of the body to create visually distinct themes.
The itidarkmode class switches to a dark mode by setting a black background with white text.

2. Font Size Control

Introduction

Font size control is an essential feature for accessibility, especially for users with visual impairments. The code enables users to increase, decrease, or reset the font size of page content with simple button interactions.

Implementation

You have provided three buttons to control font size: increase (A+), decrease (A-), and reset to the default size (A). When a user clicks a button, the font size of all text elements on the page adjusts accordingly. The font size adjustments are limited within a range (12px to 20px).

HTML Structure for Font Size Controls

<span><a tabindex="14" href="#" class="TopLink" id="increase-font" title="Increase">A+</a>|</span>
<span><a tabindex="15" href="#" class="TopLink" id="DefaultSize" title="defaultsize">A</a>|</span>
<span><a tabindex="16" href="#" class="TopLink" id="decrease-font" title="Decrease">A-</a> |</span>

JavaScript for Font Size Adjustment

The adjustFontSize function listens for click events on the font size buttons and adjusts the size of all text elements on the page.

function adjustFontSize(change) {
    const elements = document.querySelectorAll(`p, span, a, li, dt, dd, h1, h2, h3, h4, h5, h6, label, legend, input, textarea, select, option, th, td, caption, strong, em, b, i, small, mark`);
    elements.forEach(element => {
        const currentSize = getFontSizeInPixels(element);
        const newFontSize = currentSize + change;

        if (newFontSize >= minFontSize && newFontSize <= maxFontSize) {
            element.style.fontSize = newFontSize + 'px';
        }
    });
}

In this example:

getFontSizeInPixels converts the font size from em or rem units to pixels.
The adjustFontSize function changes the font size of elements based on the user’s selection while respecting the minimum and maximum font size limits.

CSS for Font Size

Although the font size is adjusted via JavaScript, you can also define a base font size in your CSS:

body {
    font-size: 16px;
}

This ensures that the website’s default font size is set appropriately and remains consistent when reset by the user.

Skip to Main Content for Accessibility

Introduction

Providing a “Skip to Main Content” link improves website accessibility, especially for keyboard users and screen readers. This feature allows users to quickly skip repetitive navigation links and jump directly to the main content of the page.

Implementation

When the "Skip to main content" link is clicked, the page smoothly scrolls down to the main content area.

HTML Structure for Skip Link

<span><a tabindex="4" href="#" class="TopLink" id="SkipTomainContent">Skip to main content</a> |</span>

JavaScript for Smooth Scrolling

The following JavaScript listens for clicks on the skip link and scrolls the page smoothly to the main content:

skipToMainContentLink.addEventListener('click', function (event) {
    event.preventDefault();
    window.scrollBy({
        top: 270,
        left: 0,
        behavior: 'smooth'
    });
});

This enhances navigation for users who rely on keyboard shortcuts or screen readers to browse the website.

Conclusion

By integrating features like dynamic theme switching, font size control, and skip-to-content functionality, your website becomes more accessible and user-friendly. These features provide users with greater control over their browsing experience, ensuring that your site caters to a broader audience, including those with visual impairments or specific accessibility needs.

This approach not only enhances the overall usability of the website but also complies with best practices for web accessibility, making it more inclusive for all users.