web standards and accessibility
Post on 17-Jan-2015
532 Views
Preview:
DESCRIPTION
TRANSCRIPT
<web>standards</web>
an introduction to web standards and accessibility
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
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
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
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
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>
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;}
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;
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
““
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
visual impairments
• Colour blindness• Mild vision impairment (larger font
size, colour)• Moderate vision impairment (screen
magnification, colour)• Blind / severe vision impairment
(screen readers)
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
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
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
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
any questions?
top related