[TECHS] Possible Scripting Techniques with Guideline Mappings

I have updated this document to map each of the suggested techniques back 
to the appropriate guideline.  I have added the Guideline mapping at the 
end of each technique suggestion in square brackets using the following 
syntax:  GL = guideline; L = level; SC = Success criteria; followed by 
numeric values and the text of the success criteria in parenthesis.  There 
may also be some additional comments. 
Note that this list of techniques has not been approved the by working 
group - I am just updating the list with possible guideline mappings. Note 
that some may also map to Wendy's updated proposal for Guideline 1.1. 



This is a follow up to Michael's recent posting to the WCAG list about the 
impact of baseline on techniques [1]. 

Here are some ideas for possible scripting techniques that could fit into 
our suggested baselines.  As you'll see, I borrowed several ideas from 
alistapart.com.  I tried to stay within Michael's description of "cannot 
be replicated in HTML" but being a JavaScript proponent I'm sure I've 
stepped over the bounds a bit!  Based on a discussion at the WCAG editors 
meeting I have placed these techniques in three groupings 
1) Script is not available in the baseline - this is the current set of 
script techniques 
2) Scripts that can enhance accessibility (scripting is assumed to be 
available in the baseline and turned on) 
3) Accessible scripting - examples of how to use scripts accessibly 
(scripting is assumed to be available in the baseline and turned on). 


No Scripting 

-current scripting techniques 

-accessible popups example from alistapart:  Accessible Pop-up Links[2]. 
This could also fits into the accessible scripting category [GL 2.4 L1 SC1 
(Structures and relationships within the content can be programmatically 
determined ) although this is a bit of a stretch - my justification is 
that is it using <a> tags appropriately]

Scripts to enhance accessibility: 

-how to use the onload event to set focus to a particular form element on 
the page.   [GL 2.4 L3 SC2 (When a page or other delivery unit is 
navigated sequentially, elements receive focus in an order that follows 
relationships and sequences in the content. ) and possibly GL 2.4 L2 SC2 (
There is more than one way to locate the content of each delivery unit, 
including but not limited to link groups, a site map, site search or other 
navigation mechanism. )]

-how to catch the onchange on an input field, validate the contents and 
set focus to the next element in the form - or something similar that 
specifically sets focus to elements in some order [GL 2.4 L3 SC2 (When a 
page or other delivery unit is navigated sequentially, elements receive 
focus in an order that follows relationships and sequences in the content.
) ]

-input assist to change the background color or border of the element with 
focus [GL 2.5 L2 SC1 (If a user error is detected, the error is identified 
and provided to the user in text ) although color and border isn't really 
text and this technique isn't specific to errors.]
 
-input assist auto advance through fields.  Fore example, a US phone 
number input with 3 fields as you finish typing 3 numbers in the first 
field the cursor moves to the next field and after three numbers there 
jumps to the last field.  This one is likely to be controversial as I'm 
sure there are some people that dislike the auto advance behavior. [GL 2.4 
L3 SC2 (When a page or other delivery unit is navigated sequentially, 
elements receive focus in an order that follows relationships and 
sequences in the content.)]

-input assist to show a specific format in the field and user input over 
types the format with the actual value.  For example, a field for a US 
social security number that shows "###-##-####" - as the user types the # 
gets replaced by the actual input. [GL 2.5 L2 SC2 (If a user error is 
detected and suggestions for correction are known and can be provided 
without jeopardizing security or purpose, the error is identified and the 
suggestions are provided. ) This technique is not specific to errors, 
though. ]

-figure out how to create an accessible pop-up (NOT a new window) that can 
be made accessible.  I'm not sure how to do this, yet, but it could be 
used to provide more detailed information or help without leaving the 
page.   [GL 2.1 L1 SC1; (All of the functionality of the content, where 
the functionality or its outcome can be described in a sentence, is 
operable through a keyboard or keyboard interface. ) and  GL 2.1 L3 SC 1; 
(All functionality of the content is designed to be operated through a 
keyboard or keyboard interface. ) ]

-convert information provided via <link> elements into a select list on 
the page.  From alistapart.com entry:  Dynamically Conjuring Drop-Down 
Navigation [3] [GL 2.4 L1 SC1 (Structures and relationships within the 
content can be programmatically determined );GL 2.4 L2 SC 1 ( Documents 
that have five or more section headings and are presented as a single 
delivery unit include a table of contents with links to important sections 
of the document. ); and GL 2.4 L2 SC2 (There is more than one way to 
locate the content of each delivery unit, including but not limited to 
link groups, a site map, site search or other navigation mechanism. )]

-provide alternative text sizing on the page (in combination with CSS). 
Here is an example for alistapart:  Power To The People: Relative Font 
Sizes 
[4]  Warning - it uses JavaScript uris :-) [This seems like a helpful 
technology  but I can't find a mapping???]

-formatting table rows to distinguish one from another.  This should help 
the readability of all users but particularly screen magnifier users if 
the table is wide.  Another alistapart example:  Zebra Tables[5] [GL 1.4 
L1 SC1 (Any text that is presented over a background image, color, or text 
can be programmatically determined. ) although that is a bit of a stretch 
since the technique itself is using color]

-image replacement using JavaScript.  JavaScript Image Replacement[6] [GL 
1.1 L1 SC2 (Any text that is presented over a background image, color, or 
text can be programmatically determined. );] 

-John Slatin has also suggested a technique that would (a) highlight text 
that the author has predefined as important and make the highlighted text 
available to screen readers as well.  This came up when looking at an 
instructional applicatoin -- there were buttons that allowed the user to 
see what the key terms in the text were. But all that happened at that 
point was to bring up another page that was identical to the first one 
except that now the key terms are highlighted-- clunky and inelegant. 
Seemed like it ought to be possible to do stuff by,e.g., changing the 
value of the visibility property, or change the font-weight or something 
so that screen readers *could* voice it (depending on user settings). [GL 
1.3 L1 SC1 (Structures and relationships within the content can be 
programmatically determined. ); and GL 1.3 L1 SC2 (Emphasis can be 
programmatically determined. )]

-Ben Caldwell suggested, "the use of mouseovers to render details about 
link destinations or definitions of glossary terms. 
I've seen this done well on a few pages, but can't seem to dig up a good 
example at the moment... Here's something that roughly approximates what 
I'm talking about - can be used to provide supplemental information that 
would aid in understanding of a page in some cases."  Not sure if this 
belongs in this category or the Accessible Scripting one. [GL 2.1 L1 SC1 (
All of the functionality of the content, where the functionality or its 
outcome can be described in a sentence, is operable through a keyboard or 
keyboard interface. ) and possibly  GL 2.1 L1 SC2 (Wherever a choice 
between input device event handlers is available and supported, the more 
abstract event is used. ) ]


Accessible Scripting 

-correct usage of onchange event on a select element that does not reload 
the page.   People often use this to prevent round trips to the server so 
the idea is to show how to do it properly.  I commented on this and posted 
and example when reviewing test cases:  
http://lists.w3.org/Archives/Public/w3c-wai-gl/2005JanMar/0465 [7] [GL 3.2 
L2 SC3 (Changing the setting of any input field should not automatically 
cause an extreme change in context such as leaving the "page." )]

-show the use of a "Go" button next to a select rather than using the 
onchange event. The "Go" button will perform the action that the onchange 
would have performed. This is safer than the method above and can also be 
used when the action will load a new page or cause an extreme change of 
content. [GL 3.2 L2 SC3 (Changing the setting of any input field should 
not automatically cause an extreme change in context such as leaving the 
"page." ) and GL 3.2 L2 SC2 (All user interface components should be able 
to receive focus without causing activation. )]

-although the use of blink is still debated, a JavaScript example of how 
to implement blink with a button to stop the blinking might be useful [GL 
2.2 L2 SC1 (A method is provided to pause and/or permanently stop dynamic 
(moving or time-based) content. )]

-show how to call a JavaScript function from the submit action of a form 
(current technique says do not do this) [GL 3.2 L1 SC1 (Any extreme change 
of context is implemented in a manner that can be programmatically 
identified. )]

-give examples creating content using docment.createElement(). Although I 
don't have a good accessibility reason for doing this, it would be nice to 
give advice on how to do it correctly. Generally I recommend that folks 
create all the content at load time rather than "on demand" but I have 
successfully created new elements on the fly and have had screen readers 
work with it. [GL 4.1 L1 SC1 (Except where the site has documented that a 
specification was violated for backward compatibility or compatibility 
with assistive technology, the technology has: a.       passed validity 
tests for the version of the technology in use (whether it be conforming 
to a schema, Document Type Definition (DTD), or other tests described in 
the specification),b.structural elements and attributes are used as 
defined in the specification.)

-how to create onmouseover/onmouseout effects that work with the keyboard. 
For example changing a link image with onmouseover/onmouseout as well as 
with onfocus/onblur  [GL 2.1 L1 SC1 (All of the functionality of the 
content, where the functionality or its outcome can be described in a 
sentence, is operable through a keyboard or keyboard interface. ) and 
possibly  GL 2.1 L1 SC2 (Wherever a choice between input device event 
handlers is available and supported, the more abstract event is used. ) ]

-show how to create a focusable element or element in the tab order using 
tabindex and how to add onclick and onkeypress events. Again, I don't have 
a good example of why you would want to do this and it has issues with 
browser support - only IE 5 and greater, Mozilla 1.8 and Firefox 1.1 [GL 
2.1 L2 SC 1 (Wherever a choice between input device event handlers is 
available and supported, the more abstract event is used. )]

-how to hide/show information based on a specific input.  For example,  a 
select with a Go button that shows a different set of data or different 
form elements based on the selection made.  This is probably a bit too 
advanced, though, but it is something that web applications do. [GL 2.4 L3 
SC2 (When a page or other delivery unit is navigated sequentially, 
elements receive focus in an order that follows relationships and 
sequences in the content. ) ]

-an accessible clock or timer component [GL 2.1 L1 SC1 (All of the 
functionality of the content, where the functionality or its outcome can 
be described in a sentence, is operable through a keyboard or keyboard 
interface. ) and possibly  GL 2.1 L1 SC2 (Wherever a choice between input 
device event handlers is available and supported, the more abstract event 
is used. ) ]



[1] http://lists.w3.org/Archives/Public/w3c-wai-gl/2005AprJun/0010.html 
[2] http://www.alistapart.com/articles/popuplinks/ 
[3] http://www.alistapart.com/articles/dynanav/ 
[4] http://www.alistapart.com/articles/relafont/ 
[5] http://www.alistapart.com/articles/zebratables/ 
[6] http://www.alistapart.com/articles/javascriptreplacement/ 
[7] http://lists.w3.org/Archives/Public/w3c-wai-gl/2005JanMar/0465 




Becky Gibson
Web Accessibility Architect
                                                       
IBM Emerging Internet Technologies
5 Technology Park Drive
Westford, MA 01886
Voice: 978 399-6101; t/l 333-6101
Email: gibsonb@us.ibm.com

Received on Tuesday, 26 April 2005 19:42:35 UTC