|
| |
|
|
Nicole
Posts: 2992
Joined: 9/15/2004
From: Sydney, 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 >
_____________________________
". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
|
|
|
|
Nicole
Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline
|
RE: Text-Resizer not validating? - 12/11/2006 2:39:54
My edit of the post above was only to try and make the piece of code that I added stand out, so obviously it doesn't have [color #990000] or anything like that in it.
I understand what you're saying, but I was going to write about these things in the accessibility statement. Maybe I could add noscript and display:none to these images for people without javascript emabled?
_____________________________
". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
| |
|
|
|
Nicole
Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline
|
RE: Text-Resizer not validating? - 12/11/2006 3:29:53
You mean kind of like this?
//<![CDATA[
tip = new Array()
[1]=""
//]]>
With nothing between the " "
If so, ummmm, I'm a js dummy Tail!
_____________________________
". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
| |
|
|
|
Nicole
Posts: 2992
Joined: 9/15/2004
From: Sydney, 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?
_____________________________
". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
| |
|
|
|
Nicole
Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline
|
RE: Text-Resizer not validating? - 12/14/2006 5:12:28
I've been fiddling with those text-resizer buttons and trying to make them only visible to those with javascript turned on since you posted that response on the forums.
I've looked up so many "hello world" examples but I'm afraid I just don't get it. I've changed the ' to \' everywhere thet it appears but it's just not showing up.
Here is the code of the page I'm working. It's an include of just the left side menu area of the site:
quote:
<body>
<ul>
<li><a id="nav" name="nav" class="nav" href="../index.htm">HOME</a></li>
<li><a class="nav" href="../about/about-index.htm">ABOUT WSC</a></li>
<li><a class="nav" href="../programs/programs-index.htm">PROGRAMS</a></li>
<li><a class="nav" href="../meets/meet-index.htm">MEETS</a></li>
<li><a class="nav" href="../records/records-index.htm">RECORDS</a></li>
<li><a class="nav" href="../resources/resources-index.htm">RESOURCES</a></li>
<li><a class="nav" href="../gallery/gallery-index.htm">GALLERY</a></li>
<li><a class="nav" href="../volunteers/volunteers-index.htm">VOLUNTEERS</a></li>
</ul>
<script>
<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>
</script>
<p><a href="http://www.external-link.com/"><img class="links" src="../images/link-image.png" width="180" height="40" alt="Link Destination Website" /></a><span class="aaavanish">|</span></p>
<p><a href="http://www.external-link.org/"><img class="links" src="../images/link-logo.png" width="180" height="40" alt="Link Destination Website" /></a><span class="aaavanish">|</span></p>
<p><a href="http://external-link.org/"><img class="links" src="../images/link.png" width="180" height="40" alt="Website Link" /></a><span class="aaavanish">|</span></p>
<p><a href="http://www.external-link.org/"><img class="links" src="../images/external-link.png" width="180" height="40" alt="Subscribe to our mailing lists" /></a><span class="aaavanish">|</span></p>
<p><a href="../guestbook.htm"><img class="links" src="../images/sign-guestbook.png" width="180" height="40" alt="Sign our guestbook" /></a><span class="aaavanish">|</span></p>
<p><a href="../view-guestbook.htm"><img class="links" src="../images/view-guestbook.png" width="180" height="40" alt="View our guestbook" /></a><span class="aaavanish">|</span></p>
</body>
</html>
Please, am I doing something basically wrong? I've checked the paths for the images, and I was trying to do this with an external script at first, but then figured that i should get it working inline before attempting to do it externally.
If you can see a glaring problem I'd be very appreciative.
Nicole
_____________________________
". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
| |
|
|
|
Nicole
Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline
|
RE: Text-Resizer not validating? - 12/14/2006 5:31:05
Like this?
quote:
<script>
<!--
document.write ('<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>');
-->
</script>
It still isn't working?
_____________________________
". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
| |
|
|
|
Nicole
Posts: 2992
Joined: 9/15/2004
From: Sydney, Australia
Status: offline
|
RE: Text-Resizer not validating? - 12/14/2006 5:55:19
Cheque's in the mail!
_____________________________
". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?
| |
|
 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 
