Styling Accessible Forms with jQuery Enabled Selector

This article explains how to target and style interactive form elements using the jQuery :enabled pseudo-class selector to improve web accessibility. You will learn how the selector functions, how to apply dynamic styles that provide clear visual feedback to users, and how to maintain compliance with standard accessibility requirements by distinguishing interactive controls from disabled ones.

The jQuery :enabled selector specifically targets any form element—such as <input>, <select>, <textarea>, or <button>—that does not have the disabled attribute applied. In accessible web design, users relying on visual cues, keyboard navigation, or screen magnification must be able to immediately distinguish between elements they can interact with and elements that are inactive.

To apply accessible styles using jQuery, you can select active fields and either apply inline CSS or dynamically assign a designated CSS class. Using a class is the recommended approach for clean code architecture:

$(document).ready(function() {
    // Target all enabled text inputs and textareas
    $('input:enabled, textarea:enabled, select:enabled').addClass('accessible-active-field');
});

The associated CSS should focus on clear visual indicators, such as strong borders, readable background colors, and distinct focus states that meet WCAG (Web Content Accessibility Guidelines) contrast ratios:

.accessible-active-field {
    background-color: #ffffff;
    border: 2px solid #2b2b2b;
    color: #1a1a1a;
    cursor: pointer;
}

.accessible-active-field:focus {
    outline: 3px solid #005a9c;
    outline-offset: 2px;
}

Accessible forms often change dynamically based on user input. For example, selecting a checkbox might activate a previously grayed-out input. When updating an element's state using jQuery, re-evaluate or chain the :enabled selector to adjust visual styling and relevant ARIA attributes simultaneously:

$('#toggleCheckbox').on('change', function() {
    const isChecked = $(this).is(':checked');
    const targetInput = $('#dependentField');

    // Toggle the disabled property
    targetInput.prop('disabled', !isChecked);

    // Apply accessible styles to newly enabled elements
    if (targetInput.is(':enabled')) {
        targetInput
            .addClass('accessible-active-field')
            .attr('aria-disabled', 'false');
    } else {
        targetInput
            .removeClass('accessible-active-field')
            .attr('aria-disabled', 'true');
    }
});

When implementing the :enabled selector for accessible styling, ensure that the visual contrast ratio between your enabled fields, their borders, and the page background is at least 3:1 for user interface components. Never suppress focus outlines on :enabled elements without supplying a high-contrast alternative, as keyboard-only users depend entirely on these indicators to navigate forms efficiently.