Semantics

  • Semantics
    Hi. Thank You for the wonderful world of WordPress. I have set up and changed things on the default setup to suit my needs without:

    • Posting here before
    • Any PHP experience
    • Any XHTML experience
    • Any CSS experience

    That tells me (and you maybe?) that the WordPress blog system is powerful and easy to use. What facinates me is the standards and the semantic orientation in the WordPress community. However, there is a little slip in semantics (I believe).
    None of the tekst indicating the menu categories (ie: Links, Categories, Search) are semantically attached to the category that they belong. For instance is the Search label just text, with no code indicating it’s meaning and attachment to the Search form.
    For future releases maybe this should be thought of? Btw: This is also a requirement in most accessibility guidelines. Here is how I solved it. Can someone litterate in XHTML and semantics please give me feedback. Can WordPress team use this?
    <li id="search"> <form id="searchform" method="get" action="<?php echo $PHP_SELF; /*$siteurl."/".$blogfilename*/ ?>"><label for="ss" <span class="blah" </span>Search:</label>
    <div>
    <input name="search" id="ss" type="text" size="15" title="Please enter your searches here."" alt="Search-field" />
    </div>
    </form>


    Well.. That was my first post here and my 2 cents in the semantics discussion. NOW the Search text is semantically attached to the search field.
    Cheers from Andreas

Viewing 5 replies - 1 through 5 (of 5 total)

  • Andreas,
    Thank you very much sharing your experiences, lately people have been so negative on the forums it’s easy to forget the silent masses who have little or no trouble with WordPress.
    You’re right that that “Search:” should be attached to the form element somehow, and <label> is the correct way to do this. I have added this to my todo list for 1.1. Thanks for pointing that out.

    Well spotted! I never noticed the lack of proper labelling there before, but it’s of course needed to conform to Section 518 guidelines. Something seems screwed up in the code though – I’m guessing you had a link or something in the span? Try again with the widget here. ??

    I also added label to the search form while getting the site to validate for 508 compliance:
    <form id=”searchform” method=”get” action=”/index.php”>
    <h3><label for=”s”>Search:</label></h3>
    <div>
    <input type=”text” name=”s” id=”s” size=”15″ value=”Search…” onfocus=”clearDefault(this)” />
    <input type=”submit” name=”submit” value=”search” />
    </div>
    </form>

    Oops, forgot to mention something: for 508 compliance, you should also have a default value for input fields. That’s why I have value=”Search…” set. The onfocus=”clearDefault(this)” clears the input field when it receives focus (the cursor lands in the field). The clearDefault(this) function is simple, and something I always add to my default.js file:
    // This function clears the default value from a form field
    function clearDefault(el) {
    if (el.defaultValue==el.value) el.value = “”
    }
    -Tony

    Hi again, and thanks for fast replys!
    Willm, thanks, but i’m afraid that was just luck. as I’ve said I don’t know PHP, so i’m just tryiing things out and if it works and validate it’s fine for me.
    So to be onest….The span tag is there because if I didn’t have it “Search:” didn’t show up on the page.. probably something else I don’t understand in the CSS i guess, LOL.
    tcervo: Thanks for the help! I have made the change to the search-field right after posting here. But I used “onfocus=”this.value=”;” in the <input> tag.
    Cheers – Andreas

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Semantics’ is closed to new replies.