Archive for the 'HTML5' Category

Web Components, accessibility and the Priority of Constituencies

Gosh, what a snappy title. I’m not expecting a job offer from Buzzfeed any time soon.

Today, Apple sent their consolidated feedback on Web Components to the webapps Working Group. The TL;DR: they like the concept, are “considering significant implementation effort”, but want lots of changes first including removal of subclassing, eg <button is=”my-button”>.

I think this is bad; this construct means existing HTML elements can be progressively enhanced – in the example above, browsers that don’t support components or don’t support JavaScript get a functional HTML <button> element. It also means that, by enhancing existing HTML elements, your components get the default browser behaviour for free – so, in this example, your snazzy my-button element inherits focussability and activation with return or spacebar withut you having to muck about with tabindex or keyboard listeners. (I wrote about this in more detail last year in On the accessibility of web components. Again.)

Apple raised a bug Remove the support for inherting from builtin subclasses of HTMLElement and SVGElement and notes “without this hack accessibility for trivial components is harder as more things have to be done by hand” (why “this hack”? A loaded term). However, it calls for removal because “Subclassing existing elements is hard as implementation-wise identity is both object-based and name / namespace based.”

Implementation is hard. Too hard for the developers at Apple, it appears. So Web developers must faff around adding ARIA and tabindex and keyboard listeners (so most won’t) and the inevitable consequence of making accessibility hard is that assistive technology users will suffer.

HTML has a series of design principles, co-edited by Maciej Stachowiak who sent Apple’s feedback. One of those is called “Priority of Constituencies” which says

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In other words costs or difficulties to the user should be given more weight than costs to authors; which in turn should be given more weight than costs to implementors; which should be given more weight than costs to authors of the spec itself, which should be given more weight than those proposing changes for theoretical reasons alone.

Fine words. What changed?

Why we can’t do real responsive images with CSS or JavaScript

I’m writing a talk on <picture>, srcset and friends for Awwwards Conference in Barcelona next month (yes, I know this is unparalleled early preparation; I’m heading for the sunshine for 2 weeks soon). I decided that, before I get on to the main subject, I should address the question “why all this complex new markup? Why not just use CSS or JavaScript?” because it’s invariably asked.

But you might not be able to see me in Catalonia to find out, because tickets are nearly sold out. So here’s the answer.

All browsers have what’s called a preloader. As the browser is munching through the HTML – before it’s even started to construct a DOM – the preloader sees “<img>” and rushes off to fetch the resource before it’s even thought about speculating about considering doing anything about the CSS or JavaScript.

It does this to get images as fast as it can – after all, they can often be pretty big and are one of the things that boosts the perceived performance of a page dramatically. Steve Souders, head honcho of Velocity Conference, bloke who knows loads about site speed, and renowned poet called the preloader “the single biggest performance improvement browsers have ever made” in his sonnet “Shall I compare thee to a summer’s preloader, bae?”

So, by the time the browser gets around to dealing with CSS or script, it may very well have already grabbed an image – or at least downloaded a fair bit. If you try

<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);}

you’ll find the correct image is selected by the media query (assuming your browser supports content on simple selectors without :before or :after pseudo-elements) but you’ll find that the preloader has downloaded the resource pointed to by the <img src> and then the one that the CSS replaces it with is downloaded, too. So you get a double download which is not what you want at all.

Alternatively, you could have an <img> with no src attribute, and then add it in with JavaScript – but then you’re fetching the resource until much later, delaying the loading of the page. Because your browser won’t know the width and height of the image that the JS will select, it can’t leave room for it when laying out the page so you may find that your page gets reflowed and, if the user was reading some textual content, she might find the stuff she’s reading scrolls off the page.

So the only way to beat the preloader is to put all the potential image sources in the HTML and give the browser all the information it needs to make the selection there, too. That’s what the w and x descriptors in srcset are for, and the sizes attribute.

Of course, I’ll explain it with far more panache and mohawk in Barcelona. So why not come along? Go on, you know you want to and I really want to see you again. Because I love you.

Review: JavaScript & JQuery by Jon Duckett

Disclosure stuff: I was sent a free copy of this by the publishers. From 2000-2002 I worked with its author. I currently work with Mathias Bynens, the book’s technical reviewer (but didn’t know this until after reading it).

Don’t tell anyone, but I’m not very confident with my JavaScript – I learned to program in COBOL, FORTRAN, BASIC, 6502, Z80 and DCL which are all procedural, so I was looking forwards to a book that starts at the very beginning and treats me kindly, before clubbing me over the head because I polluted the global namespace and laughing at me for extending my prototypical object literal constructors into my callbacks.

The book’s blurb says “We’ll not only show you how to read and write JavaScript, but we’ll also teach you the basics of computer programming in a simple, visual way” and is the follow-up to Duckett’s hugely successful HTML and CSS Book which sold over 150,000 copies. (In tech book terms, that’s practically Harry Potter; in this industry, 5,000 is a successful book.)

The book looks beautiful. High quality paper, colour images, with real care and attention lavished on the layout and the words. I’m no quivering aethete designer, but I found it pleasurable to read even though it’s a weighty 600 page tome. Each page (or spread) is its own discrete infolump so it’s easy to out down and come back to.

It starts light – defining events, objects, methods and properties, showing the relationship between HTML, CSS and JS, and with a section on Progressive Enhancement (hoorah). However, I was slightly peturbed that the first worked example uses document.write. I can see why you’d do this – it allows you to show something, but without having to muck about appending to the DOM or using getElementById and innerHTML but it didn’t feel particularly good practice (especially as getElementById and innerHTML are introduced soon after, anyway.) In the author’s defence, he does note that this is Considered Naughty.

Elsewhere, we see lots of workarounds and IE-specific aspects of the DOM. I’m comfortable with these being there; we have to live in the real world, and I think that a book that ignores this does a disservice to its readers – it’s right to equip someone to make pages work on or understand what’s happening in older/ inherited scripts.

The book moves briskly after the traditional introduction to loops, variables and other syntax. By page 270 we’re looking at event listeners, including IE5-8, event delegation, mutation events (with a note that mutation observers are coming, but no more than that.)

Chapter 7 begins with jQuery. Again, there are times when jQuery is entirely appropriate. What’s good is that this book teaches JS concepts first, and always keeps the two separate. (I get tired of “JS” tutorials that are actually about jQuery.)

The rest of the book romps through “HTML5″ APIs, JSON, common UI widgets and – usefully – debugging. Attention is paid to pointing out what’s standard and what isn’t, what’s vanilla JS and what isn’t. Progressive enhancement, accessibility and separation of concerns is are kept in mind throughout. This is good. You can see the table of contents.

When I’m reading, I often don’t care if I’m reading a paper book or a Kindle. But in this case, I was glad I was reading the full-colour, attractive book. I’ve railed about the shoddy quality and general unattractiveness of most computer books before. When so much information is available on the web, publishers must provide some sort of extra value. This book has it – the information is thought-through, beautifully presented and clearly explained. While I guess that the majority of my regular readers won’t need an explanation of what a loop or variable is, I believe this would be an excellent book for someone wanting to start with JavaScript, and learn it well. It doesn’t cover Promises, Mutation Observers, but I don’t really think they’re right for a beginners’ book, anyway.

Oh – and it made me realise that I’m not nearly as crap at JavaScript as I thought I was. Which is nice.

Ten years of WHATWG

A little over ten years ago, on 4 June 2004, Opera employee Ian “Hixie” Hickson sent a mail titled WHAT open mailing list announcement announcing

a loose, unofficial, and open collaboration of Web browser manufacturers and interested parties. The group aims to develop specifications based on HTML and related technologies to ease the deployment of interoperable Web Applications

Ten years is a long time, especially so in software, but nevertheless, the achievements of WHATWG have been remarkable. Hixie wrote

The working group intends to ensure that all its specifications address backwards compatibility concerns, clearly provide reasonable transition strategies for authors, and specify error handling behavior to ensure interoperability even in the face of documents that do not comply to the letter of the specifications.

Core aspects of the web platform were never adequately specified. XMLHttpRequest, for example, was shipped in IE5 in March 1999, and reverse-engineered and shipped in Firefox, Opera, Safari and iCab, but never actually documented until Anne van Kesteren co-specified it in WHATWG in a Working Draft of 5 April 2006. Anne’s currently working on the Fetch Standard, which defines something as basic as “requests, responses, and the process that binds them” and the Encoding Standard:

While encodings have been defined to some extent, implementations have not always implemented them in the same way, have not always used the same labels, and often differ in dealing with undefined and former proprietary areas of encodings. This specification attempts to fill those gaps so that new implementations do not have to reverse engineer encoding implementations of the market leaders and existing implementations can converge.

Of course, the poster children of WHATWG are the slew of new APIs that “HTML5″ brings us – Web Workers, Web Sockets, native video and audio etc etc. There have been mistakes along the way (of course there have, in a decade!). Last year, Hixie told me

My biggest mistake…there are so many to choose from! pushState() is my favourite mistake, for the sheer silliness of ending up with an API that has a useless argument and being forced to keep it because the feature was so desired that people used it on major sites before we were ready to call it done, preventing us from changing lest we break it. postMessage()‘s security model is so poorly designed that it’s had academic papers written about how dumb I was, so that’s a pretty big mistake. (It’s possible to use postMessage() safely. It’s just that the easiest thing to do is not the safe way, so people get it wrong all the time.) The appcache API is another big mistake. It’s the best example of not understanding the problem before designing a solution, and I’m still trying to fix that mess.

But to me, the biggest triumph of WHATWG has been error-handling and interoperability (actually, two sides of the same coin). We’ve moved from a vision of the future where everything was supposed to be XML and browsers were to stop parsing if they met malformed markup, to a present where every browser knows how to construct an identical DOM from the most mangled/tangled HTML. We’re moving to a world where interoperability is paramount, and where specifications are made in the open, in constant consultation with developers (for example, Service Workers, Web Components) based on real use-cases.

I think the existence and the work of WHATWG has secured the viability of the web platform. Happy 10th birthday. And thanks.

Should you use HTML5 header and footer?

Matt Wilcox asked “I still don’t bother with <header> <footer> etc. I assume all widely used browsers support them now. But, do they do anything more than div?”.

It’s a good question. The answer I gave is “yes”. These two elements (and <nav> and <main>) give value to users of some assistive technologies on some browsers.

In the HTML5 spec, HTML elements are mapped to ARIA information. Some of those may be over-ridden by authors, but if they aren’t, they have default implicit ARIA semantics. A <header> element that is not a descendant of an article or section element maps to ARIA role=banner, for example. You don’t need to add any ARIA information; it’s included, free, in the HTML element.

These aren’t necessarily implemented everywhere; Steve Faulkner’s excellent keeps tabs of implementation. As an example, <footer> causes Chrome to expose the element with a footer role in IA2, and Firefox to exposes as ARIA landmark role=”contentinfo” (when not a child of article or section elements).

These are useful to people, as we can see in WebAIM’s 5th annual screenreader users’s survey (which encouragingly tells us “For the first time in 5 years of surveys, respondents are more positive about web accessibility progress than in the previous survey”).

When asked “How often do you navigate by landmarks/regions in your screen reader?” (such as “contentinfo”, “banner”, “main”, “navigation”), 26% said “whenever they are present”.

20% thought 1-3 landmarks/regions per page is optimal; 29% thought 4-6 is the right number.

So my advice is: yes, use them – especially the main <header>, <footer>, <nav> and (once per page) <main>. On browsers/ ATs that don’t support them they do no harm. But don’t use billions.


Added 13 May to clear up confusion:

  • Use <header>, <footer> as often as your content requires – only the main header and footer carry implicit banner and contentinfo roles. At a minimum, use them once (assuming you have a page header and footer, that is).
  • Always use <nav> for the primary navigation.
  • Use <main>, but only once per page.

Why does HTML footer take role=”contentinfo”?

Evangelia Dendramis asked me “why use role=contentinfo instead of role=footer for <footer>?”

role attributes are from the Accessible Rich Internet Applications (WAI-ARIA) spec, and not part of HTML(5), although they’re allowed in pages. They’re developed by different groups, and for different reasons. ARIA is a bridging technlogy for any markup language – HTML4, SVG or HTML5 to “plugin” accessibility information that isn’t part of the host language:

WAI-ARIA is intended to be a bridging technology. It clarifies semantics to assistive technologies when authors create new types of objects, via style and script, that are not yet directly supported by the language of the page…

It is expected that, over time, host languages will evolve to provide semantics for objects that currently can only be declared with WAI-ARIA. This is natural and desirable, as one goal of WAI-ARIA is to help stimulate the emergence of more semantic and accessible markup. When native semantics for a given feature become available, it is appropriate for authors to use the native feature and stop using WAI-ARIA for that feature.

contentinfo is defined as an ARIA landmark on a page. It’s primarily there so assistive technology can allow a user to navigate around. The ARIA spec describes contentinfo as

A large perceivable region that contains information about the parent document. Examples of information included in this region of the page are copyrights and links to privacy statements. Within any document or application, the author SHOULD mark no more than one element with the contentinfo role.

This is a good description of a page footer, but HTML5 allows as many <footer> elements as you want:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

The HTML5 <footer> does give “content info” but does so about its parent, which may be one of many <article>s or <section>s. Another element that gives information about the content it’s in is the <address> element, which may (but doesn’t have to) take an ARIA role of contentinfo.

So there’s not a 1-to-1 correspondence between <footer> and role="contentinfo". This is exactly the same as the correspondence as we see between <header> and role="banner". So it’s probably less confusing that the HTML5 element and the ARIA roles have different names.

It seems that the name <footer> was adopted as it was the most common class name found in a billion web pages analysed in 2005 by Ian Hickson, HTML5 editor. Arguably, contentinfo is a better “semantic” name (after all, information about content doesn’t have to be below the content it refers to, which is what “footer” implies), but “footer” is what people were already using. Anyway, the naming of the new HTML5 elements is done now. There’s no use in bikeshedding once the ship has sailed, as Captain MixedMetaphor says.

The HTML5 spec says that a “footer element that is not a descendant of an article or section element” (that is, the footer for the whole page) has a default implicit ARIA semantic of contentinfo. That is, assistive technologies are supposed to infer that role without the author specifying it. Good; that’s the way it should be.

However, until all do, you give a helping hand by explicitly adding that role on the page-wide footer.

Reading List

Apologies for the irregularity of the Reading List at the moment; September and October are autumn conference season and my schedule is bonkers.

Responsive Images

A meeting at Mozilla Paris on how to solve Responsive Images, organised and summarised by Marcos Caceres concluded

  • Browser vendors agree that srcset + DPR-switching is the right initial step forward (i.e., the 2x, 3x, etc. syntax).
  • Agreement to then consider srcset + viewport size after some implementation experience (possibly drop height syntax from srcset spec). If not implemented, Width/Height syntax to possibly be marked at risk in srcset spec.
  • Browser makers acknowledge the art-direction use case, but still think <picture> is not the right solution.
  • Adding new HTTP headers to the platform, as Client-Hints proposes to do, has had negative impact in the past – so Client Hints might need to be reworked at bit before it becomes more acceptable to browser verndors.

So initially, we’ll use something like

<img src="normal.png" 
srcset="retina.png 2x"
alt="otter vomiting">

Browsers that have “retina” displays will choose retina.png as they have 2 CSS pixels to one physical pixel. Browsers that aren’t retina, or don’t understand the new syntax, fall back to the good old src attribute.

WebKit and Blink have implemented (but not yet shipped) srcset, Mozilla is planning implemention now.

Meanwhile, an alternative “srcN” proposal has been put forward by Tab Atkins and John Mellor (excitingly, “John Mellor” was the real name of The Clash’s Joe Strummer). It claims to solve Resolution-based discrimination, Art-direction discrimination and Viewport-based discrimination usecases. Discussion here.

UK Government Web

The Cabinet Office’s Open Standards Board is recommending open standards technology. The first two to be approved are HTTP/1.1 and Unicode UTF-8. Francis Maude, the Minister, allegedly said “open standards will give us interoperable software, information and data in government and will reduce costs by encouraging competition, avoiding lock-in to suppliers or products and providing more efficient services”.

This may not be revelatory to those of us in the web world, but it’s a Good Thing for the nation.

I had the pleasure of hearing Paul Arnett (now of Twitter, previously of talking about the initiative at From The Front conference a few days ago, and thought it was a sign of schizophrenia that the same government that can allow subject experts make a world-leading governmental portal is the same government that disregards experts and its own consultation in wanting to censor the web.

I realise now that it’s the old Tory DNA: the belief in encouraging competition by economic liberalism, reducing bureaucracy, while remaining socially authoritarian and reeling from one moral panic to the other. So no change there.

Standardsy Stuff


Reading List

Here’s your bank holiday reading list!

On citing quotations. Again.

Every so often, the conversation about how to cite quotations in HTML comes up again.

I’ve experimented throughout the years. In the heady XHTML days, I did

<blockquote cite=””>
Blah blah
<cite><a href=””>Your mum</a></cite>

but it annoyed me that I was repeating a URL, and the cite attribute was invisible, anyway, so dropped it for

Blah blah
<cite><a href=””>Your mum</a></cite>

Then, HTML5 came about and changed the definition of the <cite> element to explicitly disallow citing the name of people. This was a mistake: HTML4 allowed it, so it broke backwards compatibility. Millions of WordPress websites used <cite> to mark up the names of commenters, so it made a very common use case suddently non-conforming. Anyway, no validator could possibly know whether <cite>Jane Eyre</cite> was citing the book or the person.

But, anyway, as part of learning HTML5 I was determined to “do it right” so I switched to using

Blah blah
<footer><a href=””>Your mum</a></footer>

because <footer> is explictly allowed inside a blockquote, and the spec says “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”, which seemed highly appropriate.

However, Hixie nixed this idea; apparently, this was for quoting a footer rather than attributing a quotation. (What about quoting a header?). Also, the metadata about the blockquote isn’t actually part of the blockquote.

As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.

Some have suggested

Blah blah
<figcaption><a href=””>Your mum</a></figcaption>

and that’s fine, but requires more markup, and potentially more complex CSS.

The advantage of cite-inside-blockquote is that it’s obvious what refers to what, because the citation is nested inside the quotation. Without CSS, browsers tend to italicise the citation, so it’s visually obvious that it’s not part of the quotation, but it is indented with the quotation as is very common with print. Also, crucially, it’s a very common markup pattern used by authors, as Steve Faulker has showed.

Once again, I propose that the definition of <cite> be reverted to include the real-world use for marking up names of those cited, and that the spec note that cite-inside-blockquote is one way (although not the only way) to link a quotation with the work or the person being quoted.

Also see

Reading List

Responsive images

WebKit has (partially) implemented a new attribute to our ancient chum <img> called srcset that allows authors to send a high-res image only to browsers that have high-resolution displays. It looks like this:

<img alt=… src="normal-image.jpg" srcset="better-image.jpg 2x">

That “2x” thing after the file name means that if a browser has 2 or more physical pixels per CSS pixel (eg, high resolution), it is sent better-image.jpg. If it’s not high-res, or if it’s a browser that doesn’t support srcset, it gets normal-image.jpg. There’s no JavaScript required, and it doesn’t interfere with browsers’ pre-fetch algorithms because it’s right there in the markup.

You can extend it further if you want to:

<img alt=… src=… srcset="better-image.jpg 2x, super-image.jpg 3x">

This implementation doesn’t have the horrible “pretend Media Queries” syntax that sources close to Tim Berners-Lee* called “like, a total barfmare, man”, but this is potentially a great leap forward; it saves bandwidth for the servers, stops people downloading gigantic images that they don’t need, is easy to understand and has graceful fallback.

Let’s hope it turns up in Blink, Trident and Gecko soon.

* “sources close to” is UK newspaper code for “we just made it up”.

Graceful degradation of SVG images in unsupporting browsers

Very very clever: SVG and <image> tag tricks. (Yes, <image> which the HTML5 parser aliases to <img>.)

Microdata / RDFa / “semweb” shizzle/ SEO

In The Downward Spiral of Microdata, nice Mr Manu Sporny predicts the death of “HTML5″ Microdata and the triumph of RDFa Lite now that both WebKit and Blink have dropped support for the Microdata API (which allowed JS access to Microdata).

Co-incidentally, Mr Sporny is an inventor of RDFa Lite. Personally, I don’t care which triumphs – now only Opera Presto supports the Microdata API, there is no technical reason to prefer one to the other (in fact, as Facebook supports RDFa and not microdata, so you could argue it has greater utility).