Noscript and accessibility??

S

Samuël van Laere

I'm just wondering about something.
I'm trying to get a accessibility label [Blindsurfer.be]
they did a screening for the site I build http://www.oukje.nl/
But it failed their accessibility checkpoints.
A noscript tag is needed in order to pass for the accessibility label.

Perhaps its just me, but I don't see how the currently used javascripts
could be a problem
for screenreaders, while in fact it was designed to work with screenreaders.

But anyhow, does someone know what I should put between the noscript tags
in order to pass for that label??
I've never had to use it before.

Cheers,
Samuël van Laere
 
T

Toby Inkster

Samuël van Laere said:
http://www.oukje.nl/
Perhaps its just me, but I don't see how the currently used javascripts
could be a problem for screenreaders, while in fact it was designed to
work with screenreaders.
Click to expand...

Nor do I. The one improvement I would add would be this...

Replace this:

<h2>Lettergrootte</h2>
<ul>
<li><a href="javascript:ts('body',1)">Tekst vergroten +</a></li>
<li><a href="javascript:ts('body',-1)">Tekst verkleinen -</a></li>
</ul>

with this:

<div id="lettergrootte">&nbsp;</div>

And then, at the end of this file:

http://www.oukje.nl/jscript/textsizer.js

add the following extra lines:

function grootte () {
var d = document.getElementById("lettergroote");
var t = "<h2>Lettergrootte<\/h2>\n";
t = t + "<ul>\n";
t = t + "<li><a href="javascript:ts('body',1)">Tekst ";
t = t + "vergroten +<\/a><\/li>\n";
t = t + "<li><a href="javascript:ts('body',-1)">Tekst ";
t = t + "verkleinen -<\/a><\/li>\n";
t = t + "</ul>\n";
d.innerHtml = t;
}
var oldf = window.onload;
window.onload = function () {
if (oldf) { oldf(); }
grootte();
};

This will only show the text sizing menu in Javascript-capable browsers.
(Untested though.)
 
J

Jukka K. Korpela

Samuël van Laere said:
I'm trying to get a accessibility label [Blindsurfer.be]
Click to expand...

Stop trying that. Aim at being accessible to different people. Aiming
at accessibility labels is not always an obstacle to that, but very
often it is.
But it failed their accessibility checkpoints.
A noscript tag is needed in order to pass for the accessibility
label.
Click to expand...

That is descriptive of the cluelessness of accessibility checkpoints,
especially when taken as absolute criteria for getting some toy labels.
But anyhow, does someone know what I should put between the
noscript tags in order to pass for that label??
I've never had to use it before.
Click to expand...

Nothing. Well, a dummy block to please Strict syntax. Just use
<noscript><div></div></noscript>, if you wish to get a label.
(Or do they say that <noscript> elements should "do" something? Then
there's what you need to put into those elements to please them.)

Just remember that an accessibility label itself _reduces_ the
accessibility of your page, since it is unnecessary, distracting, and
potentially cryptic element to your visitors.
 
R

Richard Cornford

Samuël van Laere said:
I'm just wondering about something.
I'm trying to get a accessibility label [Blindsurfer.be]
they did a screening for the site I build http://www.oukje.nl/
But it failed their accessibility checkpoints.
A noscript tag is needed in order to pass for the
accessibility label.
Click to expand...

Machines are like that. They see a SCRIPT element and decide that it
needs a corresponding NOSCRIPT element. For them it is a rule to be
followed without regard for the context or the usefulness of the result.

People who understand web browser scripting recommend never using
NOSCRIPT tags at all, because they do not satisfy their intended goal.
That is, there may be an exclusive relationship such that a browser that
is script disabled/incapable will be able to employ the contents of
NOSCRIPT elements, but there is no relationship between a script enabled
browser and the successful, active, execution of any given script. Thus
the pairing of SCRIPT and NOSCRIPT elements cannot provide the 100%
coverage that any accessibility considerations would require. Other
techniques should be used instead, and they remove the need for NOSCRIPT
elements.

But anyhow, does someone know what I should put between
the noscript tags in order to pass for that label??
I've never had to use it before.
Click to expand...

Do you want to create an accessible web site or do you want to qualify
for a badge? In the latter case you will need to provide those NOSCRIPT
elements in a way that is broadly harmless. The chances are that the
machine is not smart enough to do anything but recognise that the
NOSCRIPT element is there and be satisfied, so it could be empty. Though
the machine might notice if the element was empty and require that you
put something like &nbsp; in it.

But if the machine is satisfied by such nonsense (and/or makes the
demand in the first place) then the badge is not worth having.

Richard.
 
S

Samuël van Laere

Toby Inkster said:
Nor do I. The one improvement I would add would be this...

Replace this:

<h2>Lettergrootte</h2>
<ul>
<li><a href="javascript:ts('body',1)">Tekst vergroten +</a></li>
<li><a href="javascript:ts('body',-1)">Tekst verkleinen -</a></li>
</ul>

with this:

<div id="lettergrootte">&nbsp;</div>

And then, at the end of this file:

http://www.oukje.nl/jscript/textsizer.js

add the following extra lines:

function grootte () {
var d = document.getElementById("lettergroote");
var t = "<h2>Lettergrootte<\/h2>\n";
t = t + "<ul>\n";
t = t + "<li><a href="javascript:ts('body',1)">Tekst ";
t = t + "vergroten +<\/a><\/li>\n";
t = t + "<li><a href="javascript:ts('body',-1)">Tekst ";
t = t + "verkleinen -<\/a><\/li>\n";
t = t + "</ul>\n";
d.innerHtml = t;
}
var oldf = window.onload;
window.onload = function () {
if (oldf) { oldf(); }
grootte();
};

This will only show the text sizing menu in Javascript-capable browsers.
(Untested though.)
Click to expand...

Hey Toby thats a great idea, i'm no good with javascript but i'll give it a
try.
I'm sure you it works for an untested version.

Cheers,
Samuël van Laere
 
S

Samuël van Laere

Toby Inkster said:
Nor do I. The one improvement I would add would be this...

Replace this:

<h2>Lettergrootte</h2>
<ul>
<li><a href="javascript:ts('body',1)">Tekst vergroten +</a></li>
<li><a href="javascript:ts('body',-1)">Tekst verkleinen -</a></li>
</ul>

with this:

<div id="lettergrootte">&nbsp;</div>

And then, at the end of this file:

http://www.oukje.nl/jscript/textsizer.js

add the following extra lines:

function grootte () {
var d = document.getElementById("lettergroote");
var t = "<h2>Lettergrootte<\/h2>\n";
t = t + "<ul>\n";
t = t + "<li><a href="javascript:ts('body',1)">Tekst ";
t = t + "vergroten +<\/a><\/li>\n";
t = t + "<li><a href="javascript:ts('body',-1)">Tekst ";
t = t + "verkleinen -<\/a><\/li>\n";
t = t + "</ul>\n";
d.innerHtml = t;
}
var oldf = window.onload;
window.onload = function () {
if (oldf) { oldf(); }
grootte();
};

This will only show the text sizing menu in Javascript-capable browsers.
(Untested though.)
Click to expand...

Toby,

I've tried your idea, despite being untested.
But it doesn't work just yet.
Any idea's what must be done to make it work?

Cheers,
Samuël van Laere
 
M

Michael Winter

Samuël van Laere said:
"Toby Inkster" <[email protected]> schreef in bericht

[snip]
function grootte () {
var d = document.getElementById("lettergroote");
var t = "<h2>Lettergrootte<\/h2>\n";
t = t + "<ul>\n";
t = t + "<li><a href="javascript:ts('body',1)">Tekst ";
t = t + "vergroten +<\/a><\/li>\n";
t = t + "<li><a href="javascript:ts('body',-1)">Tekst ";
t = t + "verkleinen -<\/a><\/li>\n";
t = t + "</ul>\n";
d.innerHtml = t;
}
var oldf = window.onload;
window.onload = function () {
if (oldf) { oldf(); }
grootte();
};
Click to expand...
[snip]

But it doesn't work just yet.
Any idea's what must be done to make it work?
Click to expand...

There are three mistakes (two of which would cause errors) in that code:
the name 'lettergroote', which should have four Ts to match the id
attribute; the property innerHtml, in which the letters HTML should be
capitalised; and the nested, but unescaped, double quotes.

var oldf = this.onload;

this.onload = function() {var d;
if(document.getElementById) {
d = document.getElementById('lettergrootte');
}
if(d) {
d.innerHTML = [
'<h2>Lettergrootte<\/h2>\n',
'<ul>\n',
'<li><a href="javascript:ts(\'body\',1)">',
'Tekst vergroten +<\/a><\/li>\n',
'<li><a href="javascript:ts(\'body\',-1)">',
'Tekst verkleinen -<\/a><\/li>\n',
'<\/ul>\n'
].join('');
}
if(oldf) {
this.onload = oldf;
this.onload();
}
};

Similarly untested. :)

Mike
 
S

Samuël van Laere

Michael Winter said:
There are three mistakes (two of which would cause errors) in that code:
the name 'lettergroote', which should have four Ts to match the id
attribute; the property innerHtml, in which the letters HTML should be
capitalised; and the nested, but unescaped, double quotes.

var oldf = this.onload;

this.onload = function() {var d;
if(document.getElementById) {
d = document.getElementById('lettergrootte');
}
if(d) {
d.innerHTML = [
'<h2>Lettergrootte<\/h2>\n',
'<ul>\n',
'<li><a href="javascript:ts(\'body\',1)">',
'Tekst vergroten +<\/a><\/li>\n',
'<li><a href="javascript:ts(\'body\',-1)">',
'Tekst verkleinen -<\/a><\/li>\n',
'<\/ul>\n'
].join('');
}
if(oldf) {
this.onload = oldf;
this.onload();
}
};

Similarly untested. :)
Click to expand...

It still doesn't do a thing on the site - nothing show's up -
though no errors are returned, so something must be good in it.
Untested code is so cool ;)

Anyone else want to give it a try?

Cheers,
Samuël van Laere
 
S

Samuël van Laere

Jukka K. Korpela said:
Stop trying that. Aim at being accessible to different people. Aiming
at accessibility labels is not always an obstacle to that, but very
often it is.
Click to expand...
Hi Yucca,

It was not my idea, the site is accessible as it is.
But I agree with all your points.

Personally I couldn't care less about any accessibility label.
The person I build it for is a screenreader user herself,
she is the one who would like to get such a label
Having such a label sure won't make her website more accessible.

Just wish I could talk her out of it, but she's a woman so supose i'm
screwed ;)

Cheers,
Samuël van Laere
 
M

Michael Winter

Samuël van Laere wrote:

[snipped code]
It still doesn't do a thing on the site - nothing show's up -
though no errors are returned, so something must be good in it.
Click to expand...

There's nothing wrong with the code at all. However, the code in abbr.js
is very antisocial as it overwrites the listener added in mine (and
Toby's). The quick solution is to include abbr.js /before/ textsizer.js.
Untested code is so cool ;)
Click to expand...

:p

Isn't it just.

[snip]

Mike
 
S

Samuël van Laere

Michael Winter said:
Samuël van Laere wrote:

[snipped code]
It still doesn't do a thing on the site - nothing show's up -
though no errors are returned, so something must be good in it.
Click to expand...

There's nothing wrong with the code at all. However, the code in abbr.js
is very antisocial as it overwrites the listener added in mine (and
Toby's). The quick solution is to include abbr.js /before/ textsizer.js.
Click to expand...

But the abbr.js file is no longer in use at the time I posted my previous
reply.
So its not the abbr.js file causing this "not showing up" problem.

Cheers,
Samuël van Laere
 
M

Michael Winter

Samuël van Laere wrote:

[snip]
So its not the abbr.js file causing this "not showing up" problem.
Click to expand...

It was. I did test it for my previous post so there was absolutely no
doubt. If it's not working, you haven't done something properly. Did you
replace the existing list and header with:

<div id="lettergrootte">&nbsp;</div>

Simply including that element and adding the posted code works. I
guarantee it.

You might want to alter the original script so that the starting index
within the spectrum reflects the default font size. In other words,
change the 2 in

var startSz = 2;

to 0 so there isn't a large jump if the font size is increased.

You might also want to consider whether using font-relative units,
rather than pixels, is a better idea for your menu.

Mike
 
N

Nico Schuyt

Samuël van Laere said:
I'm just wondering about something.
I'm trying to get a accessibility label [Blindsurfer.be]
they did a screening for the site I build http://www.oukje.nl/
But it failed their accessibility checkpoints.
A noscript tag is needed in order to pass for the accessibility label.
Click to expand...

Replace the js code to change the font size by PHP.

In the menu:
<a name="return">
<a href="<?php echo $_SERVER['PHP_SELF']."?size=large#return"; ?>">Large</a>
<a href="<?php echo $_SERVER['PHP_SELF']."?size=normal#return";
?>">Normal</a>

In the head section:
<script language="php">
$size=$_GET['size'];
if ($size!="") {
echo "<style type=\"text/css\">\n";
if ($size=="large") {
echo "body {font-size: 120%}\n";
} else {
echo "body {font-size: 100%}\n";
}
echo "</style>\n";
}
</script>
 
D

Don

On 24 Apr 2005 Nico Schuyt wrote in alt.html
<script language="php">
$size=$_GET['size'];
if ($size!="") {
echo "<style type=\"text/css\">\n";
if ($size=="large") {
echo "body {font-size: 120%}\n";
} else {
echo "body {font-size: 100%}\n";
}
echo "</style>\n";
}
</script>
Click to expand...

What's with the:
<script language="php">
bla
bla
bla
</script> crap?

You know better than that Niko

<?php
bla
bla
bla
?>
works better for me.
 
N

Nico Schuyt

Don said:
On 24 Apr 2005 Nico Schuyt wrote in alt.html
<script language="php">
$size=$_GET['size'];
if ($size!="") {
echo "<style type=\"text/css\">\n";
if ($size=="large") {
echo "body {font-size: 120%}\n";
} else {
echo "body {font-size: 100%}\n";
}
echo "</style>\n";
}
</script>
Click to expand...
Click to expand...
What's with the:
<script language="php">
bla
</script> crap?
You know better than that Niko
Click to expand...
<?php
bla
works better for me.
Click to expand...

Uhhh, I can explain that: My editor is FrontPage. When I use <?php ... ?> FP
sometimes messes up all the code :)
 
D

Don

On 25 Apr 2005 Nico Schuyt wrote in alt.html
Uhhh, I can explain that: My editor is FrontPage. When I use <?php ...
?> FP sometimes messes up all the code :)
Click to expand...

I thought you had switched to Linux.
 
E

Edwin van der Vaart

Nico said:
Don said:
On 24 Apr 2005 Nico Schuyt wrote in alt.html
<script language="php">
$size=$_GET['size'];
if ($size!="") {
echo "<style type=\"text/css\">\n";
if ($size=="large") {
echo "body {font-size: 120%}\n";
} else {
echo "body {font-size: 100%}\n";
}
echo "</style>\n";
}
</script>
Click to expand...
Click to expand...
What's with the:
<script language="php">
bla
</script> crap?
You know better than that Niko
Click to expand...
<?php
bla
works better for me.
Click to expand...

Uhhh, I can explain that: My editor is FrontPage. When I use <?php ... ?> FP
sometimes messes up all the code :)
Click to expand...
Then don't use FP.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Good accessibility? 20
Navigation lists and accessibility issues 25
Accessibility and Validating LINK tags containing "&amp;" 3
Is the usability any good? or is it just crap? 5
Dynamic Forms, Accessibility, Usability (long) 11
Links and accessibility 5
question on pygtk and accessibility on windows. 1
Hidding text with css? 8

Members online

No members online now.
Total: 45 (members: 0, guests: 45)
Robots: 185

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,043
Latest member
CannalabsCBDReview

Latest Threads

Top