I am creating a page in asp.net. I am trying to show some information in tabular format when user hovers on a inout button. To do this, I am setting alt attribute to input type button because it should be javascript independent. I tried creating a table and assigning it to the alt attribute as a text.
<input type="button" value="save" alt="<table><tr><td>some info </td></tr>
<tr><td>some other info </td></tr></table>"/>
But it is not displayed as a table with two ros. Instead it is displayed as a single line.
Is there any way to show it in tabular format?
This is not possible just like this. Alt can be just plain text.
You'll have to use JavaScript. Try to google for it :)
You'll have to:
Create table.
Using CSS, set it's position to absolute, near your control and display: none
On item hover, you have to set display: block.
Best for this kind of behavior is to use some Javascript framework, IE jquery
jquery.com
specially read these:
http://api.jquery.com/hover/
http://api.jquery.com/hide/
http://api.jquery.com/show/
Agreed with Ales, Javascript would make this a breeze. YUI's Tooltip allows you to instantiate a Tooltip associated with an element, or set of elements (changing the Tooltip's context, so in case you have many similar behaviours spread across a screen).
http://developer.yahoo.com/yui/examples/container/index.html
Once you have instantiated the Tooltip, its something like Tooltip.setBody("your HTML code");, though by default Tooltip sucks in title text of an <a> tag as its content, or possibly even alt text of an element - not 100% on the alt text default part though - good chance that if it doesn't do it by default, if you grab the alt attribute contents it will display it correctly inside the Tooltip.
Others have already told you that what you've asked for isn't possible, as HTML attributes must be plain text, not more HTML.
They've also told you that there are Javascript and JQuery libraries which will help you do what you're wanting to do. There are loads of scripts you could use, here's a link to one that you might want to try: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I feel I should add one further point which others have missed, and which is actually quite important:
You're using the wrong attribute.
The alt attribute is not the correct attribute to use for a hover tooltip effect. You should be using the title attribute for this.
Using alt works this way for historic reasons in some browsers (I believe it works in IE, but not much else), but it is not intended as a tooltip. The correct use of alt is for a small bit of descriptive text that will appear if the image is not loaded. This could be because the file failed to load, or the user has images turned off, or the user has a text-to-speech browser, etc, but if the image is displayed, then this text should never be displayed.
The title attribute on the other hand is intended to be displayed, and all browsers implement it as a tooltip (in fact, it's not just on <img> tags; you can use title for any element).
Hope that helps.
Related
I want to compare two TextArea's text ,and change the different text's line background color,but i don't know how can have tow background color in one TextArea. Maybe should custom to get it,what should i do?
or import .js to get it ? what should i do?
As a more advance solution, you can manipulate TextArea content with https://doc.qt.io/qt-5/qtextdocument.html QTextDocument. Original text document is available via this property https://doc.qt.io/qt-5/qml-qtquick-textedit.html#textDocument-prop . From this point, you can assign your own syntax highlighting. But it requires research from your side.
From the other side, you can check this example https://doc.qt.io/qt-5/qtwidgets-widgets-codeeditor-example.html and using this class https://doc.qt.io/qt-5/qsyntaxhighlighter.html you can assign the existing QTextDocument to QSyntaxHighlighter. The same, I guess, can be used for QML TextArea element.
Since TextArea has textDocument property it should be possible re-implement it for QtQuick Constrols.
To be honest I've never dealt with such a task, but this example looks pretty useful for such cases. Probably you should stick with rich text format option suggested in comments if you don't need advanced features (like real-time content changes).
I am hoping someone could enlighten me on exactly what is the fix to pseudo classes and content negatively impacting screen readers.
For example, if I have this piece of code in my SASS file:
[bag-total]:before{
content: attr(bag-total);
}
My intent here is for the screen reader to read the value of the attribute or the total amount in the users' cart that he is about to purchase.
The problem right now is the screen reader is not reading the number of items in total inside the shopping cart.
The :before and :after pseudo elements are used in the "accessible name" computation as defined here - https://www.w3.org/TR/accname-1.1/#step2. Specifically, step 2.F.ii
The process looks complex but if you think of simple cases, such as a button, the accessible name is essentially the text label of the button. However, a button that displays "read more" might make sense for a sighted user because they can see the context around the button, but for a visually impaired user that is using screen reading software, "read more" might not be sufficient. It's possible to add more context to the button label using ARIA attributes. The additional context is not visually displayed but is used in the "accessible name" computation, which is why that process looks complex.
The same is true if your button just displays an icon. There is no visible text but you need some way to describe the button's icon so that the "accessible name" will make sense.
If you use :before and :after pseudo elements to add more context to your element, that additional context needs to be included in the "accessible name" computation.
Now, all that being said, I'm not sure what kind of "fix" you're looking for. You didn't really state what the problem is you're trying to fix.
It looks like the CSS and user-agent specifications support what you're trying to do here, but inconsistent browser support may ultimately prevent it from working well.
I tested your method using NVDA on Windows with several browsers, and Internet Explorer was the only one that had difficulty. IE still has a fairly sizeable user-base, so it's probably worth supporting if you can.
Unfortunately, I can't see a good solution to your problem unless you want to use JavaScript or a server-side scripting language. Both of these methods add the content to the DOM, whereby CSS doesn't.
This page has some good information on the accessibility of pseudo-elements that seemed to confirm what I was seeing in my own testing.
https://tink.uk/accessibility-support-for-css-generated-content/
I have a site with a number of written documents that are rendered as images. If I wanted to make them accessible to visually impaired people, it would seem that I would need to add the text somewhere.
Each document is rendered as a series of images, one for each page (see this, for example). Would I want to each page's text into its corresponding image's alt attribute, or is there a better way to do it? And, if the alt attribute is the way to go, can I put the entire document in the image for the first page, or is it best to have the text in each attribute correspond exactly to the image it's in?
I would not use the alt attribute as it is used for short descriptions only.
Making all this text accessible would mean rendering it in HTML. In your document, there are lists, there are tables, there are definition lists ; all this needs to be semantically described via HTML so that it is accessible. You would not be able to do this via the alt attribute.
I think of multiple ways you could make this accessible:
have empty alt on all img and render all the text in HTML below the last image. The text can be visible to all, or only to those with screen readers as you wish (via the use of specific CSS, see the "sr-only" class of Bootstrap for example). If you want the text to be visible to all without taking too much visual space, you could hide it behind a toggle button (with the aria-controls and aria-expanded attributes).
on each img, have a short alt attribute and a longdesc attribute. The alt is the title of current page, like "Table of Contents". The longdesc is a link to an HTML page having all the text on the image.
after each img, have some HTML with the text of the image. This description can be visible to screen readers users only. Link each description via the aria-describedby attribute on the image.
I'd go with the first solution, because it's generally the simplest to deal with, and it benefits all users.
Most screenreader software won’t announce an entire page’s worth of content from an alt attribute, let alone a whole document. They have different cutoff points, but alts are intended to give short (a sentence or two) descriptions of pictures rather than large quantities of paragraphs, headings, tables, etc. You can test with a free screenreader (VoiceOver for Apple devices, or NVDA for Windows) to confirm this for yourself.
A better option would be to extract the text using OCR and put it into HTML or a Word doc that uses templated styles. That way people who can’t see the text can still have it read out plus they’ll be able to use all the usual navigation shortcuts like tables of contents and headings. You can still put any charts or graphs in as images with alts, and the amount of text you’d need to describe those would be much shorter and easier to write.
i want to set the width of the html tag . And also apply css on the browse button which is provided in the input type file.
I referred the following -
Is there a way to set width of for showing in Firefox?
also referred following-
Setting uniform width in all browsers
but it is for specific browser. It should work on the mozila firefox , netscape navigator, google crome,safari etc. and i don't want to hide the original input control.
how to do this?
The short answer is that you can not really style the input file, and it's like this by design.
how ever, some tricks are available for you, for example:
http://www.quirksmode.org/dom/inputfile.html
You don't. It doesn't work that way.
You can specify the size of the element, but the browser chooses itself how to use that space to display the input field and the button. You can't style the intput field and the button separately.
It's not even specified in the standard that the file input should have an input box and a button. The browser can display the control any way it sees fit, and some browsers displays it differently, for example using a button and a text label.
[Please only post an answer if you know the answer really well -- if you post an answer such as "I think it is easy to style it in CSS", then it is a guess and not a real answer, and it will make lots of people skip this question because it is marked as "answered"]
[I know the Share button is to be phased out, replaced by the Like button, but the program management still wants to use it as well as using the Like button]
I see fairly often that the Facebook Share button is faked by using an icon, as a background, and the text "Share" as a "button" -- the icon + text is faked to be 1 button.
Example:
http://www.youtube.com/create_detail/GoAnimate
http://www.pcmag.com/article2/0,2817,2381106,00.asp
The surprising thing is, it actually looks good on FF as well as IE 7. And the top link uses Tahoma font, while the second one uses Verdana for Windows, and "Lucida Grande" for Mac.
Question 1: what is it not made into an image? Because as we all know, an image looks the same almost every where. If you need to align the icon with the text, for all different fonts on different platform - Mac, Win 7, Win XP, Vista, Linux, IE 7, IE 8, FF, Chrome, and make the background of the text blue so that it looks like part of a button, it is going to be hard. Different fonts have different top space and bottom space (the "leading" as in printing terms), so it is hard to align the text well with the icon, and also hard to make the font not to look like grainy text on all platforms.
Question 2: is there a standard library or standard method to do it?
(the long existing <fb-share> as XFBML actually gives you an <a>, with the background icon, and then a <span> inside the <a> tag containing the text "Share". So it is actually just a square icon + text, but such as the second link above, they will fake it as a button. Maybe that's why even when it is not XFBML, some people still show the button this way instead of a good old image)
Update: also, it is hard because they usually are just <span>, and you can't specify a width for a <span>. Also, it has double borders to make it look like 3D, but it looks like 1 border is real CSS border and 1 border is by using the Sprite underneath.
Update 2: By the way, of all the Facebook Share button page that still exist on web, I never saw one with a Bubble with a count... this is getting more mysterious...
There are three good reasons for doing it this way:
Reuse: You can use the same icon on several different buttons, regardless of what the text content of the button is. This means you only have to download the icon once, which saves on bandwidth (see below) and means you don't have to make a different button image for every button you want to provide to the user. This is especially important on multilingual sites, as I'm sure you can imagine.
Bandwidth saving: The small icon used to decorate the text button is a lot smaller than an entire button graphic would be and therefore consumes less bandwidth to download it. While for one button this might not amount to much, it all adds up, especially on a site with potentially hundreds of different buttons that gets the kind of traffic that a site like Youtube or Facebook might get.
Accessibility: Image buttons take some additional work to make them accessible (the addition of an alt tag for example) which can get overlooked by web developers in a hurry. Text buttons are accessible by default because they're, well, text.
As for how to do it well, there's any number of approaches. You could use the <button> tag, though this has its own set of issues in IE, you could use <input type="button" /> and give it a background and padding (so the text doesn't overwrite the background) but that approach will require javascript to make the button actually do anything, <input type="submit" /> (similar to buttons but handling them is done server side instead of with javascript), or you could style <a> tags to look like buttons by giving them a background, white top and left border, black bottom and right border, etc. I'm sure there's others as well that I can't remember off the top of my head.
UPDATE: The OP added an update regarding spans and width. By default, no, you can't give a span a width. If you give it padding you can create space inside for adding the icon as a background image, of course, but if you need to explicitly give a span a width you can do it by setting its cisplay CSS property to block or inline-block (the latter requires a modern browser to work)