What is the use of the title attribute on a html element?
<div class="myDiv" title="This is the title"> Stuff </div>
Is it intended to be used as a tooltip? Does it have any further use?
Pretty much. The HTML spec calls it advisory text, but it uses the word "tooltip" as well, because that's how it is typically represented:
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.
Its role in relation to the content depends entirely on the context given by the content, but in general it serves as optional, supplementary information for that content.
Title attribute is for tool tip. IN title attribute we can pass some text to tell the user for what purpose that particular element is.
This topic is already well explained. But it is important to remember that using the title attribute is not very useful when it comes to HTML accessibility and usability. The use of this attribute is neither recommended by W3C. In W3C words:
Relying on the title attribute is currently discouraged as many user
agents do not expose the attribute in an accessible manner as required
by this specification (e.g., requiring a pointing device such as a
mouse to cause a tooltip to appear, which excludes keyboard-only users
and touch-only users, such as anyone with a modern phone or tablet).
If you give an object a Title, try hovering your mouse over it, It will show a subtext which contains the text you set as title.
"The title attribute allows the author to provide extra information about any element on a page."
Typically, this attribute’s content is rendered as a tooltip that appears when the user hovers the cursor over the element to which the title is applied.
Yeah.. It is mainly intended for tooltip... But also we are using for identification.. Whenever two or more divisions are placed one behind other, to identify each one we can use that.....
The title attribute is a descriptor, like the alt attribute for images. It is not required, but would be good practice to use where it makes sense. An old school example might be if you have a table of information on your page. Adding the title attribute to the table tag with a brief notation of what the table is (e.g. 2014 Daytona 500 Race Results) would make sense.
Once upon a time, search engines treated the contents of title attributes as content. I don't believe they do anymore (though I'm not 100% sure) though.
Hope that helps!
Related
For my study project I'm currently checking an example website for WCAG 2.1 compliance.
Checking it with different tools I still get some Warnings I don't understand or know how to solve.
One of the warnings is "title on non interactive element": I have some title="" attributes on <div>, , and elements and get a Success Criterion 3.3.2 Labels or Instructions warning.
I know the title attribute is not always read by the screen reader. But if I don't expect it to, where's the problem? I even tried to add an aria-label="" with the same content as the title but still get a warning for the title attribute.
<div class="criterion_secion" id="criterion_214" title="Success Criterion '2.1.4 Character Key Shortcuts'" aria-label="Success Criterion '2.1.4 Character Key Shortcuts'">...</div>
I believe that the warning is given because it’s not expected to have a label or a title on a non-interactive element, like a div.
A div is by nature a non-interactive element. We could make it interactive through the tabindex attribute or by giving it a role. However, I would advice not to do that and just use the div for what it's intended, as a container.
It make sense your tool are flagging title on non interactive element as a warning, because a lot of users can't access to your content in the title attribute. A warning doesn't mean it's automatically a failure.
The aria-label attribute on a div (without role attribute) is useless. This element have no semantic and it's not supposed to have an accessible name.
ARIA & Tooltips: 2 commonly misunderstood attributes
There is a very easy solution to this issue: remove both title and aria-label attributes and include their content that reads "Success Criterion '2.1.4 Character Key Shortcuts'" inside the DIV element, if not already included.
aria-label
The aria-label attribute defines a string value that labels an interactive element.
First of all, ARIA is for the screen readers only and it overwrites the accessible name of the element.
For example,
<label for="name" aria-label="surname">Name</label>
<input id="name" type="text" />
will be announced as "surname" and the screen reader user will never understand it is for the input field that collects users' "name".
As for the non-interactive elements, a paragraph never needs any aria-label for the simple reason that you can always include whatever information you want inside it. Besides, it may not be read or may confuse your users as a non-interactive element that acts like an interactive one.
It is also important to know that repeating what is already available as text with an aria-label is simply a nuisance, making the screen reader say the same thing twice or even thrice sometimes, along with a tooltip.
Tooltips
Tooltips are intended for sighted users. They provide some extra information that was not made available elsewhere. Examples from Mozilla.
It is helpful to understand these:
Tooltips are not accessibility features
Repeating what is already available as text using the title attribute helps no one and annoys screen reader users. It is simply bad practice.
Here is a comprehensive resource that will probably make you think twice before using another tooltip: If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.
I currently have an id attribute on each section heading in a HTML document, so that URLs can be generated with a hash fragment that links directly to that section in the document. For example:
<h2 id="section3.4">Section 3.4 - Foo</h2>
This would, of course, be linked as page.html#section3.4.
I would like to offer an alternative formatting for that fragment, e.g. page.html#s3.4. The exact formatting is arbitrary and not important here.
Obviously one cannot simply apply multiple ID tags to a single HTML element in order to achieve this. The solution, it seems, is to add a secondary tag to the page at the same position as the heading, e.g.:
<h2 id="section3.4">Section 3.4 - Foo</h2><xyz id="s3.4"></xyz>
Is there a standard or preferred tag type that is used for this purpose? Searching around, I was surprised to find no "best practice" answer for this.
Technically the tag type is arbitrary, since any element with an id attribute should work, but picking canvas or script, for example, is clearly silly. I've seen a suggested, but I'm not sure that is semantically correct, since a is supposed to create an anchor to a location, not be a location.
One thought I had was to have the enclosing section tag's ID be the target, but that doesn't enable an arbitrary number of alternate fragment names, and technically it isn't linking to the same location since the bounding box is subject to CSS.
I feel like the ideal element would be one that is guaranteed to have no visual presence on the DOM, hold the same vertical position as the adjacent element, have no side effects, and which makes semantic sense as a positional marker, all while also not having any impact on accessibility (e.g. screenreaders). However, I cannot think of such an element. Is there a standard that I missed? If not, which tag might be the best option?
In inline contexts, use a <span> element wrapping the text inside the appropriate heading.
<h2 id="section3.4"><span id="s3.4">Section 3.4 - Foo</span></h2>
In block contexts, use a <div>.
Both are semantically neutral. And this approach ensures the heading text receives appropriate focus regardless of which fragment identifier is used.
This is a very (very) specific question, but would it be appropriate to use the alt attribute for a pre tag when using that to show ASCII art? It's essentially like an image (which wouldn't be intelligible using a screen reader), so using alt makes sense.
<pre alt="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>
Would is be read by a screen reader? Would this be appropriate or good form?
(I could imagine other situations where this might arise, like using a typographical object to denote a particular action, such as a "home" link.)
The aria-label attribute exists for this purpose.
<pre aria-label="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>
For more information, check out this MDN article on it.
You have different options to consider as screen readers are just one step in the big journey of accessibility.
The title attribute
The alt attribute is specific to img and area tags. For other element, you can use the title attribute which will give the use access to a tooltip in many browser implementations:
See HTML5 doc:
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.
Warning! Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
The title attribute might be used with some conditions: using it on a targetable element (using tabindex=0) so that it can be accessed with keyboard, using javascript to show the tooltip when the browser doesn't, and giving visual clue that we can access the definition by focusing the element (underlying, question mark, ...).
The aria-label attribute
Many screen readers do not read by default the value of the title attribute, so you are encouraged to use the aria-label which is somehow specific to screen-readers. As people not using screen reader won't benefit of an aria-label, you have to use it in conjunction with the title attribute.
Note that you can use two different text as the title can be used as a description when aria-label is more a text replacement.
<pre aria-label="Welcome!" title="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>
Ignoring it.
You can also consider that this is meaningless to a screen reader, and consider it as a purely decorative text using the aria-hidden attribute.
<pre aria-hidden="true">༼ つ ◕_◕ ༽つ</pre>
I wanted to know if adding a 'title' attribute is semantic relevant on a 'img' tag. I already always use the 'alt' attribute to respec the W3C spec.
And if yes, is the content on the 'title' attribute have to be different from the 'alt' one ?
The title attribute can be used as semantic, i.e. as relating to meaning. As such, it is defined to be an advisory title, and browsers may make its value optionally available to users, e.g. as a tooltip on mouseover or as a cue spoken by a speech browser. This means that it can be used for a multitude of purposes, semantic or other. It is up to you to decide whether you use it to describe the meaning of the image, or to give authorship information, or e.g. just to show a name for the image (the name may or may not describe the meaning).
Search engines may treat the title text as relating to the image, possibly causing a page to appear in image searches when words appearing in that text are used. The details of such processing have not been disclosed and probably vary from one search engine to another.
There is no reason why the value of the title attribute should not be the same as the value of the alt attribute. They have different purposes, but sometimes the same text can serve both. For example, if the image contains a person’s signature, the alt attribute should probably contain just the name in the signature, and the title attribute could contain the same (e.g., to help people who can see the image but cannot read the name easily), or it could be more explanatory, e.g. title="Joe Q. Public (signature)".
Just to expand a little about what #SLaks said in their answer. The title attribute can also help with SEO and expressing more about what a web page has to offer. Just a tid bit to add is all.
The title attribute can be used to add a tooltip to any HTML element, including <img>.
It can be, but does not need to be, the same as the alt attribute.
its relevant. alt attribute is for useragents which not display images, in this case it will show the alt attribute. alt attribute is required for a responsive webdesign (WCAG). title attribute are optional for tooltips and this must be not the same as alt.
We were discussing with a co-worker and trying to decide on what HTML element to use for a form validation error message.
One of us is saying that we should use a span or a div because it is a part of an input field, and the other is saying that it should be a p element because it is a text.
What do you guys think?
I believe you should use a <label> which directly associates the error message with the input element.
quoting the W3 specs
The LABEL element may be used to attach information to controls.
and
More than one LABEL may be associated with the same control by creating multiple references via the for attribute.
See also Error Message: <span> vs <label>
In principle, the choice of element should be dictated by the meaning, not by "how and where you want to display" it (as #Babiker suggested). That's kind of the whole idea, not to mention the effects the choice will have on (for example) visually-impaired users (for whom the "where you display it" may be totally lost).
It does seem unfortunate that even HTML 5 doesn't have an element for this. Perhaps 'aside' (http://www.w3.org/TR/html5/sections.html#the-aside-element) would be the closest? The spec describes it in Section 4.3.5 as:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
WCAG2.0 guidelines, on
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Lists as sufficient techniques.
G138: Using semantic markup whenever color cues are used
And
H49: Using semantic markup to mark emphasized or special text
Based on those, I infer that the only appropriate tags for errors are <em> and <strong>
Using <label> in not enough as it shows relationship between the label content and the target field, but doesn't communicate the importance of the content.
There is no right tag to use for an error message. It all depends on how and where you want to display the error. Once you decide on these things, your choices will be narrowed, as tag properties and limitations differ. But how did <p> come in this?
Just throwing into the jar: What about <ul>-Elements. If an input-field's validation fails for more than one reason, than you may want to attach more than one error-message to that field.
Example for an file-upload-field:
The file you tried to upload has the wrong format. (Only png, gif and jpg are allowed)
The file you tried to upload is to large. (Max 1MB)
and so on...
The Zend-Framework Error-Decorators for example are using ul-Elements.
However if I had to choose, between div, p and span, my choice would be div. Best stylable (Background-color for example).
You could use
<pre>Error</pre>