I am trying to use voice over in my web page.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="fname" tabindex="1"><br>
Second name: <input type="text" name="sname" tabindex="2"><br>
Third name: <input type="text" name="tname" tabindex="3"><br>
Last name: <input type="text" name="lhan" tabindex="4"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
If I open this page in a Iphone, First it reads " First name ".
I just clicked on "fname" textbox to enter any text then press the "Done" button of keypad.
Keypad disappears and then it automatically focus the "Third Name" textbox and read the text.
This behavior is not consistent.
Is it expected behavior?
How can I give order to the voice control ? (tabindex)
Thank you so much.
Not sure why you're using tabindex attribute? Most of the time, they're unnecessary - especially strictly positive values that will mess with natural tab order when browsers are in fact already doing fine with normal HTML code with links and form elements.
My advice: remove any tabindex attribute from your code, except for very special cases like a comment form in a forum where you want to type text into a textarea, then 1 or 2 tab, Enter and you're submitting your message regardless of buttons for inserting bbCode that could be placed between the textarea and the submit button.
At the slightest change in HTML code of your templates, the presence of tabindex will be forgotten, they won't be updated and it will break the tab order.
Relevant WCAG 2.0 Techniques:
F44: Failure (...) due to using tabindex to create a tab order that does not preserve meaning and operability
H4: Creating a logical tab order through links, form controls, and objects
other Techniques are linked from the ones above
Now about the rest of the code: labels of a form elements should be tagged with... label elements. Associating each label element to its respective form element (any input type - except submit, image and button one - and also any select and textarea) is done via identical values of for and id attributes:
<label for="blah">My label</label><textarea id="blah"></textarea>
JSFiddle of your code corrected
each form element and label is in its own paragraph element
label is added (around each form element so message of error or hint on the right of form element or below it can still be in the label
unique id added to each form element (I took the same value as name but whatever is a valid id is OK)
for attribute added to label with identical value as each id above
HTML code
<form action="demo_form.asp">
<p>
<label for="fname">First name: <input type="text" name="fname" id="fname"></label>
</p>
<p>
<label for="sname">Second name: <input type="text" name="sname" id="sname"></label>
</p>
<p>
<label for="tname">Third name: <input type="text" name="tname" id="tname"></label>
</p>
<p>
<label for="lhan">Last name: <input type="text" name="lhan" id="lhan"></label>
</p>
<p class="w300p txtright">
<input type="submit" value="Submit">
</p>
</form>
Relevant WCAG 2.0 Techniques:
H44: Using label elements to associate text labels with form controls
G131: Providing descriptive labels
F17: Failure (...) due to insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML
F86: Failure (...) due to not providing names for each part of a multi-part form field, such as a US telephone number
The 5 seconds test to determine if label elements and for / id pairs are coded with accessibility in mind or not:
take a mouse
click on each text that should be a label right before or after a form element. Cursor/caret/focus must go into the form element next to it
This is a 10 second test on tablets and smartphones because tap is a bit slower ^^
Related
I have a bit of an issue, im trying to select a radio button in a data-tables data. Im able to filter the single data-tables row down to one so it's the only one appearing on the page...but i've tried page.choose, page.find(<xpath>), page.find(<css>), i've also tried doing all the previous within a certain css selection and I can't quite figure out what's left to try.
The relevant HTML is here, unfortunately as this is a work item I can't post everything. however I AM able to click on the label if I specify the id via:
find(:xpath, "//label[#for='approve_row_5']").click however this doesn't actually seem to 'select' the radio button. I've also tried doing a wait after I filter the data-table results
anyways, here is the HTML for the 2 radio buttons after the row has been filtered (the radio buttons reside in a column)
<td class=" align-middle">
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_approve" value="person_approve" data-ui-verify-key="test_approve" data-ui-verify-title="2017-07-13 14:59:46 -0400">
<label for="approve_deny_row_5_approve">
<span>Approve</span>
</label>
</div>
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_deny" value="person_deny" data-ui-verify-key="test_deny" data-ui-verify-title="2017-07-13 14:59:46 -0400" data-ui-verify-url="/irrelevant/stuff">
<label for="approve_deny_row_5_deny">
<span>Deny</span>
</label>
</div>
</td>
I thought about just finding the span by the text and clicking it, which passes....but doesn't actually select the radio button. Also I tried searching by the specific value selector as well via a find('input[value="test_approve"]').click but that had no luck either
Any ideas?
Assuming the actual radio inputs are visible on the page (and not hidden to allow for styling) the methods that should work for this are
choose("Approve")
choose("Deny")
or
choose("approve_deny_row_5_approve")
choose("approve_deny_row_5_deny")
If those tell you they can't find the elements then it's most likely the input elements are actually hidden (for styling reasons) and you should be able to use the
choose('Approve', allow_label_click: true)
which will click on the label element associated with the input rather than the input element. That should produce the same result (setting the radio button) unless the behavior you're looking for is based on JS looking for a click on a very specific element (rather than the change event on the input). If that happens to be the case then you need to figure out exactly what element the JS is looking for clicks on, or fix the JS to behave in a more intuitive manner.
I am trying to write the step definition, using Capybara, for a Cucumber scenario that is meant to confirm that checkboxes on the home page appear before the options.
Mechanically, I am trying to find the index of a specific html checkbox using its HTML ID and compare it with the index of a specific text on the home page. However, I have spent hours on this issue and have not been able to implement the step definition.
Would I for example be able to somehow convert the page into text and just search for words?
For this web application I am using Ruby on Rails.
Let: checkbox id = environment_Cool
Let: text on the page = Cool
I would greatly appreciate your help.
Suppose you have a checkbox like this:
<form action="demo_form.asp">
<span>
<input type="checkbox" name="coolness" value="Cool" id="environment_Cool" checked> Cool</span>
<br>
<span>
<input type="checkbox" name="coolness" value="Cool"> Not So Cool</span><br>
<input type="submit" value="Submit">
</form>
Mechanically, I am trying to find the index of a specific html
checkbox using its HTML ID
page.find('[#id=environment_Cool ]')
and compare it with the index of a specific text on the home page.
Then it should return the text at the parent of the checklist, which is "Cool".
puts page.find('[#id=environment_Cool ]').find(:xpath,".//..").text
I have multiple buttons submitting a form. I check to see which button was clicked by the input value that gets passed into my controller.
public async Task<ActionResult> MyAction(MyModel model, string command)
The html below works. In my controller command equals myValue
<input type="submit" name="command" value="myValue" />
The html below doesn't work. In my controller command is null
<input type="image" name="command" src="..." value="myValue"/>
W3C says the type 'image' is a submit button
So why are these two input elements behaving differently?
An image submit button indeed behaves differently, by definition, both according to the expired working draft linked to in the question and the current HTML5 CR draft and the HTML 4.01 recommendation. According to HTML5 CR, construction of the form data set does not add a name=value pair for an image submit button but name.x=... and name.y=... with the coordinates of the clicked location as values. This corresponds to old definitions and browser practice, except that Chrome additionally adds a name=value pair.
Thus, in your case, the form data will contain the fields command.x and command.y, with values that you are probably not interested in. This is what you need to take as starting point when coding the form handler. This means that if you need to recognize which of several image buttons was used, you need to give them different name attributes.
You can have one hidden field and set the command name in that hidden field which ever button is click and get the name of the button that submited the form on server side.
Javascript
$(".submit").click(function(){
var commandName = $(this).attr("val");
$("input[type=hidden]").val(commandName);
});
HTML
<form>
<input type="hidden" name="command">
<input type="submit" value="submitbtn" class="submit" />
<input type="image" src="..." value="imagebtn" class="submit"/>
</form>
The simplest (and maybe not safe) way to accomplish this task is with inline JQuery, here's how :
VIEW :
<input type="image" src="..." onclick="$('#hidImgValue').val('Image1');" />
<input type="hidden" id="hidImgValue" name="command" value="none" />
CONTROLLER :
public async Task<ActionResult> MyAction(MyModel model, string command)
Command var will have "Image1" as value.
I have a simple form:
<form method="post" action="contact.php">
<input type="text" name="name" id="nameid" value="">
<input type="submit" value="Submit">
</form>
Whenever I enter a character into the input field on my Ipod Touch/Ipad or whenever text is in the field and the field obtains focus, the device reloads the page. Hence I cannot enter more than one character. I can also place text in the field with javascript but whenever that field obtains focus, the page is reloaded. I've tried all relevant input field attributes from here
that I have found in "developer.apple.com" archives to no avail. What am I missing?
I found the problem. I had an on resize event that was getting fired on text entry. I took that out of my javacript and all is well.
Hy
What i want to do is to create a custom renderer for will_paginate which renders first, previous, next and last page and a input field where the user can type in the page number manually. I already have the links for first, last etc. but i stuck at the input field. I could create a form in the view but the input field has to be rendered between the previous and next links.
Does anyone know how to do this?
Thanks for your help
You can do this as a separate form (make sure it is a GET). All you
need is the one input element named page. Something as simple as this
should work (not all browsers may like the #). I dropped it into a
site I'm playing with now and it worked. Put it anywhere on your page.
You might have to make something more complicated if you need to
incorporate search terms.
<form action="#" method="get">
Go to page: <input type="text" name="page" value="" size="2"
maxlength="4" />
<input type="submit" name="btnSubmit" />
</form>