-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve accessibility in prerendered form fields #1069
Comments
It might be better to wrap the input and error in the label to make rendering simpler. E.g. <div class="mb-2">
<label class="block">
<span class="block">Name</span>
<input type="text" name="name" value="">
<span>Error</span>
</label>
</div> But I agree this would be a good improvement. |
I was just about to create a similar issue. I actually have a few additional suggestions for accessibility. I also personally prefer NOT to have my labels surround the inputs (unless they're checkboxes). But that's mainly personal preference The default form views are missing some basic attributes necessary for making forms more accessible and easier to navigate with a screen reader. Here's an overview of suggested updates.
Here is how we have handled these requirements:
Then for ALL fields the following attributes need to be added:
As shown here in the forms > fields > default.antlers.html file:
Happy to get additional feedback from anyone else that has to meet WCAG AA standards :) |
Currently, the prerendered form fields have no
id
attribute, so they can not be linked in the<label>
using thefor
attribute. This hurts accessibility.It would nice to have an autogenerated ID property in the field object. Probably the
handle
with a random suffix, to prevent duplicate IDs in the HTML of the page. In the templates these IDs should be used in theid
attribute.Antlers template:
Output:
The text was updated successfully, but these errors were encountered: