SlideShare a Scribd company logo
<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 &lt; 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?

More Related Content

What's hot

Responsive web design
Responsive web designResponsive web design
Responsive web design
Sean Wolfe
 
Web standards: Who cares?
Web standards: Who cares?Web standards: Who cares?
Web standards: Who cares?
Jirayut Nimsaeng
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPress
Anthony Montalbano
 
CSS Modules
CSS ModulesCSS Modules
CSS Modules
George Bukhanov
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
Robert Dawson
 
Drupal front-end performance
Drupal front-end performance Drupal front-end performance
Drupal front-end performance
ADCI Solutions
 
PPT3958.doc
PPT3958.docPPT3958.doc
PPT3958.doc
butest
 
Web Building Blocks
Web Building BlocksWeb Building Blocks
Web Building Blocks
joegilbert
 
Week3 office hours
Week3 office hoursWeek3 office hours
Week3 office hours
Randall Rode
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
superann
 
快速开发Css
快速开发Css快速开发Css
快速开发Css
tbmallf2e
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
Chris Love
 
Adobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEMAdobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEM
Michael Leroy
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
Suzanne Dergacheva
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
Russ Weakley
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-framework
Damien Oh
 
Fecrash10:3:17 sd
Fecrash10:3:17 sdFecrash10:3:17 sd
Fecrash10:3:17 sd
Thinkful
 
Basic web Deveopment
Basic web DeveopmentBasic web Deveopment
Basic web Deveopment
satyaranjanswain7
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
Tim Hettler
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
Gerald Glynn
 

What's hot (20)

Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web standards: Who cares?
Web standards: Who cares?Web standards: Who cares?
Web standards: Who cares?
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPress
 
CSS Modules
CSS ModulesCSS Modules
CSS Modules
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Drupal front-end performance
Drupal front-end performance Drupal front-end performance
Drupal front-end performance
 
PPT3958.doc
PPT3958.docPPT3958.doc
PPT3958.doc
 
Web Building Blocks
Web Building BlocksWeb Building Blocks
Web Building Blocks
 
Week3 office hours
Week3 office hoursWeek3 office hours
Week3 office hours
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
 
快速开发Css
快速开发Css快速开发Css
快速开发Css
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Adobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEMAdobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEM
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-framework
 
Fecrash10:3:17 sd
Fecrash10:3:17 sdFecrash10:3:17 sd
Fecrash10:3:17 sd
 
Basic web Deveopment
Basic web DeveopmentBasic web Deveopment
Basic web Deveopment
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
 

Similar to Web Standards and Accessibility

Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
Karolina Coates
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
Chris Mills
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Carrie Anton
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
Shantanu Suryawanshi
 
Building Webs Better
Building Webs BetterBuilding Webs Better
Building Webs Better
David Eldridge
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Salem Ghoweri
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
The Accessible Web
The Accessible WebThe Accessible Web
The Accessible Web
Steven Lambert
 
Accessibility Testing 101
Accessibility Testing 101Accessibility Testing 101
Accessibility Testing 101
Patrick Dunphy
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
Dave Ross
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
dreamwidth
 
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
Sarah Dutkiewicz
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbbas
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbas
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
NishchaiyaBayla1
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
Mario Noble
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
Serge Hufkens
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Adam Dunford
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
mintersam
 

Similar to Web Standards and Accessibility (20)

Front end development best practices
Front end development best practicesFront end development best practices
Front end development best practices
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
 
Building Webs Better
Building Webs BetterBuilding Webs Better
Building Webs Better
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
The Accessible Web
The Accessible WebThe Accessible Web
The Accessible Web
 
Accessibility Testing 101
Accessibility Testing 101Accessibility Testing 101
Accessibility Testing 101
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 

Recently uploaded

ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
RashmitaSwain3
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
67n7f53
 

Recently uploaded (20)

ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
 

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
  • 4.
  • 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 &lt; 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