I have the following div tag:
<div id="ErrorMsg"
role="alert"
class="alert alert-error"
style="display:none;">
Email or password incorrect
</div>
When I fire this jQuery it becomes visible, but is not announced as an alert.
$('#ErrorMsg').show();
This is added to the page after I do an isvalid check like so:
ScriptManager.RegisterClientScriptBlock(
this,
GetType(),
"Error",
"$('#ErrorMsg').show();",
true);
I'm testing with NVDA, the page is an aspx page with an update panel. I tried removing the panel but that doesn't seem to be the problem. Everything is working, just no notification of alert. The text boxes that are being checked have the describedby tags set and pointing to the div tags id.
I would say the problem is one of two things.
There are other DOM things that are happening and interrupting the alert before it is read. One solution for this is to use aria-live="rude" although this doesnt help NDVA as this is still non-interrupting.
You may be able to put focus on the element by using $('#ErrorMsg').focus(). You will also need to put an tabindex="0" on the element. e.g.
<div id="ErrorMsg"
role="alert"
tabindex="0"
class="alert alert-error"
style="display:block;">
Email or password incorrect
</div>
The other problem may be that the page is refreshed by ScriptManager.RegisterClientScriptBlock (i'm not a .NET developer so I may be wrong). That being the case, the above solution should also work.
However if this approach works it is possible that a screen-reader user is then 'lost' as to where they are on the page. So you may need to change the ErrorMsg element into an which links to the email or password input box.
Hope this helps.
Related
hCaptcha is a fairly popular captcha solution (see a demo.
Their systems works roughly like this:
Websites add a div to a form with a sitekey and also add hCaptcha's JavaScript
hCaptcha adds an iframe and 2 textareas to the form.
When a visitor solves the hCaptcha, the two textareas are filled with a token that is submitted to the site
The site can send the token in a server-to-server call to verify the user passed the captcha
The texteares added in step 2 look like this:
<textarea id="h-captcha-response-0da5o6pd30l5" name="h-captcha-response" style=""></textarea>
<textarea id="g-recaptcha-response-0da5o6pd30l5" name="g-recaptcha-response" style=""></textarea>
According to the pa11y these textareas are not accessible. Screen readers need to know that these form elements are not meant for human input, but are instead just for the functioning of the site. I believe one solution could be to add the HTML attribute aria-hidden="true" to both of these textarea elements.
Is there any solution that consumers of hCaptcha can do? Or what would the best thing for hCaptcha be?
Because these textareas are only used by hCaptcha and not meant to be interacted with by the user, they should be hidden. By using display: none on each textarea, hCaptcha will still be able to include the hidden token in the form submission without causing the accessibility issue.
It's not clear what framework you're using, but the output should look something like this:
<textarea id="h-captcha-response-0da5o6pd30l5" name="h-captcha-response" style="display: none;"></textarea>
<textarea id="g-recaptcha-response-0da5o6pd30l5" name="g-recaptcha-response" style="display: none;"></textarea>
This is happening on an asp.net webforms application, using Chrome Version 72.0.3626.109 (Official Build) (64-bit).
The site is password-protected. The user logs in with a username and password. After a successful login the user is redirected to the "Loan Search" page. The Loan Search page contains a handful of text inputs.
The problem is Chrome will autofill my username into one of the text inputs (see image). "tregan" is the username I entered into the login page.
Chrome always selects this particular text input to autofill the username ("Contact Mailing Address"). This is happening to myself and several dozen other users of our web site.
Any idea why Chrome is doing this autofill, and is there anything I can do to prevent it? I cleared my Chrome autofill cache, but that did not fix the problem.
The answer is to add an invisible text input to the asp.net form called "username".
Several years ago we were having the same problem with a different input. The answer was to add an invisible input of type "password", as explained in this SO answer, scroll down to the phrase "It is so simple and tricky...":
Disabling Chrome Autofill
Below is the complete fix, I added these two elements inside the form element in our site's master page. Per #Jeff_Mergler's comment below, put these inputs at the top of your form tag:
<input type="text" id="username" style="width:0;height:0;visibility:hidden;position:absolute;left:0;top:0" />
<input type="password" style="width:0;height:0;visibility:hidden;position:absolute;left:0;top:0" />
Some more ways to try to workaround this:
Add autocomplete="off" to the <form> and/or to the <input>
Change the field's name/id
to something that does not have "name" or "user" in it
If it is not already inside <form> wrap the element with empty <form> tag
Randomize the name attribute of the input, or use data-name instead of name. You'll have to change the code that process the data accordingly.
Also I think it'll help to report this issue to Google via ⋮→Help→Report an issue (or Alt+Shift+I) to encourage them to fix these issues.
I was facing the same issue, i found a fix by wrapping my div inside a form tag and added a property autocomplete="off" in the form tag.
......
.....
Same here. This needs to be resolved by chrome. This is just dumb to have to add tags around textboxes. Also, quick tip to anyone needing to add form tag without having to re-do your CSS. Add "display:contents;" to the form. It will act as if its not even there.
This seems to be a very simple concept, but I am unable to resolve. What I'm trying to do is, render/display a Standard value of a template, to the page.
Created the items & templates using Rocks. Here is the structure.
1. Sublayout - footer.ascx
<div class="content">
<h1>This is a title.</h1>
<p>All the content goes here</p>
<sc:placeholder runat="server" Key="footercontent" />
</div>
2. Sublayout - StickyNav.ascx
<a class="btn" href="#">
<sc:Text Field="Sticky Nav Title" runat="server" />
</a>
3. Template - Sticky Nav
The first pic is of the template & the second one shows the assigned default value in _Standard Values.
Then, in Sitecore Explorer,
right clicked on (Sticky Nav - _Standard Values) > Tasks > Design Layout on Standard Values.
Now, there is a content item "index" under /sitecore/content/. It has these layouts declared:
When I right click on Index > Tools > Browse > Preview, the index page does open and the footer content is also displayed.
But, I am unable to see the text 'Go To Top', that was set as a Standard value (Image 2). It is empty.
What am i missing here.
There could be a few factors blocking the content being showed. For the front end the best bet is to rule out things like publishing - i.e. make sure that the template, fields, standard values, and the content items are all published correctly. If you are in preview this is probably of less relevance but worth noting when you deploy
When the sc:Text control renders is will be running the renderField pipeline. At the point that interacts it will be talking to Sitecore via the api.
To check things via the code behind for your control (assuming it's an ascx due to the runat="server" tag). Check:
Field field = Sitecore.Context.Item.Fields["Sticky Nav Title"];
if (field != null)
{
string value = field.Value;
}
And debug through to check the field actually has the value you require.
In the cms, when you view the page of interest does the 'Sticky Nav Title' field appear to have a value, and be the value you are interested in?
I realized the initial thought itself was a mistake. There HAS to be an item if it's value has to be displayed on page.
So, I created a new item under /sitecore/content/Sticky Nav Button using the template Sticky Nav.
And in StickyNav.ascx, updated the control as:
<sc:Text Field="Sticky Nav Title" runat="server" DataSource = "/sitecore/content/Sticky Nav Button"/>
Hope this helps beginners like me.
I couldn't find anything in the angularjs docs, nor online, about this specific aspect of form validation. You know when someone writes something in an input field (example: name, phone number, email etc.), and then there is a green checkmark that appears? Or an X that appears implying it's wrong, incomplete etc.
So, I have those images in my folder and ready for use in either situation. Problem is, I can't find the documentation to properly achieve what I would like to achieve. I am thinking that angularjs would be the solution to use, as the rest of my code in is angular.
Since this is angularjs, the only post and documentation that presented a viable option (which does not work for a few reasons) are the following options:
How to put an image in div with CSS?
https://docs.angularjs.org/tutorial/step_09
I was thinking of using CSS to trick the browser into making the one or the other image appear as it validates. I thought it might force the image in my other div to appear, but to no avail.
For example, in this CSS, I tried this:
.ng-valid.ng-dirty .div.test{
border-color: green;
content:url(http://example.com/image);
}
Using this in my HTML:
<div class="test">
<label style="float:left">by:</label>
<input class="form-control controltwo" required ng-model="reviewCtrl.review.author" name="email" id="email" type="email" style="width:350px;" placeholder="Email Address"/>
</div>
As I said before, I am trying to achieve something using angularjs. As CSS can be used for styling, it cannot be tricked into being a styling option and a complex validator. I've tried a few tricks as show on the links, but they don't work. As for the second link, it just isn't made for this purpose, and considering they are made only for filters and images, the docs for the filters don't help a bit.
A simple way of achieving what you want is to look in to the $valid or $invalid properties of your form control.
For example, to show a small message when the email is invalid, you would put this element in your markup.
<div ng-show='reviewForm.email.$dirty && reviewForm.email.$invalid'>Invalid Email</div>
Where reviewForm is the name of your form, and email is the name of your input control.
Here is a plunkr demonstrating this: http://plnkr.co/edit/tUuToy99xjfMhbyMd3eV
You can replace the element with whatever else you want
You can do this with ng-show, ng-src and ng-model depending on what you're validating.
https://docs.angularjs.org/api/ng/directive/ngModel
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngSrc
The example under ng-model:text shows pretty much what you want. If you're not using forms, you should be able to use ng-change to fire off a check and change the image to the appropriate one.
https://docs.angularjs.org/api/ng/input/input%5Btext%5D
If ng-show watches the $valid attribute of the field in question you can hide the check mark when validation is false, and show it when true. You can flip the logic if you want an X.
Let's say we have a classic form - a few input fields that must meet some pattern. When user enters incorrect data and submits this form all the fields that are filled wrong are marked as invalid and appropriate error message is provided for every incorrect field.
I need to make this form WAI ARIA compliant, so that after form submission the accessibility tools will see these errors first.
I've found solution that implements it by dynamic html modification using JS (http://jsfiddle.net/nS3TU/1/):
HTML:
<form id="signup" method="post" action="">
<p id="errors" role="alert" aria-live="assertive"></p>
<p>
<label for="first">First Name (required)</label>
<input type="text" id="first">
</p>
<p>
<input type="submit" id="button" value="Submit">
</p>
</form>
JS:
$('#signup').submit(function () {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('Please enter your first name.');
}
return false;
});
Here validation does not reload page, and the "alert" area is dynamically modified.
In my case the page is reloaded on validation phase, and I don't know how to make aria alert work. After hours of investigation I didn't find any solution at all. Any ideas?
I think there's a simple solution, but you'll have to say if it covers your cases.
I would be careful about making something "WAI-ARIA compliant", that should not be a goal in itself. WAI-ARIA is intended to map web pages to application roles, but only applications are actually suitable for this treatment.
For a classic web-form, you do not need WAI-ARIA at all. The alert aspect would not work if the page reloads, as it would only alert if the content changed dynamically.
If the page does not reload (as per the example), you would want to ensure that submitting the form doesn't just leave the user sitting on the button. You can manage the focus to achieve this:
$('#errors').append('Please enter your first name.');
// Make the error message focusable, but not in the default tab-order:
$('#errors').attr('tabindex', '-1').css('outline', '0');
// Set the focus on the (first) error message:
$('#errors').focus();
JSFiddle updated here.
A couple of articles on error-message best-practices your question reminded me of, which would help extend this answer to other use-cases:
Displaying error messages
Accessible form validation.