Transcript 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.
<script language=“javascript”>
function event() {
with( document.form) {
some code; }
</script>
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
JavaScript Accessibility
Standards
Web Content Accessibility Guidelines 1.0
•6.3 (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.
Adapting Technology • Changing Lives
JavaScript Accessibility
•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.
•10.1 (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.
Adapting Technology • Changing Lives
Testing for JavaScript Reliance





Internet Explorer
AIS Toolbar
Netscape
Opera
Firefox (Web Developer Toolbar)
Adapting Technology • Changing Lives
JavaScript and DHTML Problems
Accessibility Problems with Events
 onMouseOver and onMouseOut


Rollovers
Drop-down navigation menus
 onChange and onSelect

Select Menus
 onFocus and onBlur
 onClick and onDblClick
Adapting Technology • Changing Lives
onMouseOver and onMouseOut
Rollovers
 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.
Adapting Technology • Changing Lives
onMouseOver and onMouseOut
Rollovers
<a href="url.htm"
onmouseover="document.images['pic'].src='pic_on.gif
';"
onmouseout="document.images['pic'].src='pic_off.gif
';">
<img src="pic_off.gif" width="100" height="50"
id="pic_off"
alt="Image description" /></a>
Adapting Technology • Changing Lives
onMouseOver and onMouseOut
Rollovers
<a href="url.htm"
onmouseover="document.images['pic'].src='pic_on.gif
';"
onfocus="document.images['pic'].src='pic_on.gif';"
onmouseout="document.images['pic'].src='pic_off.gif
';"
onblur="document.images['pic'].src =
'pic_off.gif';">
<img src="pic_off.gif" width="100" height="50"
id="pic" alt="Image description" /></a> )
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 <noscript> 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
onChange and onSelect
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
Adapting Technology • Changing Lives
onChange and onSelect
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.
Adapting Technology • Changing Lives
onChange and onSelect
onChange
<form action="page.htm" onsubmit="return false;">
<p><label for="selectPage">Go to:</label>
<select name="selectName"
onchange="goto_URL(this.form.selectName)">
<option value="">Select a page:</option>
<option value="page.htm">Page 1</option>
<option value="page.htm">Page 2</option>
<option value="page.htm">Page 3</option>
</select></p>
</form>
Adapting Technology • Changing Lives
onChange and onSelect
onChange
<form action="page.htm" onsubmit="return false;">
<p><label for="selectPage2">Go to:</label>
<select name="selectPage2" id="selectPage2">
<option value="">Select a page:</option>
<option value="page.htm">Page 1</option>
<option value="page.htm">Page 2</option>
<option value="page.htm">Page 3</option>
</select>
<input type="button" value="Go!"
onclick="goto_URL(this.form.selectPage2);" /></p>
</form>
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
<input type="text" name="search" id="searchinput"
title="Search" value="Enter search term"
onfocus="if(this.value=='Enter search
term')this.value='';"
onblur="if(this.value=='')this.value='Enter search
term';" size="20" />
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
JavaScript and DHTML Problems
Other Accessibility Issues







Direct Content
Forms
Page redirects
New windows
Popup windows
Changing focus
Removing toolbars
Adapting Technology • Changing Lives
Direct Content
What is 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.
Adapting Technology • Changing Lives
Direct Content
<Script language="JavaScript">
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 < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.getElementById('face').value = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;}
function startclock() {
stopclock();
showtime();}
</script>
Adapting Technology • Changing Lives
Direct Content
Questions to ask yourself:
 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
Adapting Technology • Changing Lives
Direct Content
<input type="button" value="Display the current
time"
onclick="alert('The current time is ' +
timeValue);" />
Adapting Technology • Changing Lives
Forms
Some forms rely on client-side scripting to:
 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
Adapting Technology • Changing Lives
Forms
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;
}
}
Adapting Technology • Changing Lives
Forms
If JavaScript is not enabled, then a button contained within
a <noscript> element could submit the form to a serverside processing script
<script type="text/javascript"><!-document.write('<input type="button" value="Submit"
onSubmit="checkCode();" />');
--></script>
<noscript><p><input type="submit"
value="Submit"></p></noscript>
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
JavaScripts which redirect the user to another page as
soon as the first page is loaded




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
Adapting Technology • Changing Lives
Page Redirects
Possible solutions:
 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.
Adapting Technology • Changing Lives
New Windows
JavaScript can be used to open links in a new window
 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.
Adapting Technology • Changing Lives
New Windows
Poorly coded links
<a href="javascript: function(url, window_name,
parameters)">New page</a>
<a href="#" onclick="function(url, window_name,
parameters)">New page</a>
Adapting Technology • Changing Lives
New Windows
Well-coded link
<a href="url" target="window_name"
onclick="function(url, window_name, parameters)"
onkeypress="function(url, window_name, parameters)"
title=”Link opens in new window”>New page</a>
Adapting Technology • Changing Lives
Popup windows
JavaScripts which open up unwanted windows
 can be disorienting
 focus leaves the main page, and the person is stuck in a new
window
 exercise caution with new windows
Adapting Technology • Changing Lives
Changing Focus
JavaScript can change the focus on the Web page
 Users with screen readers or assistive devices may become
disoriented or may not be able to access all of your page
content.
Adapting Technology • Changing Lives
Removing toolbars
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
 These items provide accessibility functions for certain
disability types
 can be difficult for a user that magnifies the screen
Adapting Technology • Changing Lives
JavaScript and DHTML Problems
Providing Alternatives
 Using the <noscript> element.
 Server-side Processing
 Last Resort
Adapting Technology • Changing Lives
Using the <noscript> element
The <noscript> element provides alternative text for
the JavaScript.
 Should ideally contain the equivalent content or functionality
that is provided by the script
 <noscript> should be used anytime alternative or nonjavascript content or functionality is required.
Adapting Technology • Changing Lives
Using the <noscript> element
<script type="text/javascript">
<!-document.write("The current time is " +
currenttime)
-->
</script>
<noscript>
<!-- link to page that displays time from serverside script -->
<a href="time.htm">View the current time</a>
</noscript>
Adapting Technology • Changing Lives
Server-side Processing
In many cases, the functionality provided by JavaScript
can be duplicated by server-side scripting
 Validate form elements
 Write dynamic information to a Web page
 Negates the need for additional accessibility implementation
Adapting Technology • Changing Lives
Last Resort
If JavaScript is used to encrypt information, or in some
other way is providing functionality that cannot be
duplicated in HTML
 Consider alternatives to your current method
 At the very least provide an email address or some other
contact information
 Always test your JavaScripted pages in a browser with the
JavaScript turned off
Adapting Technology • Changing Lives
Future Trends
Ajax, XUL and Flash
 Build your application using conventional server-side
technology as a fallback when JavaScript is
unsupported or disabled.
Adapting Technology • Changing Lives
Accessible Forms
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 <label> tag
 Provide a title or "legend" for each field set using the <legend>
tag
 Group radio buttons in a <fieldset> tag, and provide a <label>
for each checkbox.
 Group checkboxes in a fieldset tag, and provide a <label> for
each checkbox
 Always provide a button to submit forms. Don't use JavaScript
to automatically submit them
Adapting Technology • Changing Lives
Accessible Forms
Input:
<label for="name">Name</label>
<input id="name" type="text" name="textfield">
Textarea
<label for="motives">Explain your motives:</label><br>
<textarea id="motives" name="textfield2"></textarea>?
Adapting Technology • Changing Lives
Accessible Forms
Checkboxes
<fieldset>
<legend>Choose a color:</legend><br>
<input id="blue" type="checkbox" name="checkbox"
value="checkbox">
<label for="blue">Blue</label><br>
<input id="green" type="checkbox" name="checkbox2"
value="checkbox">
<label for="green">Green</label><br>
<input id="yellow" type="checkbox" name="checkbox3"
value="checkbox">
<label for="yellow">Yellow</label>
</fieldset>
Adapting Technology • Changing Lives
Accessible Forms
Radio Buttons
<fieldset>
<legend>Choose a car:</legend><br>
<input id="pt" type="radio" name="radio"
value="ptcruiser">
<label for="pt">Chrysler PT Cruiser</label><br>
<input id="stratus" type="radio" name="radio"
value="stratus">
<label for="stratus">Dodge Stratus</label><br>
<input id="pinto" type="radio" name="radio"
value="pinto">
<label for="pinto">Ford Pinto</label>
</fieldset>
Adapting Technology • Changing Lives
Accessible Forms
Select
<label for="favcity2">Which is your favorite city?</label>
<select id="favcity2" name="favcity2">
<optgroup label="Europe">
<option value="1">Amsterdam</option>
<option value="3">Interlaken</option>
<option value="4">Moscow</option>
<option value="5">Dresden</option>
</optgroup>
<optgroup label="Asia">
<option value="10">Hong Kong</option>
<option value="11">Tokyo</option>
<option value="12">New Dehli</option>
</optgroup>
</select>
Adapting Technology • Changing Lives
Accessible Forms
Button
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Submit2" value="Reset">
Image Button
<input type="image" alt="submit!" border="0"
name="imageField" src="graphics/submit.gif"
width="109" height="41">
Adapting Technology • Changing Lives
Contact AbilityNet
To find out more about AbilityNet’s
web services
Call: 0800 269545
Visit: http://www.abilitynet.org.uk
Email: [email protected]
Adapting Technology • Changing Lives