SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Proper Markup for Input Note

    I need to place a small note beneath an Input Box on a Form to help Users properly complete the Form.

    PHP Code:
        <label for="msgTo">To:</label>
        <input id="msgTo" name="msgTo" type="text" maxlength="30"
             value="<?php echo (isset($msgTo) ? str2htmlentities($msgTo) : ''); ?>" /><!-- Sticky Field -->
        <sometag>Please do the following...</sometag>

    What is the proper markup to use?

    <div> ?

    <p> ?

    <span> ?

    Other?


    Sincerely,



    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    If the message relates to the input above, I would do it as part of the label. Otherwise, you are assuming the user can see the screen. (Best to have the "watch your step" warning before the step, rather than after. )

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If the message relates to the input above, I would do it as part of the label. Otherwise, you are assuming the user can see the screen. (Best to have the "watch your step" warning before the step, rather than after. )
    Well, here is a screen-shot of what I'm trying to create...

    Attachment 63407


    Besides liking the look of that, my Form is set up to display Error Messages to the right of each Form Control when there is a data-entry error. And I don't plan on changing that, so the location of "You may send your message..." seems to be the best location.

    Sincerely,


    Debbie

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm thinking a simple <p> would do...


    Debbie

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    You missed the point of what I was saying. If you really want to do this properly, don't just think of it in visual terms, but also semantic terms. I never like to have instructions come after the point of action. I would place the instructions before the input, under the label, probably as part of the label (perhaps a span within the label set to display block so that it sits beneath the label, and styled differently).

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You missed the point of what I was saying. If you really want to do this properly, don't just think of it in visual terms, but also semantic terms. I never like to have instructions come after the point of action. I would place the instructions before the input, under the label, probably as part of the label (perhaps a span within the label set to display block so that it sits beneath the label, and styled differently).
    How about this... (Disregard the "To" and "Bcc" code as I haven't updated the ID's and Names yet)

    PHP Code:
        <!-- SEND PRIVATE MESSAGE FORM -->
        <form id="sendPM" action="" method="post">
            <fieldset>
                <legend>Send Private Message (PM)</legend>

                <div id="multipleUsers">
                    **You may message to up to 5 people at a time.<br />
                        &nbsp; &nbsp; Separate usernames with a semicolon. (;)</div>

                <!-- PM To -->
                <label class="recipients for="pmRecipient">To:</label>
                <!-- Sticky Field -->
                <?php
                    
    echo '<textarea id="pmRecipient" name="pmRecipient" cols="35" rows="2">';
                    echo (isset(
    $pmRecipient) ? str2htmlentities($pmRecipient) : '');
                    echo 
    "</textarea>";

                    if (!empty(
    $errors['pmRecipient'])){
                        echo 
    '<span class="error">' $errors['pmRecipient'] . '</span>';
                    }
                
    ?>

                <!-- PM BCC -->
                <label class="recipients" for="pmRecipient">Bcc:</label>
                <!-- Sticky Field -->
                <?php
                    
    echo '<textarea id="pmRecipient" name="pmRecipient" cols="35" rows="2">';
                    echo (isset(
    $pmRecipient) ? str2htmlentities($pmRecipient) : '');
                    echo 
    "</textarea>";
                    if (!empty(
    $errors['pmRecipient'])){
                        echo 
    '<span class="error">' $errors['pmRecipient'] . '</span>';
                    }
                
    ?>
    Is that more accessible?


    Here is what it looks like...
    Attachment 63408


    Sincerely,


    Debbie

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Is that more accessible?
    It's a more logical order, I think. In certain modes, screen readers may or may not skip the div text, though. But @Stomme poes is better placed to advise on such things.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I've been using p's + aria-describedby, but not sure it matters.
    A screen reader in forms mode would ignore the div/p/whatever, but not all readers have a virtual buffer that only looks at form controls. So a good order may help, though our e-commerce help text tends to be underneath (I think because the error text goes there as well).

    <label for="foo">Foo? </label>
    <input type="text" id="foo" name="bar" aria-describledby="multipleUsers">
    <p id="multipleUsers">
    **You may message to up to 5 people at a time.<br >
    &nbsp; &nbsp; Separate usernames with a semicolon. (;)</p>

    If you use this version, be sure to use aria-describedby. It looks similar to aria-labelledby, but the latter is for things without any label, and so will override any actual label you have. You don't want that.

    What ralph is talking about is an extended label. They look like this:

    <label for="foo">Foo? <span><b> **You may message to up to 5 people at a time.</b>
    Separate usernames with a semicolon. (;)</span></label>
    <input type="text" id="foo" name="bar">

    where the label is position: relative and the span can be placed pretty much anywhere. The b is just some random sandbag so you can have a break by making it display: block. Could be another span instead. Screen readers don't get any semantics from <b> that I know of, so it's a nice throwaway tag, because for everyone else you can font-weight: normal it.

    The benefit of the second method is it doesn't rely on aria-stuff. Because the instruction is in the label, it's pretty much available to everyone.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I've been using p's + aria-describedby, but not sure it matters.
    I have no clue what that is...


    What do you think about the screenshot in Post #6?


    That is more in line with what Ralph suggested, and I think it looks pretty good.


    Quote Originally Posted by Stomme poes View Post
    What ralph is talking about is an extended label. They look like this:

    <label for="foo">Foo? <span><b> **You may message to up to 5 people at a time.</b>
    Separate usernames with a semicolon. (</span></label>
    <input type="text" id="foo" name="bar">
    If I want things to look just like the screenshot above, can I move the <span> before "Foo?" in your example?


    Quote Originally Posted by Stomme poes View Post
    The benefit of the second method is it doesn't rely on aria-stuff. Because the instruction is in the label, it's pretty much available to everyone.
    But isn't that somewhat misleading, since those instructions would technically apple to both my "To:" and "Bcc:" fields? (I left the "Bcc:" field out until I get the "To:" field styled right and my back-end code working right.)

    Sincerely,


    Debbie

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Thanks poes. ARIA is cool. Much better than HTML5 elements, IMHO.


Bookmarks

Posting Permissions

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