Noscript and accessibility??

Discussion in 'HTML' started by Samuël van Laere, Apr 24, 2005.

  1. 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
    Samuël van Laere, Apr 24, 2005
    #1
    1. Advertising

  2. Samuël van Laere

    Toby Inkster Guest

    Samuël van Laere wrote:

    > 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.


    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.)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 24, 2005
    #2
    1. Advertising

  3. "Samuël van Laere" <> wrote:

    > I'm trying to get a accessibility label [Blindsurfer.be]


    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.


    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.


    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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Apr 24, 2005
    #3
  4. Samuël van Laere wrote:
    > 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.


    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.

    <snip>
    > 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.


    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.
    Richard Cornford, Apr 24, 2005
    #4
  5. "Toby Inkster" <> schreef in bericht
    news:p...
    > Samuël van Laere wrote:
    >
    > > 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.

    >
    > 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.)


    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
    Samuël van Laere, Apr 24, 2005
    #5
  6. "Toby Inkster" <> schreef in bericht
    news:p...
    >
    > 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.)
    >


    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
    Samuël van Laere, Apr 24, 2005
    #6
  7. Samuël van Laere wrote:

    > "Toby Inkster" <> schreef in bericht
    > news:p...


    [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();
    >> };


    [snip]

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


    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

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Apr 24, 2005
    #7
  8. "Michael Winter" <> schreef in bericht
    news:YHTae.18894$...
    >
    > 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. :)
    >


    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
    Samuël van Laere, Apr 24, 2005
    #8
  9. "Jukka K. Korpela" <> schreef in bericht
    news:Xns96428E2E5A7Bjkorpelacstutfi@193.229.0.31...
    >
    > 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.
    >

    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
    Samuël van Laere, Apr 24, 2005
    #9
  10. 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.


    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 ;)


    :p

    Isn't it just.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Apr 24, 2005
    #10
  11. "Michael Winter" <> schreef in bericht
    news:KCUae.18929$...
    > 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.

    >
    > 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.
    >


    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
    Samuël van Laere, Apr 24, 2005
    #11
  12. Samuël van Laere wrote:

    [snip]

    > So its not the abbr.js file causing this "not showing up" problem.


    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

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Apr 25, 2005
    #12
  13. Samuël van Laere

    Nico Schuyt Guest

    Samuël van Laere wrote:
    > 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.


    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>


    --
    Nico
    http://www.nicoschuyt.nl
    Nico Schuyt, Apr 25, 2005
    #13
  14. Samuël van Laere

    Don Guest

    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>


    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.



    --
    Don
    Don, Apr 25, 2005
    #14
  15. Samuël van Laere

    Nico Schuyt Guest

    Don wrote:
    > 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>


    > What's with the:
    > <script language="php">
    > bla
    > </script> crap?
    > You know better than that Niko


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


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

    --
    Nico
    http://www.nicoschuyt.nl
    Nico Schuyt, Apr 25, 2005
    #15
  16. Samuël van Laere

    Don Guest

    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 :)
    >


    I thought you had switched to Linux.

    --
    Don
    Don, Apr 25, 2005
    #16
  17. Samuël van Laere

    Don Guest

    On 25 Apr 2005 Nico Schuyt wrote in alt.html

    > My editor is FrontPage.


    AAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGG

    --
    Don
    Don, Apr 25, 2005
    #17
  18. Nico Schuyt wrote:
    > Don wrote:
    >>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>

    >
    >>What's with the:
    >><script language="php">
    >>bla
    >></script> crap?
    >>You know better than that Niko

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

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

    Then don't use FP.
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
    Edwin van der Vaart, Apr 25, 2005
    #18
  19. Samuël van Laere

    Don Guest

    On 25 Apr 2005 Edwin van der Vaart wrote in alt.html

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

    > Then don't use FP.


    Don't be so picky.

    --
    Don
    Don, Apr 25, 2005
    #19
  20. Don wrote:
    > On 25 Apr 2005 Edwin van der Vaart wrote in alt.html
    >
    >>>Uhhh, I can explain that: My editor is FrontPage. When I use <?php ...
    >>>?> FP sometimes messes up all the code :)

    >>
    >>Then don't use FP.

    >
    > Don't be so picky.

    Wow!! He knows my nick name.
    --
    Edwin van der Vaart (Picayunish)
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
    Edwin van der Vaart, Apr 25, 2005
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. William.R.Reisen
    Replies:
    2
    Views:
    419
    Alan Wood
    Jul 25, 2003
  2. Burton Figg
    Replies:
    13
    Views:
    5,254
    Toby A Inkster
    Dec 31, 2003
  3. natric

    About NOSCRIPT positionning

    natric, Apr 20, 2004, in forum: HTML
    Replies:
    8
    Views:
    778
    Toby A Inkster
    Apr 26, 2004
  4. Jonathan N. Little
    Replies:
    13
    Views:
    5,629
    Jonathan N. Little
    Feb 6, 2005
  5. Dst
    Replies:
    2
    Views:
    892
Loading...

Share This Page