Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 18 of 18
  1. #16
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    As another practical matter, I can accomplish the equivalent of <label> without using it.

    Code:
    <span class="label"><input type="radio" name="gender' value="M"> Male</span>
    ....
    <script type="text/javascript">
    var myLabels = document.getElementsByClassName("label");
    for ( var m = 0; m < myLabels.length; ++m )
    {
        myLabels[m].onclick = function( ) {
            this.getElementsByTagName("input")[0].click(); 
        }
    }
    </script>
    So in what way does a <label> *NEED* to be different than a <span> used in such a way?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  2. #17
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by Old Pedant View Post
    Okay, you can click on such a label and then...so what?
    Try listening to a web page using a web reader and you will soon be able to tell the difference. Your span version doesn't tell the person that the test is the label for the radio button so they might think that whatever text immediately preceded the button is the label and end up selecting the wrong radio button. Your JavaScript implements a secondary side effect of labelling the field but without dealing with the primary purpose of associating the label with the input so that the browser/web reader knows that they are related.

    Not everyone can see the web page - how is a blind person supposed to tell what label belongs to which field if they are not defined as labels. Its the same as supplying alt text for images so that the blind person at least knows what the purpose of the image they can't see is and specifying the relationships between the headings and columns/rows in a table. In each of these cases what is obvious to someone who can actually see the page is only obvious to the person listening to the page because they get told the extra information.

    I agree that nesting the field inside the label is intended (by those who defined the standard) to indicate that the label is identifying that field - it just seems semantically wrong to me so I always code them the other way - which is equally valid according to the standard and seems to me to be more semantically correct despite needing the extra code (which definitely makes writing the JavaScript validation slightly easier - what you lose in the extra HTML you gain in the reduced JavaScript).

    Now I'll have to write some example pages for how to interact with a form from JavaScript when the field doesn't have an id and also write an article about the two alternative ways of "attaching" a label to an input and the situations where only one works - along with another article on why all form fields (except buttons) need to be labelled.
    Last edited by felgall; 04-30-2013 at 10:14 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  3. #18
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Try listening to a web page using a web reader and you will soon be able to tell the difference.
    *GULP*

    Shame on me. You just 100% convinced me.

    I have a couple of blind friends who *DO* use web readers (though one of them prefers his braille reader). And if what you say is true (and I really do believe you that it is), then I am indeed making a big mistake.

    I hereby promise to change my ways.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •