Accessibility Improvements
Hi Ninjas,
I'd like to request some accessibility improvements to make Fluent Forms more WCAG-compliant. Here are concrete issues I've identified:
1. Missing autocomplete attribute support Form fields currently don't allow setting an autocomplete attribute value. This is required by WCAG 1.3.5 (Identify Input Purpose) and helps users – especially those using assistive technologies or autofill tools – to correctly identify input fields like name, email, address, etc.
Request: Add an option in the field settings to define the autocomplete value (e.g. name, email, street-address, etc.).
2. Non-semantic "button" elements (e.g. File Upload trigger) The file upload trigger button is rendered as a <span> instead of a <button>. This breaks semantic HTML and accessibility – screen readers won't identify it as interactive, and it won't be reachable or activatable via keyboard by default.
Request: Either use a native <button> element or at minimum add role="button", tabindex="0", and the appropriate keyboard event handlers (Enter/Space).
3. File upload "remove" (×) not keyboard-accessible The delete/remove icon in the file upload list is not reachable via the Tab key, because it's not a focusable element (no <button>, no tabindex). Keyboard-only users cannot remove uploaded files.
Request: Wrap the remove control in a <button> element (or add role="button" + tabindex="0") with an accessible label, e.g. aria-label="Remove [filename]".
4. Hidden file <input> is reachable via Tab The visually hidden <input type="file"> is still part of the Tab order, even though it's not visible to the user. This creates a confusing experience for keyboard and screen reader users.
Request: Add tabindex="-1" to the hidden input so it's excluded from the Tab order.
These are relatively focused, low-effort changes that would significantly improve usability for people relying on keyboards or assistive technologies. Happy to provide more details or test cases if helpful.
Thanks for considering this!
(Problems identified by myself, only translated via AI)
Thanks for the detailed report. I have forwarded this to our dev & R&D team.