Jaws is reading input field of above fieldgroup - accessibility

<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>?

Related

Is it possible to dynamically change the font on radio buttons with CSS?

I was trying to do this with jquery (How do I get javascript to run more than once?) but some people said it can be done easier with CSS. Right now I have JS that dynamically adds and removes the ez-selected class as seen below whenever a radio button is selected. This is used to replace the buttons with images.
Is there any way to use CSS so that when the ez-selected class is added, it turns the text in the span tag to bold and then removes the bold when the ez-selected class is removed? I cannot change the HTML structure as it's coded in my shopping cart software. Thanks!
EDIT: Is there any kind of CSS selector that can style the span closest to the input checked? I know with + it can select an element right after another element, but is there a way to just select the next span element after a checked radio button even if that span is in another div?
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio (ez-selected)">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
The .ez-selected div is not a previous sibling or parent of the span...so NO...you can't.
Not with this structure
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio ez-selected">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
You would have to travel up the DOM first and you can't do that with CSS because there is no parent selector

Autocomplete is not working (browser chrome)

I have a form login. Normaly, the chrome save the settings, and each time the user access to that form, the last input values are automatically insert. But in my form, the browser does not behaves like that.
[Edit] : This behavior it is just appending to chrome browser
Follows the HTML code:
<form action="#" class="ac-custom ac-checkbox ac-checkmark" onsubmit="UIAuthetication.prototype.ClickButtonSignedIn(true); return false;">
<div class="username line checkThisDiv">
<input class="input TR_Login_Username" type="text" required="" placeholder="E-mail" mandatory="" vk_15c42="subscribed">
<h6 class="TR_Login_Username">E-mail</h6>
<p class="error_message"></p>
</div>
<div class="password line checkThisDiv">
<input class="input TR_Login_Password" type="password" required="" placeholder="Password" mandatory="" vk_15c42="subscribed">
<h6 class="TR_Login_Password">Password</h6>
<p class="error_message"></p>
</div>
<div class="line line-submit">
<input class="submit right TR_Login_Button" type="submit" value="Login">
<ul>
<li>
<input class="keepSignIn remember" type="checkbox">
<label class="TR_Login_Keep_Me_Signed_In" for="cb6">Remember user</label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
</ul>
</div>
</form>
So, with the attempt-error method, I discovery if I put ID's to the inputs, the chrome autocomplete will work. I don't know the reason of that, I just know with that, the problem was solve.

Kendo UI validation message breaks bootstrap layout

I have a form to collect user information which is designed using bootstrap. I am using Kendo UI validation for validating user input.
This is a portion of the form.
Html for the first line of the form.
<div class="col-lg-4">
<div class="form-group">
<label for="FirstName">First Name:</label>
<div class="input-group">
<input type="text" id="FirstName" name="FirstName" class="form-control" placeholder="First name" />
<span class="input-group-addon" id="FirstNameAddon">
<input type="checkbox" id="unkFirstName" value="Unknown" />Unknown
</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="LastName">Last Name:</label>
<div class="input-group">
<input type="text" id="LastName" class="form-control" placeholder="Last name" />
<span class="input-group-addon" id="LastNameAddon">
<input type="checkbox" id="unkLastName" value="Unknown" /> Unknown
</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="Initials">Initials:</label>
<div class="input-group">
<input type="text" id="Initials" class="form-control" placeholder="Initials" />
<span class="input-group-addon" id="InitialsAddon">
<input type="checkbox" id="unkInitials" value="Unknown" /> Unknown
</span>
</div>
</div>
</div>
Everything is fine with the layout if there is not validation message. But when there is a validation message layout goes ugly.
How can I make the validation message to span across both input and add-on? How to make the validation message to float on top of the controls so that it won't effect the controls next to it even if message is longer?
Here is the Kendo Dojo http://dojo.telerik.com/ihANu that replicates the issue. Look in full screen http://runner.telerik.io/fullscreen/ihANu
Thank you.
You could try taking it out of the normal flow and overlaying it ontop of the screen so that it didn't disrupt the other elements by adding position: absolute
.k-widget.k-tooltip-validation.k-invalid-msg {
position: absolute;
top: 100%;
left: 0;
}
Demo in Dojo
KyleMit answer is good and one way to do it. I prefer using validator message custom positioning which is Kendo UI validator functionality. U can place validator message where ever u want using single line of html. Just place input id for data-for attribute to connect it to right input element.
<span class="k-invalid-msg" data-for="input-id"></span>

Font Awesome Implementation into ASP.NET TextBox Server Control

http://www.petcenters.com/painting-estimate is a test page with Bootstrap enabled ASP.NET Controls utilizing CssClass Selector.
I have attempted to implement Font Awesome Classes into ASP.NET TextBox Controls following guidelines illustrated within:
Bootstrap Documentation
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">#example.com</span>
</div>
A Bootstrap Template that I'm using shows their implementation of: Font Awesome with HTML Form Tags
<section class="col col-6">
<label class="label">Company</label>
<label class="input">
<i class="icon-append fa fa-envelope-o"></i>
<input type="text" name="company" id="company">
</label>
</section>
I have attempted to replicate with both scenarios for ASP.NET Textbox Server Control.
<div class="input-group col-md-6 clearfix">
<label for="txtGenCompany">Company</label>
<asp:TextBox ID="txtGenCompany" name="company" CssClass="form-control" aria-describedby="addon1" placeholder="Enter Company" runat="server" TabIndex="2"></asp:TextBox>
<span class="input-group-addon" id="addon1">
<i class="icon-append fa fa-envelope-o"></i>
</span>
</div>
I believe I'm missing something with either "span" or "i" Company TextBox
If anyone has any idea I would appreciate it.
what you need is
HTML
<div class="input-group input-group-md">
<lable>Company</lable>
<asp:TextBox ID="txtGenCompany" name="company" CssClass="form-control" aria-describedby="addon1" placeholder="Enter Company" runat="server" TabIndex="2"></asp:TextBox>
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>
CSS
lable {
display: table-caption;
white-space: nowrap;
}
.input-group {
padding-bottom: 20px;
}
PS: It's not good to have too many visual guides for getting input,
here we have 3:
the lable
the placeholder
the font-awesome icon
try to reduce them if you can.

align input text with label in my Search gadget

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.

Resources