Why Isn't This Button Working? JavaScript and Accessibility in Web Development

About Me Name: Steven Tomcavage School: University of Pennsylvania Law School Job: Web Applications Developer 10+ years experience developing web applications using Perl CGI, Java servlets, XML/XSLT, ColdFusion, and JavaScript

Today is all about programming… Comic from Foxtrot by Bill Amend:

…specifically JavaScript programming Client-side scripting language Embedded in most browsers Used to make single web pages “interactive” An extra layer on top of HTML and CSS

Accessible JavaScript “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners Lee, W3C Director and inventor of the World Wide Web

JavaScript Accessibility Roadmap What is JavaScript accessibility? Why should I care about JavaScript accessibility? What happens if I don’t use accessible JavaScript? How can I make my JavaScript accessible?

What is Accessible JavaScript? Device independent Doesn’t block information Doesn’t break expectations W3C’s Web Content Accessibility Guidelines (WCAG) 2.0 W3C’s Mobile Web Best Practices 1.0

Why should I care about JavaScript Accessibility? SEO – Google’s spider does not support JavaScript Mobile browsers have limited JavaScript – Assistive technologies limit JavaScript – User browsing via keyboard – Screen readers Section 508 of the Rehabilitation Act – Requires accessible JavaScript for US Government

Section 508 on JavaScript (l): When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. (n): When electronic forms are designed to be completed on- line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. (p): When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Who’s Browsing without JavaScript? DateJavaScript OnJavaScript Off January %5% January %6% January %10% January %11% January %8% January % 11% January %12% January %19% January %20% Data from

What happens if I don’t make my JavaScript accessible? 1.Disable JavaScript in your browser: – In Chrome, click the Tool icon at the top right, then go to Options -> Under the Hood -> Content Settings -> JavaScript and check “Do not allow any site to run JavaScript” – In Firefox, go to Tools -> Options -> Content and uncheck “Enable JavaScript” – In IE 7 or IE 8, go to Tools -> Internet Options -> Security -> Custom Level and under Scripting, check “Disable” and restart browser – In Safari, go to Safari -> Preferences -> Security and uncheck “Enable JavaScript”

What happens if I don’t make my JavaScript accessible? (cont.) 2.Load and click “Halloween” (?) 3.Load and loginhttp://reader.google.com 4.Load and click the “Download” buttonhttp:// 5.What happens?

How can I make my JavaScript accessible? Easy Events – onClick and onDblClick Events – onMouseOver and onMouseOutEvents – onChange and onSubmitDHTMLAJAX interactions Hard Tabs and other widgets

1. Events – onClick and onDblClick What are they?JavaScript event handlers which are triggered after mouse click(s) Who do they affect?Users browsing by keyboard Problems? Breaks web page expectations Sometimes replaces href target How to fix Provide a working link or button Don’t use Example

1. Events – onClick and onDblClick Inaccessible JavaScript function showError() { 3. document.getElementById('errorMsg').style.display = 'block'; 4. return false; 5. } 6. function hideError() { 7. document.getElementById('errorMsg').style.display = 'none'; 8. return false; 9. } <a href="javascript:void(0);" onclick="return showError();" 12. onDblClick="return hideError();"> 13. Click once to see the error message, twice to make it go away An error has occurred! 17.

1. Events – onClick and onDblClick Accessible JavaScript function showHide() { 3. var e = document.getElementById('errorMsg2'); 4. if (e.style.display == 'block') { 5. e.style.display = 'none'; 6. } 7. else { 8. e.style.display = 'block'; 9. } 10. return false; 11. } Click once to see the error message, and again to make it go away An error has occurred! 18.

2. Events – onMouseOver and onMouseOut What are they?JavaScript event handlers used to create drop-down menus, pop-up windows, and hover-over effects Who do they affect?Touch devices and keyboard users Problems?Data on page is not visible How to fix Links with hrefs for menus Hidden links for pop-ups CSS to create hover effects Example

2. Events – onMouseOver & onMouseOut Inaccessible JavaScript function showSubmenu() { 3. document.getElementById('submenu').style.display='block'; 4. } 5. function hideSubmenu() { 6. document.getElementById('submenu').style.display='none'; 7. } Item Without Submenu <div onMouseOver="showSubmenu();" 13. onMouseOut="hideSubmenu();">Item WithSubmenu Submenu Item Submenu Item

2. Events – onMouseOver & onMouseOut Accessible JavaScript function showSubmenu2() { 3. document.getElementById('submenu2').style.display='block'; 4. } 5. function hideSubmenu2() { 6. document.getElementById('submenu2').style.display='none'; 7. } Item Without Submenu Item With Submenu Submenu Item Submenu Item

3. Events – onChange and onSubmit What are they?JavaScript event handlers used to customize forms on the fly Who do they affect?Users without JavaScript Problems? Cascading select boxes Optional form questions How to fix Submit partial form to simulate dynamic form actions Duplicate validation on server Ensure submits Example

3. Events – onChange and onSubmit Inaccessbile JavaScript function autoEnterAddress() { 3. var s = document.getElementById('ship_address'); 4. var b = document.getElementById('bill_address'); 5. if (document.getElementById('ship_eq_bill').checked) { b.value = s.value; } 6. else { b.value = ''; } 7. } 8. function processForm() { 9. var s = document.getElementById('ship_address'); 10. var b = document.getElementById('bill_address'); 11. var isValid = true; 12. if (document.getElementById('ship_eq_bill').checked) { 13. if (b.value != s.value) { 14. alert("Your shipping and billing addresses are different!"); 15. isValid = false; 16. } 17. } 18. return isValid; 19. } Shipping Address 23. Address: 24. Billing Address 25. My billing address is the same as my shipping address Address:

3. Events – onChange and onSubmit Accessible JavaScript var billEqShip = "#iif(form.ship_address2 eq form.bill_address2, de('true'), de('false'))#"; 3. function autoEnterAddress2() { 4. var s = document.getElementById('ship_address2'); 5. var b = document.getElementById('bill_address2'); 6. b.value = s.value; 7. billEqShip = true; 8. } 9. function processForm2() { 10. var s = document.getElementById('ship_address2'); 11. var b = document.getElementById('bill_address2'); 12. var isValid = true; 13. if (billEqShip && b.value != s.value) { 14. alert("Your shipping and billing addresses are different!"); 15. isValid = false; 16. } 17. return isValid; 18. } Shipping Address 22. Address: 23. Billing Address Address:

4. DHTML What is it?Dynamic HTML uses JavaScript events to manipulate DOM Who does it affect?Users without JavaScript Problems?Data is not retrievable How to fix Use CSS for rollover effects Use CSS to hide data Add a link or button to get data Example

4. DHTML Inaccessible JavaScript function showExample() { 3. d = document.getElementById("showHide"); 4. e = == 'ndocument.getElementById("example"); 5. if (e.style.display one') { 6. e.style.display = 'block'; 7. d.innerHTML = 'Hide example'; 8. } 9. else { 10. e.style.display = 'none'; 11. d.innerHTML = 'Show example'; 12. } 13. } Show example 16. This is the example. 17.<div id="colorChange" 18. onMouseOver="this.style.color='red'“ 19. onMouseOut="this.style.color='black'"> 20. Rollover to change color 21.

4. DHTML Accessible JavaScript 1. ##colorChange:hover { color: red; } function showExample2() { 4. d = document.getElementById("showHide2"); 5. e = document.getElementById("example2"); 6. if (e.style.display == 'none') { 7. e.style.display = 'block'; 8. d.innerHTML = 'Hide example'; 9. } 10. else { 11. e.style.display = 'none'; 12. d.innerHTML = 'Show example'; 13. } 14. } <a href="js4.cfm?example=hide" id="showHide2“ 18. onmouseover="javascript:showExample2();“ 19. onmouseout="javascript:showExample2();">Show example This is the example. 22. Rollover to change color

5. AJAX Interactions What is it?Asynchronous JavaScript and XML, used to submit refresh small portions of a page Who does it affect?Screen readers and web spiders Problems?User is unable to retrieve all the data from the page How to fixCall asyncronous code from JavaScript AJAX and from HTML forms and links Example

5. AJAX Interactions Inaccessible JavaScript $(document).ready( function() { 3. $("input#myButton").click(function() { 4. $.get( 5. 'js5ajax.cfm', 6. {json: true}, 7. function(data) { 8. $('.result').html(data); 9. alert('Load was performed.'); 10. } 11. ); 12. }); 13. }); Click this button to load the data:

5. AJAX Interactions Accessible JavaScript $(document).ready( function() { 3. $("form").submit(function() { 4. $.get( 5. 'js5ajax.cfm', 6. {json: true}, 7. function(data) { 8. $('.result2').html(data); 9. alert('Load was performed.'); 10. } 11. ); 12. return false; 13. }); 14. }); Click this button to load the data: Or click here to load the data: 21.

6. Tabs and Other Widgets What are they?Tabs and widgets are page layouts that rely on DHTML and/or AJAX Who do they affect?Anyone with limited or missing JavaScript Problems? Data is not available Pages may not load How to fix

Tools for JavaScript Development NoScript plugin for Firefox Firebug plugin for Firefox and Chrome Web Developer Toolbar plugin for Firefox Built-in Developer Tools for Chrome IE Developer Tools for IE 8 and above jQuery for writing valid cross-brower JavaScript that degrades well

What do I need to Remember? Build initial site without JavaScript JavaScript at the end of development Avoid using “javascript:void(0)” Keep code that might be called asynchronously separate to ease AJAX Limit your use of Validate on both client and server Test site without JavaScript

Questions?