Archive for the ‘HTML5’ Category

File Under: HTML5, Multimedia

Netflix Plans to Ditch Silverlight for HTML5

Image: Screenshot/Webmonkey.

Netflix is looking to ditch its Silverlight-based video player for an HTML5 version that would work pretty much anywhere, but HTML5 isn’t quite up to the task just yet, according to the company.

Microsoft has already put Silverlight — once Microsoft’s much-hyped alternative to Adobe’s Flash Player — out to pasture. While Microsoft will continue to support Silverlight for some time, it will be retired come 2021.

That gives Netflix and others eight years to come up with an alternative. For its part Netflix wants to use HTML5, but HTML thus far lacks some key components Netflix needs, namely a way to generate media streams for playback, a cryptography protocol and, most controversially, DRM for streaming media.

All three components are, however, already draft proposals at the W3C and will likely be an official part of HTML before Silverlight disappears. The three things Netflix needs to bring its video player to HTML5 are the Media Source Extensions specification, the Web Cryptography API and the Encrypted Media Extensions specification, better known as DRM for the web.

Netflix has been working with Google to add support for all three — which the company refers to as “HTML5 Premium Video Extensions” — to Chrome and Chrome OS. For now the new Netflix player for Samsung’s Chromebook “uses the Media Source Extensions and Encrypted Media Extensions to adaptively stream protected content.”

Chrome still lacks support for the Web Cryptography API, so Netflix has developed a Pepper Flash plugin to handle that part of the equation for now. Eventually the company plans to remove the Flash element as soon as Chrome lands support for the Cryptography API.

At that point, says the Netflix blog, “we can begin testing our new HTML5 video player on Windows and OS X.”

File Under: HTML5, Web Standards

W3C Drops ‘hgroup’ Tag From HTML5 Spec

Image: Screenshot/Webmonkey.

If you’ve been using the HTML5 hgroup tag, now would be a good time to stop. The hgroup tag is in the process of being removed from the W3C’s HTML5 specification.

While the official reason for hgroup‘s demise is the lack of support for hgroup semantics — the W3C requires two “reasonably complete implementations” — hgroup is fraught with accessibility problems and lacks many compelling use cases.

The hgroup tag was intended to be a way to group h1-h6 tags, for example a header and a subheading, but the semantics behind the tag mean that only the first header in an hgroup is visible to any accessibility API. As Steve Faulkner, co-editor of the HTML5 spec, writes on the W3C mailing list, this “effectively removes any notion of a subheading semantic for users and any way for it to be conveyed via an accessibility API.”

In other words hgroup ends up being semantically no different than a div tag, which is why Faulkner called for hgroup to be removed from the spec in the first place. As of this writing it’s still there, but Faulkner says he’s “working on the edits” (which will include some advice on how to handle groups of header tags).

So what should you do if you’ve used hgroup in your code? Well, if you can, consider removing it. But the browser support — which is limited to parsing and CSS — won’t likely change. And it’s also possible that some compelling use case will come up that motivates the W3C to add it to the HTML 5.1 spec (one hopes with better semantic rules) and browser to support it. In the mean time though, slowly step away from the hgroup and no webpages get hurt.

File Under: HTML5, JavaScript

Dropzone.js Adds Drag-and-Drop File Uploads to Any Site

New web technologies tend to travel a trajectory that moves from “amazing demo with fiendishly complex code”, to “very cool product feature” and finally to open source library that takes 10 seconds to add to your page. Today’s cutting edge demo is tomorrow’s jQuery plugin.

Take drag-and-drop file uploads for instance. The HTML5 File API ostensibly solves one of the most common complaints from web app users — why can’t I just drag and drop files like I do everywhere else? Well, then you could, but it wasn’t easy to build.

Then drag-and-drop file uploads became part of Gmail, which meant it was only a matter of time before a jQuery plugin appeared. In fact there are several jQuery plugins that cover this ground, but one particularly nice newcomer is Dropzone.js.

Dropzone.js makes it dead simple to add a drag-and-drop file uploader to any website, complete with previews of uploaded files. Dropzone also supports the traditional file-picker uploading as well; you don’t have to drag and drop.

Dropzone supports most modern web browsers, including Chrome 7+, Firefox 4+, IE 10+ and Safari 5.

If you’re interested, head on over to GitHub and grab the source code (obviously the plugin requires jQuery, but there is a version that will work with RequireJS as well). Also be sure to read through this Hacker News thread for some similar projects and possible alternatives for those who’d like to avoid the jQuery overhead.

File Under: HTML5, Web Standards

Video: How ARIA’s Landmark Roles Work

We’ve written a lot about how you can make your website more accessible with WAI ARIA roles, particularly ARIA’s Landmark roles. As a bonus you can also use the roles to style elements.

Hopefully you’re using ARIA roles given that they’re such a simple, easy win with pretty much no downside, but have you ever wondered exactly how ARIA roles help people using assistive devices? In the video above accessibility consultant Leonie Watson gives a quick demo of exactly how screen readers benefit from landmark roles.

If you’re sold be sure to read up on our earlier coverage, including this post on how to add landmark roles to your site. The site Watson mentions in the video is also a great ARIA resource. Also have a look at accessibility guru Steve Faulkner’s recent post over on the The Paciello Group blog.

And note that, as Faulkner writes, “over time the necessity of explicitly assigning landmarks will lessen as browsers build in ARIA landmark roles to newer HTML element semantics.” For now though, even if you’re already using the new elements, it doesn’t hurt to add the roles as well.

File Under: APIs, HTML5, Web Standards

Improve Your Website’s Accessibility With the W3C’s ‘Guide to Using ARIA’

WAI-ARIA, the W3C’s specification for Accessible Rich Internet Applications, provides web developers with a means of annotating page elements with the roles, properties, and states that define exactly what those elements do. The added definitions help screen readers and other assistive devices navigate through your website.

We’ve looked at how you can use ARIA roles to not just improve your site’s accessibility, but style elements as well, but now you can get the official word from the W3C. The W3C has published the First Public Working Draft of Using WAI-ARIA in HTML.

The W3C’s guide goes beyond the ARIA Landmark Roles that we’ve covered in the past, offering suggestions on how ARIA can help with HTML5 apps that load dynamic content or build entire interfaces with JavaScript. In fact, this is where the true power of ARIA comes into play since there is often no other way for assistive devices to get at your application’s data.

Unfortunately not everything in the ARIA spec works in every screen reader. Support for the landmark roles is pretty solid, but much of the rest remains a work in progress. As always there’s no substitute for real world testing.