Search field is missing a label

[LJWatson]

The search field on mockup1 does not have an associated label (needed to indicate to screen reader users what the field is for).

<div id="search-form">
<input tabindex="3" class="text" name="q" title="Search"> <button id="search-submit" name="search-submit" type="submit"><img class="submit" src="https://www.w3.org/2008/site/images/search-button" alt="Search" height="17" width="21"></button>
</div>

On the assumption that the <button> element contains an image that provides an adequate visual label for the text field, use the title attribute on the <input> to provide a label specifically for screen reader users.

<div id="search-form">
<input title="Search" tabindex="3" class="text" name="q" title="Search"> <button id="search-submit" name="search-submit" type="submit"><img class="submit" src="https://www.w3.org/2008/site/images/search-button" alt="Search" height="17" width="21"></button>
</div>

It would also be good to add the search role to the containing <div> element. This will create a landmark for screen reader users to navigate to.

<div role="search" id="search-form">
<input title="Search" tabindex="3" class="text" name="q" title="Search"> <button id="search-submit" name="search-submit" type="submit"><img class="submit" src="https://www.w3.org/2008/site/images/search-button" alt="Search" height="17" width="21"></button>
</div>