I know about HTML5's autofocus attribute, but AFAIK it only applies to input tags.
Is there a way to set the focus automatically (and preferably without JS) on, say, a scrollable div with text, so that the viewer can immediately scroll using keyboard ? Or would it be browser-specific ?
I can't find useful ressources online so I'm wondering if "focus" if the right word.
<div tabindex='0'>
this will receive the focus immediately
</div>
tabindex="0"
The tabindex value can allow for some interesting behaviour.
If given a value of "-1", the element can't be tabbed to but focus
can be given to the element programmatically (using element.focus()).
If given a value of 0, the element can be focused via the keyboard
and falls into the tabbing flow of the document.
Values greater than 0 create a priority level with 1 being the most
important.
For more info you can look at the following link http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
UPDATE
The other option is to try something like this.
Add the following code to the body tag, substituting the form and field names for your own:
<body OnLoad="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield">
<button type="button" onclick="javascript:alert('testing')" name="myButton">Click Me!</button>
</form>
Related
I have 4 links. Previously implemented as A tags.
My goal is to switch the request method (GET) with POST. Everything else have to remain the same!
The problem - it must be implemented using pure HTML - to be exact - no ajax and no window.open().
My solution is half way there. Hopefully to get a creative second half from you (impossible is also an answer)
Here is the (simplified) HTML:
<form
id = "resultsForm"
target="_blank"
action="http://example.com"
method="post"
>
<input type="hidden" name="data" value="someData">
<button type="submit" value="submit">
<p class="contextual"> title </p>
<span></span>
</button>
</form>
Now, it looks and feels like the old implementation and also sends POST requests
But - contrary to a link - a button can't be middle clicked or opened in new window when right clicking on it (by default...)
Can I somehow wrap it in an A tag to achieve the explained behavior without using js events or be conflicted with form subbmission?
Your help is really appreciated
No, this is impossible.
Anchor elements cannot contain interactive elements such as button elements.
Forms should be posted to the target window, so a normal click on the submit button, by virtue of the _blank value, should open an unnamed browsing context (a new window or tab).
Users should be accustomed to not middle-clicking on buttons, although there is a habit of developers to style links to look like buttons, throwing off users' expectations (end rant:)).
While working on updating a webpage, I have a control that is basically a multiselect control, looks like the below image.
Once the user sets focus on the textbox (the one with purple border, the box below gets visible, wherein on check of the items, the same gets appended to the above text box.
Question:
My question is more from the Accessibility perspective. To allow assistive technologies to read (narrator) this control properly. I am using role="listbox" to the text box and role='listitem' to each of the checkboxes, which I understand it wrong way since listitem should be added as direct child to listbox. But in my case it is not possible.
Is there any way I can link up the textbox and checkbox list and make narrator to treat them as a single control?
<div class='multiselect_wrapper'>
<input type="text" role='listbox' aria-multiselecttable='true' />
<div class="chkList">
<fieldset>
<div>
<label role="listitem" for='chk1'>
<input type='checkbox' id='chk1'>Pizza
</label>
<label role="listitem" for='chk2'>
<input type='checkbox' id='chk2'>Lemonade
</label>
<label role="listitem" for='chk3'>
<input type='checkbox' id='chk3'>Fruit Salad
</label>
</div>
</fieldset>
</div>
</div>
Here's a quick example of a very simple checkbox list:
codepen .io /anon/pen/eboEVB
This is just a quite incomplete example. Do inspire from it, but don't copy-paste it as is.
A few points of attention:
As you have effectively mentionned, the items having role=listitem must be child of the element with role=listbox. This is an obligation, meaning that you have no choice but leave the textbox apar if you want to have correct and accessible code.
If you set role=listitem to the checkboxes, it will override the default implicit role=checkbox. The consequence are that the screen reader won't see them as checkboxes anymore, and thus will keep reading their labels but no longer their state (checked or unchecked). You must set the role=listitem to another element for which there is no default implicit role, such as the divs used in the example
Note how the focus is given to checkboxes rather than to listitems. In this way, we obtain for free normal keyboard processing (i.e. spacebar toggles), as well as the default behavior screen reader have with checkboxes (i.e. announce label and state + help like "press spacebar to change state")
You are recommanded to set the attributes aria-posinset and aria-size to each item, otherwise the screen reader might not see your listbox as such
Set tabindex=-1 in all the items except the currently selected one, which must have tabindex=0. Usually in listboxes, the keyboard user don't tab on each item, and use arrow keys to go from one item to another once they are in the list box. The example is incomplete, it would be nice to support home, end, page up and page down as well.
Don't forget to keep the aria-descendant attribute of the listbox in sync with selection changes. This is important because screen readers use it to tell which item is currently selected
Edit: I'm unable to post my HTML+js code, please help!
I'm trying to post a link to codepen but it is refused. The code is quite long but anyway, if I post it indented with 4 spaces (using Ctrl+K), it is still interpreted instead of just be shown.
I come across two following code snippets :
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
<h1>My First JavaScript</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button>
<p id="demo"></p>
I am not able to understand why the different type="button" attribute has been added in second code snippet?
What's the difference between two buttons?
In your examples the addition of the type="button" makes no difference whatsoever (remove it and you'll see).
Typically you would specify the type of your button if it is being used in a form, as the default type of <button> is submit, and clicking it would cause a <form> to be submitted, and typically either reload the current page or load a new page.
By specifying the type as button instead of the default submit, you prevent that behavior.
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
It has so many Attributes and type is one of them and this type has 3 values:
button (Normal button)
reset (to handle reset action, specially for form)
submit (to handle form submit)
To know other properties you can read:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
https://www.w3schools.com/tags/tag_button.asp
The attribute type decide the style of <Button>. It's default value is button in Internet Explorer.However, in other browser,it's default value is submit even in standard of W3C.
So you need to define the type of button always.
There are three types of buttons:
submit — Submits the current form data. (This is default.)
reset — Resets data in the current form.
button — Just a button. Its effects must be controlled by something else (that is, with JavaScript).
Button attribute is not that big deal, because it changes nothing in your code.
The only difference in your two code versions are writing the whole code after the "onclick" attribute (code2) and writing the function name after the "onlick" attribute (code1).
You can read about the button attributes and differences between input and button with the same attributes on this site http://html.com/attributes/button-type/
I hope it will help you a lot.
Writing <button type="button"> defines the button as a clickable button.
There is no big difference with <button>, but it is more safe to put a type attribute to the button element because some browsers may use different default types for the <button> element, which could lead to bugs.
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
I have few controls on a form. I have to set the tabIndex in an order that is not natural to their order of creation on HTML. There is a button at the fag end and the tabIndex is not getting set (it's never focussed) only on this element.
<button id="btnSave" tabindex = "86" title='click here'>Submit Here</button>
What may be the reasons??
Appreciate your help.
Tabindex Best Practices
Commonly, I would suggest that do not set Tabindex with any incremental values because for any fields/components in your web page if we follow this rule then we need to maintain the same tabindex incremental values for upcoming fields too and also we mostly show/hide the fields/components based on some conditions so that time the tab index will not work consistently.
I strongly suggest the best practice is that we should not use Tabindex Greater than 0 and use only Tabindex -1 and 0 wherever required
tabindex="-1"
Setting tabindex="-1" allows you to set an element’s focus with the script, but does not put it in the tab order of the page. This is handy when you need to move focus to something you have updated via script or outside of user action.
tabindex="0"
Setting tabindex="0" will take an element and make it focusable. It doesn’t set the element’s position in the tab order, it just allows a user to focus the element in the order determined by its location with the DOM.
tabindex="1" (or any value > 0)
Do not set a tabindex="1" or any value greater than zero (or any positive value).
If you set tabindex only on the button element, then this element will be the first in navigation, which means that you don’t get to it from the last input field directly (but only via some browser-dependent items in the browser’s own user interface, such as search box and address box). See the HTML 4.01 spec on tabindex.
If you have set tabindex on other fields as well, please post a demo that exhibits the behavior—in a simple test on several browsers, tabindex worked fine when set on all fields.
try :
<input type="button" value="Sumit here" tabindex="90" />
check that , your index will be counted form zero under it's parrent! index 90 is too much for a html.