I've implemented a tooltip in my website. The link which opens the tooltip is simple, and has the following code:
This should open a tooltip
On focus or on click, the tooltip shows up. Everything works perfectly, till the time the screen-reader (I'm using JAWS) is turned on. When Jaws read the link, and I press enter, it doesn't show the tooltip.
This is what I've tried:
I've tried adding role=dialog on the div which contains tooltip
text.
I also tried adding aria-haspopup=true on the link.
But both approaches don't seem to work. Any suggestion on how to make it work with screenreaders?
Related
I have a toolbar of buttons that are gray by default but when one button is clicked on that button is made white to indicate that that is the page you are on. This is achieved using a class and the below css.
.btn-details:focus {
color: #fff;
}
This works fine except when I change windows and then go back. For example, if I have my page open it is working find, then I switch to an Excel window and then back to my page the white highlighting is now gone. How can I keep the button in focus even when the window is changed?
Unfortunately I think you need to take your time to focus on how CSS works.
You are using the: focus selector. Know that it does what you asked it to. If the button loses focus and your style no longer holds.
I think this is exactly what happens when you use other apps.
I advise you to add a CSS class on the button clicked and to remove this same class on the other buttons.
If you have difficulty implementing this, please come back to me. I would make a small example depending on your level.
See you soon !
There's an element that appears on the site, but I can't seem to find it in the inspector of the browser. I would like to hide it somehow.
On this page: http://gdhbau.hu/#bemutatkozas
It is the "BEZÁR" word with white color, next to the "Becsuk" button, when clicking on the "MÉG TÖBB" button (to expand the content).
This problem shows up when I turn on the "Automatically add paragraphs" in the WordPress SiteOirgin editor; but I need to use it, otherwise the content falls apart.
EDIT: This is with the plug-in called: "Collapse-O-Matic"
You will never find it since it's not an element.
It's part of the image in the background http://gdhbau.hu/wp-content/uploads/2018/03/bemu-bg-large.jpg
I'm working on an existing MVC4 application, and need to implement a modal form.
I'm trying to implement this solution...
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
This works just fine, but the example uses a link, and I need it to be a button.
I could try to style the link as a button, but there's a bunch of other buttons on the same form and it would need to look exactly like those, and I haven't found a good way to style the link exactly like the other buttons in every browser, since most of the button's default style properties aren't overridden.
I've tried wrapping the link around a button, like shown below...
<button type="button">Continue</button>
This works fine in Chrome, but in IE11 when I'm testing the button shows up but doesn't do anything when I click it. Again, the exact same code works fine in Chrome - pressing the button does pop the modal open, but doesn't work in IE. Also, you get an HTML5 validation warning when a button is nested inside a link.
So, what can I do to make my link look exactly like all my other buttons? Or is there some way I can implement this modal solution without using a link that directs to an anchor?
Not sure why your current example isn't working but there are plenty of examples in this stack overflow question/answer Here.
Anyone with firefox browser can you open up this fiddle.
The issue I have is with this checkbox button I have, it requires multiple clicks to turn it off and my question is how can I stop this from happening? I know its the posistion:relative which is causing this but I need this so that every time I click on a button, it does not go to the top of the page. I just want the button to turn on and off in one click, not multiple clicks
(See comments below the question - now I know what happens to you)
Ahhh - you cannot solve this without Javascript: quick (double?) click on the TEXT ITSELF is interpreted as "select text" by the browser, and it does not send the event to the checkbox when that happens. With Javascript you can force "un-select" of the text on click.
Click "slowly" - avoiding double click text selection - and it will work (just to show the cause of the problem, no solution without Javascript or proprietary CSS).
Try adding this: Prevent text selection after double click
Maybe you should use a full Javascript Checkbox-Button solution instead of trying to accomplish it with just CSS.
Throughout our application, we use styled input buttons for submitting forms. For some reason you have to precisely click them in order for the click to be registered. Over half the time, it looks like the button is clicked (i.e. changes on mousedown/mouseup), but nothing happens and we have to click again. If we simply remove the css styling, the button works fine all the time.
Example:
Our users really like the look of the styled buttons, but are a bit annoyed by not knowing if the click event went through. Any easy way to solve this?
Update
I was finally able to neatly reproduce this in jsfiddle: http://jsfiddle.net/xRK4C/3/ . You can see the behavior if you click on the upper left few pixels of the button with the rounded corner. I'm thinking it's because the button moves when being clicked, which causes the mouse to be outside the button on mouse-up. Our users wanted this though, so is there any good way to keep the 3d effect without sacrificing click area?
I believe it's the relative positioning on :active. I guess the moving of the button gets the mouse events confused. I'd suggest to changing the margins instead.
EDIT: Margins don't work either, neither a CSS 2 translation.
You need to somehow move the "image" of the button without moving the button (thus the area that is clicked on) itself, but I can't think of anything right now.
Went to the JSFiddle site and played around with the styling there.
I noticed the hover was successful on the edge of the button, but the click was not.
So, I changed the left:2px; top:2px; to left:0px; top:0px; and the hover, of course, still worked, but the click was successful on the edge of the button.