Welcome to session 605, Understanding Web Accessibility for Building Better Websites. My name is Faruk Ates I am a web centered specialist on the Apple Online store. Now, thank you. Before I start can I please see how many of you consider themselves software developers? How many of you consider yourself web developers? And how many of you consider yourself a little bit of both, equal? Right. So as you are all very much aware this is the first WWDC where we have session syntax on web development.

Now this is not just a jump on the increasingly large Web 2.0 bandwagon, though we will have to admit to taking some of the right cues from that. Now with Web 2.0 we mean desktop like applications on the web. As you can see here, this is the .Mac web new interface, but it looks very much like your mail app on the desktop and that's really what this is about. Desktop like applications on the web. They behave much like your desktop applications, but they are web based. Now this is because the web becoming a bigger and bigger part of our lives. It is becoming very integrated in our desktop software but also in the real world itself.

You can see that... you can imagine that sometime from now we'll have contact sensitive ads driven by the web on billboards along the highway. I wonder why there's no phone number there. Now this integration offers phenomenal potential for all kinds of new and innovative ideas. New in applications.

But in order to really take full advantage of all these possibilities that are opening up to us, it is important to be well prepared. And what I'm going to show you today is that web accessibility is the key to building a great website. And I'll explain how you can prepare yourself to be ready so you can take full advantage of all these possibilities opening up to us, in this rapidly evolving industry know as the web.

So what is web accessibility about? Well, before we set out to discover what web accessibility is, it is important to look at what accessibility itself is all about. So what is accessibility? Well, when you set out to define accessibility, you immediately encounter the biggest problem surrounding the subject and the problem is that accessibility is a very broad, very vague, very hard to define concept. However, Joe Clark, an accessibility consultant and author, once said to me, and he may have put it best when he said, accessibility is making allowances for that which you can't change or can't change easily.

Now this gives us a great feel for what the essence of accessibility is all about, but it's still pretty obscure. It's not very pragmatic. So then what is accessibility? Well accessibility first and foremost is about people. Accessibility really is about people with disabilities. So then how many people are we talking about here? Well, worldwide we're talking about more than 600 million people.

600 million people in the world with some kind of physical disability. That's over 9% of our population. But the percentage is even way higher than that in first world countries. In the United States, there's over 54 million people with a disability, which is almost 1 in every 5 people in the country. And first world countries report higher percentages because they have better reporting available to them. They have better amenities for people to live with a disability. So, people with a disability the numbers are very high.

So what types of disabilities are we talking about here. Well there's four main types of physical disabilities. The first one is visual impairment. Someone is either blind, has partial sight, also color blindness which effects 8% of all men. What may seem like some nice set of colors to you can be very hard to read for someone with a specific color blindness.

There's also a dexterity impairment. It may be difficult for someone to hold a mouse, or hold the mouse steady enough to click on very small links. Someone may not be able to hold the mouse at all, and have to rely on keyboard navigation. Or they may be so motor impaired that they have to use voice commands to navigate your website, their computer.

There's also hearing impairment. Now, you may think, well with all this text on the web how does hearing impairment really have an effect? Well we're getting into more and more multimedia content on the web. We are getting a large amount of podcast, lots of video content, and if all that content isn't properly transcribed or captioned, then people who can't hear are locked out of the content.

This is becoming increasingly the case. And then there's learning impairment. And learning impairment is a very, very wide array of possible disabilities, but one of them that I want to highlight is the language of your website. Now if you are building an English language website, someone who is visiting it may not be a native English speaker.

And if you are using a lot of high level complex English language in your site, someone who is not a native speaker, may not be able to really comprehend what your website is all about. The same if you use a lot of jargon, a lot of slang, abbreviations, or acronyms and you don't define these terms that you are using then someone who is not familiar with them may just give up and leave.

So that's physical disabilities, but on the web, there's so much more to it. On the web, you also deal with what are called device specific disabilities. Now these come in many, many flavors. You have the choice of web browsers someone may be using an older version of Internet Explorer, someone may be on an old operating system, can't even use a modern browser. Browser settings also matter very much. Whether certain features are disabled or enabled. Certain plug-ins available or not available.

Also the screen resolution is very important. Someone may have a lower resolution screen. Not everyone is using nice widescreen displays. People are still using very old monitors. There's also the color calibration which matters. Then you have internet connection speeds. Someone who's on slower broadband or on dialup will have to wait a long time before they can get to your very graphic rich or media rich website, and they may get frustrated and leave.

Internet connection speed is also very important for mobile devices which are typically on WiFi or much lower network than that. And mobile devices have a lot of different things that you have to take into account as well. They have a smaller screen. They only have a few buttons as input method and they are a completely different environment and you still want your website to be accessible on these, all these devices. And that's just a few examples. There's so much more out there.

So, we have the moral reasons. It's the right thing to do. It's the right thing to be accessible. You have the business reasons. You don't want to lock out all these, all these people, you don't want to lock out all these potential customers. And then there's government legislations. A lot of countries, especially first world countries these days, have a lot of government legislation that force you almost to be accessible. Now there's the EU Charter of Fundamental Rights in Europe. They also have the EuroAccessibility Consortium.

There is the Disabilities Discrimination Act in Australia and the United Kingdom. UK also has SENDA, the Special Educational Needs and Disability Act. Canada has a great government online initiative. Japan has a fantastic Digital 21 Strategy. ! And then the United States has, there's a few, there's the Americans with Disabilities Act, which last year has set a precedent where this applies to retailers of any kind.

It's not just brick and mortar retailers where this is relevant it's also online retailers. So if you sell something on your website then you are liable if you are not accessible by this act and then there is one that most of you are probably familiar with and that is Section 508.

So, there is all this government legislation in the world now if you want to learn more about what your government is doing with legislation on web accessibility or what kind of initiatives they are offering then you can go to www.webaim.org and you can look up your country and you find out all the things specific to your country.

So we have these reasons to be accessible, we have the moral reason, the business reason, and the government reason. Well how do you make your website accessible? Oh, we have here an accessibility cocktail. And if you have no physical disabilities and you have a modern computer, modern operating system, using a modern web browser, your accessibility cocktail is a full glass. You have full access to all the content.

But if you have a physical disability or you're stuck on an older system, you're going to an internet cafe and you are using an older browser, then your accessibility cocktail can be an empty glass. You have no access, you can't access the content. So how do you make this a full glass for everyone? Well you start by changing the way you think about your website. Now we mentioned Web 2.0 at the beginning of this and this is a phenomenon that has been going for the last few years. It has become very big, now there's also another phenomenon that has been going on at the same time and that's podcast.

Podcasts have become incredibly popular. Who here listens to at least one podcast a day? Not that many. Who here reads blogs? Who here has more than a hundred blogs in their newsreader? Well if you read a lot of blogs, you may not be using podcasts much, but if you read blogs, which you probably do at work or in class, then you may find yourself wanting to get access to this content as a podcast so you can listen to this content on your daily commute or whenever you feel like it.

And you don't have to spend time reading it you can just listen to all this blog content. Well if you think of your website as a podcast, you get this completely different way of thinking about the website. You get this new approach, and if you start by that, you think well how would I think of my website as a podcast? Well, really what it means is your website is going to be read out to you and the only thing you can control is what you hear back, of course there is video podcast, but we don't want you, you know, watching a video podcast while you drive to work.

So we have this way of thinking as a podcast and you want your website, when it gets read out to you, you want it to make sense. You want to know that, well you want your website to tell you this is the list that I am approaching now.

Now imagine that you're using a tool to listen to this podcast and you have a button that says well anytime I encounter a link and I want to follow that link I click this button so you can navigate your website just by clicking a button whenever you encounter a link. Well, if you navigate your podcast that way, your website has a podcast you still want to know what everything means. You want to encounter well this is a heading; you want your site to read out to you this is a list.

So you want to make sure that you can actually get all that content back to you as a podcast. This is a great way to start thinking about web accessibility. You just get into this completely different mindset about how to make an accessible website. So we want to make this a full glass for everyone.

Well how do you that? There are three pillars of web development basically, three pillars and you want them to be done well and these three pillars are your content, all the data that you want to present to the user, all the things all the information on your website. You have the presentation. This is how you present it to your users, whether it is as speech or just visually in a brochure. And you have your interactivity, your behavior.

Now how do you make an accessible website with these where you want to separate your content, your presentation, and your behavior? And when you do you that you build them separately. You build content using semantic markup, that's your HTML. Then you want to create your presentation using cascading style sheets, your CSS, and then you want to add a layer of behavior to it and for that you want to use progressive enhancements. That's your Java script. And you want to separate these, well what does that really mean, the separation? Basically it means that you take this and you turn it into this. You take your mixed code and you separate it into clean markup, clean CSS, and clean Java script.

So you want to separate your content presentation and behavior, what do you get out of that? You get the benefit of file caching. If you have your contents separated into separate files, then all these external files they are cached in the browser, they are downloaded only once by the browser, and then retrieved from the cache so the user doesn't have to constantly download everything on every page, this gives you the benefit of much smaller page sizes. Now this has two direct benefits - one for the user, the user has to download less so they get to your page faster, they get a better user experience out of your website. For you it means, lower traffic costs and this can be pretty significant.

A few years ago espn.com did a complete redesign of their website. They took their entire website and they changed it to be built with separated content presentation and behavior. As a result, their website every page was about 50 kilobytes smaller every page and at the time they served over 40 million page views a day.

So the bandwidth savings they got out of that were 2 terabytes a day, 61 terabytes a month, or 730 terabytes of bandwidth a year and that's a lot of savings. So the bigger and more popular your website is the more these savings really add up. So you get these benefits.

You also get the benefit of increased reusability of code. With separation, your code becomes more usable and reusable. You can more easily include the same elements of a design, the same elements of a page in another page because it is all separated, you can reuse your codes in many more ways. You'll also get great maintenance benefits.

When everything is separated and you need to make a change somewhere to the visual design or to the behavior, you only have one location or you have one file where you have to make a change so your maintainability becomes so much better. It is so much easier to maintain your website along the way.

And this also helps to future proof your website, well how does that really work? Any time a new device comes out in the future, a completely new device, something new that we don't know yet, something new we haven't encountered yet, but it has a capability of browsing the web, then you may find that it doesn't work as well with your website.

Your website doesn't render right or any new device that comes out as of today has to support at least a baseline of standards, and this baseline of standards that is supported by all current browsers, all modern browsers, have the same baseline and any new device has to support at least that baseline if it wants to survive in the market.

Now it may extend the features, it may add or offer more functionality than a regular device or a regular browser, but it has to support at least its baseline of standards and because of that, if you have your code cleanly separated, then you can much more easily add another little file or another piece of code to add compatibility with this new device. So it helps to future proof your website; makes it much easier to accommodate new devices that are yet to come out.

So how does that look like in code? Well this is a code example for, you may have seen this in the past a table of navigation, just a horizontal navigation menu. Well what do we have here? We have a table element with some table rows and table cells for something that's not tabular data at all, it is a navigation list.

We have a link that doesn't point anywhere. If I middle click or command click on this link, I end up on the exact same page, I am not sent anywhere, but also if a user with assistive technologies encounters this link then they are going to have difficulty following it because it doesn't point anywhere.

We have some inline Java script to expand the menu, inline behavior here in the middle of our content to expand some menu. And we have a font element to add a little increase in the size and add a color. We have a presentational image to show some arrow down to say, 'Hey there's an expand menu feature here' and it's right there in the middle of our content. This also, this example doesn't have an alt tribute so this image, when a screen reader encounters this image, it will read out the source of tribute. Now the only thing in this entire example that is actually content is this. That's our content.

So how do we take this example and separate it and make it more accessible? Well we start with a content. We separate it and this is a navigation list so we use an unordered list elements and list items. We see our content our little link there, actually pointing somewhere.

Then we want to add a layer of presentation with CSS so we target it and say well we give it a bigger font size, we give it some color, and we add that little background image because it is a presentational image. It's not content. Then on top of that we add some behavior, we use dom level 2 EventListener to listen to a click on this link and if we find it, we expand this menu. So that's our way of making that table, that horizontal table and turn it into a more accessible content with presentation and behavior cleanly separated.

So we get to our accessibility cocktail and we see these three pillars of web development and we want to start off by using semantic markup. You want to use semantic markup when you do your HTML. Now what do you get out of that? Do you get cleaner code? When you, the more semantically rich your code is, the cleaner it is. You don't get stuck using presentational elements in there or behavior elements in there, so you just have very rich but very clean code surrounding and structuring your content.

This cleaner code is of course much easier to deal with and the purpose of semantic markup is not so that you can stuff as much semantics in there, but so that you or someone else or someone with an assistive technology or search engine can get semantic data out of your page.

Someone who is using assistive technology or a search engine, when they go through your site, they don't see your site, they only read your code. They read your markup and you want them to know well this is a list and you want them to be able to convey that information back to the user so you want your, the more semantic your code is, the easier it becomes for assistive technology but also search engines to discover what your content is all about, what kind of meaning it has, what it is.

This gives you improved search engine optimization because the easier for assistive technologies it is to make sense of your data, the easier it is for a search engine. Now this search engine optimization can be very interesting. A friend of mine Mike Davidson once did not a very scientific test, but it was a great example of how this, how semantic markup can affect your search engine optimization and he called it the roundabout SEO test.

He created five test cases of three pages each and they were all varying in markup, varying in semantics, varying in whether it was a valid code at all. He used some old methods in some test cases. He used very clean and rich semantic markup in the others and he put just keyword in all of them and the keyword was something that Google had never heard of. It was loadafizzle. It was the nickname of a coworker of his.

And he created these 15 test cases and after a while he put them on a sub domain and let Google know about it. Then after a while he searched for it and what he discovered was that the more valid and the more semantically rich the pages he created was, the higher up it was in the search results.

So he discovered also that keyword placement whether it is at the top or the bottom of the page didn't matter, it really mattered whether it was in a semantically meaningful element, regardless of its position. Now, we can take this, well it helps your search engine optimization, but it is not a magic bullet and you don't want to go overboard with it to try and trick search engines. You don't, I've seen people who have taken H1 element, at the most high level heading and put 800 keywords in there and then used some CSS to hide it from the browser.

They got pretty high up in their search results for a little while and then they got shortlisted never to be seen again. So you don't want to trick a search engine you want to use semantic markup because you really should and the more correct and accurate you use it, the better your results will be.

It will help. It is not a magic bullet, but it will help. And this helps increase your accessibility. So you see our cocktail glass is getting a little fuller and we get some more access to the content. Now after you've built your semantic markup, you want to use cascading style sheets to give it a nice presentation.

So cascading style sheets, well, the best example of what you get with cascading style sheets is the CSS Zen Garden, and you've probably already heard of it, seen it, but for those of who may not have, the CSS Zen Garden, is an example created a few years ago to showcase the power of CSS and it is to this day still the very best example.

And what you get with the CSS Zen Garden is one single html file, one single page with the same content but there is over 700 hundred unique designs for it and the only thing different in all of these designs is a CSS file that is included, and these are just ten samples, but you can see how incredible diverse the designs can get.

But it is all the same exact content. So you get CSS Zen Garden style flexibility, great power. It makes it so much easier to redesign and rebrand your website whether you want to make some small changes to it or whether you want to do a complete overhaul of your website, CSS makes it so much easier, you can hook up into your semantic mark up and do whatever you want with your presentation.

You can go in any direction now this doesn't mean you don't have to touch your mark up at all like this CSS Zen Garden, but you don't necessarily have to adjust your mark up to make any changes in the design. So it is much easier to redesign or rebrand your website.

Now when people start using CSS to build their websites they often stick to their old methods and they use the same methodology in building a website as they did before with presentational mark up and having to put font tags everywhere but you really want to remember to leverage the C in CSS, it's a cascading style sheets and you also don't want to fall prey to diff class and ID overkill and what do I mean by that? Well we'll go through a little example, this is what I have seen people do a lot and they would just repeat their code examples, repeat their code over and over again for everything but with CSS the only thing you really have to do, you can leverage the C in CSS and just specify everywhere where you have different styling and the rest will just cascade through.

So you want to cascade around and this is also something I see a lot of people do when they first switch to CSS and they'll use a dif for everything and just hook up IDs in classes for styling. Well if you find yourself doing this these are tip offs.

We have perfectly rich semantic elements for this, so you'll want to use a H1 instead of a dif ideas heading. You'll want to use paragraph elements for paragraphs, you'll want to use list elements for lists and last items so you'll want to remember your semantic mark up and all this will help increase accessibility again. Our cocktail goes a little further up, but there are caveats. With so much power and control over your website it's possible to make it less accessible, so you really want to know what you are doing when you're going when you are using very sophisticated CSS.

Next you want to use progressive enhancements. So we have our semantic layer, our content grade very accessible, we have given it some styling, some presentation with CSS and now we want to add behavior. Progressive enhancements is an approach to doing this that basically says you want to think of your website in layers. You are building a layered set of, you are doing a layered build up of pages.

So you start off with just a base layer of semantic mark up, fairly accessible content and after that when you add another layer on top of that the presentation you want to make sure that you don't break accessibility. So you start with a accessible layer and as you add layers on top of it you want to make sure you don't break accessibility on the layers below, that's progressive enhancements really and after you add your presentational layer you add the behavioral layer of interactivity.

Now this interactivity especially with web applications is very significant. On a regular informational website you don't need as much interactivity, but for web applications its all about interactivity. When you build this layer... when you use this layer buildup of pages approach, you retain all the benefits you get out of semantic markup and cascading style feeds. You get these all these benefits mentioned before and you retain them as you add more layers. It can add multiple layers of interactivity. The more sophisticated the device is the more layers you can add.

Now this helps accessibility a lot. Specially with web applications, this can make or break the accessibility of your application entirely. So progressive enhancements, they are a lot of work but they really help increase accessibility a lot. And it is a lot of work to add layers, and layers and layers, but as you go and more experience with using, with just starting off with semantic markup, and just base layer, very accessible content and then add the layer of presentation, you'll also get a lot of benefits like, greater understanding and control of your website when you add interactivity.

When you add the behavior. So we have our three pillars and now we have a full accessibility class. Full cocktail class, and our content is fully accessible to everyone, regardless whether they have a physical disability or a device specific disability like an older system, or a mobile device.

So we've been looking at this as adding semantics helps increase accessibility. Using CSS helps increase accessibility. Using progressive enhancements, helps accessibility. But if you remember from the start, accessibility is this broad concept. Very vague and these are all very concrete tangible results. So its kind of a backwards way of thinking about this. This is a backwards way of saying, oh we have these results, and they lead to this vague concept.

So, what you'll find is that accessibility actually leads to all these benefits. If you start off from an accessibility conscious base line, you will automatically end up using semantic markup. You will automatically find yourself using cascading style sheets and you'll automatically use progressive enhancements. And you'll get all the benefits that we've discussed. You get all these benefits starting from accessibility and just building up.

So how do you become accessibility conscious? Well, its really a state of mind to begin with. And you want to think inside the box, outside the box, below the box or through the box. Really just think in very different ways about how people can access your website. How people can navigate your website. How they can access the content on your website. You really want to think in ways beyond your usual ones.

So you can for instance think of turning your monitor off and trying to navigate your own website using a screen reader. And just trying to use the keyboard to just navigate your website without seeing it. You can see it of course. You are not blind but you can turn your monitor off and simulate it and we'll get all this information, how to actually navigate your website. Now you also want to be mindful of your own frustrations.

When you're on a website and you find yourself using it a lot, but there's a few things that frustrate you and they get in your way. They make it more difficult to use the website. More difficult to navigate, then these frustrations are often an accessibility concern as well. At the very least they are a usability issue. But very often these are also an accessibility issues.

So if you look into them, you have a frustration, you can look into them. And you can discover some kind of accessibility related issue, you can make sure you don't repeat that mistake and don't have that same issue on your website. So whenever you're frustrated with something on the web, you can look into it and discover some lesson about accessibility.

And the biggest thing is not to fear the complexity. Its very easy to come out of a presentation like this, or read an accessibility book, and find yourself going, wow, this is overwhelming, this is very difficult. How do I really get into being accessible for all these devices? All these various physical disabilities? But it's really not that difficult.

If you start by separating your content presentation and behavior, and if you just use semantic markup as much as possible, then you're going to have a very accessible website. And really the use of progressive enhancements will have the biggest impact on your accessibility, specially with web applications. And, but it's really not that difficult.

It is complex to be fully accessible, but there's no such thing as fully accessible. You can never be really fully accessible, you can only be as accessible as possible. And there's always trade offs to be made when you are dealing with web accessibility. But the good base line of accessibility is pretty easy to accomplish and it really just starts with separating your content, your presentation, and your behavior.

There are also tools to help you with this. There are a lot of tools to help you make your website accessible. Your government will probably have, in its legislation there are tools available to you. There are checklists that you can use to go through your website and see well this is accessible, this is accessible, oh I'm not doing this. Well, it will tell you how to fix it.

There are tools like extensions for Firefox that will let you simulate the use of a screen reader. You have these methods. There's all kinds of tools available. And W3C, the World Wide Web Consortium, also offers accessibility guidelines. They have a web accessibility initiative which produces three important guidelines. The first is the Web Content Accessibility Guidelines. If you're building a website, you're writing markup, you're creating content or you're just creating a little bit of content for use on a large website, then you're building web content and you want to read the Web Content Accessibility Guidelines.

If you're building software, whether its web based software or desktop software and this software has the ability to export content to the web, whether it's CMS, College Management System, that is build to create content for the web. Or a tool like Photoshop, or word or pages that has the ability to export content to the web, then you're building an authoring tool and you want to use the Authoring Tool Accessibility Guidelines.

Now there's also the User Agent Accessibility Guidelines which is for every browser but also for any piece of software, again, web based or desktop software or any kind of device that has the ability to read content from the web and interact with content from the web, is a user agent.

So in that case, if you want to, if you are building or working on a product like that, you want to use the User Agent Accessibility Guidelines. So you have all these tools available to you. You have... There's a lot of checklists that you can use to really just quickly go through and learn so much about web accessibility related to your website.

There's one more thing...always wanted to say that. We have the iPhone and when you're designing AJAX web applications for the iPhone, web accessibility is again a very big part of this and it really, the good design practices overlap with web accessibility in many ways. So if you're developing or designing an application for the iPhone of web application for the iPhone, then all this stuff about web accessibility that I just talked about, applies just as much if not more so, to development for the iPhone. So you want to use good design practices. If you want to think about using the column layout, so that when someone double taps on an iPhone then they can easily get to a column of your content.

You want to remember size matters. It's a small device and page sizes are important specifically because it is not connected to broadband. It's a mobile device and it doesn't always have high speed broadband or connection available. So page sizes really matter as well. If you want to media queries for CSS, and optimizing for the iPhone means, remembering that it has a small viewport, people can double tap this, they can double tap on any part of it, they can scroll around using their finger. There's automatic text size adjustment and you want to be ready for that. When you zoom in on a page of, on part of the page on the iPhone, it will adjust the text size and make it as readable as possible. And there's lot of things about events.

If you're using a lot of Java script, you are used to a lot of dumb events that may or may not be available, or exist at all on the iPhone. There's no mouse to click with. There's a tap. There's a lot of things about even that you want to keep in mind. And again media, it supports streaming media like it supports QuickTime. And you want to be ready for that and you want to learn about how you can make sure that it works properly. That it doesn't conflict in anyway on the iPhone.

Then after that, if you want more information, we have Mark Malone our internet technology's evangelist, and you can contact him. We have some links here and these will also be on the WWDC website for attendees. So you can always come back to them. This is for iPhone and media specific development you want to contact Allan Schaffer if you want to deal with that. Again these links will also be on the website later on.