David Cutri asked 2 years ago
Hi,
Does anyone know how I might go about editing the output of the progress bar on a multi-page form? It's a nice feature that I would like to use, but I need to filter the output to use WCAG a11y standards.
I see there is a hook for changing the text: https://formidableforms.com/knowledgebase/frm_chat_progress_text
But I need to change the markup. Is this possible?
Steve Wells Staff answered 2 years ago
Hi David,
Thanks for the question...I wanted to chime in since we (Formidable) are in the process of designing some changes and enhancements to the progress bar/rootline. These changes would allow users to choose from a few new styles/designs.
I'm not familiar with WCAG A11y standards when it comes to progress bars, but this would be a good opportunity to learn and hopefully implement a design that meets those standards.
Could you outline what the requirements are or point me in the direction of some documentation so we can determine if this is something we can add into the upcoming enhancements?
David Cutri
replied 2 years ago Hi, Steve. Thanks!
There's a good example here:
https://dequeuniversity.com/library/aria/progress-bar-bounded
And there's a very good example here showing four different approaches for indicating progress on a multi-page form, including basic principles:
https://www.w3.org/WAI/tutorials/forms/multi-page
David Cutri
replied 2 years ago UPDATE: the rootline option is passable with just a few very small modifications:
1. I used aria-hidden="true" on the page titles, so screen readers don't repeat the title twice, and
2. Added some screen reader text inside the current page item so screen readers will announce it.
3. I also added some visual focus states for keyboard users.
That's it!
Awesome! Thanks for sharing this. I'll pass this all along to our designer and dev team so we can better understand and hopefully implement this into our future enhancements for this feature.
Victor Font Staff answered 2 years ago
I've looked through Formidable Pro's source code. It generates the rootline and progress bar in FrmProPageField.php. There are no filters in the progress bar code that allows you to modify the code before rendering it in the browser.
You could possibly use the frm_before_display_content filter although I can't tell you how hard or easy it would be because the filter gives you access to the rendered HTML before it's sent to the browser.
You could use jQuery to add the properties you want when the form is rendered in the browser.
David Cutri
replied 2 years ago Thanks, Victor. I'm leaning towards jQuery or just going without for now.
Please login or Register to submit your answer
