Post History

Let's take a look at what WAVE is telling us.

> > A \<button\> element is present that contains no text content (or alternative text), or an \<input type="submit"\>, \<input type="button"\>, or \<input type="reset"\> has an empty or missing value attribute.
>
> The HTML that's highlighted as being responsible for this error shows as this, including a "type=" attribute:
>
> ```html
> <button type="submit" class="button is-filled is-outlined">
> <i class="fa fa-search"></i>
> </button>
> ```


Like WAVE says, the button has

 - No text content (the only content is an empty `<i>` element)
 - No alt text
 - No value attribute

To fix this issue, add one or more of these.

Since you're using Font Awesome, I'll refer you [Font Awesome's guidelines on accessibility with icons](https://fontawesome.com/v6/docs/web/dig-deeper/accessibility#icons-used-as-semantic-elements-2).

> ## Icons Used as Semantic Elements
> If your icons have semantic meaning, you'll need to manually add a few things so that your icon is appropriately accessible:
> 
> ### Web Fonts Implementations
>
> 1. Add an `aria-hidden="true"` attribute to the icon.
> 2. Provide a text alternative inside a `<span>` (or similar) element that is a sibling to the icon.
> 3. Include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies.
> 4. Include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies.	

Following the example there, you could change it to the following to make it more accessible:

```html
<button type="submit" class="button is-filled is-outlined">
    <i aria-hidden="true" class="fa fa-search"></i>
    <span class="fa-sr-only">Submit search</span>
</button>
```