London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be...
-
Upload
nathan-ohanlon -
Category
Technology
-
view
2.355 -
download
0
description
Transcript of London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be...
![Page 1: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/1.jpg)
London Web
Accessibility in the Days of jQuery, Flash and
AJAX – Arrgggg!
![Page 2: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/2.jpg)
Tonight
• Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?
• Artur Ortega will demonstrate bleeding edge web accessibility: WAI-ARIA for Web 2.0 sites. Screen readers for the blind will be demonstrated, incuding JAWS and NVDA.
![Page 3: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/3.jpg)
What did you say?
Do you use HTML5 ?
No Some Times/Not sure
Yes Other/no reply
Do you use CSS3 ?
Is eBay Accessible?
Is Facebook easy to use?
22 9 5 9
17 8 10 11
6 10 15 11
11 4 20 8
![Page 4: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/4.jpg)
Making a usable accessible website using HTML5 and CSS3 allowing for IE6!
Can it be done?
![Page 5: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/5.jpg)
Simple needs
![Page 6: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/6.jpg)
It Was:
http://www.w3.org/TR/html5
NOW ITS:
![Page 7: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/7.jpg)
The Header & Footerhttp://www.w3.org/TR/html5/semantics.html#the-nav-element
![Page 8: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/8.jpg)
Body
![Page 9: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/9.jpg)
![Page 10: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/10.jpg)
Section Tag
![Page 11: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/11.jpg)
hCard microformat or <address> ?<address>
</address>
http://html5doctor.com/the-address-element/
![Page 12: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/12.jpg)
Current Support
![Page 13: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/13.jpg)
Current Support
NO!
![Page 14: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/14.jpg)
How does it look in IE 8?
How does it look in IE 6?
![Page 15: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/15.jpg)
So far so good
• No CSS• Very basic layout• No problem
![Page 16: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/16.jpg)
CSS3
• Some fallbacks are still required for IE6• There is some Javascript help for conforming
HTML5 and CSS3 for IE6• Everything doesn’t have to look the same • “You don’t know what you’re missing”
![Page 17: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/17.jpg)
My CSS3 Wish List• Child selectors
.parent > .child
• Rounded Corners-moz-border-radius: 5px; -webkit-border-radius: 5px;
• Select the odd, even, or last child:nth-last-child(N)tr:nth-child(odd) td { background-color: #86B486; }
• Selectors for input types[attr*=“value”]
![Page 18: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/18.jpg)
A bit of jQuery help for even/odd/last
If the CSS is:tr:nth-child(odd) td, tr.odd td { background-color:
#86B486; }
jQuery is:$(document).ready(function(){ $("tr:nth-child(odd)").addClass("odd"); });
![Page 19: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/19.jpg)
Starting to look “OK” with a few minutes of CSS and reset.css– see the rounded corners
This is Firefox:
![Page 20: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/20.jpg)
How does it look in IE 8?
How does it look in IE 6?
What went wrong !
![Page 21: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/21.jpg)
A little help from HTML5 Doctor
• http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
<!--[if lte IE 8]><script src="html5.js" type="text/javascript"></script>
<![endif]-->
![Page 22: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/22.jpg)
How does it look in IE 8?
How does it look in IE 6?
No rounded corners
![Page 23: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?](https://reader034.fdocuments.net/reader034/viewer/2022051816/545ca7e3af7959b9098b48d6/html5/thumbnails/23.jpg)
The End• Questions?
• Let me know for sponsorship of this meetup. Just £30 opens the bar, then there are always “Free Drinks”
• Join our planning committee – we’re meeting before the PHP meetup in central London. About 4 of us so far
• I’m a freelance PHP Symfony Developer. @nathanlon
• Credits to: HTML5Doctor, W3C, www.webdevout.net , Wikipedia, Rachel Andrew’s 24 ways article.
• Share something yourself – 5, 15, 30 or 45 minutes.