Accessibility in the Days of jQuery, Flash and AJAX – Arrgggg!<br />London Web<br />
Tonight<br />Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?<br />Artur Ortega w...
What did you say?<br />No<br />Some Times/<br />Not sure<br />Yes<br />Other/<br />no reply<br />Do you use HTML5 ?<br />2...
Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?<br />
Simple needs<br />
It Was:<br />NOW ITS:<br />http://www.w3.org/TR/html5<br />
The Header & Footer<br />http://www.w3.org/TR/html5/semantics.html#the-nav-element<br />
Body<br />
Section Tag<br />
hCard microformat or &lt;address&gt; ?<br />&lt;address&gt;<br />&lt;/address&gt;<br />http://html5doctor.com/the-address-...
Current Support<br />
Current SupportNO!<br />
How does it look in IE 8?<br />How does it look in IE 6?<br />
So far so good<br />No CSS<br />Very basic layout<br />No problem<br />
CSS3<br />Some fallbacks are still required for IE6<br />There is some Javascript help for conforming HTML5 and CSS3 for I...
My CSS3 Wish List<br />Child selectors <br />.parent &gt; .child<br />Rounded Corners<br />-moz-border-radius: 5px; <br />...
A bit of jQuery help for even/odd/last<br />If the CSS is:<br />tr:nth-child(odd) td, tr.odd td { background-color: #86B48...
Starting to look “OK” with a few minutes of CSS and reset.css– see the rounded corners<br />This is Firefox:<br />
How does it look in IE 8?<br />How does it look in IE 6?<br />What went wrong !<br />
A little help from HTML5 Doctor<br />http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/<br />&lt;!--[if ...
How does it look in IE 8?<br />How does it look in IE 6?<br />No rounded corners<br />
The End<br />Questions?<br />Let me know for sponsorship of this meetup. Just £30 opens the bar, then there are always “Fr...
Upcoming SlideShare
Loading in …5
×

London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?

1,742 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,742
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?

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

×