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.
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 have a bunch of buttons I am adding to the toolbar in the viewer that I want text for instead of an icon. For the majority of cases I have been able to just add the text by setting content on the .adsk-button-icon:before which has worked perfectly although im not a huge fan of having the text set in the css file but it works.
I am now looking at adding buttons to the toolbar that will get the text when the viewer is loaded so I can not add the text via css beforehand.
Currently the only way I can see of doing this is creating the styles with JS or adding inline styles with JS which if possible I want to avoid. Is there a way to set a text (or better yet html) to the button or is there a control better suited for this.
https://forge.autodesk.com/en/docs/viewer/v2/reference/javascript/control/
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
I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.
i want to use page break in html that means the reader cannot scroll down further until he select a link for it.
<SPAN id=title><A name=BdToc_1 external=yes><h1 id="BookTitle" align="center"><font color="#B90000"><b>Choose Subject</b></font></h1>
</A>
</SPAN>
<p>
Contents....
</p>
I want a page break before and after this. Please help me
Forgive me for pointing out the obvious, but page breaks are used to separate distinct pages. Each HTML document is a distinct "page". "select[ing] a link" traditionally loads a new page. So.... why don't you just load the next page when they click on this link?
You can specify where page breaks occur using CSS properties page-break-after, page-break-before. Of course, this works only when printing the web page. As far as I know, these properties are correctly implemented in all major browsers including IE6+. Additionally, you can also state that page break should not occur inside an element using page-break-inside.
If you want paging per se, you need to have HTML for each page and interlink these pages. Or you can fetch contents of each page using AJAX dynamically, which of course involves scripting.
It's not quite possible in HTML. You could try makeing something in Javascript, but anyone can dissable javascript.
Why would you want something like this?
You can use onscroll in javascript to control the scrolling. The onscroll event can determine the current position and there is a function to scroll up if the user is too far down.
Then, when the user clicks the link, you set a flag (scrollok=1). The onscroll checks the flag and now permits scrolling.
If you want to defeat people who have deactivated javascript, just make the content invisible until they click using stylesheets: visibility=none.
Then, when they click the link, you enable scrolling via the flag, and make the content visible.
If you don't know how to do these things, just leave a comment and I can be more precise.