London Web Meetup - Feb 2010. Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done? Part of the accompanying video with Q&A section is available at

1. Accessibility in the Days of jQuery, Flash and AJAX – Arrgggg! London Web

2. 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.

3. What did you say? No Some Times/ Not sure Yes Other/ no reply Do you use HTML5 ? 22 9 5 9 Do you use CSS3 ? 17 8 10 11 Is eBay Accessible? 6 10 15 11 Is Facebook easy to use? 11 4 20 8

4. Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?

5. Simple needs

6. It Was: NOW ITS: http://www.w3.org/TR/html5

7. The Header & Footer http://www.w3.org/TR/html5/semantics.html#the-nav-element

8. Body

10. Section Tag

11. hCard microformat or <address> ? <address> </address> http://html5doctor.com/the-address-element/

12. Current Support

13. Current SupportNO!

14. How does it look in IE 8? How does it look in IE 6?

15. So far so good No CSS Very basic layout No problem

16. 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”

17. 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”]

18. 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"); });

19. Starting to look “OK” with a few minutes of CSS and reset.css– see the rounded corners This is Firefox:

20. How does it look in IE 8? How does it look in IE 6? What went wrong !

21. 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]-->

22. How does it look in IE 8? How does it look in IE 6? No rounded corners

23. 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.