I have a form with aria-describedby attributes on the input alements, followed by a span tag with a description/example of the desired input. It also has class to only display for screenreaders (sighted people can make use of the placeholder information instead).
The issue here is that, according to Fangs at least, the screenreader reads the label, then prompts for input, then reads the aria-describedby text.
Can I move the text above the input in the code, e.g.
<label for="givenName">Given name</label>
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp">
Yes, this is perfectly legitimate and will work with all screen readers
Related
I want to get the text from the Read-Only text box.
This textbox contains a text that is system generated and hence its a non-editable field.
I tried the below code but not able to capture the text.
var expectedText = element(by.id('txt_ANNOUNCEMENTID')).getText();
Below is the HTML for the element:
<input name="ANNOUNCEMENTID" id="txt_ANNOUNCEMENTID" ng-focus="formName[name].hasFocus=true" ng-blur="formName[name].hasFocus=false; blur()" type="text" ng-model="ngModel" ng-required="" my-maxlength="" class="ng-pristine ng-valid-required ng-valid ng-not-empty ng-touched" ng-readonly="true" autocomplete="off" spellcheck="false" tabindex="1" ng-trim="false" readonly="readonly">
Any help on the above issue is highly appreciated.
You need to use getAttribute(value) instead of getText() when trying get the value from textbox.
In your case, it should be like element(by.id('txt_ANNOUNCEMENTID')).getAttribute("value");
I mean may I send large values (50-100 letters) from html radio input ?
Ex :
<input type="radio" name="radio1" value="i am sending more letters from here..." />
There are no limits, you should be able to send as much as you want, it's just another form value like a textarea, etc.
I have a form with aria-describedby attributes on the input alements, followed by a span tag with a description/example of the desired input. It also has class to only display for screenreaders (sighted people can make use of the placeholder information instead).
The issue here is that, according to Fangs at least, the screenreader reads the label, then prompts for input, then reads the aria-describedby text.
Can I move the text above the input in the code, e.g.
<label for="givenName">Given name</label>
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp">
if you are already adding an HTML label to the input, you don't need to use ARIA attributes at all. You can safely remove the aria-describedby, and nest the span content. Example:
<label for="givenName">Given name
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
</label>
<input class="form-control" type="text" id="givenName" placeholder="Liam">
Hope it helps!
As a general rule..First try to make accessible content with standard HTML. Then, use ARIA to describe website sections, widgets and interactive behavior (like menues, tabs, pop ups, messages, dropdowns, calendars, etc), and also to describe what you could not do with HTML.
okay so i have this page im making, the navigation panel is simple, when i click a link according the the link name it appends the html into the content area, here is the append script for this section
So my goal is where the input box is the ID datepicker im trying to use the jQueryUI datepicker function from jQuery, i tested a regular input box in the actual BODY and not through the append method and it works fine, my issue is im guessing the single vs the double qoutation marks, the ' vs "
how can i solve this issue?
else if (this.id == "tour"){
$("#content").empty();
$("#content").append("<p>\
<h2> Add Tour Dates </h2>\
<form action='tourdates.php' method='post'>\
<input type='text' name='title' placeholder='Title' id='title'>\
<input type='text' name='venueName' placeholder='Vanue Name' id='venueName'>\
<input type='text' name='venueStreetAdress' placeholder='Location Street Adress' id='venueStreetAdress'>\
<input type='text' name='venueCity' placeholder='City' id='venueCity'>\
<input type='text' name='venueState' placeholder='State' id='venueState'>\
<input type='text' name='venueZip' placeholder='Postal Code' id='venueZip'>\
<input type='text' name='datepicker' id='datepicker'>\
<input type='text' name='time' placeholder='Time' id='time'> </p>\
");
If you have a strong feeling that there's something to do with your quotation mark, try to narrow down the problem: Have you tried to put this in a separated variable and make the reference there?
var htmlStuff = "<p>\
<h2> Add Tour Dates </h2>\...";
$("#content").append(htmlStuff);
But I don't think your problem is related to double/single quotes, but with the asynchronous operation of setting up a link to append HTML and try to assign an UI widget before the components exist in the DOM.
Although I find this very bad for code readability, one option would be to append another call to a function that defines the DatePicker (like a "callBack") right after your append. It should work, e.g.:
$('something').append(" <html stuff> ").defineDatePicker();
function defineDatePicker(){
$('one of the elements within that html stuff').datepicker();
}
We have the following code in which we are getting errors in the w3c validator for "Any input descendant of a label element with a for attribute must have an ID value that matches that for attribute." and "The label element may contain at most one input, button, select, textarea, or keygen descendant." Is this something that should just be ignored by the validator (as it is seeminlgly correct) or should it be changed to appease the w3c? Note this is html5 doctype.
<fieldset>
<label for="user_is_subscribed">
<input type="hidden" value="0" name="user[is_subscribed]">
<input type="checkbox" value="1" name="user[is_subscribed]" id="user_is_subscribed">
Newsletter Signup
</label>
<span class="checkLabel">We will never spam or give away your information</span>
</fieldset>
Thank in advance!
Labels should contain at most one input element. Move the hidden input out of the label. Also, when an input is a descendant of a label, the for attribute is superfluous.
<fieldset>
<input type="hidden" value="0" name="user[is_subscribed]">
<label>
<input type="checkbox" value="1" name="user[is_subscribed]" id="user_is_subscribed">
Newsletter Signup
</label>
<span class="checkLabel">We will never spam or give away your information</span>
</fieldset>
Is this something that should just be ignored by the validator
No
(as it is seeminlgly correct)
It isn't
or should it be changed
Yes
to appease the w3c?
No. It should be changed because it is wrong, and browsers have to error correct to figure out which element the label is associated with.
The label isn't labeling the hidden input, move it elsewhere.