Text limit inside <span> XHTML? - xhtml

I would like to limit the text inside a tag so when I add a new article in my ASP admin panel, it only has 350 characters max.
How do I go about doing this?

You can't do this with a tag, except if it's an input tag.
<input type="text" id="mytext" name="blah" maxlength="10" />
Of course you can make this limit using javascript or server side programing.
For instance, here is how to do it for a textarea : http://www.mediacollege.com/internet/javascript/form/limit-characters.html

This depends how you ask the user for input. The <input> tag can have a maxlength attribute which should be respected by the browsers.
You can also use some client-side JavaScript to apply and notify the user of the limit, but you still need to check it on the server before committing it to your database (as I assume you want to do), because for any reason you could still getmore characters in the request to the server (hand-crafted query etc.).

Related

What is the right way to fix this accessibility problem in hCaptcha?

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>

Chrome autofills username into random text input

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.

Can an input be "labeled" with a aria-labelledby instead of a <label>?

Is the following valid per WCAG 2.0?
<span id="my-label">Your photo</span>
<input id="my-upload" type="file" aria-labelledby="my-label">
The OS X screen reader understands this, e.g. reading the label for the input when it gets the focus, but Total Validator complains as follows:
You can try it yourself by running Total Validator on this page. Is Total Validator correct to report this error, or is this a bug in Total Validator?
(Obviously, in this particular example, I could use a <label for="my-upload">, instead of relying on the aria-labelledby. One could even argue that using a <label> has more semantic weight and should be prefered. But that is not the question I'm asking, as in my real-life scenario using a <label> can't be done.)
aria-labelledby is used to provide information to accessibility devices like screen readers. It won't be of any help if you do not use such specific device.
It won't give any information to 99% of people. So yes, Total Validator is correct to report this as an error as WCAG does not require to use a specific device. That being said, you can use the title attribute in situation where you can't use a label tag.
See: H65: Using the title attribute to identify form controls when the label element cannot be used
It is ok to use aria-labelledby as a way of creating an accessible name where a visible label already exists. It is better to provide a label association using for-id because that will allow clicking on the label text to place the focus in the input field (or select the checkbox or radio button).
Your accessibility analyzer is old. If you use the aXe accessibility analyzer, you will notice that it will not complain about this issue.

Forms not clearing themselves of default value?

I notice this as a frequent problem on many wbesites, even those of large corporations, so as a web developer applying for jobs, I think, I should know how to fix this.
Basically, for example, a username field will say "Username" until you click it to type in your username, at which time it should clear itself of the text "Username." But in most cases, it doesn't, and you end up typing in the middle of that pre-existing text.
I've looked this up, and the best solution I found was a 30+ line set of Javascript functions which did exactly what you'd expect: set up a system that clears the default value away when a user clicks on the field, and also puts it back when they click away so long as they hadn't entered anything.
But that's not really what I was looking for, because I already knew how to do that.
I feel like by now, with HTML5 and all, there should be a simpler fix to this. And not just a reduction of the JavaScript to a shorter jQuery script. I mean more of an embedded, inherent fix.
Does anyone know of any ways to stop this phenomenon from happening?
Simply use HTML5 placeholder attribute
<input type="text" placeholder="Whatever" />
Fiddle
Cross Browser Info :
Some Firefox versions clear the placeholder text on click of text box and Chrome clears it after the user starts typing, but later version of Firefox acts like chrome, it clears the placeholder text as the user starts typing in the input box.
You can use the HTML5 placeholder attribute http://www.w3schools.com/html5/att_input_placeholder.asp
Modern browsers now support the placeholder attribute for forms, which let you do just what your asking
Check out
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
For a article using modenizr for cross browser compatibility
just use the HTML5 placeholder attribute.
<input type="text" placeholder="Username" />
This will obviosuly not be completely cross browser compatible so for that you will still need the old Javascript / jQuery fixes.

ASP.NET hidden field vs. invisible textbox

what are benefits of using a hidden field in ASP.NET when we can use another invisible element such as label or text box?
The hidden field generate <input type="hidden" /> element on the page, which cannot be seen but the client can get the element, set the data and pass to the server:
document.getElementById('<%= SomeHiddenField.ClientID %>').value = "data_pass_to_server";
after postback you can get the value:
var clientData = SomeHiddenField.Value; // "data_pass_to_server"
If you're using invisible textbox (<asp:TextBox Visible="False" />), there's no element generated in the html file.
Either way works, for text box, don't use .visible="false"
use
yourTextBox.Style.Add("display", "none")
or
yourTextBox.Style.Add("visibility", "hidden")
A hidden field renders as input type="hidden" in the resulting HTML. Being an input the value in the input is submitted to the server on postback while this is not the case with a label. Depending on whether or not you want that value submitted to the server you should use input or label. If you don't want the value to be submitted then label is the right solution and hidden field is wrong.
I am not sure what you mean by invisible textbox but if you are trying to make it invisible via CSS keep in mind that the input type has semantic meaning to search engines, bots, etc. Also at some point your HTML might be served without CSS or with different CSS and the text box will become visible to the user. Otherwise there are no differences between hidden field and invisible text box as both of them render inputs.
Practically you can achieve the same thing with any of them, but since you want a "hidden field", semantically speaking the hidden field in ASP.NET is your best bet for readability reasons.

Resources