I am editing html codes for web accessibility but I faced one problem about Multiple form labels. I am using Wave plugin to check web accessibility.
Errors is
Multiple form labels
What It Means
A form control has more than one label associated with it.
The problem is that there is a page user can input user info, and a button to call pop up then the pop up has all same fields again to register if user did not input the field.
Instead of changing ID of the field in popup, is there any quick and easy way to remove the error?
From W3Schools:
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
So yes, you need to define a unique ID for each and every component. This is the only clean way to solve your problem, otherwise a screenreader could read the wrong label when you focus one of your input fields.
One way to fix this other than changing IDs is to wrap the input in the label.
<label>
First Name
<input />
</label>
This is semantically correct and avoids the labels needing for and associated input id attributes.
You obviously might need to refactor some stuff and it seems like more hard work than just changing some IDs but that is an option (I know you will have probably fixed this by now, this is more for reference if someone else comes to this question.)
See: https://stackoverflow.com/a/774065/2702894
Related
Currently I am working on a form builder,
the user can add input box with different name into the form.
Notice that the form will be stored as HTML code, so the only concern is the input box name storage and submit form value
Now I have draft a table like this
form
-----
id
inputs
------
form_id
name
values
-------
input_id
value
One problem I can think of is the data type of value,
the above design works only if the value is text / textarea
How to handle if the input box is file upload / radio / select?
so are there are Any better design,
thanks a lot for helping.
you have to store element type also. according to the element type,find out which html element it is and render this
You will need an extra table for radio and select, since it has multiple rows for one <input> field.
Don't forget about optional things like id=, name=, style=, class=, etc.
I predict that your finished product will be as clumsy to use as typing the form elements by hand.
I have a page where a user can edit a large (~) amount of small items with a very few options, like remove, turn off, turn on and edit name of the item.
I don't know why but the current approach I'm using does not give me the "good code" feeling. I create a form for each action on each item, so I have like 3 forms per item. I feel like forms were meant to submit larger amounts of information.
Fortunately, I found the form* attributes html5 offers (HTML5, yayy!) that kind of allow for this. I created a single delete form on the page and then on each item I added a button, outside of the form.
<button type="submit" form="delete_form" name="item-id" value="1">Delete</button>
Unfortunately that is not the case with the edit-name form. If I add a single form on the page, then have input elements for the name on every item, like
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="1">Update</button>
...
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="2">Update</button>
Then on the landing page, item-name will always be the last input's value. I haven't tested this but I am assuming that when submitting the form all input fields pointing to that form with their form attribute are being collected and sent, then on the other side they are all being processed and I'm getting the last one since they all have the same name and are being overwritten.
How, if at all, can I have only a certain input be submitted, depending on which button was clicked, instead of all?
Notice: I can think of hacky ways like including the item id in the input name but it doesn't seem right, also what if there is no id at all.
If a specific button should only post a specific input, then making separate forms sounds like the right way to go.
Your assumption is right, by the way, so another solution would be to put all inputs in the same form, but give them different names, indeed based on an item id. Adding a unique ID or name is the right way to go. After all, how would you know what you are editing if you have no ID? Currently the ID is in the button too, right? You need it.
Anyway, with such a form you can save them all with one click on a submit button.
From a UX perspective, maybe that's a better approach too. Now you would have to do and save each edit separately, which results in a page refresh, which can be annoying and slow.
I would make a form in two versions.
Non-Javascript
The basic form shows all the items to edit, each followed by a group of radio buttons that allow you to update, delete, turn on, or turn off the item.
The form has one big submit button that posts the entire form. All items are updated or their state is changed depending on the radio buttons.
This way, a user can relatively easily edit all items and post their changes without a lot of page refreshes.
JavaScript additions
Using JavaScript/JQuery, you can modify the form. Change the radio buttons to normal buttons and perform the action using AJAX, but only for the item they belong. The big button at the end can be removed, and the form can be altered so it doesn't submit anymore. This way, a user has a rich interaction without the nuisance of the page being constantly reloaded.
We have UI widget that is a composite of input field and an icon. This widget is basically meant to be used as a form field to let users select a value from a huge list of values. Users can either type a value in the input field or click on the icon to launch a dialog with all the possible value list. Selecting a value in this dialog will set the value in the input field. Users can also type a partial value in the input field and tab-out in which case, the widget tries to autocomplete the value entered and if it doesn't succeed, it will launch the same dialog as user clicking on the icon.
How would I make such a widget accessible through screen readers? There doesn't seem any role or any other aria attribute which seems to be tailor made for my usecase. At the minimum, I would expect the users using screen readers to know that this widget has an helper icon from where a value can be selected.
I am reading this as an order database/form, where call takers can just select type in the customer number or fill out the 10+ fields. And if the caller doesn't know their ID or whatever, the call taker can do a search.
I recommend removing the autocomplete on tab functionality, because that wouldn't too fun for some. I'd code it like:
<p id="instr">Put instructions here</p>
<label for="user">Look Up User</label> <input id="user" aria-describedby="instr">
<input type="button" value="Populate Form">
<input type="button" value="Search">
I made an answer about modals quite some time ago, that should get you started. The listing in the dialog may not be the most fun to wade through. I'd recommend either updating this question or making a new one for that part.
Interesting and challenging.
To start with make sure icon has an alt text which explains its role - this is assuming it is an image. If not use title attribute to explain its role.
Add a title attribute to the input box and succinctly mention that user can also chose values using icon or partially type its value to autocomplete it.
If your form design allows instructions to be placed next to the form fields place a descriptive text right next to the widget.
These recommendations may not make it entirely accessible but will surelytake you close to where you want to be. I'm hoping that this widget will be used in more than one place in your project allowing user to get accustomed to it.
Last one to consider is to see if any aria role fits your widget controls in any way.
I have a form which is used as an interface for CRUD on database records. Some of the elements on the form are interdependent, such that if one field has a value of X, then other fields should be made required and filled out by the user.
A simple example might be something like a personal info section:
<select name="relationship-status">
<option value="single">Single</option>
<option value="married">Married</option>
</select>
<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />
...where the fields spouse-first-name and spouse-last-name would be required if relationship-status was set to married, and would be disabled (or hidden) otherwise.
My question is, in this example, when a person goes from married to single and wants to update their data as such, we also want to clear the spouse name values and post this back to the server so that the values are cleared in the database. We can use JavaScript to clear the fields for them when they change to single, but if we disable the form elements so that they can't edit them, then they don't get POSTed when the form is submitted.
I can think of the following solutions:
We could make them readonly instead of disabled, but that method only works for certain form controls (specifically, it does not work for other select elements), so this isn't an option.
We could duplicate each of these fields as a hidden input that would be POSTed with the form, but not editable by the user, but this seems like such a hack.
We could also enable the disabled fields right before submitting, and then re-disable them right afterwards. This is the method I'm using right now, but I feel like I'm missing something, and there has to be a better way.
Is there something I'm not thinking of, or a more sensible way of accomplishing both:
Not allowing the user to edit a field, and
Allowing the field's value to be POSTed with the form, even if blank.
My recommendation is, beside to make the validation in the client side, add in the javascript the function form.submit(), if someone disable the JS won't be able to submit the form, beside that agree with the others comments, add server validation.
I found that the most robust and least kludgy solution is to use the readonly property for all elements except <select>. For <select> elements, I just disable the <option> child elements that aren't currently selected. This effectively prevents the user from changing the value. I then color the <select> as though it were disabled with a gray background to complete the illusion. At this point, all form elements will post with the form, even with no values, and regardless of whether they're "disabled" or not.
I have access to form field in the administrative view.
Example
<label>Number:</label>
<input type="text" name="title" size="50"/><br/>
I do not have access to modify the html syntax, the only thing i can do is updating the form field with a value.
In the form field i want to update it with a number. I also want to have a link assigned to that number.
So when i click that number it directs us to the link.
Is there a way i can do that?
This method is tedious, but you could use the jQuery nth-selector to select the specific form element that you are dealing with.
http://api.jquery.com/nth-child-selector/
This method is risky, however, since you might add other form elements before it, altering the index of your target input element.
Afterwords, you could use the .val() jQuery method to change your input value.
Nonetheless, again, this method is not safe because the index of the form element could change. I would beg the powers of be to be able to add an ID or some identifying attribute to that form element.