Below is some html I found in this jquery tooltip tutorial, the contents inside of content"" show up in the tooltip using javascript. I have never seen the content propert befre, I search on W3schools.com but and google but could not find anything about it. Is this a valid property?
Image Tooltip
sorry If I am overlooking this, I searched but just briefly, didn't look too much before asking this.
If you need to put custom attributes into an element, then use the html5 data- attributes.
Shamelessly copied from John Resig:
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
This is most likely a custom attribute that the jQuery tooltip creators made up to hold the text for the tooltip. This is unfortunately a common practice with many jQuery plugins (although most put stuff like this in the rel="" attribute instead).
The downside of this is that if you are concerned with validatiing your HTML, this will cause that to fail.
The upside is that browsers will ignore attributes that they do not expect, so it will not affect the rendering of the page.
The proper place for this would be the title="" attribute, but without the extra HTML markup in the value (<span> in this case).
If you must have the extra markup, be sure to encode it:
title=">span<Image Title</span>"
But, be aware that if the Javascript fails, the user will see this encoded text as the built-in, browser-rendered tooltip.
Based on my initial searches on w3c, it seems that there is not such attribute "content" for a tag. The "content" attribute is for meta tag only. For tooltips you would use the "title" attribute. Also, I don't think html is allowed in a title attribute.
Image Tooltip
The content attribute doesn't exist. For tooltips you can use the title attribute (which works on alot of tags).
I thinks some browsers also use the alt attribute for tooltips on img tags, but this isn't the intended purpose of alt.
Related
I have the following input on a site I'm currently reviewing:
<input type="submit" name="executeSearch" value="" alt="Execute search" title="Execute search" class="iconButton searchBtn">
Through the class attribut the input button is replaced by an search icon.
According to accessibility is this the right way? Or should the value attribute be used? The screenreader I tested this element with (NVDA) was able to read the text ("Execute search button").
An empty value and an icon added via CSS to convey the only important information is a failure according to WCAG 2.0: F3 - Failure (…) due to using CSS to include images that convey important information
Simplest solution: use an input[type="image"], keep that alt="Execute search" ("Search" would be more concise IMHO), add an src="/path/to/img" of course and remove both title and value attributes. Image can be an SVG and can be encoded in base64 (ideal when it's light for performance reasons: that's 1 resource not to be downloaded).
That [type="image"] seems outdated because it was widely used circa IE6, way before RWD but it isn't (proof of concept with an 8x16 viewBox and width*height SVG: it scales®)
Otherwise you can use a button element with type="submit". This element can contain SVG, HTML images, text hidden to screen readers (better known as .visually-hidden, .sr-only or .element-invisible in Bootstrap, WordPress, Drupal, etc). That's what I use when a "submit" has both text and image or icon because no :pseudo with input and text-only through #value
Some notes on your current markup:
#alt should only be used with input[type="image"]
#value shouldn't be used with type image and otherwise should never be empty
#title should only be there (on links and "buttons") if it adds something to the existing information (like Subscribe ⇒ Subscribe to the newsletter or Edit ⇒ Edit something in particular)
According to accessibility is this the right way? Or should the value attribute be used?
An input[type='submit'] button does not accept an alt attribute
Some screenreaders may use the title attribute, but it's still useful for non screenreader users
Using the value attribute is the recommended approach for screenreader users
What is the significance of cmdValue in the input tag in the following:
<input type="button" value="Bold" cmdValue="bold">
This is from <div id="actions"> on a website.
I looked up the input tag on several HTML reference sites and searched for cmdValue in conjunction with the input tag, but could find no data.
That is not a formal HTML attribute for any known tag.
That is certainly a customized attribute added by the developers of that website.
I prefer to forward you to read the answers of this question.
The significance is whatever the CSS or JavaScript code for the page assigns to it. You would need to analyze the page in detail to find this out.
As such, the nonstandard has no effect beyond getting inserted into the DOM as an attribute.
Do all HTML tags support the name attribute or are there only a few that one may use the name attribute on? Furthermore, do all tags support the title attribute?
The reason I ask is because I need to store information in these attributes about the current element.
Here is an example:
<img src="example-image.jpg" alt="Example Image" title="Additional Information" name="Even more info"/>
<div class="example-word" title="Information about this tag" name="More information about this tag">Word</div>
This additional information i am storing in the attribute will be grabbed via javascript.
According to MDN name officially only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea> - basically form fields, links, and plugin objects.
If you want to store other information (metadata) with an element, you should look at data- attributes. This is the recommended approach for HTML5, but will work on older browsers too. This also means you can store as many different pieces of extra data as you need
<img src="example-image.jpg" alt="Example Image" title="Additional Information"
data-name="Even more info" data-other-info="Some other information" />
<div class="example-word" title="Information about this tag"
data-name="More information about this tag">Word</div>
You can add your own tags and read them via javascript. These tags have to begin with data-:
<div data-whatever="Information the world needs"></div>
Tags don’t “support” anything. HTML specifications define which attributes are valid for which elements. For the name attribute as well as the title attribute, this depends on HTML version.
Browsers don’t care that much about specs. If your markup contains the attribute foo=bar, they happily include foo in the attributes property of the element node. They may or may not also make foo a property of the node itself. For title, this happens, i.e. “modern browsers support title for all elements”, and this also means that most browsers implement that attribute as a “tooltip”, which is a usability nightmare, but I digress. For name, this happens for some elements but not all, and for controls inside a form, that attribute also has a specialized meaning (it affects the issue whether the value of the control is included in the form data).
The recommended way to store data is to use data-* attributes, since they are guaranteed to have no meaning and no effect, beyond what you specify in your scripts or style sheets.
You really should store it using the data- attribute, but you can always use name and access it like so:
obj.getAttribute('name'); //Pure JavaScript
$(obj).attr('name'); //jQuery
But really, stick to data-.
Is it ok to put html codes inside alt tags?
I have a slider that uses alt tags for description. In order style the description, I have to put html codes.
My problem is I dont know if it will harm SEO or any other things to consider..
HTML markup is not valid for the contents of the alt attribute. If you need a fancy dialog ox you can easilt accomlish this with JavaScript and maye even plain old CSS. That way your code is valid and you don't run into any potential SEO issues.
Yes, you can use <img src=foo alt="<i>Hello</i> world">. I don’t see any reason why anyone would, but it’s valid. The alt attribute would then be rendered literally, because it’s an attribute value; no HTML tags are recognized there.
The rendering of alt tag values may or may not be affected by style sheets and markup around the tag. If you write <b><img src=foo alt="<i>Hello</i> world"></b>, then advanced browsers will display <i>Hello</i> world in bold face (but not in italic), when they do not display the image. (The “tooltip” part of the handling of alt attributes is a different issue, unstyleable, and generally not present in any modern browser.)
To use just an attribute that carries some text to be displayed via JavaScript, data-* attributes are a much better approach, as Baptiste Placé points out in his answer. It is technically possible to use alt for that, but this would cause odd things when the image is not displayed (at least temporarily, due to delays) ant the alt text is used in its stead.
Moreover, search engines are known to play attention to alt attribute values, so they should not contain anything that is nonsensical when considering the attribute’s defined role (to provide an alternative text to be used when the image is not shown).
In order to style the description, you need CSS; HTML is for defining a document's structure.
You should not use the alt attribute for your slider, use your own property instead with the data-* attributes. More info on the data attribute : http://www.marcofolio.net/webdesign/html5_data-_attributes_are_great_and_you_know_it.html
You should make this kind of html (using data-longdescr, but use any data-something you like) :
<img src="/img/pic.jpg" alt="Jumping over a fence" data-longdescr="<b>Jumping</b> over a fence" />
Beware of quotes thought, they must be escaped !
Markup won't work on an alt attribute.
I would put all the description tags inside a CSS class. Then, style the class separately.
I think you've all misunderstood the question, OP is asking if it's possible to insert html in to an alt tag because he wanted to style the output text as he was using it as descriptive text overlaying his slides. I've run in to the same problem and discovered it is possible to insert html in to alt tags. This is very handy since I'm using a Wordpress lightbox plugin that turns every picture link on my page in to part of a slideshow and outputs the alt text as descriptive text over each image.
If I could only enter plain text then the styling for my descriptions would have been very limited and I wouldn't be able add in awesome things like links:
<img alt="<?php echo "Title" . "Lorem Ipsum dolor" . "<a href='http://www.google.com'>View Website</a>"; ?> " src="<?php echo $img; ?>">
I'm using php to insert the markup though you can also use plain html
alt="<h3>Title</h3><p>Lorem Ipsum dolor</p><a href='http://www.google.com'>View Website</a>"
Which outputs:
Title
Lorem Ipsum dolor
View Website
I'm not sure if this good for SEO but it's definitely handy and something I didn't know was possible until now.
I need a link within an tag as follows:
<span><a data-description="TITLE - See more here" class="bullet" tabindex="-1"</a></span>
How can I have a link on the 'see more here' part?
Is this even possible?
Thanks
The "data-description" attribute is by definition, without any universal semantic meaning (any attribute beginning in "data-"). It might be used by some JavaScript library to add a tooltip, but the only built-in browser tooltip is the "title" attribute which your example is not using (and that does not support HTML, only text). You need to use some library like http://docs.jquery.com/Plugins/Tooltip