When we navigate using arrow keys (down arrow) then JAWS screen reader is reading "blank edit required" for the first input box (preferred name input box) but it should read the placeholder i.e. "enter your preferred name here" and when we go down to the next input box (full name input box) then screen reader is reading "enter your name here" and if we click on down arrow again then focus is staying in that input box and the screen reader is reading "enter your preferred name here edit required". This is not the expected behaviour.
Can anyone please look into this issue
<form role="form">
<div>
<div>
<label for="preferredName">
<span>Preferred name
*</span>
</label>
<div>
<input type="text"
id="preferredName" placeholder="Enter your preferred name here"
aria-describedby="ph-a11y-contact-preferred-name-field-error"
autocomplete="on" aria-required="true">
<span aria-atomic="true">
Preferred Name should not be empty
</span>
</div>
</div>
</div>
<div>
<div>
<label for="preferredName">
<span>Full name
*</span>
</label>
<div>
<input type="text"
id="Name" placeholder="Enter your name here"
aria-describedby="ph-a11y-contact-name-field-error"
autocomplete="on" aria-required="true">
<span aria-atomic="true">
Name should not be empty
</span>
</div>
</div>
</div>
</form>
Related
<div class="ms-Panel-content content-410">
<div class="panelSubheadingStyle-396">
We recommend you keep only one phone number and one address in your profile
for easy communication.
</div>
<fieldset class="groupedElements-421">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423">Phone number</label>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField134"
maxlength="15"
class="ms-TextField-field field-427"
aria-label="add phone number"
aria-invalid="false"
value="545465464"
/>
</div>
</div>
</div>
</fieldset>
<h3 class="panelSubheadTitleStyle-397">Address</h3>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>Street address<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField139"
aria-required="true"
maxlength="100"
class="ms-TextField-field field-427"
aria-label="add street address"
aria-invalid="false"
value="asd"
/>
</div>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>City<span class="requiredLabelStyle-419"> (required)</span></label
>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField144"
aria-required="true"
maxlength="100"
class="ms-TextField-field field-427"
aria-label="add city"
aria-invalid="false"
value="city input"
/>
</div>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>Country/region of residence<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-ComboBox-container dropdownStyle-394">
<div
data-ktp-target="true"
id="ComboBox149wrapper"
class="ms-ComboBox css-437"
>
<input
autocapitalize="off"
autocomplete="off"
aria-autocomplete="inline"
data-ktp-execute-target="true"
data-is-interactable="true"
id="ComboBox149-input"
class="ms-ComboBox-Input css-438"
type="text"
aria-expanded="false"
role="combobox"
aria-label="select your country or region"
aria-describedby="ComboBox149-error"
spellcheck="false"
placeholder="Select a country/region"
data-lpignore="true"
value="Venezuela"
style="font-family: inherit"
/><button
type="button"
class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446"
role="presentation"
data-is-focusable="false"
tabindex="-1"
>
<span
class="ms-Button-flexContainer flexContainer-67"
data-automationid="splitbuttonprimary"
><i
data-icon-name="ChevronDown"
aria-hidden="true"
class="ms-Icon root-32 css-321 ms-Button-icon icon-447"
style="font-family: FabricMDL2Icons"
></i
></span
>
</button>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>State/province<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-ComboBox-container dropdownStyle-394">
<div
data-ktp-target="true"
id="ComboBox153wrapper"
class="ms-ComboBox css-437"
>
<input
autocapitalize="off"
autocomplete="off"
aria-autocomplete="both"
data-ktp-execute-target="true"
data-is-interactable="true"
id="ComboBox153-input"
class="ms-ComboBox-Input css-438"
type="text"
aria-expanded="false"
role="combobox"
aria-label="select your state or province"
aria-describedby="ComboBox153-error"
aria-disabled="false"
spellcheck="false"
placeholder="Select a state/province"
data-lpignore="true"
value=""
style="font-family: inherit"
/><button
type="button"
class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446"
role="presentation"
data-is-focusable="false"
tabindex="-1"
>
<span
class="ms-Button-flexContainer flexContainer-67"
data-automationid="splitbuttonprimary"
><i
data-icon-name="ChevronDown"
aria-hidden="true"
class="ms-Icon root-32 css-321 ms-Button-icon icon-447"
style="font-family: FabricMDL2Icons"
></i
></span
>
</button>
</div>
</div>
</fieldset>
</div>
JAWS is not announcing text field information properly when focusing on 'city' text fields, as Jaws is reading previous field content information (street text box value). JAWS is reading the previous field value. When moved by the down arrow key to the city or street address field. It should only announce the input field value of the field which is focussed and not the field above it.
You are misusing <legend> here. Don't use legend to label the controls inside a fieldset!
Don't put <label> in <legend>. The legend is already a kind of label.
A <fieldset> is primarily a semantic grouping mechanism, labelled by (i.e. "accessibly named by") the (optional) <legend>. The legend labels the entire group, rather than any of its individual "children".
Yes, it is valid to have a fieldset containing only one control (or none at all), but ... why would you want to do this? That just adds complexity, unwelcome chatter (and extra keypresses) to the assistive tech experience of your content. As you have discovered, it also confuses the JAWS screen reader.
Don't be seduced by the default visual appearance of a fieldset. It is not purely presentational - it actually means something, so it will be included in the accessibility tree and will be announced by screen readers - as a group, not as a control.
If you would like to have a presentational box around each control, add some CSS borders to the wrapper divs you have used already.
It might make sense for all these controls to be inside a single fieldset with legend "Contact Info" or something like that.
Then, use <label> elements with for attributes pointing at the id of the relevant control. Typically, the label will appear just before or after the control (or its wrapper div) in the DOM.
The for attribute is how the screen reader knows which label is associated with which control. With the for attribute in place, you can (and should) remove the aria-label attributes entirely. It's always better to use the onscreen label as the accessible name, if possible.
BTW why are your buttons marked as presentational? Why not use semantic HTML instead of ARIA? You've used <fieldset> and <legend>, why not <select>?
When the email is invalid the span will be visible with the error message "Invalid Email". In addition to that I also need the textbox to be having a red border. How to add border color to the textbox when the immediate span has style visibility as visible. Initially on the form load the span style="visibility:hidden;"
<div class="form-group">
<label for="txtEmail" id="lblEmail" class="form-label">Email</label>
<input name="txtEmail" value="test#" id="txtEmail" class="email-address form-control" type="text">
<span id="spanErrorEmail" class="Email error" style="visibility: visible;">Invalid email</span>
</div>
HTML5 itself has email validation and there is no need to use extra coding as for that. You can only use required option for input.
<form>
<input type="email" placeholder="Enter your email" required>
<input type="submit" value="Submit">
</form>
I have a checkbox and a label for it, and within a label there is an input box. When I write something in input box, I don't expect checkbox to toggle (enable/disable). On Chrome and Firefox it works fine, but on Safari selecting input within label also toggles the checkbox.
How can I prevent this from happening?
Here is my code:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
<input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</div>
The best solution is probably to move <input type="number"> outside <label>.
Example:
<div>
<input type="checkbox" name="xyz" id="xyz">
<p>
<input type="number" name="qty" id="qty">
<label for="xyz">
This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</p>
</div>
Remember that all form elements should have a corresponding label.
Read more about labels:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I suspect malformed HTML that is being fixed by Chrome/Firefox for you, but not fixed correctly in Safari. You should inspect the div in the debugger in each browser and see what each DOM gives you to be sure.
You have:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
<input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</div>
You could do this instead with the same intent:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
This is my label for xyz checkbox
<input type="number" name="qty" id="qty"/>
</label>
</div>
I do the following at <div class="offset3 span6"> with bootstrap-responsive.css:
<div class="control-group">
<label class="control-label" for="passport1">Series and passport number</label>
<div class="controls">
<input type="text" class="input-small inline" id="passport1" placeholder="" maxlength="4">
<input type="text" class="input-medium inline" id="passport2" placeholder="" maxlength="6">
<p class="help-block">Please input your passport details into two fields above</div>
</div>
</div>
But text label is not aligned with input fields (it is lower). How to fix it?
demo
You have a top padding on your label of 5px;
Consider overriding this inline or creating a more specific css selector and try again.
I would like to align the label of my search widget with the input text (they are slightly not aligned on all browsers). Any css tip ? thanks
This is my code:
<label for="edit-search" style="float: left;">Search</label>
<span class="views-widget">
<span id="edit-search-wrapper" class="form-item">
<input type="text" class="form-text" title="Enter the terms you wish to search for." value="" size="15" id="edit-search" name="search" maxlength="128">
</span>
</span>
</div>
<div style="position:relative;left:-10px;top:25px;">
<span class="views-widget">
<span id="edit-search-wrapper" class="form-item">
<input type="text" class="form-text" title="Enter the terms you wish to search for." value="" size="15" id="edit-search" name="search" maxlength="128">
</span>
</span>
</div>
The position relative will make the widget display where it should be in the natural document flow, then the left and top properties shift the widget around from that position. You are allowed negative values as there is no right and bottom property.
The solution is tuning the line-height values attributes.