Online Availability - Shortcut

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> 

• The style of my labels is display: none, is that normal?
• Also, are labels used, and are they important? This is the first time I have seen an HTML tag, but am exploring the accessibility of my new site.

Edit

A quick question also, the main reason for this, of course, is to help the less fortunate, but does this material help for SEO, since the web crawler is also essentially blind?

Answer 1

The label element is still in use, and I hope it stays that way (people with disabilities are especially grateful to them).

A clear semantic relationship between the input element and the label allows the screen reader to clearly indicate to the user what information should be entered on which input data.

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

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

While on the topic of accessibility, you can include this input in HTML5 search input .

Browsers that support it will semantically know what it is, since it cannot get it out of your class / id / label / etc.

Update

I am trying to just use this description for screen reading. I don’t want my regular visitors to see it, because any text in this search page distracts from the style of the page.

You can use the HTML5 placeholder attribute, this will display the text inside the element that 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 this).

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

Answer 2

display: none; should be used with caution - if items are removed from the DOM in this way, the supporting software cannot access this information unless you specifically set the item to display again. For some support software, visibility: hidden; exhibits the same behavior, i.e. That hidden content is not read by software.

If you want to hide content useful for reading from the screen, text-indent:-999px; or position:absolute;left:-999px; are known to be quite safe, although I heard that there are some cases of edges where the position:absolute; method position:absolute; may cause problems. More recently, the clip property has been proposed as a solution.

In addition, I would like to note that the implicit marking by wrapping <input> in <label> was which, as you know, causes problems in some screen readers . Explicit labeling (using the for and id attributes) is more reliable and will not be broken if you ever decide to change your HTML. If you are worried about backward compatibility, IE 6 and below do not perform the behavior of the "click label to focus input" label unless you use explicit labeling.

EDIT: I forgot to mention that for the <label> input element, you can use the form input shortcut using the title attribute in the <input> element, which avoids the need to hide the label at all. Additional Information: Header attributes as form control labels .

Answer 3

If you hide content from Average visitors, but want those with higher availability to be able to see it, you can make the display lable on standard css and then use media special CSS to make it visible if necessary.

CSS: Media