I have a 'time select' form that is two select option elements, one for the hour and one for the minute (with 15 min granularity).
I only want 1 label saying 'choose time' as I think its obvious its hour and minute. Normally I associate a label with an input like so:
<label for="something">Label Text</label>
<input id="something" />
So what should I do in this case where the label relates to two elements?
Thanks
I'd label both inputs (hours, minutes, associated explicitly like you have), use one of the CSS techniques to hide them visually (but keep them in the DOM so they are available to AT). Then wrap everything in a fieldset and add a legend to the fieldset for "choose time".
Like this:
<fieldset>
<legend>Choose Time</legend>
<label for="hour">Hour</label>
<input id="hour" />
<label for="minute">Minute</label>
<input id="minute" />
</fieldset>
Related
I want to build some dynamic form fields.
When I put an *ngIf in fron of the div the material design does not work properly (no effects etc.).
Here is the input field that works
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="number" id="playerCount" [(ngModel)]="playerCount" (ngModelChange)="setPlayerCount(playerCount)">
<label class="mdl-textfield__label" for="playerCount">Anzahl Spieler</label>
</div>
and the one that does not work
<div *ngIf="players" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="stuff">
<label class="mdl-textfield__label" for="stuff">stuff</label>
</div>
The second div should appear as soon as the first has been filled out.
You have to register new elements to MDL's componentHandler since *ngIf actually removes the element from the dom, you have to register that element every time Angular removes/inserts it.
You can either call componentHandler.upgradeAllRegistered(); every time *ngIf inserts the element or replace *ngIf with something that is just hides the element but not remove it.
I have a form with aria-describedby attributes on the input alements, followed by a span tag with a description/example of the desired input. It also has class to only display for screenreaders (sighted people can make use of the placeholder information instead).
The issue here is that, according to Fangs at least, the screenreader reads the label, then prompts for input, then reads the aria-describedby text.
Can I move the text above the input in the code, e.g.
<label for="givenName">Given name</label>
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp">
if you are already adding an HTML label to the input, you don't need to use ARIA attributes at all. You can safely remove the aria-describedby, and nest the span content. Example:
<label for="givenName">Given name
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
</label>
<input class="form-control" type="text" id="givenName" placeholder="Liam">
Hope it helps!
As a general rule..First try to make accessible content with standard HTML. Then, use ARIA to describe website sections, widgets and interactive behavior (like menues, tabs, pop ups, messages, dropdowns, calendars, etc), and also to describe what you could not do with HTML.
I have a form with aria-describedby attributes on the input alements, followed by a span tag with a description/example of the desired input. It also has class to only display for screenreaders (sighted people can make use of the placeholder information instead).
The issue here is that, according to Fangs at least, the screenreader reads the label, then prompts for input, then reads the aria-describedby text.
Can I move the text above the input in the code, e.g.
<label for="givenName">Given name</label>
<span id="givenNameHelp" class="help-block sr-only">e.g. Liam</span>
<input class="form-control" type="text" id="givenName" placeholder="Liam" aria-describedby="givenNameHelp">
Yes, this is perfectly legitimate and will work with all screen readers
To have a page be compliant with all government accessibility requirements, each form element should have a label. However, we have a birth date picker with three dropdowns: Day, Month, and Year. The visible label is simply "Birth Date".
Is there a way to:
Specify that a form element has no label?
Specify that a label is for multiple form elements?
You can specify a label for a group using <fieldset> and <legend>, however, this does not mean you can omit the individual label. In your example, you could argue that the proximity to the other selects serve as a "visual label", so you can use the title attribute to label each of the individual components and a fieldset/legend for the group
In your instance, you also need to indicate that the * indicates a required field
Here is some markup
<fieldset>
<legend>Date of Birth* <span class="offscreen">required</span></legend>
<select title="month">...</select>
<select title="day">...</select>
<select title="year">...</select>
<button title="pick date" class="datepicker"></button>
</fieldset>
I would like to do multiple rows selection. Rows are display through strut2 tag s:iterator, how can I get the selection information, which should contains a list of selected "id"
<s:form action='Selection'>
<s:iterator value="transInfos">
<input type='hidden' name=id value='<s:property value="id" />' />
<s:checkbox name="selected"/>
<s:property value="name" />
</s:iterator>
<s:submit value="Selection" />
</s:form>
One option which seems to me is to create a hidden field in your form like
<s:form action="selection">
<input type='hidden' name="selectedId" value=""/>
</s:form>
you can add a on-click event to your check-box and if it get checked you can add the value t a variable and set in the hidden field,each new addition should be added as new values in comma separated way like in end hidden field should be like
<input type='hidden' name="selectedId" value="1,2,3,4"/>
moment you submit the form you can parse the form value and can split it based on the separator ","
other option is to name the check-box with same name so moment it will get submitted the values of the checked one will be submitted as a collection, choice is all yours and you need to decide which way to go
I'm glad I can answer this question myself.
The answer is quite simple.
<s:form action="..." >
<s:iterator value="transInfos">
<input type="checkbox" name="transIds" value='<s:property value="transID" />'/>
</s:iterator>
<s:submit value="Select"/>
</s:form>
the value of checkbox is what you want to pass to the action, all the selected checkboxes will pass their values as a list to the action.