How to make an image focussable? - javascript

In another question, someone is suggesting that an image can be made focussable? How can one achieve this?
More information:
In the other question, Quentin says:
var img= $("#my-image-id");
image.click(function() {
// your code here
}
Don't do this. The image will not be focusable (since images are not
designed to be interactive controls). People using (for instance) a
keyboard to navigate through the page (instead of a pointing device
like a mouse) won't be able to navigate to the image and activate the
control.
Someone else says:
In your case that you want to maintain the "focus" (i assume with
tabbing support), if you use a single as a button (with or
without ), you will have to add some JS code to make the image
focusable when the appropriate tab is pressed. So you will have to
write a bit more code to do the same thing.

To make an image (or any element) focusable, just add a tabindex attribute.
<img src="myimage.png" tabindex="1" />
But note that there is no need for any special treatment just to make an image respond to click events.

You can just place an img inside a button.
So, the focus will reach the button, click event can be binded to the button, but it will look exactly like the image has focus.

Related

Switch device. Tabbing onto button default behaviour

I'm having a hard time finding any resources that talk about best practice, default behaviours and so forth.
Basically, I have a button on a page. It doesn't do anything, I essentially have a canvas element and just needed a way for the user to be able to tab onto the page.
So using a switch device, I can navigate to the button, and on clicking on the button, it jumps me back up to the url address bar. The behaviour I'm after is on selecting the button it still stays on the same page.
I've tested other websites and it looks like the default behaviour is that once you select a button it jumps to the top of the page.
Could anyone point me in the direction of any resources or anything that confirms or talks about this?
I essentially only have this:
<button tabindex="1" class="action_button">Action trigger button</button>
and a
<canvas></canvas> element
Perhaps this relates to the default type of buttons being submit.
Does adding type="button" to the button change the behaviour you're seeing?
Yes, this will happen unless you add some script to the button. If you have no other action for the button you can use this:
function() {return false;}
But if the button doesn't do anything you should remove it - people who rely on keyboard navigation don't usually like having to work their way though unnecessary controls. If there is nothing interactive then don't make them tab into the page. (Also there is no need to add tabindex to a button, it takes focus natively.)

Javascript-bound user interaction elements in Web applications: a or button?

Most of user interaction elements associated to a custom JavaScript behavior in Web applications can be HTML links (a elements) having a meaningful href attribute value, enabling them to be used in non JavaScript-enabled environments:
<a id="profile" href="profile">Profile</a>
<script>
document.getElementById("profile").onclick = function() {
return !open(this.href, "_blank", "scrollbars=no,status=no"); // whatever
};
</script>
But some interaction elements are deeply linked to JavaScript, either because the Web application they are contained in requires JavaScript to run or because they were generated by JavaScript and don't make any sense when it is not available.
For those, as I want users to be able to interact with them whatever device they are on (i.e. I don't want to define mouse, keyboard, touch, … interaction by myself on a span element), I see two relevant HTML elements: a and button.
My problem with the a element here is that it defines at least one behavior I don't want: the ability for the user to open its target anywhere he wants to (e.g. in a new tab), whereas the interaction I want to take place is specific to the current tab.
My problem with the button element here is that, as far as I can tell from the online resources, it is difficult to style reliably on all modern browsers (but I am not sure if it is still the case now).
Some of the facets of this question have already been answered elsewhere, but I can't find a comprehensive and up-to-date summary: what HTML element would you recommend to use?
If you want an element to semantically be a button without the style issues of a <button> element, or behavior of an <a href> element, then you should use an element with [role="button"]. <span> is commonly used, but pretty much any element could be used.
<span role="button"></span>
Now, [role="button"] is really just a flag for assistive technology, so some interactions need to be set up to react as a button, but they're actually quite easy.
Buttons (such as links and form elements) are typically tabbable. This isn't always necessary, such as if a keyboard shortcut has been set for it already. If you want the <span> in the tabbing order, just add the [tabindex] attribute:
<span role="button" tabindex="0"></span>
Now you can tab to the button, but you'd probably still want to trigger the click event when Enter and/or Space is pressed.
Simply adding an event listener to the button is enough.
For brevity this example uses jQuery:
$(document).on('keydown', 'span[role="button"]', function (e) {
if (e.which === 13 || e.which === 32) {
$(this).click();
e.preventDefault();
}
});
This uses an event delegation format to provide click support for all spans with [role="button"], you may want to choose a different selector depending on your situation.
Now all that's left is to listen for when the button is clicked:
Again, jQuery:
$('.myButtonClass').click(function () {
...do stuff...
});
Now, for other devices, you're going to want to trigger a click on, say, a touch event. If you're using jQuery, there are assorted libraries to support turning touch into click and/or tap. If you're not using jQuery, it's not a lot of work to listen for touch events.
I'm not going to provide a code example to handle touch, but that's because it depends on what the button is supposed to do. In some cases you want to trigger a handler simply by starting a touch on the button (equivalent to mousedown), in other cases you want to trigger the handler if you've started and stopped the touch event on the same element (similar to how click works normally).

How to use Javascript to make this button do whatever it does when the mouse hovers over it

This is the privacy button that shows on your status updates on your Facebook wall.
When you click on that icon, you get these options.
I am trying to make a Greasemonkey script to automatically click on one of those selections. My script works fine, with the only caveat being that I have to hover my mouse over that icon before running the script, or else it won't work. I don't even have to actually open the dialog by clicking on it, I just have to move my mouse over the icon.
So I'm trying to find a way to use Javascript to hover the mouse over that icon, or click on it, so that I don't have to manually do it. I've tried the .click() and .trigger() methods, but they don't seem to be of any help here.
I think this is the code for the button.
<a rel="toggle" data-tooltip="Your friends; Except: Restricted" data-length="30"
data-label="" aria-haspopup="1" href="#" ajaxify="/ajax/timeline/show_story_options.php?profile_id=707236195&story_fbid=10150597306856196&story_row_time=1331626509&permalink=1&story_div_id=stream_story_4f6620b08c1851b03797773&story_dom_id=stream_story_4f6620b08c1851b03797773&small_icon=1"
role="button" class="uiSelectorButton uiButton uiButtonSuppressed uiButtonNoText"
tooltip-alignh="right" title="" data-hover="tooltip" id="js_1"><i class="mrs defaultIcon customimg img sp_4uwvrx sx_bff9bf"></i><span class="uiButtonText"></span></a>
I tried using jQuery to get the url specified in the ajaxify tag, because I noticed that that's one of the things that happens when I hover my mouse over the button. Even though I can successfully GET the page, it doesn't seem to make any difference either.
How can I use Javascript to make this button do whatever it does when I manually hover my mouse over it?
I think what your after is something like the do click function found int the link below you could mix in with some query.
http://www.codeproject.com/Articles/17241/Capturing-the-Enter-key-to-cause-a-button-click
I'm in a hurry, so I can't in-depth with my answer, but I thought dropping this might be of some help.
There is this module called Selenium that lets you use a browser with javascript to do whatever you want on a webpage.
Guide: https://www.browserstack.com/automate/node
Module: https://www.npmjs.com/package/webdriver
Another Module: https://www.npmjs.com/package/selenium-webdriver
I know this is not a direct answer, but hopefully, it comes in handy.

Emulate appearance of a link with javascript

I need to open links with javascript (window.open) when the user clicks on positions in a google-maps map.
How do I make the user understand that it is a link, that he can click it, and where he will end up when he has clicked it?
Among other things, while the user is hovering over a map position, the URL of that position should be shown in the status-bar, just like with a normal link in firefox.
How do I do that?
Thanks
dontomaso
You can create a simple link and then put an onclick listener on it using unobtrusive Javascript techniques. When the user clicks the link you intercept the click event, prevent the default action, read the href attribute and open the window. Kinda like this:
link
$("#myLink").on("click", function(event) {
event.preventDefault();
myFunctionToOpenWindowForUrl(this.href);
});
This is using jQuery, of course you could adapt it to any other JS library you might be using. This way you will also see the original URL in the status bar, because that is the natural thing for a link - no need for extra coding. Also your links will work even without Javascript, which makes this approach way better than styling a span for instance to look like a link and then attach the listener to it.
Ok I don't know much about how google map manage JS code so I try to give you a general help:
you could create a DIV (with width and height of the rectangular area you want) and then put it with background-color transparent positioned in absolute coordinates where you want into the map.
then write onmouseover and onclick handlers for it so when the user goes over on it you do a change to the mouse shape (from pointer to hand) and when it clicks it open the url.
for the status bar when the user over on a map poistion you can do:
window.status = (getURL)
You can modify the cursor to appear as a pointer by using CSS(cursor:pointer;)
Furthermore, you can put the destination into the title tag, so the user will see the destination if he moves the mouse over the element.
try something like this:
link
href="javascript:void(0);" will show link as it should, if you would put here href="#" it would just scroll on top of the page. Href has to be set to have usual link display.
onmouseover="window.status='status bar';" will set status in window on mouse over.

Can we make IE7 treat a FILE TYPE=INPUT element as a single control?

When it comes to navigating through an HTML form by hitting the TAB key, Internet Explorer 7 treats an INPUT element with TYPE=FILE as two controls (see MSDN for details). The first time you hit TAB it focusses on the text field, and the second time it focuesses on the Browse button. This is invisible to JavaScript.
The problem is I want to use Ajax Upload or something similar to allow the user to click what looks like a button and see the File chooser appear. This works by placing an invisible file-input element under the mouse. I have managed to change the script to allow you to TAB to the hidden file-input element and for this to trigger a CSS change so the fake button looks like it has focus, the upshot being that, on browsers other than IE7, it looks to the user as if you can tab to the button and activate it as you would expect.
This cannot work on IE7 because the first TAB takes it to the invisible text field; pressing SPACE adds a space to the invisible file name instead of activating the file picker. I have tried adding an event handler for keypress that calls the click event, but when I do this the change event I am depending on seems not to be fired.
I am beginning to think the only accessible solution on IE7 (and, I assume, IE8) will be to replace the whole dialogue with a two part form -- the first part with a (visible) file-input element and Upload button, the second part with all the other form items. This is unfortunate because (a) IE7 get a less slick user experience, and (b) I have to add all sorts of extra server-side code to allow the form to be submitted in two parts.
So I would be interested to know if anyone has a way to make IE7's file-input element behave like a single control, or, alternatively, to allow JavaScript to access both controls of the element (something the DOM was not designed for!).
This a bit complicated to do but here's how:
Create a new button to use as your "fake" input control (you have this as the visible element). This element needs to be a button or a link for it to be able to get tab focus (I suggest button so that it works better on Safari).
Remove the file input from the tabbing order by setting it's .tabIndex to -1. It should now be hidden from sight and tabbing order.
Assign events to the file input so that on activity then the focus is moved back to the fake button, values are copied from it, and so forth.
Assign a click event to the fake button that calls .click on the file input element. This will only work for IE. It will also very likely break in a future release.
For mozilla style browsers you can move the focus from the fake button to the file input on keydown, the keypress event will the occur on the file control and you can then move the focus back to fake button on change. This should also give you del/backspace functionality (clear field).
Clearing the field in IE can only be done by rebuilding a new file input control.
As should be obvious from my other answer, I have managed to build this widget with full keyboard accessibility.
My sincere advice is to drop this pursuit. It is a maintenance nightmare. You are exploiting security holes in the browser to make this work and it is only a matter of time before vendors close something that you rely on.
You could also check out swfupload, as it may provide what you're going for and more.

Categories

Resources