Develop Reference

WAI-ARIA attributes added after DOM is loaded

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.

HTML layout changes with JS or CSS?

Should I change HTML layouts with JS or CSS?
I see a lot of use of CSS display hiding or showing elements dependent on media queries. Maybe hidden duplicate HTML that appears in a different location on mobile. A hidden mobile menu. Etc etc
But with JS i can have one layout that "morphs" dependent of screen width. No hidden duplicate markup, just moving HTML around.
Is this not a good idea?

Programatic changes on the layout will depend on the robustness and performance of your JS code.
CSS changes depends of the browser's and it's more efficient for sure.
About the enviroment's measure you can act upon them with css media-querys.

You should not forget, that some browsers/users disable JavaScript for security-reasons.
You should use CSS where it is possible. So your Website can be viewed in all Browsers.
If you have to change some styling dynamically, and there are no CSS-alternatives, javascrpit might be the right choice.

It really depends on what you want to do, if it's basic animations, then css is here for you, if it's more advanced animations, then you should use JS, as other users said, keep in mind that some users disable JavaScript for security reasons, but i think they don't exeed 5% of the users , here's some links to help you find out what's best for your use of css or JS :
Myth Busting: CSS Animations vs. JavaScript
CSS Versus JavaScript Animations
For media queries, here's an answer that respond to your question. With the media queries, you won't have to hide anything, you will use a different CSS code for the same part of the HTML, but with different CSS attributes only for mobile/responsive use
For the SEO, here's and experiment that shows that googleBots crawl the Js without problem.
Edit : if you're able to use some server side language(php, asp...), use CSS for the design part, and the server side language for the other things, and only Javascript when you find it usefull. if you can do something with the CSS instead of JS, then do it with the CSS.

Creating mobile version of the Wordpress site

We have website that was developed for desktops and now I've been blessed with a task of creating mobile version of it. The mobile design might be quite different from desktop version and the website is build on Wordpress. Now I'm not sure what would be best approach:
shall I stick to CSS changes only (as much as possible) and use media queries to target smaller screens? I'm worried about large images still being downloaded even if these are display:none. There is also quite a bit of JS happening on every page and this JS will not be used in mobile version of the site so I would have to build in additional checks possibly etc. Any other possbile problems with this approach?
server side code should detect if its mobile browser and should return custom html? Any other possbile problems with this approach?
mixture of two above?
any other options?
If anyone has experience with similar project and could point me to what proffered solution would be that would be great.

Use media queries as much as possible for layout changes.
For you JS, create yourself a small breakpoint handler that will trigger the js to run or stop.
I think a lot of people don't realize that a 2x image compressed is smaller than a 1x image compressed. So, if you use compression for you images, you will actually get a better network performance using just large images. How much of that image gets displayed is a potential issue that can cause negative performance, but I imagine that it's insignificant.
Are you using completely different UI for mobile than for desktop or is is just a different positioning of elements? If you have to support two templates then you will want o think about Adaptive(responsive from the server), where the server will determine based on the UserAgent which template to send to the client. UserAgent wont really get you much except for the type of Browser the client has. To figure out the dimensions of the device's screen you will need to know the dimensions or use a service like WURFL.
If you can do all of your UI change in one template using media queries then it might be best to start working on this from a Mobile First approach and basically start from scratch on your mobile look of the site and then figure out how you can re-position the elements on the page to match as close as possible to the current desktop look. Using the Responsive vs Adaptive approach will eliminate the need for UserAgent detection and you will only work with the width of the device.
Thinking of Responsive in "Mobile" vs "Desktop" is really limiting and causes a bit of confusion. Mobile should refer to devices that change location. Try using names like small, medium, and large to describe the layouts(breakpoints) for your Responsive Page.
Finally, there is not preferred way of doing "Responsive." Each site will have it's own requirements that need to be met. It is up to you to learn as much as possible and create the preferred way for your needs.

I am a big fan of the Responsive Theme Wordpress has. It is very customizable, and will allow you to use one site for both Mobile and Desktop.
https://wordpress.org/themes/responsive

You could always use:
<meta name = "viewport" content = "width = device-width">
in your header. Then the whole site will resize to fit the mobile device.
All your js should still work on mobile devices. It would just be 'flash' that wouldn't.
The site isn't "responsive" with this but, depending on the site and how much interaction etc the visitor needs, sometimes this is adequate and simple?

Responsive Javascript Files?

I've built my mobile site using the jQuery Mobile UI but I now realize that I need some functionality to be different between it and my desktop site (datepicker dates should be longer on the desktop site, etc).
I've looked into Modernizr and matchMedia to help me load separate js files but I can't figure out a nice way for it to work responsively. Modernizr only works (unless I missed something in the doc) on the initial load and I'm having problems with matchMedia executing multiple times as it crosses the min/max-width threshold. It works sometimes but the trouble is in adding/removing the separate js files. On top of that (but not a huge issue - I don't think), Chrome fires off an error when loading scripts into the DOM from another script.
Would the best thing be to write one js file and then add a listener such as $.mobile.media("screen and (min-width: XXXpx)") to the body's width, changing my needed values?
I may be making this too hard for myself, or missing something obvious because I'm trying to keep HTTP requests and site size as small as possible, but I can't figure out a good solution for this.
Thank you!
Lightning Round Bonus Question: Is it good practice/proper to keep all of the jQuery Mobile styling (data-role data-id data-theme) after switching to the desktop site? It looks awfully .. awful for someone only viewing it on a larger screen.

IMHO, the best approach would be to introduce a couple of flags in your javascript, like "isMobile", "isTablet" or "isDesktop", that would be set within a method attached to the "pageinit" event of your webapp. Later on, you could check that flags to act accordingly with the proper version in the specific parts of your code.
The way you can check that flags depends on your architecture. In the project I am working right now, I extract that information from a class attached by the back-end on the body of the page, but that's because we have that info. You could try to use a library like Harvey to observe the media-queries that would be trigger, and set the flags accordingly. I don't think that your options ends here, but I am afraid I can't help you more!

What techniques can I use to make JS-heavy pages performant on mobile devices?

I have a site that involves a large amount of JS code (~100K including jQuery). When I browse similar sites on my phone or tablet, I'm usually disappointed at how sluggish they are. I want my site to perform well on mobile devices (in terms of both page load time and responsiveness), without developing a separate "mobile-friendly" version of the site or swapping out large portions of code.
Of course, there are countless performance techniques that are applicable to all environments. What I'd like to hear are things I might want to do for performance in a mobile/cellular environment that I would not want to do in a desktop/broadband environment.
Here are a couple of examples of what I'm looking for:
Setting jQuery.fx.off = true to skip animations
Disabling intensive CSS effects like box-shadow, text-shadow, and border-radius
What else?

Latency is the killer in the mobile environment so one of the first things to concentrate on is reducing requests, for example:
Inline the CSS and JS, then split them out and cache in localstorage (Bing mobile does this)
Alternatively inline the JS and wrap in comments then remove the comments and eval the JS (Mobile gmail used to do this - don't know whether it does)
Use data-uri's for images
Switch from jquery to a slimmer framework like zepto.js
Don't use large -ve offsets to hide items from view.
If you find #standardista's presentation from Velocity EU, it contains a whole series of other thoughts.

You are not really going to be able to find optimizations that are specific only to mobile devices. The two that you mentioned, disabling animations and intensive CSS effects, will just as well work to increase responsiveness on a slow desktop PC. Similarly, any other optimization you can make to target a mobile device will also improve performance on a desktop PC.
With that said, the only semi-optimization I can think of that greatly benefits mobile devices in particular is to reduce your page's physical size. This is so that people don't have to waste time zooming to different parts of your page.
Also, to add to your list, I highly recommend using Minify: http://code.google.com/p/minify/

Have a look at the following article I wrote on Javascript Performance Optimization Techniques.
For page load time on mobile devices the most relevant section is Managing and Actively reducing your Dependencies. Some techniques here are:
Write code that reduces library dependencies to an absolute minimum.
Use a post-load dependency manager for your libraries and modules.
Minimize and combine your code into modules.
For UI responsiveness you want to focus on Reducing interaction with host (DOM) objects, and techniques around Maximising the efficiency of your iterations. Some key ones are:
Keep your HTML super-lean (get rid of all those useless DIV and SPAN tags)
Store pointer references to in-browser objects.
Reduce calls to modify DOM to an absolute minimum, especially styling changes.
The other sections there are all useful around different aspects of creating an optimized and responsive UI. Hope you find them useful.