Hi, everybody. Welcome to session 349, Creating Rich User Interfaces for Web Content in Safari. I'm Beth Dakin. I'm an engineer on the Safari and WebKit team, and I would like to apologize in advance for my amplified sniffles and potential sneezes. Before we begin, I would like to get to know you all a little bit better. So I'd like a show of hands for everyone in the room who considers themselves to be a professional or really advanced web developer.

Okay, we have a lot of you. You know more than I do. But I'm going to tell you about new things. How about novice web developers or just for fun, people who play around with web development? Okay, a few of you too. How many of you attended the WebKit overview session this morning? Fair number.

How many of you have designed a web page, a widget or another piece of web content specifically with Safari or WebKit in mind? A lot of you, okay. And finally, how many of you have downloaded a web kit nightly? Nice, excellent. I think this presentation will really address all of those groups.

For the more advanced web developers, I'll be telling you about new features that you can add to your arsenal of tools. And for the more novice developers, none of this stuff is really that difficult to understand. In fact, that's the beauty of some of these features, that they achieve great effects in your web content with very simple syntax.

So all of the features that I'm going to tell you about today are really about adding sophistication to your user interface. A lot of these things are whizzy effects that were previously impossible in web content, or only possible with a lot of really complicated JavaScript, making these effects more prohibitive for more novice users. But now these things are really elegant and simple in standards-friendly HTML and CSS.

So specifically, we'll start by talking about a really exciting new feature in WebKit, CSS transforms. This is a feature that was pioneered here at Apple, and it's undergoing the standardization process now. It allows you to apply any affine transform to any element in your page, and it's really cool.

Then I'll be telling you about transitions. Transitions are a really simple form of animation that you can do strictly through CSS. The syntax is incredibly simple, and it just allows you to animate from one state to another instead of quickly jerking to that new state. And like transforms, transitions were pioneered here at Apple and are now undergoing the standardization process.

Then we'll talk about fonts and text. Even something as simple as the text on your page can really become a lot more sophisticated with some of our new features. Specifically, I'll be telling you about web fonts, which are a part of CSS3, and a few new styling techniques.

And finally, we'll talk about web accessibility. I found that a lot of developers in general, not just web developers, aren't super familiar with the idea of accessibility. But basically, the idea of web accessibility is that the content that you create should be accessible and usable to everyone, regardless of any potential disabilities.

So in some cases, that means making your website and web content more keyboard accessible for users that may have mobility impairments. And in some cases, that means making your web content work better with a program like a screen reader that attempts to read the web content to a user that has trouble seeing it or can't see it at all.

So everyone in this room, I feel confident, is familiar with Safari. It's the built-in browser on Mac OS X. And I know that a lot of you seem to have downloaded WebKit Nightly's, and a lot of you were even at the session this morning about the WebKit overview. But I'm going to give you a very brief overview now, just because I found that a lot of people who have downloaded WebKit Nightly's still struggle with the concept of exactly what WebKit is.

WebKit is the engine that sits underneath Safari. It's a framework that takes care of dealing with all of the web content that you create. So this is what takes care of downloading, loading, parsing, interpreting and displaying all of your HTML, CSS and JavaScript and making sure it's correctly interactable and all of that good stuff. So WebKit is the part of Safari that deals with what you create.

One of the many awesome things about Safari is that it is currently available on three platforms, Windows, Mac OS X, and iPhone, and WebKit is the same everywhere. Of course, there are minor platform differences to account for things like a touch being different from a click, and all of these applications sometimes have different release cycles, so the exact version of WebKit they release is sometimes slightly different, but there are documentations for the fine details. The main point is that you can remain confident that if you spend time making your site work in one version of Safari, it will most likely, almost certainly work in all of them because WebKit is the same everywhere.

And finally, WebKit is open source, completely open source. The code is available, but we have a large community around the open source project as well. WebKit.org is really the portal for our open source project. You can get to anything that's open source from there. We have a really active community.

And also, if you are really interested in the features that I'm telling you about today, well, if you follow our blog, then you would have known about all of these features for a few months or even a year now anyway, because we always post on our blog when we have cool new features in the engine. So it's a really great place to keep in touch with us.

So first I'm going to talk to you about CSS transforms. As I mentioned earlier, this is a feature that allows you, via simple CSS syntax, to specify any affine transform on any element in your page. So just to go back to high school math, affine transforms are translate, scale, skew and rotate, all in a two-dimensional space. These are actually this feature, all of these things are already in a version of Shipping Safari. They're already in Safari 3.1, which is what mostly everybody is using anyway, which is really cool.

My friend recently went to Hawaii and she took all these pictures and asked me to help her put together a website for her to show all of her friends and family all the pictures that she took. So I whipped this really incredibly simple website up that doesn't have much jazz to it.

I wanted it to look more like real-life photos, so I gave the photos some really simple CSS, just some padding and a black border to get that sort of white border with a black edge thing. To make it look more like a photo in real life if you had it printed out at the drugstore. But this layout doesn't look anything like real life, right? It's just like a jumble of photos.

And I achieved it just with one line of CSS float left, which just had all of the photos lined up like this. But again, this talk is about adding sophistication to your user interface. So we're going to make this a lot more sophisticated with CSS transforms. And my goal here with the particular sophistication that I wanted to achieve was to create something that looked like real life. I like the way I have the white and black border here. So.

First, we're going to start with translate. Translate is a really simple transformation. It simply shifts an object. You can shift in just the horizontal space with translate X or just vertically with translate Y or in both dimensions at once with translate. The CSS property accepts a length or a percentage where the percentage represents that percentage of the border box of the element.

This is the CSS. Again, you can see the CSS I added to the image already that I mentioned with the border to give it the white border with the black edge. And then I just applied this dash webkit transform translate X. Don't let the dash webkit prefix scare you. Some of you may have seen this before. But this is just something that we always do, all browsers do, with experimental features. This is just to symbolize that this is still a draft version of this feature.

It hasn't been finalized in any official specification. Or the official specification has not been finalized. So Firefox does the same thing with the dash mods prefix. Okay, back to the code. We just are going to translate by 20 pixels just in the X horizontal dimension. So that's going to take this photo and just move it slightly to the right.

So if we look back at that CSS, what I'm going to do is I'm going to use JavaScript to apply this incrementally to my series of photos so that each photo is moved 20 pixels farther to the right than the last. And without CSS, I can achieve this look, which already is a big improvement, I think, over what I had before. And it looks more like a bunch of photos sort of spread across on a table.

So scale is what I'd like to talk about next. Also very easy to understand, just changes the size of an object by whatever scale factor you specify. You can stretch an object horizontally with scale X, stretch vertically with scale Y, or stretch evenly in both dimensions with just scale. A negative input will flip an object and a fractional input will shrink it.

So here I'm going to use my WebKit transform to scale with a scale factor of 0.15. So that's going to create this tiny, tiny, tiny photo. So it's going to look like this. I added in a translation here, though, and I'm going to do my same trick where I apply this translation and scale factor incrementally with JavaScript so that each photo will be 20 pixels farther to the right than the last one and slightly larger. So that's going to take the user interface that I created before and create this sort of three-dimensional effect using scale.

So now instead of looking like I have a bunch of photos spread out on the table, it's sort of like they're standing up and sort of going backwards from where I'm sitting. Rotate. Also very simple, it just rotates an object by a specified angle. The CSS property accepts the CSS angle in degrees or radian units.

So here I am applying a negative 30 degree rotation, which is going to rotate my image 30 degrees counterclockwise since it's a negative angle. And that's just going to give me this jaunty photo. And I'm going to do the same thing again where I apply this transform incrementally using JavaScript and changing the angle slightly every time. And I can get this really cool pile effect of all of my photos.

Finally, SKU. SKU, I think, is a little -- it's a little weirder. It's a little harder to wrap your brain around, I think. It just shifts an object at a specified angle. So this first pink box is SKU'd in both the horizontal and vertical dimensions equally. And the second one is SKU'd just with SKU X, just horizontally, and the last one is SKU'd with just SKU Y.

So if I just apply a simple negative 15 degree skew to my image, I'm going to get this little parallelogram sort of looking image. So when I first was messing around with this, I saw this first test that I ran, and I kind of struggled thinking like, oh, how can I turn this into some kind of real-world looking photo user interface? Like, I don't think skew's right for this. But I started chaining together these transforms, just messing around with them, and I really quickly came up with something that I actually thought was pretty cool.

So I'm going to show you what I did. First, I added a negative 15 degree rotation along with the skew, so that sort of tilts it up a little. And I started to think that maybe I could line up the photos in a row like this. So I added in a translation and a second photo, and I think it sort of gets a three-dimensional effect, kind of like you got with scale. And I think it's easier to see when you add in even more photos.

They sort of look like they're lined up like Rockettes about to do a kick line. But I really think, you know, the three-dimensional thing here is still a little bit of a stretch, more so than the scale version. So I added a box shadow. This is another really cool feature in Safari that adds a shadow to any element in your page.

Really simple syntax. I just specified a color for the shadow. Here I'm using black with some opacity. And then a left and right offset and a blur radius. So that's going to take these photos from looking like this to looking like this. And here I really think we've achieved another, you know, three-dimensional. Real-world looking user interface with, like, one line of CSS.

So one of the really awesome things about transforms is that they are so easy to use that people are sort of playing around with them already, even though our implementation is just at the beginning and it's just undergoing the standardization process. This is a cool example, I think. The developer over at cupodev.co.uk made this little analog clock using CSS transforms and JavaScript animations.

I emailed him recently asking if I could use a screenshot of his site in my presentation. And he explained to me that he decided to make this clock after he learned about transforms because there's an almost identical clock on the front page of the BBC website. And it's developed with Flash. And he just thought that it seemed like such a simple thing. You should be able to do it with simple HTML, CSS and JavaScript. It should be something that's straightforward. And so he made his own version. the code is much simpler and it's really cool.

Okay, CSS transitions. CSS transitions let you animate a change in state. So, let's say you wanted this ball on the other side of the slide. Instead of just jumping there, we can easily make it look like it rolled across the slide. So in the context of this photo page we've been building up, one of the limitations of all of these different user interfaces that we've created with CSS transforms, compared with the original one that I showed you, is that we need to add a way to navigate through these photos, right? Right now we can only see one photo at a time, and in my original sort of sloppy-looking implementation where I just floated all the photos to the left, we could see them all at once at least and just scroll through the document.

So the most straightforward thing to do, I think, would be to add an on-click handler and have the user click through the photos. So a common thing to do in a situation like this would be to have the on-click handler change certain CSS properties. So I might want it to set the display property of the image that you clicked on to none. So you would get this really quick jerky movement if you did something like that, like from here to here, and that's it.

So something else I could do is... I don't want the image to disappear entirely. Maybe I want it to stay on screen somewhere. Maybe I want it to get a little bit smaller using a fractional scale factor and maybe jump to the upper right-hand corner of the screen. So that would give us another sort of jerky movement like that really quick. So this is exactly what CSS transitions let you do more elegantly in a more sophisticated way.

You can animate from an old state to a new state over time. If you're familiar with animations from the graphics world, you can think of transitions as an animation with exactly two keyframes, where the two keyframes are the beginning state and the ending state, and WebKit takes care of everything in between in terms of the actual animation. So let me show you just how easy this is to specify.

First, you want to specify a transition property. This is a property in CSS that you want to animate whenever it changes. So for instance, there are all kinds of things that you could animate. To give you just a few examples, you could animate border size, rotation, rotation, or opacity.

So if I want to specify an opacity transition, I would just on my image tag declare WebKitTransitionPropertyOpacity. So this is saying any time the value of the opacity property changes for any of my images, since I've specified this with the image tag selector, whenever that changes, I want it to animate instead of just immediately changing to the new state. Then you want to specify a duration. This will default to zero, so change it or it will be just the same as not defining a transition at all. So here I've changed it to three seconds. I want a nice long transition.

And finally, if you want, you can specify a transition timing function. This will default to ease, so you don't need to specify anything here. And there are a lot of other built-in functions like ease in, ease out, ease in-out, linear, that will give you a slightly different look in terms of exactly how the animation proceeds.

And if you really want to, you can even provide your own cubic bezier as a path for your animation to follow. So here's an example where I'm simply changing the default timing function from ease to ease in. So transitions are really best understood seen, so I would like to invite Vicki Murley, our evangelist extraordinaire, on stage to show you some transitions.

Thanks, Beth. So Beth has given you a great overview of what's possible with CSS transforms and transitions. So now let's look at a concrete example. So if we load up this first example here, and we take a look at the code that we used to implement this example, It's really pretty straightforward. As you can see, there's not a whole lot here.

I've got a couple CSS declarations for the body, the heading on the page, and the images on this page. I've got some HTML markup at the bottom that shows the body and my heading. And in the middle here, I just have one JavaScript function to stack up these photos.

And as Beth said, all that we're doing here is we have an array of our photos, and as we go through that array, we create an image element for each item in the array. We have a string that we're using for our transform. We're setting the attributes on our photo as we go through the array.

and eventually we append that photo to the document. And then we're starting at a rotation of negative 30 degrees, so maybe about 10 o'clock, and we're incrementing by 5 degrees as we lay out these photos. And when we arrive at 30 degrees, we reset so that we don't end up with any photos that are upside down. So in practice, if we inspect this element, Oh, it's not enabled.

We're not going to do that. You would see that each of these, we have a bunch of image tags in this document that have the appropriate CSS settings that I just went over. So, right now, there are no effects associated with this document. And if we wanted to, since this looks like a real-world stack of photos, one effect that we might want to add to iterate through these photos is sort of, if I wanted to pick up these photos and kind of toss one over to the upper right-hand corner. So, that's the functionality that I'm going to add during this demo. So, again, taking a look at this code.

There are three very simple steps that I am going to do to add this effect of picking up the photo and tossing it off to the corner. The first thing I'm going to do is add a few CSS properties to this image tag. As you can see, I've added the WebKit transition property property. And here I'm specifying which properties I would like to animate. In this case, WebKit transform top and right.

I've also specified the duration, which should be one second. I could have specified different durations for all three of these properties, like one second for the transform, three seconds for top, and four seconds for right. But that doesn't really make sense because I want to make just one cohesive animation up to that upper right-hand corner. So I want them all to be one second.

The next thing I'm going to do is add a function here at the bottom. Many of you are probably familiar with animating CSS properties, so this will probably look very familiar. Here, I'm just saying, when I call this function twirlAway, I want to set my transform to rotate 360 degrees, I want to scale down a little bit, and I want to set the top and right attributes to 5, so that that photo ends up 5 pixels from the top and 5 pixels from the right of the screen. The last thing I have to do is add my event handler. Before I append this element to the document, and all I'm doing is saying, when I click on this photo, call my function down below twirl away. So I'm going to save.

This is a photo of this in Safari. And now you'll see that when I click on these images, they have a great rotation up to the right-hand corner. I also wanted to show you, I'm going to change this duration to be a little bit longer, to show you that I can also do multiple animations at once. I don't have to wait for one animation to finish for the next one to begin.

So that's our first example with our stack of photos. Let's look at one more example with this example that Beth went through with our photos that are sort of stacked on their side and in a row here. So again, if I wanted to look through these photos, maybe I want to lift one out of the stack and have it scale up a little bit and face the user. So again, looking at this code-- I'm going to make just three changes, just like I did last time. The first thing I'm going to do is add my CSS properties.

This time I'm specifying for a WebKit transition property. I'm just saying all. So any properties that can be animated will be animated if you use this shortcut, all. My transition duration is half a second here, partial seconds work. And I set my WebKit transition timing function to ease in/out, different from the default.

Next, just like last time, step two, I'm adding some functions here to say pull from stack, sets my transform, basically turning it towards me, the rotation is zero degrees, the skew is zero degrees, and I'm scaling it up a little bit. Beth Dakin, Vicki Murley, Alice Liu Next, just like last time, step two, I'm adding some functions here to say pull from stack, sets my transform, basically turning it towards me, the rotation is zero degrees, the skew is zero degrees, and I'm scaling it up a little bit.

Lastly, step three is adding the event listeners. Took up this functionality. MouseOver is going to pull the photo out of the stack, and MouseOut will return it to the stack. So saving, and-- Do not reload. Reloading. So now when I mouse over these photos, you can see that they're really quickly just moved right out of this stack here.

And also, as you can see, I can interrupt these animations like right in the middle. I don't have to wait for one to complete before I sort of start the next one. So maybe I can't decide which one of these photos I want to look at. Oh, I've chosen that one. So that gives you a great overview of what's possible with just a few lines of code with CSS transitions, and I'm looking forward to seeing some great web pages and web applications that use this technology. Thank you.

Thanks, Vicki. That was awesome. Can we go back to slides, please? So if you think that's cool, there's even more animation available in the new iPhone version of WebKit. And if you want to learn more about that, you should attend a session tomorrow all about transforms and animation. It's a great talk. It's tomorrow at 3:30 in Presidio, I believe. And it's super cool.

Images are time-consuming from your perspective. If you're more of a novice and you aren't really familiar with Photoshop, there's sort of a large amount of time that you need to put into just learning how to use image editing software. It can be difficult to use. And even if you are an expert at it, it's still more difficult to create an image in image editing software than it is just to type in the text that you want.

If you have a lot of photos representing text on your page, unless somebody's printing out your site using a really high-quality printer, it's going to become difficult to read. The text will be imprecise. Localization becomes an issue. If you want to make your web page available in many different languages, then in addition to translating all the actual text on your page, you need to generate new images for all of these languages that you want to support.

Finally, accessibility is an issue. Sure, if you use an image tag, the actual image element, then you can use an alt attribute, which is okay. If your alt attribute reflects the text that's written in the photo, that will work okay. But what's really a problem is when you're using images as background images.

And actually, the examples that I showed you at the Zen Garden are doing just that. They plugged into the content by using those images as background images. And a screen reader has no way to know. That a background image has text in it that's worth reading. So that's text that's going to be completely skipped over. There are all of these hacks out there to work around this problem, but really that's what they are. They're hacks. So it would be really better if you didn't have to always resort to that as a technique.

So here we come to CSS3 web fonts. This is actually a feature, the idea of this feature has been around for a really long time, and only recently was the logjam broken in terms of coming up with an implementation of it that everyone could agree upon. This is a part of CSS3. It's already available in Safari 3.1. This lets you link to and retrieve actual font files within a style sheet.

So one thing that you need to be careful of when you use this feature is that you need to make sure that you're using it with fonts that you're allowed to use. All fonts come with licenses attached to them, their intellectual property. You can't pick up any old font and use it in your web content now that web fonts is implemented. But that being said, there are a lot of fonts available out there that are free and available for use in this way. I grabbed a number of them from myfonts.com when I was messing around with this feature.

So I'm going to show you how to use it. The font that I picked, I wanted to add this to my photo page because that text is really dragging us down now that we have this really cool layout and this really cool way to interact with it. We just have this Times New Roman text that says "Life in Maui." So I wanted to make that better.

So I grabbed this font called "Glasscrack" off of myfonts.com. It was designed by Ray Larrabee. He has a lot of other great and free fonts available, some that aren't free too, but they're all beautiful. So the font's actually called "Glasscrack." So I specified this font family name "Glasscrack." I could have called it anything, but I decided just to keep the actual name of the font. It's in my @fontface declaration. And then I provide a source URL for where I've hosted it on a local server, and I specify what format it's in here. It's in TrueType format.

And then I can use it in my CSS anywhere, the same way I would use any other font family name like Helvetica, which is listed as the fallback for this particular font. So that's going to take my page from this plain old Times New Roman Life in Maui text to this much cooler text that really fits in a lot better with the theme that I have here.

So I mentioned that I wanted to talk about a few other text styling techniques, and these are all new and cool things that make the idea of using text much more appealing because you have so much flexibility with altering it in CSS. So text stroke is what I would like to talk about first. This is a really simple CSS property that lets you specify a color and width for the outline of a glyph, which is the stroke.

So here I've changed this Times New Roman A glyph to have a pink stroke. You could also change the width of that stroke. It would not affect the metrics of the font, just the thickness of the outline. Finally, you can specify fill color. Here I've changed it to blue. If you don't specify fill color, then the fill will default to whatever the color property is set to, which will default to black if you don't set it to anything else.

So here I'm going to add some text stroke to my Life in Maui text. I'm going to make the stroke, the outline, be one pixel and dark slate blue, and I'm going to fill it with yellow-green. So that'll take us from here. and Sarah Kuhn, and I'm going to show you how to add depth to your web application. Thank you.

Next, I'm going to add a little text shadow just to give it a little more oomph. This feature has been around in Safari for ages. This originally shipped, I think, with Safari 2.0, but it's still awesome. And it's a lot like box shadow, which I showed you earlier. I just specify a color for the shadow, left and right offset and a blur radius. So that's just going to add a little extra dimension from here to here. So this effect is a little subtle. I'll show it to you again. It goes from here to here.

So one of the really awesome things about this feature is that once I started looking through all of these fonts at myfonts.com, there are other resources out there, too, of course, but that's just where I happen to be looking. I found all these awesome fonts, and I had a really hard time even deciding on one to use for this layout.

Another great example is this font, which is called Starburst, designed by Dieter Steffman. And here's another cool one, also designed by Ray Larrabee, that I really like also. So a lot of these fonts are really inspiring and give you a lot of flexibility in terms of if you want to stick with true text on your web page instead of using images for the cool pieces of text.

Okay, so we've talked a lot about visual whizziness and all this kind of eye candy and the new hotness and, you know, the awesome, cool new things. And the important thing to remember is that not all of your users experience the user interface in a way that they benefit at all from this visual whizziness. When you're dealing with accessibility, it's other kinds of whizziness that your users really benefit from.

And a user interface does not discriminate. It's just as user. So it's really important to keep all of your users in mind if you want a truly sophisticated user interface. So to tell you some more about web accessibility and the new whizziness that we've added there, I would like to invite my friend and colleague, Alice Liu, on stage.

I'm a Safari and WebKit engineer. I'm going to talk to you a little bit about web accessibility. I know a lot of you are professional web developers and some of you are novices, but even if you do this for a living, you might not be very familiar with this concept. So let me give you -- let's just start with a slight introduction.

Accessibility features on OS X mainly serve users who have some kind of impairment that makes it difficult for them to use a computer the way that other people like me and you use a computer. This, there are several kinds of impairments that can help, where accessibility can come in to help. For example, if a user has a hearing impairment, they might need visual alerts instead of the audible alerts like beeps that you and I are so used to hearing.

Also, any video that is captured on a Mac has the ability to be closed captioned. If a user has a physical impairment, like a manual dexterity impairment, they might not be able to use a mouse or other input device, and so full keyboard access can really help someone out like this.

Visual, many of you might have visual impairments. I know I do. And they can range from minor to severe. And so if you're one of those people that has trouble making out a lot of detail, the Zoom feature on OS X can help you out. Some may have very severe visual impairments, and so they might need to use a screen reader to interface with the system. A lot of these, all of these features are built into OS X, all these features and more, including the screen reader.

We're actually kind of unique in that, well, maybe not too unique, but it's not always a given that a screen reader is provided on a platform. So Apple feels really great about providing this as built-in because sometimes these programs can cost up to $1,000. This is great for you because you can try it out on your website, on your applications, without making any kind of investment at all.

So, our built-in screen reader called VoiceOver is actually more than just a screen reader. It's more like a spoken interface because not only is the screen read to you, but also other stuff like the status of activities and the boundaries of objects are also communicated. So, it's really a spoken interface to the whole system.

So, if you were to write any app or any plain old web page, if you were to use VoiceOver on that app or web page, VoiceOver would already know a bunch of stuff to say about it and communicate that to the user all without you doing anything. So, how does it know how to do this? Well, for apps, the application framework provides the basic information for apps and the stuff that they're made of, like windows and views and buttons, stuff like that. Similarly, WebKit provides this basic information for web content and its building blocks elements. So, we read the tags and we're able to know what to say about it based on the tag and the info in it.

So you might not have tried VoiceOver before, or maybe you accidentally turned it on and then turned it back off because you were scared of the voice. But we're going to play a little game. We're going to try-- I'm going to present to you clips of VoiceOver working on websites and see if you can guess the website. So shout out your answers when these things come up. The first one. Interact with HTML content. Link, get home delivery. Link, login. Link, register now. Home page. Link, my times. Link, today's paper. New York Times, great. That was-- I guess that one was easy.

Okay, well, they'll get a little harder. Oh, I'm sorry, I was supposed to switch the slide. But yes, New York Times. Okay, one more. Visit a link, Gmail. Link, Calendar. Documents. Link, Photos. Google? Well, not exactly. It's actually Google Docs. You're kind of just seeing what's on top, but the main content is not apparent to you immediately. And one more. HTML content has keyboard focus. Main HTML content.

Well, actually, it's a site that was made with a plug-in only. So if you chose to create your site with only a plug-in, and you chose not to add any accessibility information on top of it, then you're going to get this kind of experience because you're not going to get any of the behavior for free from WebKit. There is a way to build accessibility information into plug-in sites, but it's actually not a very popular practice on the web. So out in the wild, you usually will be left with no usable information.

Okay, so now that you got a little taste of what it's like to use VoiceOver on a website, you might have noticed that it's kind of hard to, except for the New York Times, it's kind of hard to know, like, what exactly am I looking at? I'm only told what's at the top. And that's really hard for some users.

So, you might not really even care. If you're a professional web developer, you might be, I'm sorry. If you're a professional web developer, you might be more concerned about making things look great instead of about accessibility. But let me share with you some reasons why you should care about accessibility. The first reason is probably the most obvious, that some users are impaired, and this is the only way that you can give them a web experience, a better web experience.

And it might not really appeal to you. That one might not really appeal to you. So think about this one. There's an aging user base of web users out there, and those users might rely on your site for any particular reason. But as they grow older, their manual dexterity might be decreasing, so they might not be able to use a mouse. Or their visual acuity may be decreasing, so they might have to soon use a screen reader or Zoom feature. Those users depend on your site, and you want to adapt with them as they adapt.

Another reason is non-human users. So search engines and bots and automation systems all tap into accessibility information of your web content in order to gain information about it. And if you care about accessibility, you might end up with better search results, better hits. So all of these things have to do with increasing your market share.

And market share and viewership as web developers, that's pretty important to you, right? Well, even if you don't, your competition might or they might already be doing it without you even knowing, so you might want to look into that. Another last reason why you should care about accessibility is because you might find that it's possible to get into some legal trouble if you're big enough.

So, Target, the discount retailer, once offered a deal that was only available on their website, but it wasn't available in their brick and mortar stores. So, this would have been fine if their website were accessible, however, it wasn't. And so, you get, a situation was created in which discrimination happens. So, they found themselves with some legal trouble.

So -- so -- so web content has really changed, from yesterday. We used to find that web content was pretty static and that most -- most pages read in a document form. And it was like an essay mostly, and there wasn't a lot of dynamic content. Well, the way a screen reader works, works great with the way that the Web used to be. So it walks through the DOM.

So it starts at the top and you walk element by element and -- in order to navigate through. So the way that the Web used to be and the way that a screen reader works, that's -- that's really -- they're really compatible in that way. However, you are at this talk about rich user interfaces, and you actually came here to -- to see a lot of whizzy stuff, and you weren't expecting to talk about accessibility.

But this is -- this is a very pertinent issue about how rich -- rich Internet applications interface with -- interface with accessibility. So web content has really evolved, and now we find ourselves -- you -- you find yourself making sites that move and interact in a multitude of ways. And there are a certain set of users out there that aren't able to enjoy this.

Well, so -- so I know that -- I know that you spend a lot of time making your site look great, because that's really what you care about. And -- and I think that's -- I think I'm sorry. So we know that you spend a lot of time making your site look great. And you might say meh to the idea of caring about accessibility instead of making your website very rich and cutting edge.

But you don't have to leave one and pursue the other. They're actually-- they're goals that can coexist. And the way that we can do this is with new web technologies that browsers, including browser engines, including WebKit, are implementing. And I'm going to tell you about those technologies in a minute.

But the basic idea that I want you to take home today is that cutting edge doesn't have to mean inaccessible, because we want you to access enable what you already have and build on top of your existing work. You can still have those whizzy features and have great and accessible interface to them.

And you won't have to overhaul your structure. One thing I want to remind you about is you may be familiar with the practice of creating a separate site for accessibility and something that's separate from your main site. Well, separate is not equal. And people who are concerned with web accessibility will recommend that you not practice in this way.

Well, let's get into how we're going to improve accessibility of rich sites. So getting around in web content is increasingly harder if you have a bunch of content on your site. And so we can show you ways to improve keyboard navigation with new technologies. HTML5 adds the focus event on every element.

And this will allow you to better-- to better configure how keyboard navigation moves around on your page. And before, you were only able to focus form elements and links. But now you can focus anything, including divs and images, which you probably tried to work around before. But now they can be directly focusable.

The way that you can configure focusability is through the tab index attribute, which is now also available on every element. When you specify tab index at all, it makes it focusable by script and also by mouse clicks. If you specify a negative input to tab index, then you remove it from the tab order.

So there's lots of ways in which you can use this to your advantage. And this practice benefits a lot of users. I know some of you are power users. And power users especially love to have great keyboard-- keyboard navigation and full keyboard access. So this is going to be something that benefits many users and not just impaired users.

The main thing I want to talk to you about today is ARIA. And ARIA is an emerging standard. An emerging standard. And we've started on our implementation of ARIA as well as other browsers have too. And ARIA stands for Accessible Rich Internet Applications. And the main thing about ARIA is that it's going to let your -- it's going to let your -- It's going to give you the ability to make your internet applications behave just like native applications.

And the way that it does that is it's letting you tap into the built-in accessibility framework. And it's giving you the freedom to specify your elements, specify the elements in your web page just like how an application has it. And on top of that, it's going to let you communicate the relationships that exist between your elements. So the elements in your page interact in special ways and they have relationships and you're going to be able to communicate that with use of ARIA.

ARIA is really simple to use because there's some really simple basics. One of the basic fundamentals of ARIA is the concept of roles, and roles allow you to describe the purpose of your elements. There are over 50 roles that you can use to specify the purpose of the things in your web pages.

They fall into kind of two different categories. Some roles describe widgets, which in examples are alert dialog and progress bar. And the reason why this is great is because your users already have a built-in understanding of how certain widgets work. And if you describe your custom widgets as these widgets, then they can benefit from already having an understanding of how they work.

The other kind describes structure. And what I mean by this is how the element -- you're describing how the element fits into the overall hierarchy of the page. One example of this is the main role. And the main role is going to allow you to say that, oh, this thing in my web page is the main content, and this other stuff is secondary. So it gives the user a better sense of what -- of the layout and the purpose of the page. of various parts of your webpage.

Another good rule to use is Live Region. Using the Live Region role on an element that updates its content from time to time is going to communicate to the user that, yeah, this element is going to change from time to time, and this is something that you already communicate to other users visually, but this is going to allow you to communicate this non-visually as well.

So using roles is really easy. Up on the board, I have -- up here, I have exactly what it takes to add a role to an element. So it's very common to have an image and then have some text that describes the image and then use that as a button. Well, if you're using it as a button, just say it's a button. And now, by using role equals button, you communicate to the user that this is a button and not just an image with some text.

Another basic concept of ARIA is the concept of states and properties. And states you're already pretty familiar with. They describe the status of elements, like a disabled text field or a selected radio button. ARIA is going to let you -- ARIA is expanding the field and letting you use these states on lots of elements and not just form controls.

Properties let you describe the relationships that exist between your elements. One example is the labeled by property. You might be familiar with the label HTML tag where you label a certain form element. But ARIA is going to let you use any element as a label for any other element. It's just expanding your horizons.

Another example of this is required. So you might be in the practice of using a little red asterisk near your form, near your text field to say that you have to fill this in. Well, you communicated that visually, but not non-visually, and required is going to allow you to do that non-visually.

Active Descendant is a pretty interesting property, and I'm going to go into it a little bit more. The Active Descendant property is another thing you can use to improve keyboard navigation, in addition to tab index. And it basically allows you to focus an element on behalf of the assistive technology. The way it works, I'll give an example. Let's say you have a list box, a custom list box, and it's not one that you made with the select element. And you have some inner children. So you can specify an inner child as the list box Active Descendant.

If you change the active descendant property, then it will trigger a change in the focus of the assistive technology. So basically, you can use a key event listener and change the active descendant. And so you can use up and down to focus the child elements one by one.

And this all happens while the outer element maintains keyboard focus. And the reason why this is great is because you can fully make your-- you can make your list box fully keyboard accessible without cluttering the tab navigation by just having the parent be keyboard focusable. So this might be a little confusing. So let me give you some examples of how to do this. And I'd like to invite Beth up here to show us some.

Thanks, Alice. That was great. So now we're all kind of on the same page. We have a basic understanding of web accessibility and we have a basic understanding about how screen readers in general and voiceover specifically work. So now we're going to show you how we can really use these new features, ARIA and Tab Index, et cetera, to really improve existing web content very simply. So rich internet applications, that's right in the title of ARIA, Accessible Rich Internet Applications. So we decided to look at one of those first. So we decided to look at .Mac specifically. So Alice is going to pull up .Mac here.

One of the things that makes .Mac a rich internet application is that it looks so much like a native application. A lot of really successful rich internet applications do that. But how is this experience with VoiceOver? Well, we're going to show you now. Specifically, we're going to look at this toolbar at the top that's, again, almost identical to the toolbar that you have in Mail.app, where we have the delete and reply, reply all, new buttons, etc. So, Alice, why don't you fire up VoiceOver and navigate to these buttons on the toolbar.

Delete image. Delete. Reply image. Reply. Reply all image. Reply all. Voice over off. So that's kind of weird, right? As a sighted user, I can see clearly that these are supposed to be buttons, but that wasn't really conveyed by the screen reader at all. In fact, it didn't really even give any indication that these elements are interactable.

This really isn't .Mac's fault at all. Until now, with ARIA, which is a part of the Safari 4 developer preview, portions of ARIA, that is. Until now, with that in their hands, there was really no way to directly affect how a screen reader would interpret these elements. The screen reader is stuck in a land of implementation details. So the fact that these buttons were not created with a button element or an input type equals button means that without ARIA, the screen reader has no way to know that they're supposed to be buttons.

But now we do have ARIA in the Safari 4 developer preview. So what we did was we downloaded the source code for .Mac and made a local copy and edited it a little. And all we did was add fractions of lines of code. We just added that ARIA role attribute to each of these divs that contains the images and the text that represent these buttons. So we just added role equals button to all of those divs, and that's it.

And so Alice is going to show you the new version of .Mac. Again, looks the same. We just added some role attributes. And she's going to fire up voiceover now and show you. Sorry. That's okay. Keep going. Reply button. Reply all button. Forward button. Voiceover off. So that's much better.

Again, that's going back to the point of accessibility, which is providing the same experience to all of your users. And here we were able to achieve that with just fractions of lines of code. It was simple. It can even be an afterthought in a case like this. It's incredibly easy.

So, but, you know, we've been talking a lot. Alice was talking a lot about rich Internet applications. I mentioned it again. It's really not just Internet applications that can benefit from these new features. It's really any modern web content. As Alice explained to you earlier, it's really the static document style web content that works really well automatically with a screen reader.

But any sort of really modern content is going to struggle a little bit more. So one example of some modern web content that is not a web application is the simple, photo demo that Vicky and I were showing you earlier that we built up throughout this talk. So Alice is going to load up the photo demo and she's going to show you now how this works with voiceover.

VoiceOver on Safari, Window Photo Demo, HTML Content has Keyboard Focus. Interact with HTML content heading level 2, life in Maui. Palm trees on the beach image. So that's what we're seeing, right? So Alice, why don't you use the voiceover command to simulate a click to click on that image? Chocolate-covered ice cream in a clamshell image.

Nice. You want to use it again? Rocky shoreline and blue sky image. Awesome. Red plants and green trees image. Voice over off. There you go. So there, again, with just a few HTML attributes, we were able to change the user experience to match what we created for sighted users using voice over. So it's not just rich internet applications that benefit from this new specification, accessible rich internet applications. It's really any modern web content. And it's so simple, it's just adding attributes to your existing HTML.

Can we go back to slides, please? Okay, so let's review what we did today. We started with a very simple page of photos that did not look very sophisticated at all. We played with the user interface a lot until we came up with one that I think is totally awesome.

We made it really cool and fun to interact with by adding CSS transitions in addition to the transforms that we added to create this initial appearance. And then we used web fonts and text stroke and text shadow to make our little heading look really awesome, too. And finally, we made it accessible because a truly sophisticated user interface is sophisticated for all of your users.

So if you have any questions, Vicki Murley and Mark Malone know pretty much everything. There are all kinds of other sessions this week going on about Safari and WebKit. There are a few that really pertain to all of this user interface stuff in particular. One of them was earlier in the day, and if you missed it, I highly recommend catching up with it when ADC puts out the whole, like, talks and slide things on iTunes, and that was 3:44.

But there are more sessions tomorrow and Thursday. There are sessions related to Safari and WebKit that don't directly involve user interface that will still be really cool, like a session on Ajax on Thursday, a session on offline data and debugging tools. Also, oh, I had that up there. And now it's time for Q&A.