SlideShare a Scribd company logo
Avoiding the
       JavaScript:void(''):
Accommodating 1.0 Users in a Web 2.0
             World




         Jason Pitoniak
Rochester Institute of Technology

    HighEdWebDev ▪ TPR 4
       October 15, 2007
What's wrong with this code?



     <a href= “javascript:void('')” onclick=
“window.open('popup.html', 'popup', height=500,
     width=300);”>more information</a>
What is a 1.0 User?

Any user who, for whatever reason, cannot take
advantage the the advanced features of the sites we
build .

1.0 Users include:
 Users with JavaScript turned off
 Users of older browsers
 Users of mobile devices
 Users of assistive technology devices
Problems? What problems?

What kind of problems arise from using advanced
web design techniques?

     The site stops working if...

Can it be solved?

     Of course...that's why you're here,
     isn't it?
Example of a Problem
Yahoo!'s popular Upcoming.org community events
 database uses an advanced AJAX/JavaScript
 interface to let event organizers select venues.
What happens when you try to add an event without
 JavaScript support? Let's see...
What you won't learn today...
This is not a general accessibility lecture.

This is not a lecture on web standards, JavaScript,
 AJAX, or any related technology.

You will not learn the “best” way to create an
 accessible Web 2.0 site.
But you will leave with unanswered questions!
Some Questions

Is there a difference between a
web site and a web application?
Some Questions

             Is it acceptable to launch two
             versions of a web application?

Text-only pages are generally considered a bad idea
We launch Mac and PC versions of software
Google Maps and GMail
APIs/MVC to the rescue?
Hints for Doing it Right
Understand your audience
Code like it's 1999
Use DOM scripting to enhance the page
on the client
Consider using a JavaScript library
Understand Your Audience
An app that will be restricted to only the
computers in the registrar's office probably
doesn't need to be coded with mobile devices in
mind.
An app for students to check their homework
assignments probably should.
Both apps should address the needs of users with
disabilities.
Code Like It's 1999
Think lowest common denominator when
designing your basic page structure.
Follow web standards to ensure consistant
display.
Use DOM Scripting
Newer browsers can manipulate the page on the
client end.
Add the bells and whistles through JavaScript.
If a browser doesn't understand the manipulations
they will be ignored, but the user will have a
fulling working page nonetheless.
DOM Scripting Limitations
Many irregularities still exist between platforms
Proper care must be taken to prevent script errors
in older JS compliant browsers.
Consider a JavaScript Library
JavaScript libraries...
  Standardize browser irregularities
  Add support for “missing” events
  Often provide easy-to-use AJAX interfaces
  Sometimes provide cool widgets and page
  enhancements
JS Libraries: Many to Choose
And the Winner is...
Y I Chose YUI
Open source (BSD license)‫‏‬
Developed by Yahoo! for use on their properties
Actively being developed
DOM utilities, AJAX handlers, and widgets
Extremely flexible API
Lightweight
Namespacing system prevents naming conflicts
YUI Features
Standardized event model
onAvailable, onContentReady, and
onDOMReady events
DOM utilities like getElementsByClassName()‫‏‬
Many UI widgets: calendars, auto completes,
tabs, menus, data grids, color picker, etc.
YUI Issues
Namespacing model makes for very long lines of
code:
YAHOO.widget.calendar(...);
Flexible API = lots of doing things by hand
Componentialized code makes for lots of JS files
to include on web pages.
AJAX: The Web Developer's
       Four Letter Word
OMG, you used AJAX in an accessibility lecture!
Is AJAX really inaccessible?
If not, then what is?
But, you used DOM scripting in the example!
Avoiding DOM Scripting*
     Can we expect users that don't want advanced
     features of our sites to turn off JavaScript?
     Do we use JS in beneficial ways that don't
     manipulate the DOM?
     Is posting instructions on how to turn off JS a
     reasonable way to make our app accessible?



*when necessary
Accessibility Mode
Consider options to let users turn advanced, non-
acessible features off
−   Top of all pages?
−   On a user preferences page?
Simple check box and cookie?
Thoughts on Screen Readers
Screen readers tend not to notice runtime changes
in the DOM
Screen readers DO understand JavaScript
Screen readers DO understand CSS
Screen readers DON'T like JS “panels”
Screen readers DO work with popup windows
The Solution
<a href= “info.html” id=“mypopup”>more info</a>
document.getElementById(“mypopup”).onclick =
  function (e) {
      e = (window.event) ? window.event : e;
      window.open(this.href, “popup”,
        “height=200,width=300”);
      e.preventDefault();
  }
Yellow Box
When changing anything on the page, highlight it
with a yellow background
Fade the background to white slowly
Helps low-sighted users follow changes to the
page
Originally used by Basecamp
http://webiscope.com/archives/2007/09/19/how-usability-affects-products-part-2-
basecamp/
Accessibility Links
WAI: http://www.w3.org/WAI/
Section 508: http://www.section508.gov/
NYS Web Accessibility Standard:
http://www.oft.state.ny.us/policy/s04-001/index.htm
Mobile Device Links
W3C MobileOK Tests:
http://www.w3.org/TR/mobileOK-basic10-tests/
Challenges of Interface Design for Mobile
Devices:
http://yuiblog.com/blog/2007/10/02/challenges-
of-interface-design-for-mobile-devices/
JavaScript Library Links
YUI: http://developer.yahoo.com/yui
Prototype: http://www.prototypejs.org/
Scriptaculous: http://script.aculo.us/
jQuery: http://www.jquery.com/
DEDChain: http://dedchain.dustindiaz.com/
MooFX: http://moofx.mad4milk.net/
Adobe Spry: http://labs.adobe.com/technologies/spry/
Mochikit: http://mochikit.com/
Dojo: http://dojotoolkit.org/
Ext: http://extjs.com/
In Conclusion
Understand your audience
Code for the LCD
Modify on the client when the client supports it
and the user wants it
Consider accessibility issues and work-arounds
Only exploit technology when it serves a
legitimate purpose

More Related Content

What's hot

10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
Chris Love
 
Intro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioIntro to Web Development from Bloc.io
Intro to Web Development from Bloc.io
Douglas Wright
 
WebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebWebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile Web
Chris Love
 
From desktop to mobile web
From desktop to mobile webFrom desktop to mobile web
From desktop to mobile webChris Love
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
Jonas Päckos
 
Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5
Bramus Van Damme
 
Mobile tech briefing 2013
Mobile tech briefing 2013Mobile tech briefing 2013
Mobile tech briefing 2013
Scotty Logan
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
Russ Weakley
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Peak Usability
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
arborwebsolutions
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
Monika Piotrowicz
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web appsChris Love
 
Mobile app with sencha touch
Mobile app with sencha touchMobile app with sencha touch
Mobile app with sencha touch
fch415
 
501 Talks Tech: WordPress for Nonprofits
501 Talks Tech: WordPress for Nonprofits501 Talks Tech: WordPress for Nonprofits
501 Talks Tech: WordPress for Nonprofits
501 Commons
 
How to build a website... the accessible way
How to build a website... the accessible wayHow to build a website... the accessible way
How to build a website... the accessible way
Isabel Brison
 
Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009
Brendan Sera-Shriar
 
20 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 201020 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 2010
B.J. Schone
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Russ Weakley
 
Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can build
Monika Piotrowicz
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
Radek Pavlíček
 

What's hot (20)

10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 
Intro to Web Development from Bloc.io
Intro to Web Development from Bloc.ioIntro to Web Development from Bloc.io
Intro to Web Development from Bloc.io
 
WebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebWebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile Web
 
From desktop to mobile web
From desktop to mobile webFrom desktop to mobile web
From desktop to mobile web
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5
 
Mobile tech briefing 2013
Mobile tech briefing 2013Mobile tech briefing 2013
Mobile tech briefing 2013
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
 
Mobile app with sencha touch
Mobile app with sencha touchMobile app with sencha touch
Mobile app with sencha touch
 
501 Talks Tech: WordPress for Nonprofits
501 Talks Tech: WordPress for Nonprofits501 Talks Tech: WordPress for Nonprofits
501 Talks Tech: WordPress for Nonprofits
 
How to build a website... the accessible way
How to build a website... the accessible wayHow to build a website... the accessible way
How to build a website... the accessible way
 
Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009
 
20 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 201020 mLearning Tools in 60 Minutes - mLearnCon 2010
20 mLearning Tools in 60 Minutes - mLearnCon 2010
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web Accessibility - A feature you can build
Web Accessibility - A feature you can buildWeb Accessibility - A feature you can build
Web Accessibility - A feature you can build
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
 

Similar to TPR4

Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)
patrick.t.joyce
 
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Ajax Abuse Todcon2008
Ajax Abuse Todcon2008
Jesse Rodgers
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
Christian Heilmann
 
Advantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client applicationAdvantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client application
Placinta Alin
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
Stefano Di Paola
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
filirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
aleemb
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Patrick Lauke
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
Jens Grochtdreis
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
bacmove
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
Nathan Smith
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
brucelawson
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
William Myers
 
iWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaiWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaD'Andrea
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScript
Den Odell
 

Similar to TPR4 (20)

Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)
 
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Ajax Abuse Todcon2008
Ajax Abuse Todcon2008
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
Advantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client applicationAdvantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client application
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMIBACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
iWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndreaiWeb NJECC June 28, 2011 DAndrea
iWeb NJECC June 28, 2011 DAndrea
 
Seven Steps To Better JavaScript
Seven Steps To Better JavaScriptSeven Steps To Better JavaScript
Seven Steps To Better JavaScript
 

More from tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 

More from tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 

Recently uploaded

Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 

Recently uploaded (20)

Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 

TPR4

  • 1. Avoiding the JavaScript:void(''): Accommodating 1.0 Users in a Web 2.0 World Jason Pitoniak Rochester Institute of Technology HighEdWebDev ▪ TPR 4 October 15, 2007
  • 2. What's wrong with this code? <a href= “javascript:void('')” onclick= “window.open('popup.html', 'popup', height=500, width=300);”>more information</a>
  • 3. What is a 1.0 User? Any user who, for whatever reason, cannot take advantage the the advanced features of the sites we build . 1.0 Users include: Users with JavaScript turned off Users of older browsers Users of mobile devices Users of assistive technology devices
  • 4. Problems? What problems? What kind of problems arise from using advanced web design techniques? The site stops working if... Can it be solved? Of course...that's why you're here, isn't it?
  • 5. Example of a Problem Yahoo!'s popular Upcoming.org community events database uses an advanced AJAX/JavaScript interface to let event organizers select venues. What happens when you try to add an event without JavaScript support? Let's see...
  • 6. What you won't learn today... This is not a general accessibility lecture. This is not a lecture on web standards, JavaScript, AJAX, or any related technology. You will not learn the “best” way to create an accessible Web 2.0 site. But you will leave with unanswered questions!
  • 7. Some Questions Is there a difference between a web site and a web application?
  • 8. Some Questions Is it acceptable to launch two versions of a web application? Text-only pages are generally considered a bad idea We launch Mac and PC versions of software Google Maps and GMail APIs/MVC to the rescue?
  • 9. Hints for Doing it Right Understand your audience Code like it's 1999 Use DOM scripting to enhance the page on the client Consider using a JavaScript library
  • 10. Understand Your Audience An app that will be restricted to only the computers in the registrar's office probably doesn't need to be coded with mobile devices in mind. An app for students to check their homework assignments probably should. Both apps should address the needs of users with disabilities.
  • 11. Code Like It's 1999 Think lowest common denominator when designing your basic page structure. Follow web standards to ensure consistant display.
  • 12. Use DOM Scripting Newer browsers can manipulate the page on the client end. Add the bells and whistles through JavaScript. If a browser doesn't understand the manipulations they will be ignored, but the user will have a fulling working page nonetheless.
  • 13. DOM Scripting Limitations Many irregularities still exist between platforms Proper care must be taken to prevent script errors in older JS compliant browsers.
  • 14. Consider a JavaScript Library JavaScript libraries... Standardize browser irregularities Add support for “missing” events Often provide easy-to-use AJAX interfaces Sometimes provide cool widgets and page enhancements
  • 15. JS Libraries: Many to Choose
  • 16. And the Winner is...
  • 17. Y I Chose YUI Open source (BSD license)‫‏‬ Developed by Yahoo! for use on their properties Actively being developed DOM utilities, AJAX handlers, and widgets Extremely flexible API Lightweight Namespacing system prevents naming conflicts
  • 18. YUI Features Standardized event model onAvailable, onContentReady, and onDOMReady events DOM utilities like getElementsByClassName()‫‏‬ Many UI widgets: calendars, auto completes, tabs, menus, data grids, color picker, etc.
  • 19. YUI Issues Namespacing model makes for very long lines of code: YAHOO.widget.calendar(...); Flexible API = lots of doing things by hand Componentialized code makes for lots of JS files to include on web pages.
  • 20. AJAX: The Web Developer's Four Letter Word OMG, you used AJAX in an accessibility lecture! Is AJAX really inaccessible? If not, then what is? But, you used DOM scripting in the example!
  • 21. Avoiding DOM Scripting* Can we expect users that don't want advanced features of our sites to turn off JavaScript? Do we use JS in beneficial ways that don't manipulate the DOM? Is posting instructions on how to turn off JS a reasonable way to make our app accessible? *when necessary
  • 22. Accessibility Mode Consider options to let users turn advanced, non- acessible features off − Top of all pages? − On a user preferences page? Simple check box and cookie?
  • 23. Thoughts on Screen Readers Screen readers tend not to notice runtime changes in the DOM Screen readers DO understand JavaScript Screen readers DO understand CSS Screen readers DON'T like JS “panels” Screen readers DO work with popup windows
  • 24. The Solution <a href= “info.html” id=“mypopup”>more info</a> document.getElementById(“mypopup”).onclick = function (e) { e = (window.event) ? window.event : e; window.open(this.href, “popup”, “height=200,width=300”); e.preventDefault(); }
  • 25. Yellow Box When changing anything on the page, highlight it with a yellow background Fade the background to white slowly Helps low-sighted users follow changes to the page Originally used by Basecamp http://webiscope.com/archives/2007/09/19/how-usability-affects-products-part-2- basecamp/
  • 26. Accessibility Links WAI: http://www.w3.org/WAI/ Section 508: http://www.section508.gov/ NYS Web Accessibility Standard: http://www.oft.state.ny.us/policy/s04-001/index.htm
  • 27. Mobile Device Links W3C MobileOK Tests: http://www.w3.org/TR/mobileOK-basic10-tests/ Challenges of Interface Design for Mobile Devices: http://yuiblog.com/blog/2007/10/02/challenges- of-interface-design-for-mobile-devices/
  • 28. JavaScript Library Links YUI: http://developer.yahoo.com/yui Prototype: http://www.prototypejs.org/ Scriptaculous: http://script.aculo.us/ jQuery: http://www.jquery.com/ DEDChain: http://dedchain.dustindiaz.com/ MooFX: http://moofx.mad4milk.net/ Adobe Spry: http://labs.adobe.com/technologies/spry/ Mochikit: http://mochikit.com/ Dojo: http://dojotoolkit.org/ Ext: http://extjs.com/
  • 29. In Conclusion Understand your audience Code for the LCD Modify on the client when the client supports it and the user wants it Consider accessibility issues and work-arounds Only exploit technology when it serves a legitimate purpose