Kevin Powell - Community•3d ago

How problematic is this for accessibility?

<button form="delete-form">Delete Post</button>
<form style="display: none" id="delete-form" method="POST" action="..."></form>

<button form="delete-form">Delete Post</button>
<form style="display: none" id="delete-form" method="POST" action="..."></form>

6 Replies

corizon.•3d ago

Hidden form (with display: none) Assistive technologies (like screen readers) may not detect the form at all, depending on how the browser and screen reader interpret display: none. Lack of user feedback If there's no visible form or confirmation UI, users (especially keyboard or screen reader users) may not know what's going to happen when they press the "Delete Post" button. “Delete Post” is a terminating action. so there should be some aria-label, confirmation prompt, or dialog to make this interaction clearer. I hope you get You can just use a visible form:

<form id="delete-form" method="POST" action="/delete-post">
  <button type="submit">Delete Post</button>
</form>

<form id="delete-form" method="POST" action="/delete-post">
  <button type="submit">Delete Post</button>
</form>

but if you want to keep the button outside the form just hide it with css.

lkoOP•3d ago

Yeah you're right, but I wrote it just an example, what I meant was, is a form, where all related field are outside of it, accessible?

corizon.•3d ago

something like:

.hidden-form {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden-form {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

I believe it's valid in HTML5 and will work as supposed, but it can come in with some accessibility and semantic drawbacks. so, generally It's not ideal for accessibility. it will come with issues that will affect screen readers and few other factors which i'm not really sure of.

lkoOP•3d ago

Thanks @corizon.

corizon.•3d ago

you're welcome bro

Zach•2d ago

Put button in form As an input type button

Gaming

Programming

How problematic is this for accessibility?

Did you find this page helpful?