Simply start acting: Improve accessibility of Registration form

[zwiastunsw]

Hi all. This is the next idea for PR. Who will do it?

Improve accessibility of Registration form

There are two buttons in the registration form:

• Register
• Cancel.

But only one of them is actually a button - "Register" button. The second one looks like a button, but is a link. Take a look at the source code to see for yourself.

The "Register" button works perfectly. But the false Cancel button is confusing.

When a keyboard user sees a button, he wants to run it using Spacebar. Unfortunately, Spacebar does not launch the expected action.

The screen reader user hears that this is a link. Unfortunately, they can't hear where this link leads.

Using "Cancel" redirects you to the homepage. This behavior is unexpected. It causes an unexpected change of context. When I use the button, I expect the cursor to return to the place where the action was called.

In my opinion:

• The current link "Cancel" should be changed to a button.
• The only action that the Cancel button should launch is the Reset action. That's why I think it should be a Reset button.

What do you think about it? If you agree, don't wait - start working. Prepare PR.

[tarot-ray]

Here's the thing - 'cancel' is not a button type in HTML and "reset" is something completely different - it empties the form and shouldn't be used, here.

The only ways to have a 'cancel' button that redirects to somewhere else (e.g. home page) is to fake it from a link or to use Javascript to do the redirection but the question is why? The original developer must be lost in some old-fashioned thinking.

If you think about it, why would anyone click a 'Cancel' button? They can just press 'Back' in the browser or navigate somewhere else, like the home page, by using the menu.

That's why no-one uses a cancel button, in this sort of form, any more. Therefore, I recommend that it is simply removed.

[zwiastunsw]

@tarot-ray : I think you are right. Personally, I also don't see why this button is needed here. It doesn't do anything good. It only creates confusion. I don't mind removing it. Will you do PR?

[tarot-ray]

PS: I have a problem accessing my tarotray account, so I am now tarot-ray.

[tarot-ray]

I'll have a go, then. I need to find it in the PHP code.

[brianteeman]

Using the back button in the browser is not a solution. It's terrible ux

[zwiastunsw]

@tarot-ray : components/com_users/tmpl/registration

[zwiastunsw]

@brianteeman :

Using the back button in the browser is not a solution. It's terrible ux

Rightly so. But the "Cancel" button is not needed here at all (in my opinion).

[chmst]

If a user has entered all data but then decides that he/she does not want to register, he wants to leave this form and go back to the Homepage. For me, this is "cancel" and it is a link.
So I do not see the problem.

EDIT:
@zwiastunsw said: The screen reader user hears that this is a link. Unfortunately, they can't hear where this link leads.
Unfortunately, Spacebar does not launch the expected action.
This of course is a problem. How can we fix it?

[zwiastunsw]

If you are on the contact form page and you have filled in all the data, but you do not want to send the form, why do you not have the Cancel button?
Because it is not necessary. And here, too, it is unnecessary.

• Another example: You are on the login page. You have completed the form, but you do not want to log in. Why don't you have the Cancel button? And is it surprising that there is no such button?
• Another example: Why don't you have the Cancel button on the Password reset page? And is it surprising that there is no such button?
• Another example: Why don't you have the Cancel button on the Username Reminder Request page? And is it surprising that there is no such button?

Do you want to return to the homepage? OK. Use the menu. Use the link in logo. The Cancel link (or button) is not a link/button to return to the home page. This is not a "Back" link/button at all!

You can return to the page from which you came. Why do you assume that I came to the registration form page from the homepage? Maybe I came from a completely different page? Maybe I chose this page from the menu, as on the test site?

This is not a big issue. But this is a error. It causes unnecessary confusion. This false button should simply be removed. @tarot-ray has already prepared PR.

[brianteeman]

Thinking a bit more about it - there are times when a cancel is essential and others where its a matter of opinion. If you are "trapped in a modal" then there must be a cancel. If its a form with "personal data" many people will feel happier to actively "cancel" if they change their mind about completing the form

[zwiastunsw]

You are right. That's why you have a Cancel "button" on your profile editing page and you return to the Profile view :). That's why you need the Cancel button on the Backend pages.
And of course, it should then be a button and not a link.

[brianteeman]

I see no difference with the front end registration form.

[zwiastunsw]

Close your eyes. Turn on the screen reader. Go to the registration form page. Fill in the data. And answer the question: Do you need the Cancel button to go to any other page?

[tarot-ray]

'Cancel' button or no 'Cancel' button? This is a moot question. Why even discuss it? There is no 'cancel' type for a button, in HTML!

So, there can never be such a button. There can only be a link, made to look like a button or a button that uses Javascript, to navigate elsewhere. The former breaks A11Y, as pointed out by @zwiastunsw . The latter requires Javascript, which is also not a good idea.

"The Web is not an application environment, and it usually doesn't have dialog boxes. Instead, the Web is a navigation environment where users move between pages of information. Since hypertext navigation is the dominant user behavior, users have learned to rely on the Back button for getting out of unpleasant situations. Whenever users arrive at pages they don't want, they slam their mouse directly onto the Back button.

Because Back is such a strong behavior on the Web, it is usually not necessary to offer explicit Cancel buttons. If the user asks for something but doesn't want it, then you can be sure that it's Back button time.

Offer a Cancel button when users may fear that they have committed to something they want to avoid. Having an explicit way to Cancel provides an extra feeling of safety that is not afforded by simply leaving.

Cancel is mainly useful for multi-step dialogs where the user has progressed past one or more pages with actions. At this time, pressing the Back button will not undo these actions and it would be better if the user would click Cancel." - from https://www.nngroup.com/articles/reset-and-cancel-buttons/

So, I conclude that adding a 'Cancel' "button" (faked from a link, using CSS or javascript enabled), in such a form as this, is an obsolete legacy action, because of the way people have got used to it, in e.g. Windows dialogues. IMHO, it doesn't belong in a modern web form.

There may be other opinions but that's mine.

[zwiastunsw]

Some examples for consideration:

• Here is a page with templates of different registration forms. I have seen a dozen or so. I haven't found the Cancel button on any of them:
• Here registration page for Smashing Magazine. No Cancel button/link.
• Several forms with personal data on the PaccielloGroup website. . There is no Cancel button anywhere
• Registration form on the website of a Polish organisation dealing with accessibility issues
• Joomla Documentation Page

[tarot-ray]

@zwiastunsw That's exactly why I said, at the beginning of this, "no-one uses a cancel button, in this sort of form, any more. Therefore, I recommend that it is simply removed."

We are using 'Community Builder'. for my most important site and the registration form (a lot more complex and programmable than the native Joomla one) has no 'Cancel' button. It simply doesn't need one. Anyone who changes their mind can just go elsewhere, via navigation links (or, even, press 'Back').,

[zwiastunsw]

Solved by @tarot-ray, but not closed #24000