When i navigate through Tab key in my jsp. button in my page are not getting highlighting (i.e it doesnot focus on buttons with dotted line). but it focus on checkbox and radio button. As i am not allowed to change to input type="button" or button. what is the use of aria-disabled="false" ?
<body>
<a href="javascript:submitForm('reset');" class="ui-button-default ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-text-only">RESET</span></a>
</body>
Try to put this attribute:
tabindex="K", where "k" is the number of how many times You have to press the TAB key to highlight that link.
Related
I have a button in which there is a link. When I mouseover the button, the cursor changes, but clicking the button doesn't do anything. Instead I have to click the link inside. How can I reformat my code, so that the button itself is clickable and not just the link inside of it?
<button class="alert alert-primary" role="alert" style="margin:30px;" >
</button>
You can use Onclick button event.
<button onclick="window.location.href='https://www.google.com/'"></button>
So basically, it's not getting you anywhere simply because there is no content (text, icon, image, etc) within the anchor tag to click on.
Try the code below and you should be taken to the link specified in the "href" attribute of the anchor tag.
<button class="alert alert-primary" role="alert" style="margin: 30px;" > Search on Google </button>
<button class="fa fa-caret-down font-size-18px" style="border: none"
#pop="bs-popover"
[popover]="fil"
placement="bottom right"
[adaptivePosition]="true"
[outsideClick]="true"
(keydown)="keydownEvent($event,pop)">
</button>
In my angular application, I am using a button which will open a popover. But I want it to be a tag or something other than a button because the button will be activated when we press space or enter keys which I don't want. The code should be like this:
<i class="fa fa-caret-down font-size-18px" style="border: none"
#pop="bs-popover"
[popover]="fil"
placement="bottom right"
[adaptivePosition]="true"
[outsideClick]="true"
(keydown)="keydownEvent($event,pop)">
</i>
But this will not trigger the keydown event. What might be the reason for it what are the alternatives? Thanks
I am using Bootstrap Popover plugin: https://www.w3schools.com/bootstrap/bootstrap_popover.asp
I've been asked to make both hover and click works. But I can't set two values in the data-trigger attribute.
<a tabindex="0" role="button" data-toggle="popover" data-trigger="popover"
data-placement="top" title="Click and Hover!"
data-content="<b> Click and Hover works! </b>" data-html="true">
Click or hover here
</a>
How do I make both the Hover / Click work?
you can specify multiple triggers simply by separate them by a space like this :
<a href="#" data-toggle="popover" title="Popover Header"
data-trigger="click hover"
data-content="Some content inside the popover">Toggle popover</a>
I've a sign up form with a really simple markup which doesn't support accessibility. It is basically following:
<div class="responsiveCell responsiveCellSize2">
<div class="alignBottom minSize2">
<div id="cont_id_f_c816dab2f221e8118135e0071b652f51" class="stat_group checkbox-container group group-id-cont_id_f_c816dab2f221e8118135e0071b652f51 has-children">
<input class="floatLeft" id="f_c816dab2f221e8118135e0071b652f51" name="f_c816dab2f221e8118135e0071b652f51" leadfield="" contactfield="" aria-labelledby="label-cont_id_f_c816dab2f221e8118135e0071b652f51" type="checkbox">
<span style="font-family:Arial; font-weight:normal; font-size:16px; color:#A40084;" class="group-title active" id="label-cont_id_f_c816dab2f221e8118135e0071b652f51" role="button" aria-expanded="true" tabindex="0">Economy</span>
</div>
</div>
<div class="clear"> </div>
<div style="alignTop minSize2">
<div id="required_info_f_c816dab2f221e8118135e0071b652f51" class="requiredInfo floatLeft">
</div>
</div>
</div>
<div class="responsiveCell responsiveCellSize1 emptyCell"> </div>
And this pattern occurs about 50 times on the page. This markup already has my extra markup for supporting accessibility.
Markup cannot be changed in the backend.
Now I'm facing an issue where user cannot proceed to next element while pressing tab.
Keyboard navigation stops to first instance of a SPAN element which has following attributes:
role="button"
aria-expanded="true"
tabindex="0"
If I take your code snippet and repeat it several times in a test file, I can successfully tab to each checkbox and each "Economy" label. It's a little unusual to have the label of a checkbox be a button instead of plain text, but there isn't anything invalid about the html. The screen reader announces it just fine.
"Economy check box not checked"
"Economy button expanded"
"Economy2 check box not checked"
"Economy2 button expanded"
"Economy3 check box not checked"
"Economy3 button expanded"
I have this form declaration:
<form method="post" action="/web_services/buscar_vuelos?method=get">
<div id="addSegment_wrapper">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="addTr" style="display: inline;">
<span class="ui-button-text">Add Segment</span>
</button>
</div>
<input id="web_services_submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button- text-only" type="submit" value="Search" name="commit">
</form>
And, although I didn't specify "addSegment_wrapper" button as a submit one, every time I click on it, it calls the form action. I just want to treat this button as a regular one.
What should I do?
You could do
<button type="button">Add Segment</button>
Do this:
<button type="button" class="(rest of your classes)">Rest of your code</button>
Closer to Occams razor (for complex schemes*) could be to construct the 'form to be submitted' separately, ie, to not (ie, drop the use of) the "form" tag: for a description of the latter, please see "how to ajax post a form that includes fields in a dynamic table for which both rows and columns can be added dynamically"
* eg, when your form consists of multiple interaction-events, where a subset is used for form-submission.