HTML5 and CSS3, Second Edition

Accessibility

Our users must be able to interact with our websites, whether they are visu-

ally impaired, hearing impaired, on older browsers, on slow connections, or

on mobile devices. HTML5 introduces some new elements, such as <audio>,

<video>, and <canvas>. Audio and video have always had accessibility issues,

but the <canvas> element presents new challenges. It lets us create images

within the HTML document using JavaScript. This creates issues for the

visually impaired but also causes problems for the 5 percent of web users

who have disabled JavaScript.^1

Cake and Frosting

I like cake. I like pie better, but cake is pretty good stuff. I prefer cake with frosting

on it.

When you’re developing web applications, you have to keep in mind that all the

pretty user interfaces and fancy JavaScript stuff is the frosting on the cake. Your

website can be really good without that stuff, and just like a cake, you need a foun-

dation on which to put your frosting.

I’ve met some people who don’t like frosting. They scrape it off the cake. I’ve also met

people who use web applications without JavaScript for various reasons.

Bake these people a really awesome cake. Then add frosting for those who want it.

We need to be mindful of accessibility when we push ahead with new tech-

nologies, and provide suitable fallbacks for these HTML5 features, just like

we would for people using Internet Explorer.

Deprecated Tags

HTML5 has introduced a lot of new elements, but the specification also dep-

recates quite a few common elements that you might find in your web pages.^2

You’ll want to remove those moving forward.

First, several presentational elements are gone. If you find these in your code,

get rid of them! Replace them with semantically correct elements and use

CSS to make them look nice.

• basefont


• big


• center

1. http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html


2. http://www.w3.org/TR/html5-diff/

Chapter 1. An Overview of HTML5 and CSS3 • 6

Download from Wow! eBook <www.wowebook.com> report erratum • discuss