Search code examples
accessibility

What is a valid alt text for an image only submit button?

I'm researching a website for accessibility issues and I found an image only submit input field for a search field.

Screen shot of the button, the blue one with the zoom icon.

Code of this input field is.

<input type="submit" value="Search">

I'm wondering if, giving this input field a value name 'Search' is sufficient to pass as an alternative text for succescriteria 1.1.1?

Solution

  • The value attribute provides the accessible name and visual label for a submit input, so the example should be sufficient.

    If an actual image-input was used, the alt attribute must be used to provide an accessible name:

    <input type="image" alt="Search" src="…">

    Otherwise, it depends on the way the text is replaced with the image, as CSS can influence whether something is accessible or not. If the input element itself is still visible and focusable, it’s fine. If the whole element is hidden, especially from assistive technology, it’s not.

    You can verify by inspecting the magnifying glass element in your browser, or by inspecting the accessibility properties. The name should be exposed.

    A screenshot from Firefox’s accessibility properties panel, showing name:Send Request, role: pushbutton and actions:[…]