SIGN UP

Accessible Progress Bar

By: David Cutri | Asked: 08/10/2022
Forums › Category: How-to › Accessible Progress Bar
0 Vote Up Vote Down
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?

2 Answers
1 Vote Up Vote Down
Best Answer
Steve WellsSteve Wells 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!

Steve WellsSteve Wells replied 2 years ago

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.

0 Vote Up Vote Down
Victor Font 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.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right