I have a question about the accessibility for visually impaired or blind people using forms on a page.
I have two forms that can be selected via a checkbox - let's call the checkboxes 'sales' & 'rent'. Is it better to:
Have 2 forms in the page but only the 'sales' form shows for sighted people, but can be switched to the other form in the page by clicking the 'rent' checkbox.
or
Have the form being dynamic and only one form. So you have to manually click the 'sales' or 'rent' checkboxes to change the forms elements (form, inputs, selects, etc).
Which of the above is more accessible?
Both approaches can be made equally accessible. If you choose to have two forms, make sure that only one of the forms is visible to both the screen reader and the sighted users at the same time. To do this, make sure to hide the invisible form using display:none
Related
I recently turned a design in to HTML and CSS to be implemented by our back-end developers. For a search result page I used two form tags. One for the search bar and one for the sidebar with filters.
The back-end devs requested if I could just wrap everything in one form tag instead.
Due to the layout and not yet available CSS subgrid the only way to get both parts in one form wrapper is to wrap the entire content (the search results) in a form tag.
Something about this doesn't feel right even though I can't seem to find anything online other than that it's allowed to have regular HTML-tags in a form element.
My solution would be to turn both the form tags into fieldsets with each a legend to indicate what part of the form it is.
Would this be okay accessibility wise? VoiceOver doesn't seem to care about what's inside the form tag. All form fields are listed separately in the Form Controls menu.
I believe you’re suggesting a good solution and it shouldn’t pose any issues to assistive technology, if you’re respecting some points:
The form should use role="search" or have an accessible name
The form elements must stay at the beginning of that landmark
Each field needs a label, in the wireframe the text input doesn’t have one
Also each group of checkboxes needs a fieldset, since otherwise the headlines (type, category) will not be announced
You find a solution for the immediate submission of the form when changing a value (if applicable)
Any form elements inside the form will be submitted as well, so beware of their names to not overwrite form data (numbers per page)
Functions of the form tag
The form role is a landmark role, meaning it’s purpose for accessibility is to provide an anchor to jump to the form via shortcuts or from an index of forms.
What’s included in the form also determines which values will be submitted to the server, if that’s not done via JavaScript. And last but not least, it determines what elements trigger implicit submission, f.e. when pressing Enter or the Return key on a touch keyboard while inside a text input.
I do not believe assistive technology does anything other than use the landmark role.
In your case, you should use the search role instead, since it is a search form. If you don’t, you need to provide a name for the form via aria-label or aria-labelledby.
Since the form elements are at the beginning of the search or form landmark, it should be fine. The end of a landmark is not announced.
<form role="search">
<input type="search" aria-label="Search for">
<button>Search</button>
<fieldset aria-label="Filters">
<fieldset>Type</fieldset>
<label><input type="checkbox"> Type filter 1</label>
Changes of context on input
The wireframe suggests that changing the value of a checkbox’ or the select, the form is submitted automatically.
If this is so, you also need to mind that for users of assistive technology, this change of context can be disorienting and unexpected.
Understanding Success Criterion 3.2.2: On Input explains that you can work around this by indicating that the form will update immediately, or by using an additional button.
See also Does faceted search fail accessibility?
I want to display a list of contact addresses.
Each contact has information such as name, street, city, country, phone, email, website, ...
There are several hundred addresses I have to display.
A contact has to be editable on demand. That is if the user clicks an "edit" button on the side.
Now here is my issue: Is it appropriate to have several hundred forms on page which I activate with the click on the button?
Or is it better to display the data in a <div>, <p> layout and have something like a modal with the form popup?
Does it cause problems to have so many forms?
Having so many forms will cause the webpage to become bulky and slow, and it will be a hassle to maintain. In order to avoid having hundreds of forms on one page, you can have a single form which is dynamically edited according to which contact address the user selects.
There is no problem. MDN approves of multiple forms in one page.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
When researching how to write forms in HTML I see mention of the term "form control".
In particular using Twitter Bootstrap which has classes like form-control and control-label.
What exactly is a "form control"?
A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or color pickers. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g., returning the results of a search or calculation). No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.
A form control is a user interface control that serves as the point of connection between the user and the server. Interactions vary by control type: buttons: button file handling: input type="file" menus: select, etc. And are also grouped into categories
Controls are essentially an API of key-value pairs for pinging back and forth to the server.
W3C's Form Section is incredibly informative in its walk through of forms, form elements, form controls, form owners, and more insight to the inner workings of the Internet's workhorse: the humble HTML form.
References:
Forms
HTMLFormElement
Association of Controls and Forms
XForms Glossary
Form Controls Infrastructure
For Bootstrap it seems to be a styling thing: From bootstrap's page:
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
But more broadly it seems to be more, as per #the_velour_fog 's comment:
it seems to be more than just a styling thing: it seems form control just refers to the individual HTML elements in a HTML form e.g. from https://html.spec.whatwg.org/multipage/forms.html; A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or colour pickers.
The term has very little to do with styling, though styling forms is a special art.
'Form elements' are the (usually interactive) controls whose values are submitted automatically with the http request that is initiated by clicking the "submit" button - even without javaScript. Most commonly this would be button, input, textarea and similar element types. MDN has this entry with hyperlinks to documentation of each type.
Anything where a value attribute is meaningful or expected can be a form element. The name attribute is also important, since this is used (e.g. on the server side) as a 'key' for the value in the form data.
The supporting elements such as label, fieldset and legend are commonly regarded as form elements, since they exist to name and group the other form elements from the user's point of view, although they contribute nothing to the submitted form data.
There may be elements in the form which have no 'value' attribute (e.g. headings, hyperlinks or images), but strictly speaking, these are not 'form elements'. They may however contribute to the form data via client-side javaScript.
And you can use form elements in something which is not a form, or which makes parameterised http requests without an explicit form element. This is very common.
I am creating a page and the page has an editable data grid (I'm actually using jqgrid). The user can add, delete, and edit the rows of the grid. There are also some other form fields on this page such as text boxes and drop downs, but they are not part of the grid.
From a usability perspective which of the options do you think is best and why?
User manages the grid separately from the rest of the page. This means that there is a save button on the grid. So the user can save a grid row to the db without clicking the submit button. When the submit button gets clicked, the non-grid form fields get sent to the server.
user manages grid and other fields dependent upon each other. This is like an "Everything or nothing scenario." When you click the submit button, all of the form fields get submitted an saved the db along with the grid fields. If there is a validation error, nothing gets saved.
If there is a better way to handle this type of situation that I did not list, please let me know.
What I was thinking when I was in a similar situation, is how important it's that the user fills the other form fields. If they are optional and the grid is more important I would have the submit button in the grid but if I want the user to fill all the fields, the button should be at the end. In the case where the button saves the whole form, you can have a type of warning if the user skips some fields or you can have a deactivated button.
The second thing I thought was the height of the page. If the button hides 'above the fold' there is a high posibility that some users won't see it and the data won't be saved. So in that case, maybe you should have it in the grid. I would check analytics about screen resolutions.
I have a HTML form which allows a radio button selection of two products. After the product is selected, the user has the option of digital download or delivery of which there is a separate form for each asking different questions.
I need to ensure that the product selection is passed to either of the two form for when the user makes the decision on which delivery option to opt for. Only one of the forms is submitted.
Basically I have:
Form1: Product Selection Radio Button (2 Options)
// Choice of delivery options hidden by a javascript reveal of the relevant form
Form2a: Digital download form fields with actions for validation and submission to Paypal
Form2b: Regualar delivery form fields with actions for validation and submission to Paypal
I look forward to a solution from the excellent minds on this site!
Assuming this is all on a single page, it sounds like you don't really need multiple forms. I would suggest just including everything in a single form, wrapping the applicable questions for each selection in separate <div> tags and using some JavaScript to present the applicable <div> when either radio button is selected. When the form is submitted, check the radio button selection on the server side to determine which other form fields to utilise.