I am using buttons in my application , but on pressing b or insert b, JAWS is not identifying the buttons and saying "no buttons were found".
When I manually tabover to the button, button text is not read.
I am using JAWS 2022 on chrome.
<button class="btn btn-secondary" id="search" type="button">
Search
</button>
or
<button id="skip" onclick="skipToMain()" >Skip to content</button>
Can someone help in identifying what is the issue here?Is some attribute missing or JAWS setting needs to be changed?
Any help would be appreciated.
Related
Why does bootstrap use 'type=button' when making a button? Is it redundant?
<button type="button" class="btn btn-primary">Save changes</button>
This is used to specify the default action of the button. The button type states that "it has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur." Normally, this is how a button would act by itself. However, a button is normally found within a form, where when clicked it automatically submits the form. By specifying type=button, it overrides this default behavior, so it would not submit. See here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Have a task where I have some information in a button that needs to all be aligned to the same sides.
Its a digitized phone menu so the info on the left size is the line name and the information on the right is the lines extension. I want to align all of the extensions right.
I used buttons that activate Modals with more information. The buttons are required for the form of modal I am using. (Or at least that is what I found in research.)
Tried paragraph tricks but they broke the buttons function.
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL">2 - HPE Networking ................................................... XXXXX</button>
Try this:
<button type="button" class="btn" data-toggle="modal" data-target=".HPENET_MODAL" style="width:500px;text-align:left">2 - HPE Networking <div style="float:right">XXXX</div></button>
I am using the bootstrap button groups, and I want them to be accessible. Right now the screen reader sees them as separate buttons. I would like the screen reader to see them as a group or list of buttons.
http://getbootstrap.com/components/#btn-groups
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
I would also want the screen reader to know which button is selected but that shouldn't be very hard with the aria-checked tag.
I don't think screen reader will see them as group of buttons unless you use input type=radio and style them to look like buttons.
Also to tell which button is selected "aria-pressed" is better.
One solution I can think of is to add role="radio" to the buttons so that screen reader sees them as a group. I actually works, but I am not sure if its considered bad practice
I am converting my bootstrap 2 site to bootstrap 3 and am a bit stuck on a particular control which is several sets of tab pages controlled by toggle buttons.
Here is an example of my working bs2 code:
http://bootply.com/97187
If I run this code in bs3, I get this:
http://bootply.com/97189
The problem as you will see is that the buttons no longer behave like a group of radio buttons. They toggle individually.
I am currently here:
http://bootply.com/97184
This looks like it works but it doesn't. The grey colour you get when you click on a button is in fact, the "I've now got the focus" colour. Click somewhere else and it goes back to white.
I really need the buttons to toggle as they did in bs2. What small thing am I neglecting here?
Your problem is in here:
<div class="well well-sm">
<span>Set A:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default active" href="#tab1" data-toggle="tab">1</button>
<button class="btn btn-sm btn-default" href="#tab2" data-toggle="tab">2</button>
</div>
<span> Set B:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default" href="#tabA" data-toggle="tab">A</button>
<button class="btn btn-sm btn-default" href="#tabB" data-toggle="tab">B</button>
<button class="btn btn-sm btn-default" href="#tabC" data-toggle="tab">C</button>
</div>
</div>
Adding the class active to the button class for tab1 seemed to prevent the buttons from toggling as you want them to. Simply removing the active class seems to fix the problem.
Demo: http://bootply.com/97199
Ok, I've been playing around quite a bit and got to an acceptable solution.
Unlike the Bootstrap 2 version, it requires a bit of JavaScript.
Here it is: http://bootply.com/97426
The only thing it doesn't do is group the button groups into a single component but this is acceptable, unless someone can find a way to do this as well.
Would be nicer if Bootstrap just worked the same way as V2 in this case.
I'm having an issue that I can only reproduce in IE 9, but I have no idea why. When I click on a button in IE 9, if it is the first click on the freshly loaded page, the button will not register the event. If my initial click is outside the button's area and I make a subsequent click on the button, the action is performed.
<button type="button" title="Request Quote" class="button btn-quote" onclick="setLocation('/quotes?partsno=188122-B22&mfg=HP&cond=New');">
<span>
<span>Request Quote</span>
</span>
</button>
I can only reproduce the issue in IE9. Spoofing Safari with a IE9 user agent string does not reproduce the issue, and the code can be altered to any valid javascript;the onclick still does not get invoked as expected. An example can be found here, on the Request Quote button:
http://www.itpartsconnection.com/hp-188122b22.html
Thanks Much!
Try the below syntax, that is semantic:
<input type="button" title="Request Quote" value="Request Quote" class="button btn-quote" onclick="setLocation('/quotes?partsno=188122-B22&mfg=HP&cond=New');" />
Then, do all the CSS based into your button and btn-quote CSS classes, not the spams.