I have to improve website under web accessibility.
I am adding aria attributes directly in html where possible in Drupal, but there are things that I can not add in html, like carousels and slideshows, so is it okay to add aria attributes to an element after document is loaded.
like
$(document).ready(function(){
$(".item").attr("aria-label", "My Label");
});
Yes it is acceptable to do this if you have no other options.
However be aware that this isn't a 100% fool-proof way of doing things with certain screen readers (it should work correctly in the latest versions of NVDA, VoiceOver and JAWs).
Some older screen readers will build the accessibility tree on document load so it would be prudent (if somewhat of a bad practice but the best workaround I can think of) to do it via vanilla JS as an inline JS block in the footer.
This may not be possible given your current setup, if that is the case then the way you suggested is acceptable and the best you will be able to achieve in a reasonable timescale.
If you really want to fix it (and you should!) - have you thought about replacing the offending plugins / libraries (or extending / editing the libraries / plugins) to add the required elements when the HTML is generated. That is how I would handle this.
Related
Are there some problems that prevent people from creating it? Is it too complicated?
Maybe there is just no need for that?
Was it created it already and I just can't find it?
I imagine it to be a js based library and work this way:
It checks if the browser supports flexbox natively;
If it doesn't, it parses CSS and checks if an element has flexbox related rules;
If it does, it tries to emulate these rules via javascript by calculating all positions and sizes of the children elements and position them using position: absolute;.
Basically, the same thing that Masonry and similar libraries do, but with flexbox rules. Would that be possible to do?
Edit: this question doesn't explain why it can't be done.
There is actually a library that does exactly what I wanted: https://github.com/jonathantneal/flexibility
It's in the very early phase of development, but hopefully it will be viable soon.
"emulate these rules via javascript" is the "most impossible" part.
flex box is purely position:static thing, you cannot move it on
position:absolute layer (there are too many things behind this);
flex box calculations are made on so called rendering tree that is not available to JS;
In order JS to be used for static layout purposes browsers should have a mechanism to hook up users code to rendering tree formation and layout:
div { layout: myFlexManager url(my-layouts.js); }
But as soon as browsers will have such a facility the flexbox will be thrown away as this is the worst and ugliest CSS spec ever produced - community will come up with something better - simpler and more practical.
What techniques can be implemented to improve the performance of a Jquery Mobile web application (no Phonegap, etc. has been used. Just a plain JQM mobile web application)? Things that we have already done include the following.
Minification of JS, CSS files.
Reduced or upto no images using font icons and image sprites.
Removed unwanted/unused CSS using mincss.
Used data-enhanced="true" wherever possible.
Used the latest JQM and JQuery libs (ofcourse =))
Page caching wherever possible.
Image scaling is not done. Different size images are sourced when required.
What else can be done to improve performance? What changes can we do in HTML, CSS and/or Javascript/Jquery/Jquery Mobile to further enhance the performance?
Regards.
Shreerang
A major item that I see missing from your list is reducing the number of elements on the page to the bare minimum. You probably have extra divs, spans, etc. on the page without even realizing it. Not only does the browser have to spend time rendering each element, if the style for a parent element is changed, the style for each child element must be recalculated as well!
A good way to look at your page to view nesting graphically is to check out the page using Firefox's 3D layout view: https://developer.mozilla.org/en-US/docs/Tools/3D_View and check to see if any elements can be removed or combined.
References:
Yahoo best practices: https://developer.yahoo.com/performance/rules.html#min_dom
Google minimizing browser reflow: https://developers.google.com/speed/articles/reflow
I've just learned javascript and jquery a few weeks ago, since then I always use it to position all my divs and stuff in the screen by knowing the size of the screen and the window which I find extremely useful, but now I don't know if is this a good practice, cause it makes my web-pages fully dependant on jquery which I don't know if it may cause some troubles with different browsers.
I would really like to find answers like "Sure is a good practice, use all the scripts you want" cause I'm really loving this javascript stuff but well just tell what you think.
Use JavaScript for behaviors and CSS for styling.
Styling with JavaScript is slower and difficult for another developer/designer to figure out what you did.
Also if you use Firebug or Chrome Web Inspector you can not see where your styling is coming from.
Optionally set classes from JavaScript and not specific styling. You can transition between classes to create a nice effect. But at least your colleague can see where the styles are defined and change it.
I'm sorry, but I'm going to burst your bubble, somewhat.
It's somewhat OK to do it - as long as the page looks OK if you disable Javascript, as well. I would say it should look even better than OK. I would also say that you should only do that if the functionality of your site really demands Javascript, as well.
Keep in mind that a certain percentage of users will have Javascript disabled. I've seen sites that look horrible this way (I use NoScript on Firefox, and selectively enable Javascript as I browser), and a couple where nothing at all appears without JS enabled.
Bad.
As Darin notes, you can (and should!) use CSS for positioning and styling. That is what it was made for! Feel free to enhance the page with Javascript, but keep in mind what I say above!
You could use CSS for positioning and styling of elements. That's what it was designed for.
It's okay to use it for positioning in some cases, but using CSS is the better practice whenever applicable.
Well, In my opinion you should avoid it as often as possible. But I know sometime you don't have the choice.
And yea you can make great web apps using scripts.
It depends what you're positioning.
CSS should be your first choice for positioning standard, run-of-the-mill sections and elements of a webpage. To opt for JavaScript in these cases suggests a lack of understanding of CSS.
Likewise if you find yourself using JS to position things for different devices. Again, CSS has evolved; media queries came along for that. Rule: always exhaust CSS possibilities first.
That said, it would be oversimplification to suggest that JavaScript never be used for positioning. All of us, rightly or wrongly, have resorted (and it is just that, resorting) to JS in order to get things to look right cross-browser, particularly where support for older IEs is concerned.
But by far the biggest use case for JS positioning is for modern web aps and games. If you're building a game with random asteroids dotted around, JS is absolutely the choice for that, since the positions are based on calculation and computation.
Finally, bear in mind that when you position in JS, you are of course still using CSS. JS doesn't have its own, concurrent styling/positioning system - it simply sets CSS properties. It is simply able to do so more dynamically and conditionally than flat CSS.
It is almost certainly bad practise. Use CSS for styling - JavaScript to do this is slower, more work, and more prone to breaking.
If you're positioning everything absolutely (fixed coordinates) it won't look good on screens of different resolutions. There's no real answer to this question.. scripts have their place, and you can use all the scripts you want... Positioning all of the elements of your layout, however, is not a job for JS. Use CSS for that.
I'd start here: Starting with HTML + CSS
There is not one method for all situations. Each web application needs to employ the right tools and practices to achieve its goals. This varies so much between applications that there is not a "correct" answer to your question.
I am working on creating a jQuery plugin and I have some questions regarding how to structure things:
1.How much HTML should the plugin have written and how much should it create through jQuery ?
Is it good to have written all of the HTML so that the entirety of the markup structure is visible when looking over the code ?
Or is it better to have written only the minimum amount of HTML so that it is very easy for the user to add/modify content and create all of the rest, bulky HTML through jQuery ?
Is there a recommended practice ? How are things done in professional plugins ?
Why should things be done in a certain way and what are the reasons behind it ?
2.How to balance the plugin options with the CSS ?
Should the plugin offer options that would affect the presentation of the plugin (options that would modify the stylesheet) or is it a better practice to have the user directly modify the stylesheet for presentational modifications and in the plugin only have options relating to the functionality ?
What are some guides regarding what options to offer in the plugin as to not step over CSS ?
Regarding my experiences, I have seen all of these in different places and plugins and that is why I am asking for opinions from experienced users and what are good practices and why.
1. How much HTML should the plugin have written and how much should it create through jQuery ?
According to the paradigms of progressive enhancement, there should be no markup which would be useless in case of no JS enabled. In other words - if your plugins needs some special markup and additional tags it should create them by itself.
The reasons for that is semantics. Additional plugin markup is useless for users (and bots) when there's no JS enabled and thus it should not be present at all.
Also keep in mind that developing a good JS plugin means that content will still be available when the plugin fails or JS is disabled. Moreover, you have to take additional care about making sure that your plugin is accessible. More on the topic of progressive enhancement covering also more advanced issues can be found for example in a book by The Filament Group.
2. How to balance the plugin options with the CSS ?
Do it as follows:
Content: HTML
Logic: JS
Presentation: CSS
Despite the fact it's changing now a bit (think CSS3 animations), options of the plugin may influence the way it works rather than the way it looks. That means your users should be able to config timings, delays, speed, number of element or whatever your plugin is doing through JS. But leave the presentational aspects in the CSS stylesheet. Use JS to change classes of elements rather than inline styles and let your users write whatever CSS they want. Obviously, don't forget to provide some default styling :)
I always recommend reading more on the topic in A List Apart. It's quite a theoretical article but absolutely a must-read for any front-end dev.
Tutsplus has a jQuery course with usefull videos.
http://tutsplus.com/lesson/head-first-into-plugin-development/
This is one of the videos that explaines how te make a plugin.
There are a lot of ways to create a plugin, but this is a good one.
I want to apply ALL the CSS styles 100% with JQuery/JavaScript
But is is bad idea to do this?
Why would you create that overhead in javascript when straight HTML/CSS is fully capable of handling it? (in fact intended to)
Also, you're adding an unnecessary requirement to the styling of your site: having javascript enabled.
Main reason IMHO: Performance! Native CSS is much faster than JS.
Also worth mentioning:
Doesn't work for users with NoScript etc.
Overhead. Not such a big deal i think. There are more important things to optimize.
If you lazy load stuff, e.g. by using jQuery.load(), you have to reapply your styles to these elements. Not nice :/
Conclusion: CSS is made for styling, JS isn't.
If your visitor has javascript disabled, they'll see an ugly white page without any styling.
I don't see why you would do this, to be honest. It's not user-friendly.
Use a stylesheet.
A lot of people say to apply classes not individual styles.
You will see varying levels of performance degradation across different browsers. It's faster and cleaner to let the application render the styled HTML page because that's what it's optimized to do.
If you're dynamically loading content and already have fade effects/transitions so your content is only revealed after it's styled, you might be ok.
if you are going to do this, only apply styles with jQuery (rather than using javascript) to maintain cross-browser compatibility.
I would recommend against your approach because of the time it will take jQuery to loop through all of your elements and apply styles.
something like $('span').css(...); has to traverse the entire DOM and loop through a collection of elements. $('#title').css(...); does not have to loop through the entire DOM because it immediately knows where to look.
Also, browsers are designed to process stylesheets and render your styled elements very quickly.