Adapting Technology Changing Lives JavaScript Advanced web accessibility JavaScript – do’s and don’ts of client-side scripting Forms – how to create accessible, usable online forms Robin Christopherson and Curt Holst AbilityNet

Adapting Technology Changing Lives Introduction JavaScript enabled content that requires use of the mouse must be accessible without the mouse. All important content must be accessible without JavaScript enabled. “ “

Adapting Technology Changing Lives What is JavaScript?  JavaScript is not HTML or a version of HTML.  JavaScript programs are included in the SCRIPT element.  JavaScript allows your Web page to 'think'  They run in response to events. function event() { with( document.form) { some code; }

Adapting Technology Changing Lives What is DHTML Dynamic HTML (DHTML) is a combination of Cascading Style Sheets (CSS) and JavaScript. When DHTML is used, two issues must be evaluated to determine their impact on accessibility:  Is the event used to trigger a change device independent? If the mouse is required, then it is not fully accessible.  Is the DHTML content or functionality itself accessible? If assistive technologies cannot adequately access DHTML triggered content or functionality, then it is not fully accessible.

Adapting Technology Changing Lives Benefits JavaScript can be used for content and functionality, but only if an accessible alternative is provided alongside it. If correctly used, JavaScript can actually enhance the accessibility of pages by allowing people to customise it to suit their needs.

Adapting Technology Changing Lives Web Content Accessibility Guidelines (Priority 1): Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. 6.4 (Priority 2): For scripts and applets, ensure that event handlers are input device-independent. 6.5 (Priority 2): Ensure that dynamic content is accessible or provide an alternative presentation or page. Standards JavaScript Accessibility

Adapting Technology Changing Lives 7.4 (Priority 2): Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages. 7.5 (Priority 2): Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically. Instead, configure the server to perform redirects. 8.1 (Priority 2): Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies (Priority 2):Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user. JavaScript Accessibility

Adapting Technology Changing Lives Testing for JavaScript Reliance  Internet Explorer  AIS Toolbar  Netscape  Opera  Firefox (Web Developer Toolbar)

Adapting Technology Changing Lives  onMouseOver and onMouseOut  Rollovers  Drop-down navigation menus  onChange and onSelect  Select Menus  onFocus and onBlur  onClick and onDblClick JavaScript and DHTML Problems Accessibility Problems with Events

Adapting Technology Changing Lives onMouseOver and onMouseOut  Are triggered when the mouse cursor is placed over an item.  requires the use of a mouse, thus it is a device dependent event handler and may cause accessibility issues  Can be used, as long as any important content or functionality is also available without using the mouse. Rollovers

Adapting Technology Changing Lives onMouseOver and onMouseOut Rollovers

Adapting Technology Changing Lives ) onMouseOver and onMouseOut Rollovers

Adapting Technology Changing Lives onMouseOver and onMouseOut Drop-down navigation menus Problems:  Not keyboard accessible  Content is not available to assistive technology  Obscure the content below  Prevents resizing the menu  Menus fail when style sheets are turned off  Can be device dependant  Do not operate if scripting is disabled

Adapting Technology Changing Lives onMouseOver and onMouseOut Drop-down navigation menus Possible solutions:  Provide a mechanism to switch off drop down menus  Ensure that each top level menu item is keyboard navigable  Provides the same menu options as redundant text links.  Ensure that the "boxes" which contain the menus can expand  Provide access controls together with accessible event handlers.  Include alternatives to client-side scripts  Place hidden menu items are contained in DIVs in the page

Adapting Technology Changing Lives onChange and onSelect  Triggered when a form element is selected and changed  Processed when text is selected within a text field or text area  Some designers create forms that either change or redirect the user to another page or form element when an item is selected.  Are designed without a submit button

Adapting Technology Changing Lives pull-down select menu Problems:  Do not allow for keyboard accessibility  The onChange event handler is triggered and you are on the next page before options are understood onChange and onSelect

Adapting Technology Changing Lives pull-down select menu Solutions:  If you use select menus with size greater than one, then couple the select menu with a submit button; don't use the onChange event on the menu. onChange and onSelect

Adapting Technology Changing Lives Go to: Select a page: Page 1 Page 2 Page 3 onChange onChange and onSelect

Adapting Technology Changing Lives Go to: Select a page: Page 1 Page 2 Page 3 onChange onChange and onSelect

Adapting Technology Changing Lives onFocus and onBlur  Used with form elements, such as text fields, radio buttons, and submit buttons  onFocus is triggered when the cursor is placed on a specific form element  onBlur is triggered when the cursor leaves a form element  These events do not cause accessibility issues unless they are modifying the default behavior of the Web browser or are interfering with keyboard navigation

Adapting Technology Changing Lives onFocus and onBlur

Adapting Technology Changing Lives onClick and onDblClick onClick:  The onClick event handler is triggered when the mouse is pressed when over an HTML element.  if the onClick event handler is used with hypertext links or form controls, then most major browsers and assistive technologies trigger onClick if the "Enter" key is pressed

Adapting Technology Changing Lives onClick and onDblClick onDblClick:  The onDblClick event handler is associated with the double click of a mouse  There is no device independent equivalent to onDblClick, which should be avoided.

Adapting Technology Changing Lives  Direct Content  Forms  Page redirects  New windows  Popup windows  Changing focus  Removing toolbars JavaScript and DHTML Problems Other Accessibility Issues

Adapting Technology Changing Lives Direct Content  Scripts can write visible content directly to the document, for example, with document.write  In most cases, content that is written to the page using JavaScript is accessible to assistive technologies.  If the content is constantly changing or otherwise interferes with navigation or browser functionality, then it may cause accessibility problems. What is direct content:

Adapting Technology Changing Lives function showtime () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) if (timeValue == "0") timeValue = 12; timeValue += ((minutes = 12) ? " P.M." : " A.M." document.getElementById('face').value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true;} function startclock() { stopclock(); showtime();} Direct Content

Adapting Technology Changing Lives Direct Content  Is it necessary and vital to the function or content of the page.  If so, there is often a way to provide the content without using inaccessible JavaScript Questions to ask yourself:

Adapting Technology Changing Lives Direct Content

Adapting Technology Changing Lives Forms  perform calculations and display the result  to change parts of the form in response to the user making certain selections in other parts of the form  to check the validity of the information the user has entered  to submit the information to the server Some forms rely on client-side scripting to:

Adapting Technology Changing Lives function CheckCode() {var s0=document.form1.zip.value; var v=parseInt(s0); var s=v.toString() if ((!isNaN(v) && (v>99999) ) || isNaN(v)){ document.form1.password.value=''; alert("Please enter a post code); return false; } } Forms

Adapting Technology Changing Lives '); --> Forms If JavaScript is not enabled, then a button contained within a element could submit the form to a server- side processing script

Adapting Technology Changing Lives Forms Ensure that:  The form can still be used when scripts and style sheets are turned off.  Provide fall back server-side validation  Provide access controls together with onKeyPress and onClick event handlers  Where you have used placeholder text within form fields, ensure that it disappears when the focus moves to the field.

Adapting Technology Changing Lives Forms Avoid :  Move focus automatically from one form element to another  Creating timed events  Relying on JavaScript to submit the form after validation.

Adapting Technology Changing Lives Page Redirects  can be disorienting  possible to trap the user on a page  resets the virtual cursor to the top of the page  screen magnification users can become confused JavaScripts which redirect the user to another page as soon as the first page is loaded

Adapting Technology Changing Lives Page Redirects  Provide warnings and explanations that a page will refresh, redirect or time-out. For example, a news service may say, “This news page will refresh every five minutes”.  Provide an option to switch off page refreshes and time-outs.  If page refreshes are essential to your site, configure your web server to perform this task server-side rather than client-side. Possible solutions:

Adapting Technology Changing Lives New Windows  can be disorienting if the user wants to go back to the previous page  may not be aware that the link opened in a new window  may not understand that they must close the new window to return to the original content  might make the link inaccessible to anyone whose browser can't run JavaScript  Warn users if a link will open a new window. JavaScript can be used to open links in a new window

Adapting Technology Changing Lives New page New Windows Poorly coded links

Adapting Technology Changing Lives New page New Windows Well-coded link

Adapting Technology Changing Lives Popup windows  can be disorienting  focus leaves the main page, and the person is stuck in a new window  exercise caution with new windows JavaScripts which open up unwanted windows

Adapting Technology Changing Lives Changing Focus  Users with screen readers or assistive devices may become disoriented or may not be able to access all of your page content. JavaScript can change the focus on the Web page

Adapting Technology Changing Lives Removing toolbars  These items provide accessibility functions for certain disability types  can be difficult for a user that magnifies the screen When opening a popup window with JavaScript, the developer has the option to not display toolbars, status bars, scroll bars, etc and set the window so that it cannot be resized

Adapting Technology Changing Lives  Using the element.  Server-side Processing  Last Resort JavaScript and DHTML Problems Providing Alternatives

Adapting Technology Changing Lives Using the element  Should ideally contain the equivalent content or functionality that is provided by the script  should be used anytime alternative or non- javascript content or functionality is required. The element provides alternative text for the JavaScript.

Adapting Technology Changing Lives View the current time Using the element

Adapting Technology Changing Lives Server-side Processing  Validate form elements  Write dynamic information to a Web page  Negates the need for additional accessibility implementation In many cases, the functionality provided by JavaScript can be duplicated by server-side scripting

Adapting Technology Changing Lives Last Resort  Consider alternatives to your current method  At the very least provide an address or some other contact information  Always test your JavaScripted pages in a browser with the JavaScript turned off If JavaScript is used to encrypt information, or in some other way is providing functionality that cannot be duplicated in HTML

Adapting Technology Changing Lives  Build your application using conventional server-side technology as a fallback when JavaScript is unsupported or disabled. Future Trends Ajax, XUL and Flash

Adapting Technology Changing Lives Recommendations:  Ensure Forms are Keyboard Accessible, Logical, and Easy to Use  Place form labels next to their corresponding form controls  Provide markup for labels, using the tag  Provide a title or "legend" for each field set using the tag  Group radio buttons in a tag, and provide a for each checkbox.  Group checkboxes in a fieldset tag, and provide a for each checkbox  Always provide a button to submit forms. Don't use JavaScript to automatically submit them Accessible Forms

Adapting Technology Changing Lives Input: Name Textarea Explain your motives: ? Accessible Forms

Adapting Technology Changing Lives Checkboxes Choose a color: Blue Green Yellow Accessible Forms

Adapting Technology Changing Lives Radio Buttons Choose a car: Chrysler PT Cruiser Dodge Stratus Ford Pinto Accessible Forms

Adapting Technology Changing Lives Select Which is your favorite city? Amsterdam Interlaken Moscow Dresden Hong Kong Tokyo New Dehli Accessible Forms

Adapting Technology Changing Lives Button Image Button Accessible Forms

Adapting Technology Changing Lives Contact AbilityNet To find out more about AbilityNet’s web services Call: Visit: