|
| |
|
|
Nicole
Posts: 2855
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
 |
Text-Resizer not validating? - 12/11/2006 2:30:29
In checking the accessibility of a site I’m doing at the moment, I’m finding that it fails Priority 2 because the text-resizer and the script I’m using for it (the same as is on my website).
Watchfile WebXACT is saying:
quote:
Make sure event handlers do not require use of a mouse
For event handlers that do more than just change the presentation of an element, such as change color when the mouse moves over an item, consider the following:
* Use application-level event triggers rather than user interaction-level triggers. In HTML 4.0, application-level event attributes are "onfocus", "onblur" (the opposite of "onfocus"), and "onselect". These events are triggered when something happens on the page regardless of how the user causes it to happen. For example, an "onfocus" event occurs when a control receives the focus, whether that is done by clicking the mouse or by using the keyboard. By contrast, device-dependent events only occur when a particular device is in use. A "onmousedown" event, which also can give a control the focus, is only triggered by a mouse action, and other means of giving focus to the control will not be responded to
* If you must use device-dependent attributes, provide redundant input mechanisms; for example, specify two handlers for the same element, both of which have the same code associated with them:
Device Handler Correspondences
Use...
...with
onmousedown
onkeydown
onmouseup
onkeyup
onclick
onkeypress
onmouseover
onfocus
onmouseout
onblur
Note:
There is no keyboard equivalent to double-clicking ("ondblclick") or mouse movement ("onmousemove") in HTML 4.0. Avoid using these features.
* Do not write event handlers that rely on mouse coordinates since this requires device-independent input
Rationale
Event handlers respond to user actions, such as mouse movement, typing, voice input, etc. On web pages, event handlers often just change the presentation of an element, such as by changing the color of an image. Others, however, are parts of the functionality of the page. This functionality needs to be presented in a device-independent way so all users can access it, since not all users use a mouse.
Guideline references
WAI checkpoint 9.3
My code where these text-resizer iages appear is:
<p class="resize"><a class="resize" href="#" onclick="setActiveStyleSheet('textSizeSmall', 1); return false; " title="Small text size">
<img class="resize" src="../images/resize1.png" alt="smaller text" width="35" height="30" /></a><span class="aaavanish">|</span>
<a class="resize" href="#" onclick="setActiveStyleSheet('', 1); return false;" title="Normal text size">
<img class="resize" src="../images/resize2.png" alt="medium text" width="35" height="30" /></a><span class="aaavanish">|</span>
<a class="resize" href="#" onclick="setActiveStyleSheet('textSizeLrg', 1); return false;" title="Large text size">
<img class="resize" src="../images/resize3.png" alt="larger text" width="35" height="30" /></a><span class="aaavanish">|</span>
<a class="resize" href="#" onclick="setActiveStyleSheet('textSizeXLrg', 1); return false;" title="Extra Large text size">
<img class="resize" src="../images/resize4.png" alt="largest text" width="35" height="30" /></a><span class="aaavanish">|</span></p>
Thinking I was following the recommendatiions, I added this to the 4 lines of code for no success:
<a class="resize" href="#" onclick="setActiveStyleSheet('textSizeXLrg', 1); return false;" [size=4]onkeypress="setActiveStyleSheet('textSizeXLrg', 1); return false;"[/size] title="Extra Large text size">
<img class="resize" src="../images/resize4.png" alt="largest text" width="35" height="30" /></a><span class="aaavanish">|</span></p>[/code]
But the text-resizer stopped working and it still didn't pass Priority 2 anyway.
So, I'm not sure what to do, I'm not sure I'm understanding what I'm supposed to do here? Does anyone have any solutions?
The script looks like this:
function setStyle() {
var style = readCookie("page_style");
if (style != null) {
setActiveStyleSheet(style, 0);
}
}
function setActiveStyleSheet(title, reset) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (reset == 1) {
createCookie("page_style", title, 365);
}
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = ";expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+";domain=.nixdesign.com.au;path=/;";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
setStyle();
< Message edited by Nicole -- 12/11/2006 2:36:30 >
_____________________________
|
|
|
|
Nicole
Posts: 2855
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline
|
RE: Text-Resizer not validating? - 12/11/2006 6:13:42
Something I find strange is that according to that site, this template for the new site I'm creating is validating to Priority 1 and 3, but not Priority 2. That seems silly to me, surely if something fails at Priority 2 it therefore should fail at Priority 3.
Anyway, I have dabbled in the "hello world" thing before and will look that up. Thanks for explaining further what you meant Tail.
Jaybee, this template also forms a good part of another template for another client. This template will be in ASP instead of HTM, because the site owner adds his own thing in ASP after I've handed it over to him, but with the other client, a charity site I'm doing, I want to use PHP. But I just didn't realise using JS for this was such a problem?
Can I ask, quite naively mind you, and knowing that stats say that 10% of people don't have JS enabled, why don't they have it enabled? Have they disabled it or is it associated with older browsers or assistive technology?
_____________________________
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
