Suppose I set a custom validity message for a field using setCustomValidity() to describe why a form field is not valid. Would this content be available to users using assistive technology? If yes, how would it typically be available to users?
For example,
my_element.setCustomValidity("This email address already exists")
If I wanted to ensure people with screen readers would see this message, should I avoid using setCustomValidity() and instead rely on aria-invalid and aria-describedby?
<input name="email" aria-invalid="true" aria-described="error">
<p id="error">This email address already exists</p>
It will work depending of the screenreader and browser you're using.
For instance, with NVDA and Firefox, it correctly announces the error message, while with Chrome it only announces an error.
The best option is to continue using setCustomValidity() and as long as the error is not announced correctly by all screenreader-browser combinations, using one of the techniques available in Success Criterion 3.3.1 - Error Identification
For instance, Using ARIA role of alert for Error Feedback in Forms
<input name="email" aria-invalid="true" aria-describedby="alert_email" />
<p role="alert" id="alert_email">This email address already exists</p>
NOTE: The ARIA describedby attribute may be provided as a helpful addition to provide a reference to the error if the user desires the error message to be conveyed again, but is not strictly necessary for successful application of this technique, and is incidental to the application of this technique
Related
Problem in bold; everything else is background, discussion, and solution attempts.
I'm using the Firebase method firebase.auth().signInWithEmailLink — and the first time the email is sent, it works as intended.
The problem occurs when the user signs out, and later signs in again.
In that case, the actual link gets hidden by the email client's propensity to hide repeated text. (Since the sign-in message Firebase sends is the same each time, most of it gets truncated in, for instance, Gmail, after the first message in the thread).
As I'm testing my login experience, I've had users confused as to how to sign in due to not seeing the link. Since truncated text is usually a signature, or quoted, or irrelevant, they don't know to click the "..." to expand the portion of the message containing the link.
This seems like a major problem, but I know that sign-in-by-link is quite common, and I'm failing to see the solution.
Since I can't control the behavior of the user's email client, I'm trying to find a solution on my end. One thing I tried was to customize the sign-in email so that it would always contain a random string below the sign-in link in the email, to hopefully sidestep the email client's heuristic for when to truncate text. Unfortunately, according to Firebase console, customizing the sign-in text is disallowed for spam reasons. Similarly, I'd could add a unique identifier to the email subject, but again, I don't see a way to achieve this programatically because of the same restriction.
Of course, I also looked at the docs, and didn't see mention of this case.
So, is there a way to ensure that the passwordless sign-in link is actually visible in the email that Firebase sends? If not, am I missing something basic about the use of passwordless auth?
Thanks for working through this with me.
I received the request from client service requesting to investigate about the issue from a screenshot sent by a customer. However I met difficulties in identifying what device / platform / browser the customer has used to reproduce it; and hardly can get it from the requester:
From the screenshot, I can pretty sure that this was captured after a registration failure (due to javascript error/disabled). So the cursor moved to the First Name field - the reason why the icon showed. And the icons were not of the web site, so I guess they were from the native-ness of the device/browser. Not sure if it is filled by browser's add-on.
Have you ever met such icons? Could you help me identify the device / platform / browser they might use ? Any light is appreciated :)
Thanks
I recognize this as the LastPass extension, a password manager. In particular, the icon on the First Name field can be clicked to automatically fill in the whole form, and the icons on the password fields will automatically generate a random password using the extension.
It looks like the LastPass extension is available for various browsers, and the form icons appear to be the same for all of them, so that doesn't really offer much insight for what device and browser they're using. I am positive that it's not something built into the browser.
I am working on a web page that is going to be used in hybrid mobile application and I have to take care for screen reading users as well in terms of content accessibility.
There is input for telephone number of user as follow:
<input required type="tel" name="phonenumber" id="phonenumber"
aria-label="put in your mobile number with at least 7 digits"
placeholder="91234567" class="form_control flg_phone_numb">
Everything is fine but when user has entered some value in here. and go to some other input.After that, when user focuses on telephone input, it speaks input in million like currency count.
Is there any way that I could force it to speak one number individualy. I tried following css but it did not work.
speak:spell-out ;
speak:digits;
I found out that this is related to operating system .Like in ios and android behavior screen reading is supposed to do so. I checked facebook and instagram as a reference.
I want the parameters in my HTML form to be added to a different website, not mine when the user clicks submit. I want them to go to the results on that page. Please tell me how to do this. Right now I have the below code, but it just adds the parameters to the page that it's on on submit.
<form name="find-homes">
Min Price: <input type="text" name="lp">
Max Price: <input type="text" name="hp">
<input type="submit" value="Submit" method="POST" action="http://wwww.different-website-not-mine.com">
</form>
It appears I owe an apology, as my former answer was incorrect (it applies to javascript-based POSTs, not regular HTML-based)
You can accomplish this with the "action" attribute when submitting, and can specify a full domain name.
<form name="find-homes" method="post" action="http://www.other-website.com/"
OLD RESPONSE (wall of shame):
Unfortunately, this is explicitly made not possible by all commonly-used browsers. Wikipedia calls it Same Origin Policy.
Example of the risk involved: Let's say someone were on a malicious website, while logged into Amazon.com with a cookie. The malicious site has someone fill out a form, with hidden fields telling the browser to buy the website owner chocolate chip cookies. Then, the form is submitted to Amazon's buy page. Theoretically, without really knowing it, the user just bought their attacker cookies. That's a very quick-and-dirty definition of it, but sadly you can't do exactly what you're looking to do.
If you want to post a more generalized version of your problem, it's possible we could offer another solution.
EDIT: For clarity, I will note there are some complex solutions available, but they depend on you having deep-level control of the other domain. I kind of assumed at first that you were posting to someone else's website, so I didn't bother going into detail.
I am developing a website which makes use of two login forms, one for regular users and one for administrators. Since administrators can also have an independent regular account, I would like to clear the form from any autosaved data from the browser. This way the admin panel won't have incorrect credentials that may have been filled out in the other form in an earlier stage.
Is this possible, if so, how?
Thanks in advance.
I see you tagged this question XHTML. I don't think there is any standards-compliant way to do that in XHTML. Maybe some JavaScript trickery, but it would be messy.
HTML5, however, defines the "autocomplete" option for forms, so you could write your <form> tag like this: <form action="..." autocomplete="off"> and HTML5-compliant browsers will not autofill the fields (remember to set the HTML5 doctype!) Doing this results in the user seeing something like this:
Edit based on OP's comment: changing the name of the fields would (in theory) prevent one field's values from autocompleting another's. If the fields in your user login form are username and password and you called the fields in your admin login admin_username and admin_password, the values of one would not be suggested for the other.