Web accessibility - Label

Question

    <div class="searchWrap">
        <label for="SearchBox">Search Scirra</label>
        <input type="text" name="SearchBox" id="SearchBox" tabindex="1" />
        <div class="s searchIco"></div>
    </div>

• My labels style is display:none, is this OK?
• Also, are labels still used, and are they important? It's the first time I've seen the HTML tag but am researching accessibility for my new site.

Edit

Quick question also, the primary reason for this of course is to help the less fortunate, but does this stuff also help for SEO, as a web crawler is also essentially blind?

Answer 1

The label element is still used, and I hope it stays that way (people with disabilities are especially thankful for them).

The clear semantic tie between the input element and the label allow a screen reader to clearly dictate to the user what information should be entered to which inputs.

As for display: none on it, I'm not sure if that will still be read. If not, you could try text-indent: -9999px.

Fangs is a good screen reader emulator to test this out on. It requires FireFox.

Whilst on the topic of accessibility, you could turn that input into a HTML5 search input.

Browsers that support it will know semantically exactly what it is as it can't infer it from your class/id/label/etc.

Update

I'm trying to just use it a describer for screen readers I don't want my regular visitors to see it as any text in that searchwrap detracts from the page style.

You could use the HTML5 placeholder attribute, this will display some text inside the element which describes what it does (search in this case). It is not widely supported, but there is JavaScript that emulates it (I wrote a jQuery plugin that does it).

One last thing, is I like to put label { cursor: pointer } in my CSS to help users know that it is clickable (very useful for checkboxes and radio boxes).

Answer 2

display: none; must be used with caution - when elements are removed from the DOM in this way, assistive software cannot access that information until you specifically set the element to display again. For some assistive software, visibility: hidden; exhibits this same behaviour, i.e. that the hidden content is not read out by the software.

If you wish to hide content that is useful to screen readers, text-indent:-999px; or position:absolute;left:-999px; are known to be fairly safe, although I've heard there are some edge cases where the position:absolute; technique can cause problems. More recently, the clip CSS property has been suggested as a solution.

Also, I wanted to note that implicit labelling by wrapping the <input> in the <label> has been known to cause issues in some screen reader software. Explicit labelling (using for and id attributes) is more robust and won't break if you ever decide to rearrange your HTML. If you're worried about backwards compatibility, IE 6 and below do not do the "click label to focus input" behaviour unless you use explicit labelling.

EDIT: I forgot to mention that it is valid to label a form input using a title attribute on the <input> element to replace the <label> element, which would avoid the need to hide the label at all. More info: Title Attributes as Form Control Labels.