+ All Categories
Home > Technology > London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be...

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

Date post: 07-Nov-2014
Category:
Upload: nathan-ohanlon
View: 2,346 times
Download: 0 times
Share this document with a friend
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 at
Popular Tags:
23
London Web Accessibility in the Days of jQuery, Flash and AJAX – Arrgggg!
Transcript
Page 1: London Web - Making a usable accessible website using HTML5 and CSS3 allowing for IE6! Can it be done?

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?

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?

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?

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?

Simple needs

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

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?

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?

Body

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

Section Tag

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

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?

Current Support

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

Current Support

NO!

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

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?

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?

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?

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?

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?

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?

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?

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?

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?

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.


Recommended