I have two logo's in my site header.
I like the solution here: Replacing H1 text with a logo image: best method for SEO and accessibility? :
Solution:
According to Matt Cuts (and some other comments) the best solution is to use an image with alt and title attributes. The alt attribute is for SEO and the title attribute is for accessibility. Using an image also makes sense for semantic markup. A company logo is actually an important piece of content.
<h1>
<a href="http://stackoverflow.com">
<img src="logo.png" alt="Stack Overflow" title="Click to return to Stack Overflow homepage" />
</a>
</h1>
How to have this with 2 logo's?
<h1>
<a href="http://stackoverflow.com">
<img src="logo1.png" title="Click to return to Stack Overflow homepage" alt="logo1 " />
</a>
<a href="http://stackoverflow.com">
<img src="logo2.png" title="Click to return to Stack Overflow homepage" alt="logo2" />
</a>
</h1>
would the h1 then be: logo1 logo2?
You shouldn't use h1 as logo, as explained by Harry Roberts (http://csswizardry.com/2013/01/your-logo-is-still-an-image-and-so-is-mine/).
If you want to use two logos, just use two links.
In the case of the two logos, it depends on the context. Are you using two images because they are two different things, ie
<h2>Our Sponsors</h2>
<a><img src="" alt="Google"/></a> <a><img src="" alt="MS"/></a>
<a><img src="" alt="Adobe"/></a>
Or something like:
<a><img src="" alt="Toyota"/><img src="" alt="Corolla"/></a>
If it is th second, you should do:
<a><img src="" alt="Toyota Corolla"/><img src="" alt=""/></a>
For assistive technology, the first Toyota Corolla example will read as:
Link image toyota image corolla
and the second way:
Link image Toyota corolla.
Some say using null alts (alt="") is bad for accessibility and/or SEO. This is false. If an image is used for decorative purposes, a null alt attribute should be used, because all it does is add unneeded chatter. Once upon a time, search engines used to ding people for using null alt, but not anymore.
Related
I have an error :
Links do not have a discernible name Link text (and alternate text for
images, when used as links) that is discernible, unique, and focusable
improves the navigation experience for screen reader users. Learn
more.
I tried to include an aria-label but it doesn't work. This makes an error:
<a href="https://...../demo/index.php/Products/Description/Apple-Cinema-27/products_id-1" c="Apple Cinema 27">
<img src="images/products/130_61ajN-dgGxL._SL1000_.jpg"
alt="Apple Cinema 27"
title="Apple Cinema 27"
width="130"
height="130"
class="media-object img-fluid">
</a>
Thanks
Try use aria-label="...." - this is alternative text for image.
<a
href="https://...../demo/index.php/Products/Description/Apple-Cinema-27/products_id-1"
data-c="Apple Cinema 27"
aria-label="yourdescription">
Perhaps the alt attribute just needs a slight modification. The alt attribute should identify the destination or purpose of the link. Here is a very simplified example:
<a href="contact.html">
<img src="contact.png" alt="Return to the contact page">
</a>
You may not therefore need an aria-label attribute.
I know it's technically possible to have a single hyperlink contain both text and an image:
<a href="http://example.com/user/profile">
Joe Bloggs
<img src="http://example.org/decorative-image.png">
</a>
Is there a reason (HTML spec, accessibility etc) why links shouldn't contain both text and images together? I'm wondering if it would be better to output the image after the hyperlink:
<a href="http://example.com/user/profile">
Joe Bloggs
</a>
<img src="http://example.org/decorative-image.png">
In my case, the decorative image is just a green circle which indicates the user is online right now.
Putting the image inside the link is better because it represents the relationship between the decorative image and the link more accurately.
It also increases the size of the click target, which is good for users with motor control issues.
That being said, you must add an empty (null) alt attribute to the image tag to communicate that it is decorative to the assistive technologies.
<a href="http://example.com/user/profile">
Joe Bloggs
<img alt="" src="http://example.org/decorative-image.png">
</a>
An alternative would be
<a href="http://example.com/user/profile">
Joe Bloggs
<img src="http://example.org/decorative-image.png" role="presentation">
</a>
You are perfectly ok to wrap a link tag around text and images.
I have a list of teasers looking like this:
<ul>
<li>
<a href="#">
<article>
<h1>Title of Video</h1>
<img src="thumbnail.jpg">
<p>Something about the video</p>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h1>Title of Video</h1>
<img src="thumbnail.jpg">
<p>Something about the video</p>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h1>Title of Video</h1>
<img src="thumbnail.jpg">
<p>Something about the video</p>
</article>
</a>
</li>
</ul>
Should I use <figure> and <figcaption> instead of <article>?
It is my understanding that I should only use these tags if the text directly describes what is seen in the picture and not in the case depicted above.
But maybe I'm wrong ...
I wouldn't use figure, as I've always thought figure referred more to content that explains or enhances the main article. It wouldn't appear in a document outline, and could conceivably be moved away as a standalone content without making either itself or the main document unusable. It doesn't seem that either of those conditions really applies in this case, but it may depend on the intent of your main document.
Since the teasers aren't standalone content, and can't really be syndicated individually (the videos themselves are the articles, in other words), I'd use section rather than article.
I don’t think that figure would be a good choice, because
you have more than just the main content (i.e., the thumbnail image) and the caption (i.e., the description), namely the title, and
the figcaption would have to annotate the content of the figure, which in your case is the thumbnail image, not the video itself, but it doesn’t really make sense to provide a caption for the thumbnail.
But even if figure might be appropriate, I think using article is the better choice:
It allows you to use the author link type, should you decide to link to the video author (which in itself is a good indicator that article is appropriate here: because the content could have a different author than the page author).
It allows you to use the bookmark link type for the link to the video (again, a sign that article is intended for such a case).
If you’ll use the bookmark type or not, the a should be part of the article:
<article>
<a href="" rel="bookmark">
<h1>Title of Video</h1>
<img src="thumbnail.jpg" alt="">
<p>Something about the video</p>
</a>
</article>
According to the HTML5 docs, the link tag <a> accepts all contents, but, is this really correct?
For figure elements, which one is valid? If more than one is valid, is any one of them better than the other in any objective way?
<figure class="box">
<a href="#">
<img src="" alt="" />
<figcaption>Hello!</figcaption>
</a>
</figure>
<a href="#" class="box">
<figure>
<img src="" alt="" />
<figcaption>Hello!</figcaption>
</figure>
</a>
<figure class="box">
<a href="#">
<img src="" alt="" />
</a>
<figcaption>Hello!</figcaption>
</figure>
Fragment #1 is invalid (in the sense that it does not pass validation by a conformance checker such as Validator.nu), because a figcaption may not appear as a child of any element but a figure.
Fragments #2 and #3 conform to HTML5, but they mean different things. To start, here is what the spec says about a elements:
If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.
With this in mind:
In #2, the figure is the hyperlink content.
In #3, only the image is the hyperlink content. The caption is not part of the hyperlink. The image and the caption are both part of the figure, however.
Because they mean different things, neither is "better" than the other in a generic sense. Do you want the entire figure to be a hyperlink? Then use #2. Do you want just the image to be a hyperlink? Then use #3.
In objective terms it is difficult to establish, in technical terms there are the following recommendations of w3c
"The figures element Represents some flow content, optionally with a caption, That is self-contained (like a complete sentence) and is Typically referenced as a single unit from the main flow of the document.
Thus the element can be used to annotate illustrations, diagrams, photos, code listings, etc.
When a figure is Referred to from the main content of the document by identifying it by its caption (eg by figure number), it Enables such content to be easily moved away from primary That content, eg to the side of the page, to dedicated pages, or to an appendix, without Affecting the flow of the document. "
In these terms the # 1 can be considered a way to easily separate a part from the general context
Let's say I have a row of images, and each image should have a short label or title under it.
Should I use <h3> or just <div> or something else for that label or title?
For example:
<ul>
<li>
<img ...>
<h3>Iron Man</h3>
</li>
<li> ...
</li>
</ul>
Would it actually depends on 3 cases, that,
what if the title is for the content of this page (such as pictures of birds and their academic names, such as "sparrow" and "finch"), then <h3> could make more sense? or
what if it is just titles for a game, so it can be "iron man", "hello kitty", "bugs bunny", etc, so that it really doesn't mean real content for the page but rather just some names used for the game, then <div> will be more suitable, or
if the games is for "hello kitty", "pochacco", "keroppi", so that they are all characters of Sanrio, then it actually is more semantically correct to use <h3> because they actually denote meaningful names for the theme of the game?
(or besides <h3> and <div>, would it be more semantically correct to use other tags?)
I'd suggest using <figure> and <figcaption> elements:
<li>
<figure>
<img src="…" />
<figcaption>
<h3>Image Title</h3>
<p>some text to describe the image</p>
</figcaption>
</figure>
</li>
But this is, incredibly subjective.
References:
<figcaption>.
<figure>.
There are many possible ways and they all depend on your actual content. This can’t be answered generally.
If the label/title should be part of your document outline, then you’ll want to use a heading (not necessarily h3), and perhaps a sectioning content element (e.g., section), containing the heading, the image, and possibly other content.
<article>
<img src="…" alt="…" />
<h1>…</h1>
</article>
Using figure + figcaption (as suggested by David Thomas) is appropriate in many cases, but not if the label is a heading that should be part of the document outline. As figure is a sectioning root element, any headings/sections it has won’t affect this outline.
<figure>
<img src="…" alt="…" />
<figcaption>…</figcaption>
</figure>
If you want to list images + captions, you could also use dl:
<dl>
<dt><img src="…1" alt="…1" /></dt> <dd>…1</dd>
<dt><img src="…2" alt="…2" /></dt> <dd>…2</dd>
</dl>
It would also not be wrong to just use p (no semantic/machine-readable relation, though):
<img src="…" alt="…" />
<p>…</p>