03/22/2025
FluentForms Auto Tab-Index Accessibility Issue
Overview of the Issue
An important accessibility concern with FluentForms was discovered at March 20th Santa Cruz WordPress helpdesk meetup. https://www.meetup.com/santa-cruz-wordpress
When the "Enable Auto Tab-Index" global setting is activated, users experience an unexpected tabbing behavior where focus jumps directly to the first field in the form, bypassing other navigable elements on the page. This creates a problematic user experience, particularly for those relying on keyboard navigation.
The Specific Problem
The current implementation assigns a low tabindex value = 1 to the first form field, causing browsers to prioritize it in the tab sequence before other page elements. This creates an unexpected jump in navigation flow.
Technical Analysis
The "Enable Auto Tab-Index" setting in FluentForms is designed to automatically assign tabindex values to form elements, theoretically creating a logical tab order within forms. However, this implementation appears flawed, as it's forcing focus to form fields without respecting the natural tab order of the page.
How Tab Order Should Work
Properly implemented tab navigation should:
1. Follow a logical sequence through all focusable elements on a page
2. Respect the document's natural reading order (top-to-bottom, left-to-right in Western contexts)
3. Honor manually set tabindex values appropriately
Accessibility Impact
This behavior violates several WCAG (Web Content Accessibility Guidelines) principles:
1. **Predictable Navigation (WCAG 3.2.3)**: Website navigation should be consistent and predictable
2. **Keyboard Accessibility (WCAG 2.1.1)**: All functionality should be available via keyboard
3. **Focus Order (WCAG 2.4.3)**: Focus should move in a sequence preserving meaning and operability
For users with visual impairments who navigate via keyboard or for motor-impaired users who cannot use a mouse, this unexpected tab behavior creates confusion and frustration.
Technical Solutions
To address this issue, consider these approaches:
1. **Disable Auto Tab-Index**: The simplest solution is to disable this setting in FluentForms' global configuration.
2. **Custom Tab Order Implementation**: If automatic tabindex is necessary, implement it with more sophisticated logic that:
- Respects existing page elements
- Places form fields within the natural document flow
- Avoids overriding the default tab sequence
3. **JavaScript Tab Order Management**: Consider a script that:
document.addEventListener('DOMContentLoaded', function() {
// Get all focusable elements
const focusableElements = document.querySelectorAll(
'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
// Re-organize tab order logic here
});
Temporary Workaround
Until a proper fix is implemented, you can:
1. Disable the "Enable Auto Tab-Index" setting
2. Manually assign tabindex values to form fields if specific ordering is needed
3. Add CSS focus styles to improve visibility of focused elements:
:focus {
outline: 3px solid ;
outline-offset: 2px;
}
Conclusion
The FluentForms "Enable Auto Tab-Index" feature creates a significant accessibility barrier when enabled. Site owners should disable this setting until a proper fix is implemented by the FluentForms development team. This issue highlights the importance of thorough accessibility testing for all form functionality, especially features that affect keyboard navigation.
