london web - making a usable accessible website using html5 and css3 allowing for ie6! can it be...
DESCRIPTION
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 atTRANSCRIPT
London Web
Accessibility in the Days of jQuery, Flash and
AJAX – Arrgggg!
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.
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
Making a usable accessible website using HTML5 and CSS3 allowing for IE6!
Can it be done?
Simple needs
It Was:
http://www.w3.org/TR/html5
NOW ITS:
The Header & Footerhttp://www.w3.org/TR/html5/semantics.html#the-nav-element
Body
Section Tag
hCard microformat or <address> ?<address>
</address>
http://html5doctor.com/the-address-element/
Current Support
Current Support
NO!
How does it look in IE 8?
How does it look in IE 6?
So far so good
• No CSS• Very basic layout• No problem
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”
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”]
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"); });
Starting to look “OK” with a few minutes of CSS and reset.css– see the rounded corners
This is Firefox:
How does it look in IE 8?
How does it look in IE 6?
What went wrong !
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]-->
How does it look in IE 8?
How does it look in IE 6?
No rounded corners
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.