I got a problem with a website that use onClick event to add items to the cart. The problem comes up to visually impaired users that cant use keybord to add the products.
I guess that bringin back the add function with a normal href="addtocard.php?id=1234" should solve the problem but on the SEO side this can effect other problems.
Is there any other way, maybe using events such as onkeypress, or that's totally related to the use of javascript? Thanks in advance.
Having an addtoCart.php?ID=5 should not have a detrimental impact on your SEO. Modern/top search engines will be smart enough to recognise what the function of that page is, and index it accordingly.
When designing sites, I forget the specific name of this type of design, but it is always best to build it upwards, that is add on the onclick/javascript functionality as an extra over the top of the base of your site, so that if users have any of these features disabled the site will still function perfectly, so that is something to consider when building your next site.
So I would recommend building the addtoCartPage. I don't think it's as bad as you think it is.
You can use something like this
Add To Cart
Or somethinkg like this
Add To Cart
It's the other way around from what your SEO consultant said. Most visually impaired people prefer keyboards. It's mice they can't use so well. The name makes you think that onclick only works with a mouse, but in general, onclick works fine for the visually impaired/non-mouse users, since it is triggered with the Enter key as well as with a mouse click. See http://webaim.org/techniques/javascript/eventhandlers#onclick.
That's why using onkeypress for accessibility is not a good idea. Jeremy Keith flatly says, "Beware of onkeypress" since even a Tab key could make it fire.
Besides progressive enhancement in general, you might try Unobtrusive Javascript in particular, which uses Javascript to rewrite links, and that means users without Javascript get regular HTML links. If Google can't follow your Javascript links, you do have an SEO problem.
Related
I'm currently trying to fix a few bugs on a website that has been built by some guys.
The thing is, I'm having trouble seeing the point of a few things they've done.
The website has a <div> with an onclick="window.location='foobar'" and inside it an <a> tag. Both lead to the same place.
Is there a reason for that?
Thank you!
Some developers are better than others.
More importantly, developers are human and make mistakes. You've found one.
regarding why a developer would use <button onclick="location='somewhere'">, there's a lot of bad advice on the internet, even on stackoverflow, even by high rep users (not trying to pick on j08691, just making a point).
Additionally, button elements may not contain a elements per the specification, so a nested anchor is invalid.
With all that said, the page probably still works. The thing that makes HTML really powerful is its ability to fail gracefully. Instead of erroring out or preventing the entire page from working, the browser is able to make things work, even when the developer does something silly like writing invalid HTML.
I only see downsides:
The user can't use right-click copy link. It will just copy the javascript
Bots from search engines won't follow the link
Users that have javascript disabled can't navigate using that link
However if I understand you correctly, then there is <a href="foobar"> around it?
If that is true, then that would render the disadvantages I have listed above to not apply.
In this case the author of the website may have used this technique as some sort of a hack to style something on multiple browsers the same way...
I've read how the anchor tag is holy, it should not be used with javascript:
Popup
that it should ONLY be used for a link to another page:
Take me over there
So what is the proper use of the anchor tag with javascript? Should I be using:
Energize!
or some other variant? I'm somewhat confused by different views on the subject. Also is it only SEO that I should be worried about if making the href a javascript piece? Or is it more of a proper web standards compliance deal?
Thoughts? Hopefully I'm not the only one confused.
You are not alone Jakub; even the biggest WWW companies use different approaches.
However based on experiences since Netscape days I wouldn't use :
Popup
which can make some troubles on some browsers, like opening an empty page or breaking the event order on the current page.
However;
Energize!
or;
Link
don't make a serious trouble and are ok to use. Note that the prior one may reset the scroll to the top.
You should use meaningful link targets and unobtrusive javascript wherever possible, but this is not always possible in real life examples. It's not a defined standard, but a method highly agreed by most of the web developers.
When it comes to standards, there is one related with this situation:
You should consider using a 'button' for inputs which doesn't really send the visitor to a page, but does an operation. This is also important for SEO.
As #Sime says (and it should be an answer really), it is considered "bad practise" to now directly reference javascript in any HTML object. So in these cases you attach the event using something like jQuery using the concepts laid out in "unobtrusive javascript".
As you mention another consideration is SEO and accessibility. If SEO is important to your site, make sure that the site is fully navigable using just standard links. Again you can manage this using "unobtrusive javascript", etc.
I've always gone with using an anchor as normal (i.e. specify either an alternate url that is another location where the user could perform what's being done through javascript, or use javascript:void() / #) then use the onclick event for anything you want executed.
You could also use a <span> if you're that worried about conformance, just would need to perhaps style it (change cursor, perhaps color as well) to make it visually obvious you're making it an action.
I think Facebook is the best-case example. Almost all of their links are javascript tied in, but they also have a "backup" page for those that either have disallowed javascript or don't have it (the later, in this day and age, being far less common). Take a look at a module that reacts like you'd like yours to and see how they've done it. They also invested a bunch of work in best-practices that you can benefit from.
If anything, you should bind your anchor links to javascript methods only by using unobtrusive javascript like Paul mentioned.
This means, using separation of concerns and leaving your markup being just that, html markup:
<a id="Jolter">Energize!</a>
and later
<script type="text/javascript">
$(document).ready(function(){
$("#Jolter").click(function(){
// doStuffHere ...
});
});
</script>
I'm building a one-page(one file) site and want to get insight as to whether or not I'm taking the most practical and intelligent approach. The site is a simple site for a graphic designer. It has 4 "pages" which are "about me", "contact", "work", and "photos." What I want to do is have 4 divs(absolutely placed in the same spot) with only one visible at a time. When you click any of the links it turns the visibility of the others off and the clicked link on. There are a few ways I could do this though:
Should I use Visibility to show/hide the layers?
Should I use Z-Index to show/hide the layers?
Is jQuery the best way to handle this?
Is using classes such as .visible .hidden the best way to cycle which divs are shown/hidden?
Any other tips to doing this for maximum efficiency?
I know some will tell me to just use separate pages but the site is simple with thumbnails and most of the size is in the header and jQuery script honestly. The thumbnails are fairly small and I don't see a point to making the site with more than one page if I don't have to.
Thanks for any insight.
As Pekka indicated, there may be arguments against doing this as a single-file site. But I'll assume you have a compelling use case. Answering the question:
I would approach this like so:
Use four divs.
No need to absolutely position them, just put them one after another.
Give each div a distinct ID with a semantic name (e.g., "about", "contact", etc.).
Don't hide any of them initially, just let them show one after another. Now the page can be used by people without Javascript, and it works just fine for search engines.
On page load, use Javascript to hide all but the one you want to show.
Determine which one you want to show by looking at the anchor in the location, e.g., "#about" means you want to show the about div, "#contact" means you want to show the contact page.
When you are changing from one to another, change the anchor to match. Now the site is bookmarkable/linkable.
Consider using a history plug-in to manage the anchors, so you can get forward and back support without absolutely tearing your hair out with all the browser inconsistencies. :-)
Not an answer to your questions, but there are compelling reasons speaking against this kind of approach.
Most importantly, it won't work with JavaScript turned off. It will be completely unusable for somebody who has no JavaScript. This makes it an absolute no-no for me.
It makes it impossible to link to specific pages
It's a SEO nightmare - maybe not that important in a 4-page site but still worth mentioning
Maintenance becomes more difficult, as there are four or more complex page structures melted into one
If you are using jQuery, just call .show() and .hide() as needed to toggle the sections.
However as noted by #Pekka, it is likely better to leave these as separate pages.
I think that using Jquery would be the best way to achieve this effect. Pekka mentioned that it won't work for users who have javascript turned off, but really-how many people have javascript disabled these days? Pretty much every single website you will visit relies on javascript.
In my opinion, the best way to get tabs using jquery is to use a plugin developed by Nettuts editor, Jeffrey Way. His personal site on which the plugin is located is under construction right now but I downloaded it a while ago. Here's a link to a zip file with the necessary files inside.
Please note that I have simplified his version greatly. This means I have removed a lot of styling but this shouldn't be a problem, since you probably will want your own unique styles.
JW-Tabs
Hope this helps.
I'm learning jQuery and am about to write some pages using intensively that library. I just learned that some user disable JavaScript on their browser (I didn't even know that was possible and/or necessary).
Now, here's my question: What happens to my web application if a user disable JavaScript? For instance, I'd like to display some screens using AJAX and commands such as 'InsertBefore' to bring in live a DIV that will display the result.
So, if JavaScript is disabled, I wonder what going to happen to all this work that relies on JavaScript?
I'm kind of lost.
Thanks for helping
You may want to start by reading on Progressive Enhancement and Unobtrusive JavaScript.
I would also suggest to investigate how popular rich web applications like GMail, Google Maps and others, handle these situations.
I just learned that some user disable javascript on their browser
I do. The "NoScript" plugin for FireFox does the trick.
So, if Javascript is disabled, I wonder what going to happen to all this work that relies on Javascript?
It won't be functional.
A good practice suggests designing a site not to rely on JavaScript for major functionality. At least, accessing its content (in read-mode) should be possible. JavaScipt should only add interface enhancements like Ajax techniques etc. But the fallback version should always work.
I feel really sad when I see a site which is completely broken without JavaScript. Why can't people use CSS to put elements in proper places? Why do they try to align elements with JavaScript even if there is no dynamics involved?
The same goes for Flash sites. Once in a while a land upon a "web-design-agency" site which makes picky comments about me not allowing JavaScript. When I do I only see a basic primitive site with a few menus and that's it. What was the point of using Flash when the work is so primitive it can be done with raw HTML and CSS in an hour? For me it's a sign of unprofessional work.
All what's done in JavaScript won't work. Some users disable it for security reasons, NoScript is an excellent example. You can try it yourself by removing the scripts from your page or installing the NoScript-plugin for Firefox.
As a rule of thumb:
Make the website working with only semantic HTML
add the CSS
add the JS
But the website should be (almost) fully functional in stage 1.
If you disable Javascript in Safari things like Lexulous in Facebook won't work properly, the mouse letter carry function doesn't work.
We have a nav that expands on rollover (based on this code: http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm).
First, should we have a no-javascript version of the nav?
If yes, what is the best way to do so?
Yes you should always have a non-javascript version of your navigation.
The best way to do this is to apply any styles that hide sub-menus with javascript - so if the javascript isn't run the whole menu will be visible.
The HTML for the menu you've linked to looks fine - <ul>s and <a>s - nice and easy for a spider or non-javascript user to read.
It's always a good idea to have a no-Javascript version of everything.
Search engine robots usually do not interpret Javascript, so your pages might not be indexed if they can't be reached without Javascript.
A sitemap page that simply has a link to every static page on your site is the easiest way to make sure everyone can get to anywhere.
You may want to use unobtrusive javascript, which basically means have no javascript in your html page, just load the javascript files.
Now, if you start with a menu on the left, for navigation, using <li> and anchor tags then you can have some navigation without javascript.
So, if your javascript runs, the first thing it should do, when the dom tree is ready, is to set display: none on the navigation div and put in the new, more interactive navigation bar.
This way you can see how it works without any javascript.
Or, you can have a message telling them that javascript is required and do nothing else, but this would also be hidden as above.
I prefer to have things work, even if it has less functionality, without javascript, when possible.
Don't get me wrong: It's a good idea to support browsers that don't have JavaScript turned on, especially for something as simple as a menu.
However, when a project doesn't have it in the budget, or the application that you're writing is deeply dependent on JavaScript, it just doesn't make sense to support it.
Statistic from w3c and the counter indicate that 93% to 95% of users have JavaScript enabled. Now, mind you that this is a global demographic. To really determine if it's worth your time and money, it would behoove you to do your own statistics to determine what percentage of your traffic/demographic has JavaScript enabled.
As a side note: for reasons similar to why people are moving away from supporting IE 6, my company is also moving away from noscript support. Especially in large scale RIA's, it's just not practical to write the same thing twice. Maintaining two code bases for one project is not my idea of a good time. But of course, this is always based on the client and the target demographic.