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?
This may be a possible bug in Polymer: If I type in an input that has been typed in before, a series of autocomplete values may come up. If I select one using the up/down arrow keys and pressing the Enter key, the element's invalid attribute does not change to false even though the input is valid, however, the input element is stylized as being valid without the red text/underline.
If I tab or click outside of the element (onblur) it does not cause the field to validate. If I click back inside or tab back into the field, backspace one letter and retype, the elements invalid attribute will be properly set.
This has been tested with a regular paper-input and gold-zip-input in Safari 8.0.7.
Work around: As a possible work around, I would like to disable autocomplete for certain input fields. I can't find any documentation to do this. The HTML5 autocomplete attribute has no effect. Is there any way to turn off autocomplete in Polymer?
I need editable text in an Apache Wicket Application. As the text has to appear very "common-table-like", with editing only after the user double clicks on the text and so on, using normal TextFields is not really an option.
So I decided to go for the new HTML5 attribute contenteditable, which does the overall job quite fine. With the following markup and Java code I get a label that looks like static text, but after the user clicks inside the text is editable:
<div wicket:id="id" contenteditable></div>
...
item.add(new Label("id", "dummy content"));
But now I obviously need to catch some event when the user actually edits the text, as the new text should be stored back into the database. Online manuals suggest using oninput as it seems more reliable (e.g. with respect to timing issues) than onkeyup, onkeydown and so on.
Trying the event with regular HTML5 works fine:
<div wicket:id="id" contenteditable oninput='alert("oninput");'></div>
My question is now, how can I get the Wicket Label to support oninput? Overriding it and creating a custom label would be a perfectly fine solution (if I really have to), but for that I am too new to Wicket as to know where to start and how to create the correct markup and so on.
Since a div is not a form element, it doesn't get submitted when you post a form. So you have two options:
in onInput fill a hidden form element with the content and submit that using a form
send the content to the server using Ajax
Both require you to do some magic using a (Ajax)Behavior.
You can use Wicket's HiddenField to create the hidden field, and in onInput perform the update of the HiddenField's value.
You can encapsulate this by creating your own ContentEditableFormComponent by using FormComponentPanel as a starting point.
Quick question here. I am creating a web app using MVC. I've noticed when I add input boxes to pages, they save previous entries in a dropdown fashion, like so:
While this IS handy, I'd like to know a couple things:
How/Where are these previous entries being saved? Is this my browser or an MVC thing?
If need be, how can I override this default behavior?
Thanks!
I'm not sure what's in your specific project, but it could be one of three things:
Some browsers, if you submit a form, remember the submitted values and automatically make inputs autocomplete. The autocomplete HTML attribute on forms and inputs can help to control that.
HTML 5 has a datalist element which lets you associate a list of options with an input, so autocomplete can be implemented manually.
There may be some JavaScript, potentially paired with AJAX doing this autocomplete.
HTML5 added in the ability to better define client-side validation in forms without needing to use JavaScript. The concept already existed with attributes such as "maxlength" and "minlength". It's been extended with attributes such as "required" and "pattern". However, HTML5 has also defined limits on these attributes and WebKit browsers have implemented these restrictions (likely with Firefox and Opera not far behind).
The restrictions in question have to do with a form control's visibility when hidden by CSS / JavaScript using the display: none or visibility: hidden CSS rules. The restrictions are defined as:
4.10.7.1.1 Hidden state
When an input element's type attribute is in the Hidden state [...] The input element represents a value that is not intended to be examined or manipulated by the user.
[Also,]
The value IDL attribute applies to this element and is in mode default.
The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width.
The following IDL attributes and methods do not apply to the element: checked, files, list, selectedOption, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.
The input and change events do not apply.
At first glance, it makes sense to say that validation shouldn't need to be performed on form controls that the user has no control over. And, for form's built using default form control elements, these make sense. But now, an issue has arisen with building remote form controls.
Neither HTML5 nor CSS3 (nor the major browsers) has made it much easier to style form controls. <select> elements are still greatly restricted in terms of styling and both <input> and <button> elements have annoyingly different styling rules (and for non-IE browsers, near impossible CSS browser-targeting). As such, when my designers want "pretty" form controls, they may need to be rebuilt using HTML, CSS, and JavaScript. The simulated control will remotely control the real control which is hidden by CSS. This applies to <select>, <input type="checkbox"> and <input type="radio"> elements for me, all of which cause an issue in WebKit browsers when given the required attribute.
Since the HTML5 specification states that certain attributes, such as required, cannot exist on hidden form controls, browsers will be required to respond to invalid attributes. WebKit browsers are responding by not submitting the form at all (and not triggering JavaScript's submit event). I am running into the error right now with a <select> element.
Chrome fails with this error to the console:
An invalid form control with name='element-name' is not focusable.
Safari fails by showing a grey bar at the bottom of the window with the message:
Please select an item in the list
So, my concern is whether HTML5 is too restricting or I am approaching this issue incorrectly. Either:
HTML5's specification is flawed and adds an extra restriction without another solution. HTML5 assumes that if a form control is not visible, the user should not be able to interact with it. This prevents developers from utilizing HTML5's validation attributes for elements that we control remotely while leaving the original form control hidden. We still don't have the ability to create our custom controls using only CSS which requires that we still build them ourselves.
I am handling remote form controls incorrectly. as I am using an "old" technique to solve a problem that very well may have been redefined, it's possible that my approach is outdated. It's also possible that, since WebKit are the only one handling this restriction at the moment, WebKit has a workaround for this that I haven't found yet.
The only workarounds that I can think of at the moment are to
Remove the restricted attributes whenever I dynamically hide a form control with JavaScript, which would mean that I sacrifice HTML5's validation,
Temporarily display and immediately hide the offending form controls, though I'm unsure when this would be done since the submit event is never fired and it's possible to submit a form without firing the click event on the submission button, or
Use the novalidate attribute, though I'd still lose the HTML5 validation.
So am I looking at this correctly or am I missing something?
First you do mix up two things. If the HTML5 specification says hidden state, the specification only means an input element with an type attribute set to the value "hidden". In this case, the input is not validated, which means, the input can not be invalid. And the browser does not abort form submission.
Your problem is another one. You have a true invalid element, which is only visually hidden (using display: none) and replaced by another element (or by a set of other elements). In your case the problem is the following: By specification in case of interactive form validation the browser has to focus the first invalid element and show at least for this element a validation message.
The problem is that a browser can neither focus a hidden element nor show a validation message below this element. Which means that the browser stops form submission, but has an odd UI to show the validation problems.
Now to your question: Does this make sense? Yes, it does! If you change the UI of an form element you have to implement also UI for the validation message. (If you want to customize something, you have customize everything you want to use). HTML5 gives you an API to achieve exactly this.
You have to bind the invalid event of your select element, then prevent the default action (if it's the first invalid event of the form) and place your own validation tooltip to styled select element.
In my HTML5 form polyfill (webshims library), I'm already using code to link a native element (with API) with another element + generating simply validation tooltips.
I have created a simple jsfiddle, which mimics a select-replacement and shows how to achieve HTML5 form validation with custom form controls. You can find the example here and below:
HTML
<form class="example">
<div>
<select name="test" required>
<option value="">empty </option>
<option>sdadsa</option>
</select>
</div>
<div>
<input type="submit" />
</div>
</form>
<p>uses the webhsims library
JavaScript
(function() {
"use strict";
webshims.polyfill('forms dom-support');
$(function() {
$('select').each(function(){
var visualReplacement = $('<span tabinde="0">replaced select</select>');
$(this).after(visualReplacement).hide();
// Bind the visual element to the API element
webshims.addShadowDom(this, visualReplacement);
});
$('form').on('firstinvalid', function(e){
webshims.validityAlert.showFor(e.target);
// Remove native validation
return false;
});
});
})();