Recommended
More Related Content
What's hot
What's hot (20)
Similar to Web Standards and Accessibility
Similar to Web Standards and Accessibility (20)
Recently uploaded
Recently uploaded (20)
Web Standards and Accessibility
- 1. <web>standards<web /> an introduction to web standards and accessibility
- 2. in the beginning, there was a man • Jeffrey Zeldman • Web Standards Project (WaSP) 1998 • Fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web • Works with browser and authoring tool manufacturers
- 3. stan*dard • n. something, such as a product or practice, that is widely recognised or employed, especially because of its excellence • adj. regularly used, widely available or supplied
- 5. why adopt web standards? • Device independence • Faster page loads • Lower bandwidth usage • Ease of maintenance • Improved user experience • Less lock-in to proprietary technology • Extensible • Accessibility
- 6. XHTML, CSS and the DOM • Standards call for a separation of structure, style and behaviour • XHTML defines the structure • CSS defines the style • The DOM (Document Object Model) controls behaviour
- 7. XHTML • eXtensible HyperText Markup Language <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”> <head> <title></title> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> </head> <body> <img src=“myPic.jpg” height=“10” width=“10” alt=“A picture of me” /> <p>I want to <em>emphasise</em> this point <strong>strongly</strong>.</p> </body> </html>
- 8. css • Cascading Style Sheets body {font:62.5%/1.6em Verdana, Arial, Helvetica, sans-serif; font-weight:normal; text-align:center; min-width:768px; background:#fff url("../images/bg_grad_blue.jpg") repeat-x;} p {background:transparent; padding:0 2em; font-size:1.2em;}
- 9. JavaScript (DOM) • JavaScript doesn’t kill websites, people with JavaScript kill ’em • Keep external • Degrade gracefully function doPopups() { if (!document.getElementsByTagName) return false; var links = document.getElementsByTagName("a"); for (var i=0; i < links.length; i++) { if (links[i].className.match("popup")) { links[i].onclick = function() { window.open(this.href); return false; } } } } window.onload = doPopups;
- 10. accessibility “ Web accessibility is about designing sites so as many people as possible can access them effectively and easily, independent of who they are or how they “ access the net
- 11. who are we talking about? • 9 million people in the UK have a disability under the Disability Discrimination Act • It is not just the blind! • People with hearing difficulties • Motor difficulties • Cognitive difficulties • Many have a combination
- 12. visual impairments • Colour blindness • Mild vision impairment (larger font size, colour) • Moderate vision impairment (screen magnification, colour) • Blind / severe vision impairment (screen readers)
- 13. motor difficulties • Using a keyboard and mouse may be difficult • Alternative mouse and keyboard designs • Voice recognition • Use logical tabbing order • Offer user-defined access keys • Limit number of links • Clear target area negating fine mouse control
- 14. cognitive difficulties • These include dyslexia, memory impairments and attention deficit disorders • Keep the language clear • Avoid jargon • Use consistent navigation • Use graphical icons as navigational aids • Content should be well spaced, in a non-serif font and not fully justified • Dyslexic users prefer a beige background
- 15. implementing accessibility • Accessibility needs to be built in, not bolted on • Cannot rely solely on automatic testing tools • Guidelines are exactly that • Until standards are universal, accessibility will be a major challenge • Prepare for change
- 16. further reading • Designing with Web Standards – Jeffrey Zeldman (ISBN:0321616952) • Don’t Make Me Think! – Steve Krug (ISBN:0321344758) • http://www.webstandards.org • http://www.alistapart.com • http://delicious.com/thatstandardsguy/accessibility
- 17. any questions?