Accessibility - dynamic text

Question

I have a form with some prefilled data. The footer is sticky with a "continue" button that takes you to the next page.

All the fields of this 3 page form are required (we have this note at the top of the page) so the continue button was disabled until all the info was filled out.

My team put this infront of users and they didn't like that there wasn't an indication of what was needed to continue.

After alot of thought I came up with that the continue button could be dynamic - saying the next field that needed to be completed.

For example:

The user needs to fill in the street address and city as two input boxes.

While fields are empty the continue button says "Enter your address". On input of the street address the button can change to "Enter the city" etc.

For the entire form. With this the button wouldn't be disabled but act as a way to teleport the user (anchor scroll) to the item they missed and give indication of what is needed.

With aria labeling I am hoping that the screen reader can watch the input and signal the user of the dynamic text after they finish the field they are on. However is this needed? Since a screen reader most likely will tab to the next field on the keyboard this information is not nessesary unless they accidentally skip something and then upon getting to the end of the form tabbing to the continue button -where it can read to them that they have a question missing and can press enter on the button to imediately focus the field they need.

Looking for any advice. I don't see this type of button convention anywhere - but don't know if that's because it's bad or because no one wants to try it.

I'm well aware of the conventions of forms - they are one of the oldest patterns. But with others looking into how to present them better - like type form - I wonder if there is any value add to trying something new when user testing has suggested a pain point.

Many of the business partners like this idea and wonder why this is not mainstream. But I can't find information for why this is not done.

This is why I am starting a conversation. I want to know if there are pitfalls to this. I plan to take this to our next testing - but wanted to consult the community for feedback. Thanks.

Answer 1

I like the idea of a sticky footer for forms.

It works especially well when editing a long form that doesn't fit the screen. Users don't have to scroll all the way up or down to find that save/submit button.

However...

Having a dynamic text label in the disabled button is not a good idea, because...

• Users will not see it. The button is already disabled so visibility is low.
• When users see it the initial reaction might be good; 'Oh! I have to enter my address. Thanks!'. But imagine that the user has not filled in five fields. The flow of going back and forth between the form and the button is tiring.

Try this;

Keep the sticky footer, but use a more generally used way of showing required or optional fields. Common ways are using the asterisk (*) for required fields or showing 'optional' for optional fields. I like the latter one best because it keeps your form clean. There are more required fields than optional fields, so labeling the optional fields results in less clutter.

Don't forget; people use other sites too. They are used to a certain way of filling out forms. In fact, filling out forms is one of the most common ways of interacting with a website or application. Don't try and invent a pattern for that. Use commonly used patterns.