<a href='' itemscope itemtype='http://schema.org/Brand' itemprop='brand'><i class="logo" itemprop='logo'></i></a>
The above class='logo' applies a font to the icon element. Can we apply the 'glyph' defined in the class (e.g., font-family: 'AnyFont'; content: '/e600') as a Microdata Markup DataType "Brand > Logo" to render the Logo in a rich-snippet the same as a image would render in the rich-snippet?
This doesn't seem likely as an image has a URL based src="..." property and a font character does not, none the less I've been researching this I've found no documentation or discussion on this and need to know if the community is aware of a way to make this work if it does't already work. Or do we have to forfeit the many well-known benefits of using an icon-font to display a logo in rich-snippets?
As validation to the common application of microdata to an image and not an font-character we see that this heavily used microdata generator doesn't give us an option to apply microdata to an element with a font applied to it. And based on the 'Brand > Logo' documentation, the only options are ImageObject and URL (which many very well may believe this answers the question (there's bound to be a way to do this without having to go back 4 years and use an image instead of a font)).
You could use a link element (which may be used in the body in HTML5+Microdata) to provide the URL of the logo:
<a itemprop="brand" href="" itemscope itemtype="http://schema.org/Brand">
<span class="logo"></span>
<link itemprop="logo" href="logo.png" />
</a>
(I used span instead of i. And for the record, I don’t agree that it’s a good idea to include a site’s logo via CSS instead of HTML.)
Related
I am currently studying the web accessibility guidelines that concern HTML5.
Concerning images, I am currently adding images in HTML as follows:
<!-- Normal Images -->
<img src="https://placeholder.pics/svg/300x300" title="Image Placeholder" alt="Image Placeholder" aria-labelledby="Image Placeholder" width="300" height="300">
<!-- Decorative images -->
<img src="https://placeholder.pics/svg/100x100" role="presentation" aria-hidden="true" alt="" width="100" height="100">
Is it recommended by WAI-ARIA to add both aria-labelledby and alt tags together for normal images? or is there something else that I should adopt?
Do I need to add role="presentation", aria-hidden="true", and alt="" to every decorative image? All three of them should go together? or only one of them? (if only one or two of them then which ones?)
Is it a good practice to add both aria-labelledby and alt tags together for normal images? or is there a better practice that I should adopt.
aria-labelledby
No, in fact adding aria-labelledby and alt together will result in some screen readers reading the name twice. Just use an alt attribute, that is what it is there for, it has the widest support (100%) and will do the job just fine.
Also aria-labelledby requires at least one element in the DOM that contains text, you reference it by ID. You can have more than one label too just for reference. It is designed to be used on other elements that can't be labelled using semantic HTML, not really for images (there are always exceptions but they are rare and this is general guidance).
e.g.
<span id="ID1">Read First</span>
<span id="ID2">You can add a second label that will be read second</span>
<div aria-labelledby="ID1 ID2"></div>
title attribute
Also don't use a title attribute unless you are planning on making it the same as the alt attribute. Otherwise mouse users get a different experience to screen reader users as the title attribute is not accessible to most screen readers. See this in-depth answer I gave about the title attribute and how to roll an accessible version if you want to use it.
accessible image example
So your final, accessible image would look like this:-
<img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300">
Perfectly accessible and easy to maintain.
Do I need to add role="presentation", aria-hidden="true", and alt="" to every decorative image? All three of them should go together? or only one of them? (if only one or two of them then which ones?)
alt attribute
All you need to do is add an empty alt attribute. Notice how I said empty and not null.
e.g. alt="" NOT just alt. Using alt as a null attribute will result in it being ignored by some screen readers so the file name will get read out.
role="presentation"
For completeness you can add role="presentation" but it will not add any extra support as far as I am aware.
With that being said I personally add role="presentation" to decorative images as our unit testing will flag any empty alt attributes unless this is added. This was a deliberate decision so when we run tests we don't keep checking the same empty alt attributes are correct.
As support for empty alt attributes is also at 99/100% it is also perfectly valid and accessible to just use alt="".
aria-hidden
The only place (well the main time, there are always exceptions) where you would want to use aria-hidden on an external image is if you are going to dynamically hide and show it. Some screen readers monitor WAI-ARIA changes better than DOM changes.
aria-hidden and inline SVGs
I would recommend adding aria-hidden="true", role="presentation" and focusable="false" on inline SVGs that are purely decorative though as Internet Explorer can sometimes allow them to be focused.
Note that you don't use alt attributes on inline SVGs anyway.
decorative images examples
So your final decorative image would be:-
<!--all image types loaded externally using `img` including SVGs-->
<img src="https://placeholder.pics/svg/100x100" alt="" width="100" height="100">
<!--exception for inline SVGs due to focus bug in IE-->
<svg aria-hidden="true" role="presentation" focusable="false">...</svg>
final note on WAI-ARIA
WAI-ARIA is there to provide information when there is no semantic way to do so.
Adding extra WAI-ARIA all over actually makes accessibility worse. You should always start with 'is there a native way to give the information to a screen reader', if there is, WAI-ARIA is not needed or in fact recommended.
After Thought
I mentioned inline SVGs not using the alt attribute, instead you want to use <title> as part of the SVG. Read this quick article on accessible SVGs for a quick overview.
I use RDFa to add linked data to my webpage. I also occasionally use the rel attribute in various tags for non-semantic purposes, such as triggering a javascript tooltip. I am wondering the there is something I can do to distinguish the uses.
For instance, I have RDFa around my social network icons like so:
<a rel="foaf:account" alt="twitter" href="https://twitter.com/cboettig"><i class="icon-twitter" rel="tooltip" title="follow me on twitter (reading, discussing)"></i></a>
<a rel="foaf:account" alt="github" href="https://github.com/cboettig"><i class="icon-github" rel="tooltip" title="follow me on Github (code, research)"></i></a>
Where rel in the anchor tag is used semantically but rel the icon tags is used by twitter-bootstrap javascript to add a tooltip. Magically, in this example, tools such as http://any23.org intelligenty ignore the rel in the icon. However, when encountering a rel="tooltip" in a span element (used to add a tooltip to a button):
<span rel="tooltip" title="switch to dark theme">
<a onclick="switch_style('dark');" class="btn btn-mini"></a>
</span>
This creates an mostly meaningless ntriple such as:
<http://any23.org/tmp/> <http://any23.org/tmp/tooltip> <http://any23.org/tmp/> .
Of course it's not a huge problem, but I'm not sure why this happens with the span elements and not the other examples, or how to avoid it.
It's always a good idea to avoid non-semantic uses of attributes, especially rel.
One way to avoid this is to use a class (perhaps class="tooltip") instead of a rel.
I'm trying to use the <a> tag in HTML5 more as a container as this tag can now have block elements as children, example:
before (valid XHTML 1.1)
<div>
<h3>
article title
</h3>
<p>
text
</p>
<a href="page.html" title="article title" >
<img alt="image">
</a>
<a href="page.html" title="article title" >
read more
</a>
</div>
after (valid HTML5)
<a href="page.html" title="article title" >
<h3>
article title
</h3>
<p>
text
</p>
<img alt="image">
<div>
read more
</div>
</a>
Does this new way of markup have any effects for SEO?
OK, removing pure semantics from your question (which, in my mind, does have a material impact on deciding on implementing your chosen method) and concentrating on pure "SEO" value and impact:
The first example needs to be qualified more, as if we take your example as literal, then you are linking to the same page.html 3 times. Google (specifically) only takes the link anchor value from the 1st link to any page that it comes across, so - the value for the first example is only extracted from that first link. The 2nd link (using an IMG tag with an ALT attribute as the anchor value), and the 3rd link using read more as the anchor value are effectively "ignored". It's important that other signals are used to supplement the first link's true intended value, such as surrounding text, images etc.
The 2nd example (HTML5), wraps all of that semantic/surrounding content up to make the effective 'anchor' value from which search engines will derive the link's intended meaning, and then as a consequence, the meaning of the destination page of the link.
Using an anchor tag as a containing wrapper for content that contains additional emphasis (the H tag), an image and an additional div only increases the difficulty that a search engine has to decipher the intended meaning of the link so it can associate it with the destination page.
Search engines (and Google predominantly) are constantly improving their crawling ability to enable better algorithmic parsing and processing of the HTML. Apart from emphasis signals (which are very low), Google mostly ignores the mark-up. The exception is of course links - so making an effort to simplify the parsing/processing by providing clear signals as to a link's anchor text is the safest way forward. Expecting them to understand all of the differences of HTML3, vs HTML4, vs HTML5 and all of the transitional, strict and other variations of each, is probably expecting too much.
TL;DR
Possibly, but only in terms of true link value.
As far as i know in the second way is not bad in anyway in term of seo But first may be slightly better as the titles,images are more closely linked to link.
Q. But better by how much?
A. May be not too much
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>
Given the following link to an image:
Title
What is the most semantically sound method for indicating the location of a thumbnail?
The best I could come up with so far is using data- attributes like so:
Title
However, it doesn't seem very semantically sound. Is there a better or more correct way to do this?
Why not use an <img> element? You can give it a class to indicate that it's a thumbnail and hide it with progressive enhancement if you need to. That way, the thumbnail of the image will be shown in the absence of JavaScript/CSS:
<a href="path/to/img.jpg">
<img src="path/to/thumbnail.jpg" class="thumb" alt="Thumbnail" />
Title
</a>
Or am I being too naïve?
Title
Simple and keeps the original path intact while just adding a suffix to indicate that the image is a thumbnail. We use this all the time on our sites and it makes things easy.