...
Required Form Input Field
Hide the <label> element for sighted users by using CSS. The label will not appear visually, but screen readers will still announce it.
Markup Example 1
| Code Block |
|---|
<label class="hiddenlabel" for="search">Search</label>
<input type="text" id="search">
<button>Search</button> |
CSS - Example 1
| Code Block |
|---|
.hiddenlabel {
display: none;
} |
...
| Code Block |
|---|
<form id="sfgov-search-form" class="sfgov-search-form"> novalidate> <label for="edit-search-input">Search<fname">First Name:</label> <input type="text" id="edit-search-inputfname"> <button>Search</button>required> </form> |
CSS - Example 2
| Code Block |
|---|
.sfgov-search-form label[for=edit-search-input] {
display: none;
} |
...