We Keep Coding

Empty button error in wave accessibility check

Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.

"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?

You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation

How can I make an Image clickable to a javascript script

So this is the code!
<a class="gray" onclick="javascript:window.open('https://forms.zohopublic.com/cpmovers/form/Locationupdates/formperma/0e5D2g0E23J372HC4Dek22J43');">Customer Form</a>
What I want to be done is so instead of the submit button. I want it to be the logo, so it can be clickable. I hope I explained myself well. An image turned into a clickable that leads to this whole code.

I don't see the image tag... but you need to set an onclick attribute for the image tag
example:
<img src='img/name.jpg' onclick='myFunction()'/>
and inside javascript you will have:
function myfunction(){
document.getElementById('formId').submit();
}
As i see that link re-directs you to a form, what you will need to do is to position the image where the submit button was and then add the script so when you click the image it will submit the form you have on your page

How to directly type into a button?

There are a lot of buttons in my HTML. And each time when I click on one button, that button is activated (other buttons are deactivated). And I want that, letters can be directly typed onto that specific button like a textbox (type="text"). Is that possible with javascript? Or do I need other things like JQuery, etc?? Thanks!

Something like this?
<button contenteditable="true">Foobar</button>

One way is to add an input element inside a button element.
For example:
<button>
<input type="text" placeholder="type somthing here" />
Send
</button>
See the working version:
https://jsbin.com/lomufaqoxe/edit?html,output

You can wrap an input tag around a button tag and style it with CSS so that it merges with your button.

HTML proper way to make an image act as a button without submitting

I need to put an image that acts as a button which takes you back one screen. I've written the following for going back to the previous screen:
<input type="image" src="../../img/button_cancel_gray.gif" type="button" onclick="history.go(-1);"/>
Which works, except it's also submitting the form. I need it to prevent submitting the form.
For an alternative, I've tried to wrap the image inside a button.
This one works too but now it shows the default border of the button outside the image, which makes it look ugly.
So how do you make an image act as a button that runs onclick but not submit the form?

Make the onclick event return false, which will prevent form from submitting.
onclick="history.go(-1);return false;"

How Does Digg remove "&x=0&y=0" from their Search Results URL?

I'm using an image as the submit button for a search form, i.e.:
<input id="search" type="image" alt="Search" src="/images/searchButton.png" name=""/>
This has an unfortunate side effect in Chrome and Firefox--the parameters &x=0&y=0 appear on the end of the search results URL, for example if I search for "food" I am directed to the page:
main/search?search=food&x=0&y=0
Some hunting around online has indicated that this is standard behavior when you use an image to submit a form.
I noticed that Digg.com uses an image to submit its search form but avoids this behavior. I can't figure out how they do it. They don't seem to be using Javascript to submit the form. Can anyone tell?

Digg is using JavaScript to do that. Try submitting the search form with JavaScript disabled in your browser.

Instead of using an <input type="image">, you could use a <button> element:
<button type="submit" style="border: 0; background: transparent">
<img src="image.png"></img>
</button>

Those parameters denote the location in which the click was exercised upon the image, which is the default behavior of most if not all browsers when it comes to using images as submit buttons. You can use a workaround that basically goes through JavaScript to submit your form, much like what you see in watain's example. Or you can create a submit button thats not a form element, by utilizing form.submit() as the action attached to that image.

You could use Javascript to submit the form like that, it's still the easiest way:
<script>
yourForm.onSubmit = function() {
location.href = 'main/search?search=' + encodeURIComponent(yourForm.elements['query'].value);
return false;
}
</script>
Unfortunately I don't know how they do it without Javascript.
EDIT: Btw you could also use a simple which will submit the form when it gets clicked.