I'm working on a chat web application. I want to make sure it is accessible for everyone. Currently, when I tab to the chat content, the focus goes to the first message in the chat - which is at the top of the screen. To access the most recent messages, the user must tab through all the messages. Is there a way to override this behavior so tabbing starts at the bottom of the screen? I can't modify the order of elements in the DOM because that will display the messages out of order and confuse users who don't use a screenreader. Besides, the user would still need to tab through all of the messages to access the input to send a message. How can I make sure tabbing doesn't scroll to the top of the screen?
Bad answer
You could use positive tabindex values, but it's a bad practice.
Many explanations exist about why it's bad. Don't use tabindex.
Simple answer
People who frequently use tab to navigate usually also know that they can move backwards with shift+tab.
So you are safe if you do nothing special, and just assume they will be smart enough to navigate backwards in order to quickly reach last messages.
Better answer
Ask yourself this question: do each messages really has to be individually focusable ?
Probably the answer is no, or at least not so directly with tab alone.
For your particular case, I suggest you to make a list box instead of a flat serie of messages.
Ideally you should probably have this kind of behavior:
Pressing tab goes into the list, pressing tab again goes to the next element outside of it.
Since a single tab is sufficient to skip all messages, the input field to say something can be reached with only two or three tabs
If I want to read the messages one by one, I go to the list, and then can use arrow keys and home/end to navigate between messages in the list. Pay attention to home/end, they are often forgotten, and arrows aren't sufficient in very talky rooms.
When going outside of the list and then back in, the same message should be again focused as when leaving the list
In fact, something often forgotten is that keyboard navigation isn't just about tab. There are as well arrow keys, home/end, spacebar and enter, etc.
There are well written advices on what should do what in which situation on the Internet. Search for example "WAI authoring practice".
IN general, the most useful and most frequent used elements must be quickly reachable.
Keep in mind that if you must press many keys to reach something, you have probably failed in making a well designed interface.
you can use the tabindex attribute :
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
You can set the tabindex number attribute on specific elements. The incremental order of the tabindex will be the selecting order.
Read more here.
Visitors on my page have the option to save their prefered settings as a cookie (I know some are against it, but this is not the point of this discussion).
If the user does not have a cookie, the user is asked if he/she wants to set up settings and then if yes redirect with javascript.
Can I detect non human trafic and not ask the "question" to them?
I have noticed google speed analytics are always beeing redirected to my settingspage which gives me wrong data in the analytics page.
So can I detect the non human trafic, by php or javascript?
EDIT: I would prefer to detect them in php as I have plans to phase out the javascript as much as possible
Use a honeypot - an empty, non-visible (but not hidden) field that bots will likely fill in. Also you can try and catch the click event, since bots like Google are not likely to emulate it crawling your page. Overall your best option though is using your .htaccess file (or robots.txt) to disable crawling of unwanted pages - check this out: Block all bots/crawlers/spiders for a special directory with htaccess
It is quite easy to do this, even so, there are many options, depending on your specific needs.
Here is a simple solution:
on each page, make the first link styled to be "invisible" (opacity:0), which points to some place that either triggers some javascript, or points to some place you want for robots; also place it off-screen (top:-999px)
set a timeout (like 500ms) on page load to give a robot some time to "click" the link
after the timeout, it should be a human user -if the "trap" was not triggered
optionally you can also check for mouse activity, but the above should suffice
This should work well, because a "human user" cannot click the link, but a bot can because it reads the HTML. Beware not to: "display:none", else the bot may skip this.
I'd recommend using honeypots to detect them.
Here's an interesting Article about this.
I've been looking around for a good back-end independent HTML/CSS/JS widget for many-to-many/has_many relations with XHR filtering and I can't seem to find any.
I find hard to believe people are constantly re-inventing this wheel.
What am I missing?
EDIT: Ok, from the number of people that didn't understand it, this was a crappy question.
I believe that regular web interactions should come at minimal cost (it should either already be in HTML or a package install away).
That's true for most cases. However, I'm having a hard time finding something for picking up an item from a collection (Not autocomplete, something more elaborate than merely a string. If you want an example, assume you want to pick users and have their avatar displayed while picking.).
Picture this:
When you want the user to provide
a short string in a form, you give them an input box
a long text in a form, you give them a text area
a piece of HTML (for a blog post's body, for example), you give them a text area with CKEditor or TinyMCE
pick something from a short list, you give them a drop down menu (like a select box)
a string based on a wide range of known alternatives, you give them an input box with autocomplete (jQuery UI Autocomplete, YUI Autocomplete, etc..)
a set of items from a wide range of options, you give them... drumroll...
I don't know! And that's my question. I've searched a bit and could only come up with jquery-tokeninput as a credible option.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I am currently building a registration page where if the user leaves, I want to pop up a CSS box asking him if he is sure or not. I can accomplish this feat using confirm boxes, but the client says that they are too ugly. I've tried using unload and beforeunload, but both cannot stop the page from being redirected. Using those to events, I return false, so maybe there's a way to cancel other than returning false?
Another solution that I've had was redirecting them to another page that has my popup, but the problem with that is that if they do want to leave the page, and it wasn't a mistake, they lose the page they were originally trying to go to. If I was a user, that would irritate me.
The last solution was real popup window. The only thing I don't like about that is that the main winow will have their destination page while the pop will have my page. In my opinion it looks disjoint. On top of that, I'd be worried about popup blockers.
Just to add to everyones comments. I understand that it is irritating to prevent users from exiting the page, and in my opinion it should not be done. Right now I am using a confirm box at this point. What happens is that it's not actually "preventing" the user from leaving, what the client actually wants to do is make a suggestion if the user is having doubts about registering. If the user is halfway through the registraiton process and leaves for some reason, the client wants to offer the user a free coupon to a seminar (this client is selling seminars) to hopefully persuade the user to register. The client is under the impression that since the user is already on the form, he is thinking of registering, and therefore maybe a seminar of what he is registering for would be the final push to get the user to register. Ideally I don't have to prevent the user from leaving, what would be just as good, and in my opinion better is if I can pause the unload process. Maybe a sleep command? I don't really have to keep the user on the page because either way they will be leaving to go to a different page.
Also, as people have stated, this is a terriable title, so if someone knows a better one, I'd really appreciate it if they could change the title to something no so spammer inviting.
As soon as I saw the words "prevent the user" I started to wail in agony. Never prevent the user, only help them.
If they see your registration page and run off, that's their choice. Pop up a javascript confirm box if they've already filled in some data (because they might be navigating away accidentally) but leave it at that. If they haven't touched the form, leave them alone - they don't want to fill in your form.
Look at other methods of engaging users. If your form is huge and scary, break it into simple manageable chunks or better yet, simplify things so much that the user only gives you data when you need it. For example, you might not need their address until you want to post something to them.
By breaking it into multiple parts you can hook them with a simple form and once they've invested that time, they'll be more likely to continue the process.
But don't harass users. If they don't want to register, pestering them with pop-ups and jaavscript dialogues will just chase them off the site completely.
With that in mind, assuming you're just trying to stop people half-filling-in forms, there are a couple of options to genuinely help people:
Detect if the form has changed and ask them a simple confirm() message.
This is all you can do. A CSS "pop-in" just won't work because you can't control* the window location in the unload event.
*You can put an event listener on all your page's links to fire off something to check the form, but this only helps if the user clicks on one of those links. It won't help if, for example, the user clicks back or closes the window. You could do both CSS and javascript but you end up with a bit of a mess.
Persist the state of the form behind the scenes.
An extension to #1. Instead of squabbling with the user, let them go where they want but save the content of the form either to session or cookie (if it'll fit) and put something on the page (like SO's orange prompt bars at the top of the page) that reminds them that they've started filling in a form and gives them a link back to the form.
When they click that link, you load the data out of the cookie (or session) back into the form and let them carry on. This has the clear benefit of letting them do what they like on your site and keeps the data safe.. ish.
If they don't come back and their cookie/session expire, that's their fault. You can only lead a horse to water. It's not your job to force it to drink.
Don't do it.
But if you want, try this. Record mouse positions and detect a quick upward thrust -- the user is reaching for the BIG X or the top left or top right. Now might be your chance for an unobtrusive box in the screen.
I've seen this implement on the web and it is evil.
If you want to trap links, you could rewrite the links in the page to go to a "you really want to leave?" javascript function, passing the destination URL as an argument.
If you wanna keep users from using their "Back" button, or keep them from putting another URL in the address bar, stop. Stop now. (1) Browsers were made to prevent exactly that kind of obnoxious behavior, and (2) Even if they allowed it, see the last two words of (1). It's freaking rude. Your site is not that special, no matter how cool you think it is.
window.onbeforeunload = function() { return "Message"; };
Use a JavaScript like this to display a leave confirmation message.
Here are just a couple of approaches I could think of but they are not without flaw:
Whatcha Gonna Do technique
Detect the mouse position going towards the edges of the browser as the user might be going to close the tab, window, go back, navigate elsewhere among other things. If so, immediately prompt them that that may be a mistake and they are going to lose out on something very valuable. However, the catch here is that you don't know for sure what their intentions were and you might piss them off with that popup. Also, they might use a bunch of shortcuts such as Ctrl+W etc to do the same.
You've Got Mail technique
If you've managed to get hold of the user's email address before they closed the page, you've hit a jackpot. As soon as the user types anything into the email box and then leaves it, immediately send it to the server using AJAX. Save the state of the page into localStorage or on the server using a cookie or something so it can be recreated later. Every couple of hours send them an email giving them a direct link to the previously saved form, and maybe with special offers this time.
History Repeats Itself technique
Then there's the infamous history manipulation where you keep stacking the current page into the document history so the back button renders effectively worthless.
Don't Put All Your Eggs In One Basket technique
Another technique off the top of my head is to create multiple windows in the background with the registration form and keep them all in sync when any the fields in any one changes. This is a classical technique and really puts the "don't put all your eggs in one basket" saying into real-life usage.
Another advantage of this awesome technique is even if the user closes one of the windows, and later comes across an identical cloned window with all the fields they filled up-to-date populated, they might get confused and think that they never closed the page. And guess what, this time they might just go ahead and fill out the registration form. But you have to be cautious with this as anything more than 2 or 3 clones will make it obvious as to what's going on.
You're Winner technique
Another technique is to tell every user they they are the Xth visitor on the site and use a good rounded number for X such as 1000, 10000, 50000, etc. Tell them that they can claim their prize once they register on the site. Imagine how special each user feels when they land on your site. The prize doesn't have to be anything tangible, it can simply be free coupons that you find on the intertubes.
Where Do You Want To Go Today? technique 1
This is basically a rip-off of your answer. Use document.location.href = 'some url' inside your onbeforeunload callback to navigate to a different page before it is unloaded.
1 Firefox only.
Note: there is no silver bullet solution here unless you write your own browser with your own security policies, but these are all optimizations that you can do to make it utterly impossible for users to leave.
Not all browsers support a modal popup, without which your page would go ahead and navigate anyway.
This is real awful requirement. The sort of requirement that is reasonable in a desktop application but entire unreasonable feature of a web site. Imagine being unable to leave a website.
The answer is either use the horrible confirm box and lump it. Or don't ask the user to enter too much data per page. Use a step by step wizard style data entry, the loss due to accidental navigation is minimised.
You can change the Value of the url using document.location.href = "www.website.com"
I can accomplish this feat using confirm boxes, but the client says that they are too ugly.
If the problem is the ugliness of the standard JS popup boxes, try something like this: http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/
Apart from that I second what most people are saying: do this with extreme caution if you don't want to lose users.
Background
I'm using POST form submissions instead of links with concatenated arguments inside a Web application, so I can exercise control over input.
Unfortunately this means users can't use the quick shortcuts they know to open links in new windows, like control-clicking or middle-clicking.
Problem
I've got what seems to be a workable way to use jQuery to capture mouse input and the various chord keys, based on the W3C DOM mouse events specification:
$("span#clickspan").click( function(event) {
buttonpress = event.button;
ctrlpress = event.ctrlKey;
$("#clickresult").empty();
$("#clickresult").append("<p>Click!</p>");
$("#clickresult").append("<p>Button # " + buttonpress + " pressed!</p>");
if (ctrlpress) {
$("#clickresult").append("<p>Control-click!</p>");
}
//form submission code would go here
event.preventDefault();
}
);
I can capture control-clicks this way (tested in Firefox 3 and IE7), and it correctly (?) reports left-clicks as coming from mouse button #0, but for some reason this code still isn't capturing middle-clicks on the span, and right-clicks still pop up the context menu. I'd like to capture middle-clicks, at least.
Can somebody help there?
What "control" means
The problem with a GET submission/link with concatenated arguments is that anybody can edit the address bar and type in anything. I've already worried about authentication and validation server-side. That's not why I want to work with POST.
I should only be showing users information that's meaningful. Internal database IDs aren't. I should only be letting users interact with the application in meaningful ways. Arbitrarily editing the address bar isn't one of those.
People make typos all the time. From the system's perspective, though, there's no difference between a typo in the address bar and a flaw in the application logic, and I'd rather not push the responsibility for deciding which one just happened off onto the users.
Short answer? Can't do it.
Long answer? Javascript mouse events. Still can't do it.
This begs the question: do you need to use POST or do you simply want to? The only reason why you'd need to is query string length. As to wanting to, you mention "controlling user input". What does that mean exactly?
You should never ever ever rely on the browser for input validation. You can do it there as a convenience but the server should always validate input.
Or is the reason aesthetic (ie shorter, "nicer" URLs)?
You're reinventing the wheel that is hyperlinks. I'm just trying to make sure you have a pretty darn good reason for doing so because it's counterproductive and you're never going to get the same browser support and compatibility as actual hyperlinks. Plus you're likely to simply annoy your users by having things they expect to work not work. Not good.