Does anybody know how to get rid of the annoying tooltips that pop up in the bottom left of IE when you hover over a hyperlink?
Alternatively, is there a way to set my own text against said hyperlink instead (I have tried setting the Title attribut but this shows up as well as the default rather than instead of).
Thanks.
The status line display (it’s not a tooltip, and it’s not a popup) is a browser feature and cannot be disabled by code on your page. It is there for a reason: it lets the user see the destination of a link, which helps to prevent some types of fraud.
Some early browsers allowed authors to put their text on the status line, but this feature was regarded as too risky and has generally been removed.
Change the alt tag as well or better use a js solution for a better tooltip. That should change the tooltip
<a href="#" alt="title" >Link</a>
You cannot change the status bar text anymore. In older browsers you could use window.status="" but it is not supported in any browsers anymore
http://www.w3schools.com/jsref/prop_win_status.asp
Related
I have several tooltips that surface an animation on hover. At first we used Gifs but our team decided to replace the gifs with .mp4 files. These are animations that show examples of how to use a given option. They have no sound.
But now I'm unable to find the proper way to add accessibility for screenreaders. Apparently you can't use alt text on video elements. title is not meant for accessibility. I understand there is a track element you're supposed to add for captions. But We don't want visible captions on these video animations. We just want alt text that explains that there's an animation showing an example of how to use the selected option.
There is, not yet, a proper way to do this natively. I've found this other post on SO about controlling <track> with CSS. So including but hiding it won't do the trick.
You could create a transcript of your animation and include it below the video, hidden or shown in view. Like this example does. Audio transcript example.
What you also could do is build your own tooltip. One which is shown when hovering the video and uses the WAI-ARIA role="tooltip" and aria-hidden attributes to show that its a tooltip and if it is visible. Inside these tooltips you can place whatever text you want about the video. Just make sure that the aria-hidden attribute is false when hovering and true when not.
<span role="tooltip" aria-hidden="false">Your tooltip content</span>
Check these examples on how to create accessible tooltips.
Aria Tooltip Example
Tooltips simulated using ARIA
video elements can't have the tooltip role so you should enclose the element in a div with this role. Then, as this role does require a name and has no accessible content, use aria-label with your accessible alternative:
<div role="tooltip" aria-label="Your accessible description goes here">
<video />
</div>
If you're set against using captions, you may want to consider the following options:
Create a text document that tells the same story and presents the same information as the prerecorded video-only content
Provide an audio track describing the information in the video
In either case, it would make sense that the alternative format (i.e. text or audio) would be placed near the video on the page.
You can use the longdesc attribute in the video tag, which contains an URL/link to a text file with a description of the animation.
Add captions, it isn't about what you want it is about what you users need / expect.
Non-impaired users will not see the captions anyway as they are off by default but can switch them on If They Want (if this isn't the case you need a different video player).
If you start with [SILENT VIDEO - captions explain steps] then your deaf users can switch off the instructions If They Want
Blind users will thank you for providing captions as they can then find out what the video contains (as this is an instructional video you may find that a separate set of instructions may work better to describe the steps in detail)
TL; DR - use captions in production - there is no reason not to use captions in a production environment, several reasons to use them.
EDIT / ADDITIONAL
If you really want to make sure your video has no subtitles by default the following JS will disable all of them by default.
for (var i = 0; i < video.textTracks.length; i++) {
video.textTracks[i].mode = 'hidden';
}
I'm developing a web app using Angular and Semantic-UI.
I'm using Semantic-UI's Popup to show stylish tooltips when users hover some elements.
Anyway I have to add title attribute to be compliant with A11Y (WCAG 2.0) and to make screen readers to read the text content of title attribute.
As you can figure out in this way I get double tooltips for some elements.
Do you know a way to make title attribute to keep text and to stop it from displaying popup?
I don't want remove the text so I can't use removeAttr method provided by jQuery...
There's no way to disable the default browser behaviour, which is to show the title attribute as a "tooltip" in the browser itself.
You'll need to resort to some javascript, it could even be as simple as setting the title to blank on hover, and replacing it on mouse out....
onmouseover="this.setAttribute('data-title', this.title);this.title = ''"
onmouseout="this.setAttribute('title', this.getAttribute('data-title')"
This will set the title to be blank (therefore "disabling" the tooltip), and store it in a data attribute. then on mouseout it will put the title back (meaning your semantic-ui stuff will still work). You will need to integrate this at the correct point in your code of course.
Is there any way in HTML to tell the browser not to allow tab indexing on particular elements?
On my page though there is a sideshow which is rendered with jQuery, when you tab through that, you get a lot of tab presses before the tab control moves to the next visible link on the page as all the things being tabbed through are hidden to the user visually.
You can use tabindex="-1".
Only do this if you are certain it does not remove functionality for keyboard users.
The W3C HTML5 specification supports negative tabindex values:
If the value is a negative integer
The user agent must set the element's tabindex focus flag, but should not allow the element to be reached using sequential focus navigation.
Watch out though that this is a HTML5 feature and might not work with old browsers.
To be W3C HTML 4.01 standard (from 1999) compliant, tabindex would need to be positive.
Sample usage below in pure HTML.
Focusable
<a tabindex="-1" href="#" onclick="return false">Not focusable</a>
Focusable
Don't forget that, even though tabindex is all lowercase in the specs and in the HTML, in Javascript/the DOM that property is called tabIndex.
Don't lose your mind trying to figure out why your programmatically altered tab indices calling element.tabindex = -1 isn't working. Use element.tabIndex = -1.
If these are elements naturally in the tab order like buttons and anchors, removing them from the tab order with tabindex="-1" is kind of an accessibility smell. If they're providing duplicate functionality removing them from the tab order is ok, and consider adding aria-hidden="true" to these elements so assistive technologies will ignore them.
If you are working in a browser that doesn't support tabindex="-1", you may be able to get away with just giving the things that need to be skipped a really high tab index. For example tabindex="500" basically moves the object's tab order to the end of the page.
I did this for a long data entry form with a button thrown in the middle of it. It's not a button people click very often so I didn't want them to accidentally tab to it and press enter. disabled wouldn't work because it's a button.
The way to do this is by adding tabindex="-1". By adding this to a specific element, it becomes unreachable by the keyboard navigation. There is a great article here that will help you further understand tabindex.
Just add the attribute disabled to the element (or use jQuery to do it for you). Disabled prevents the input from being focused or selected at all.
I was delighted to discover that Android 2.2 supports the position:fixed CSS selector. I've built a simple proof-of concept, here:
http://kentbrewster.com/android-scroller/scroller.html
... which works like a charm. When I attempt to add an INPUT tag to my header, however, I hit trouble. On focus, every device I've tried so far clones the INPUT tag, gives it an infinite Z-index, and repaints it on top of the old tag. The clone is in roughly the right position, but most of its parent's CSS (including, of course, position:fixed) is ignored. The cloned INPUT tag is the wrong size and shape, and when I scroll the body of the page, it scrolls up and off the screen.
Once it's off screen, hilarity ensues. Sometimes the device will force the scrolling part of the body back down so the cloned blank is back in view; sometimes the keyboard goes away even though the visible box seems to remain in focus; sometimes the keyboard cannot be dismissed even though the INPUT blank is clearly blurred. Here's an example you can run on your Android 2.2 device to see what's happening:
http://kentbrewster.com/android-input-style-bug/
Styling input:focus has not done the trick for me yet, nor have many different brute-force attempts to listen for focus() and blur() with JavaScript and do the right thing with focus and the keyboard.
Thanks very much for your help,
--Kent
This will probably not be resolved until Android switches to using Chrome for its WebView. The current Android browser creates an Android TextView on top of the page when an HTML input field is focussed. Apparently they don't style or position it correctly. You can see it go more wrong on pages that use contentEditable.
The current Chrome-for-Android implements the WebKit IME interface, so input fields are drawn by WebKit (and lose some of the niceties of the Android TextView on ICS) and shouldn't have issues like this.
The solution is to add:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
in your css.
You might be able to solve it by using a bug in Android: http://code.google.com/p/android/issues/detail?id=14295.
That is, don't display the input field right away. Instead, display an overlay div which listens on click and hides itself and shows the hidden input, and give the input focus. This somehow prevents Android from using the wierd input that gets placed on top of everything, and is instead using the browsers input field which you can style any way you want.
As you'll note in the bug raport though, this doesn't work with input[type="number"]...
How can I prevent showing web address at the status bar while hovering a hyperlink?
You could change your hyperlink to use JavaScript to navigate to the URL. For example, if you wanted a link to http://conglomo.co.nz/:
Conglomo
Although this is not as pretty as changing window.status (which does not work for everyone due to browser settings) it will hide the URL from the status bar completely.
There is no way to reliable do this, and no point in doing it either.
Any information the user could get out of the status bar is available to them through other methods, so it can't add security.
If you are worried about aesthetics, then the majority of people who would look at it are more likely to be annoyed by the absence of the normal status information then they would be the URI appearing 'ugly'.
If you really want to try to do this, you can look at window.status. Happily, most modern browsers allow this feature to be blocked.
Firefox, for example, blocks it by default:
This property does not work in default configuration of Firefox and some other browsers: setting window.status has no effect on the text displayed in the status bar. To allow scripts to change the the status bar text, the user must set the dom.disable_window_status_change preference to false in the about:config screen.
You need javascript for that, not php, you can use onMouseOver and window.status like:
A Link
Note: It is not a good practice and adept people can find it out easily.