A couple of people have asked me recently if it’s possible to nest ARIA roles. The answer: yes.
Not all of them, of course. Think of HTML elements; you can nest <div>s inside <nav>s and <nav>s within <header>s, but you can’t put an <a> inside an <input> or put an <input> inside another <input> – they just wouldn’t make sense.
In ARIA, it’s perfectly fine to have role=article inside role=main (which is completely analogous to an HTML5 <article> inside a <div id=”main”>.
It’s also fine (as far as I know) to have roles like main inside a <table role=”presentation”>. Although the table is presentational only (it’s an old-fashioned layout table), it doesn’t mean that all the contents are presentational – one cell could contain the entire main content of a site and therefore quite legitimately have a role="main".
The rule of thumb I use is: if your nesting feels right, it probably is right.
Note also that the HTML5 validator also validates ARIA. Even if your content isn’t HTML5, it’s still worth running it through the validator.
Note, I’m not an ARIA expert. Please, if I’ve made a mistake, let me know!
It’s been whispered about for some time, but only now can the truth be revealed. The Large Hadron Collider at CERN was built in order to produce enough Higgs Bosons to turn ordinary ninjas into an elite squad of standards-avenging attack ninjas under the sole command of Sir Tim Berners-Lee, previously from CERN (co-incidence? I think not!).
Unnamed sources tell me that, as the Mayans nearly predicted, 2012 will be the year when misusing vendor prefixes will no longer be tolerated and manufacturers bastardising CSS Media Queries to do UA-sniffing will not go unnoticed.
Don’t believe me? Here is an artist’s impression of an actual photo of Tim Berners-Lee summoning his standards-avenging attack ninjas.
The first reading list of 2012 is themed, rather than the usual miscellany. It’s about the Open Web and the dangers it faces.
I’ve nailed my colours to the mast – most lately in The Pastry Box:
The Web is about communication. It connects many people who previously were isolated such as those with disabilities or those in oppressive regimes. It’s a World-Wide Web, not a Wealthy Western Web. If your super-clever site only works with a mouse and monitor, on the latest $2000 super-spec laptop, with a fat broadband connection, you’re missing the point.
The principles of universality of access irrespective of hardware or software platform, network infrastructure, language, culture, geographical location, or physical or mental impairment are core values in Web design.
One of the most worrying trends we see at the moment is the erosion of this idea. In a survey, Peter-Paul Koch asked "Do you hope that WebKit will become the only rendering engine, and that the others will gradually disappear?". Shockingly, 32% have replied “yes” (at time of writing). You read that correctly! 32% actively wish for a monoculture. Because, y’know, cross-browser development is hard – so let’s go shopping! Who cares about the users? Who cares about the future? We’ve been here before with IE6- the darling of developers at the time – and look how well that went.
It’s pretty obvious that this is a case of a group of developers that believes that everyone should be just like them and should use the same devices and browsers. After all, despite all their genuflecting to Safari on their iPhones, it appears from December’s mobile statisitics (as written up by PPK) that
Opera once more overtakes Safari. It’s clear now that Android’s untrammeled growth has ended, and that the race for first position will continue to be between Opera and Safari.
(If you’d like to start testing your sites in the number one mobile browser, there are plenty of Opera testing tools available. Note: Opera is my employer, but this is my personal opinion.)
we have to start building sites using solid, future friendly principles such as progressive enhancement…not just when it’s handy or simple, but all the time.
and goes on to show a Barack Obama re-election site in which it was impossible to navigate in many devices, even some new high-spec devices. In a news report about this, the journalist quotes my three incredibly ground-breaking, never-before-heard rules:
Code to standards, not to browsers
use progressive enhancement
remember that you are not your user.
Yes, I know! Utterly new concepts.
However, we’re approaching a monoculture on mobile. This is not the work of an evil organisation, but it’s developer-constructed. Few people are stupid enough to use Olde-Skool browser sniffing and blocking, but we’re seeing lots of people breaking cross-browser compatibility by neglect rather than design.
One way this happens is developers using only one vendor’s CSS vendor prefix even when other vendors support the same properties. Of course, for experimental things only implemented by one rendering engine, that’s fine. That’s what vendor prefixes are for.
The trouble comes about when people do something like -webkit-transition for widely-supported properties, without the corresponding -o- for Opera, -ms- for Microsoft and -moz- for Mozilla.
People never aim to create content that’s cross-browser compatible per se, with a tiny minority of exceptions. People aim to create content that reaches users. What that means is that right now people are busy authoring webkit-only websites on the open web because they think that webkit is the only UA that will ever matter on mobile. And if you point out this assumption to these people, they will tell you right to your face that it’s a perfectly justified assumption. The problem is bad enough that both Trident and Gecko have seriously considered implementing support for some subset of -webkit CSS properties.[my emphasis]
Since then, we’ve had many more debates about the merits of vendor prefixes (see previous reading list), and even the co-chair of the CSS Working Group, Daniel Glazman, wrote
The rule should be this one: if the CSS parser encounters a prefixed property for another browser, honour that property as if it were prefixed for us UNLESS an unprefixed or prefixed for us valid declaration for that property was already set. That would drastically reduce the problems on the Web.
I believe vendor prefixes were a good idea, and remain so if used in a cross-browser, future-proof way. But because so many people only use the -webkit- one, I’m starting to wonder too if vendor prefixes should be considered harmful…
Brand-new presentations to be written in web technologies, eg with Vadim’s cross-browser Shower
Become a better scripter
After last year’s heroic lost cause of attempting to prevent people using the term “HTML5″ for everything, this year I shall be putting my finger in the dyke of everyone shouting for joy when a vendor uses first-mover advantage or market dominance to attempt vendor lockin
Learn to love Git. This one may prove tricky.
Personal
Diet – lose 10 kilos. This is closely related to…
Get my next karate belt, and train at least once a week.
Read more classic literature (I have 200 unread books on my shelves)
Take a photo every day
Play rhythm guitar in a band
Learn to play the bass guitar part to The Beatles “Rain” as well as this bloke does.
Adding Islamic calendar support in HTML5 – a request from IBM to add new types of HTML <input> to cater for the three Islamic calendars. I agree with Lars and Lachlans’ comments that this is a browser enhancement and not an addition to the language.
EcmaScript 6 versioning. Dutch Specmeister Anne van Kesteren writes “this still strikes me as a slippery slope towards the mess Internet Explorer is dealing with (and Word has in the past). Not very webby, ECMAScript”
Backbone.js mini-book by Addy Osmani, who says "any contributions welcome. Plan to keep adding more everyday".
Regular readers will be familiar with my unique blend of misanthropy and parsimony, and will no doubt blame that for the fact that no festive card from me has dropped through their letterbox, especially if you’ve sent me one (thank you for that).
But they’d be wrong. It just seems to me a little wasteful to transport bits of paper to faraway towns or distant countries (half of our family is overseas) just to send you pre-printed religiously-based greetings which then go in a landfill.
So I don’t send cards. Instead, I donate what I’d usually spend on paper and postage to a charidee where it does good instead of polluting the place.
So, your Xmas card this year is a small part of a donation to Medecins Sans Frontieres which is “an international, independent, medical humanitarian organisation that delivers emergency aid to people affected by armed conflict, epidemics, healthcare exclusion and natural or man-made disasters.”
I hope that’s OK with you. And, even if it isn’t (you miserable sod), I hope you and those you care about enjoy your holidays and have a happy, healthy and peaceful 2012.
MPEG-DASH is the first International Standard for dynamic adaptive streaming of multimedia content over HTTP. It will be interesting to see what the royalty/ licensing situation will be.
I don’t agree with everything Faruk says in The Threat Against the Web, but wholeheartedly applaud “The web will only thrive as long as the web is not owned by any one entity; not owned, not controlled, and not defined”.
On the subject of the constantly-embattled Open Web, Google offered patches to allow their super-whizzo! invented-in-secret Dart language to be in WebKit. Oliver Hunt of Apple objected: “As the 90s demonstrated such “features” are bad for developers, and bad for the open web. This may not be apparent to people who have not spent years working in the environment but random additions frequently cause significant pain down the road” and adding adding “it fragments the web” and risks “turn[ing] webkit into the engine that everyone hates because of all its unique “features” that break the open web, a la certain browsers in the late 90s”.
All the cool kids are doing responsive design, it seems. This means fluid designs, having some hot media query action to reformat your layout depending on screen size, and ensuring your images are flexible so they don’t break out of container, generally by setting them to {max-width:100%;}.
Having images scaling down presents a problem though, if you’re a performance-minded sort of chap(ette). Why send a 300K 400 x 800 image that would look lovely on tablet device attached to wifi, but which takes ages to download on a 3G phone, and which gets resized by the browser to fit a 320px wide screen? Not only are you wasting your user’s bandwidth and time, but not every browser is created equal and not every resize algorithm makes pleasing end results. The CSS 4(!) image-rendering property can help with this but it only hints to the browser.
Sending the right-sized image to devices without wasting bandwidth is one of the knottiest problems in cross-device and responsive design at the moment. In the 24ways advent calendar series of articles, the subject has been discussed twice in eight articles (by Matt Wilcox and Jake Archibald). There are numerous other techniques, as well, such as tinySrc and the Filament Group’s Responsive Images.
All these are very clever, different solutions to solve the same problem, and they all rely on scripts, or cookies, or server-side cleverness or (in the case of Jake’s ideas) dirty hacks and spacer GIFs. I’m reminded of Image Replacement techniques from more than 6 years ago, which were over-engineered solutions to the problem better solved by CSS web fonts.
Let’s recap. We have several images, of different sizes, and want to send only the most appropriately-sized image to the browser. The circumstances differ. The canonical use case is to send smaller, lower-resolution images to smaller screen-sizes on the assumption that connection speed is slow and they have low-resolution displays. This isn’t the case, though. Some people are using retina displays on fast wifi networks. SO, while currently CSS Media Queries allow us to detect screen width and pixel density, we need new media features such as network speed/ bandwidth.
The DAP is working on a Network Information API, there’s a Phonegap version for native apps, and a Modernizr detect, but using script for this seems much harder than being able to access it via Media Queries, and if you just want to rearrange CSS layout, CSS is the place to detect it. (Purists may argue that network connection isn’t a characteristic of device, but in your face, purists!)
Once you have a media query, you can swap images in and out using the CSS content property:
<img id=thingy src=picture.png alt="a mankini">
…
@media all and (max-width:600px) {
#thingy {content: url(medium-res.png);}
}
@media all and (max-width:320px) {
#thingy {content: url(low-res.png);}
}
@media all and (network-speed:3g) {
#thingy {content: attr(alt);}
}
A browser that doesn’t support Media Queries, or doesn’t report “true” for any of the Media Queries shows the picture.png, which is the src of the img. A browser that is less than 600px replaces picture.png with medium-res.png. A 320px or narrower browser replaces picture.png with low-res.png. A browser that is only connected via 3g replaces the image with its alt text.
I first researched this technique in 2008 as a way of doing image replacement without extra markup (ironically enough). The first two media queries only works in Opera and Chrome at the moment, as they’re the only browsers that fully support content without :before or :after. (The network-speed media query works nowhere as I just made it up).
Recently, Nicolas Gallagher experimented with generated content for responsive images, and unfortunately discovered that there are no advantages to the technique because browsers always download picture.png, even if they never show it because they immediately replace it. Perhaps this could be optimised away by browsers, but there would still be the double-download problem with current browsers.
My mind turned to HTML5 video. Here we have an element that has the ability to specify multiple sources (because of different codecs) and can also switch sources according to media characteristics. It borrows syntax from Media Queries but puts them in the HTML:
I firmly believe that if something as new-fangled as video can be responsive in a declarative manner (without needing script, APIs, cookies or server magic) then responsive images should be similarly simple.
Previously, on the mailing list, a new <picture> element was proposed. I mashed up that idea with the already-proven video code above and came up with a strawman:
<picture alt="angry pirate">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="network-speed:3g">
<source src=lores.png>
<!-- fallback for browsers without support -->
<img src=midres.png alt="angry pirate">
</picture>
This would show a different source image for different situations. Old (=current) browsers get the fallback img element. As I said, this is a strawman; it ain’t pretty. But it would work. (It’s discussed in my recent Smashing Magazine article HTML5 Semantics.)
I prefer the media queries to be in the HTML for two reasons: you don’t need to have ids or complex selectors to target a particular image, and (more importantly) many content authors use a CMS and have no ability to edit the CSS. (Although the nasty <style scoped> could solve this.)
On the other hand, I might be over-engineering the whole problem. I chatted informally with my colleague Anne van Kesteren, glamorous Dutch WHATWG inner circle member. There’s a school of thought that says everything will be 300ppi and networks will be fast enough, so this is really an intermediate problem until everyone starts using highres graphics and all displays go from 150 to 300. Standards are long term, and by the time we have a standardised version, the problem might have gone away.
PrefixFree: Break free from CSS prefix hell – Lea’s script parses CSS on the client and adds only the vendor prefixes that the browser requires. A sort of Modernizr for CSS, but note it adds a dependency on JavaScript.
One of the many joys of going to Fronteers 2011 (even more than seeing Jake Archibald in a mankini) was Seb Lee-DeLisle’s presentation “CreativeJS – beauty in the browser”. Watching sexy particle systems, using mobile phones as pixels and playing NyanCatch was fun and exciting.
I’m a JavaScipt n00b, but an old hand at programming, which I taught myself in the 80s by coding visual games like space invaders and lunar lander. So when I heard that Seb was giving a two-day workshop in Leeds on how to code creative visual effects and games, I decided to go along.
Seb didn’t start at the very beginning; it’s assumed that we have a text editor, a web inspector (I was using Opera Dragonfly, of course) and that we know what variables and loops are. There wasn’t much talk of prototyping and inheritance either – the emphasis was on the making rather than the theory.
We looked at canvas, how to make simple shapes and simple animations. Then we used Seb’s simple library to add drag, velocity, gravity and randomness to particles, all the while building pretty effects that responded to the mouse. We learned canvas rotations and transforms (which I hadn’t really bellyfelt before) by making a generated tree (which I topped off with random cherry blossom).
We learned how to code the game Asteroids, with a reminder of trigonometry that shocked me: who knew I’d ever need SOHCAHTOA or the Pythagorean theorem in real life? This also helped us learn how to make natural-seeming physics.
We all had a brief foray in webGL, albeit abstracting away most of the horrors via Mr Doob’s THREE.js.
It was a great fun course. Seb’s an engaging and effective teacher and I feel much more confident with my JavaScript now (I even suggested an optimisation to Seb’s collision detection code!). Thanks to Seb, Clare who co-organised it, and my fellow attendees.
If you’re looking for an “in” to JavaScript, and you learn by mucking about and seeing what comes out the other end, sign up to Seb’s next course.
