I'd like to:
Display one url image in a paragraph tag (French flag) that,
a. hyperlinks to one url, AND
b. is displayed based on the detected browser language fr_ca
AND
Display a different url image in a paragraph tag (American flag) that,
a. hyperlinks to a different url from above, AND
b. is displayed based on the detected browser language en, AND
c. hides the fr_ca paragraph tag above
I have access only to the CSS and HTML inline or via style block (not CSS file) or other server-side scripts.
Here's an example of what I'm thinking but not sure how to execute:
<p .lang_fr_ca><img alt="" class="flag" data-pin-nopin="true" src="http://static.company.com/shop/template-resources/~1336/images/flags/64/ca.png" />
<p .lang_en><img alt="" class="flag" data-pin-nopin="true" src="http://static.company.com/shop/template-resources/~1336/images/flags/64/us.png" /></p>
Related
What is meant by Images must have alternate text: Element has no title attribute
I had created img tag but developer tools gives me a warning but i can't understand what that means.
Affected resources
<img src="./img/twitter.png">
This has to do with screen readers. Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.
There are 3 ways to give an image alternate text:
Using an alt attribute i.e. <img alt="drawing of a cat" src="...">
Using an aria-label i.e. <img aria-label="drawing of a cat" src="...">
Using an aria-labelledby attribute i.e. <img arialabelledby="someID" src="..."
The alt attribute is needed when the picture is not available or the user turned all pictures off in his/her browser. It's necessary to include this attribute to your img elements.
<img src=".." alt="Alternative text" width="200" height="100" aria-label="For screen readers" />
Use alternate txt for img tag like this : <img src="./img/twitter.png" alt="tweetImg"> .
As it is important, if there is slow connection the alternate txt will be visible or due to some error your image don't show up .
The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the element is not loaded.
This may be the case because of an error, because the user has disabled the loading of images, or because the image hasn't finished loading yet.
See this to read more about alt
The image inside this anchor tag throws a "Linked image missing alternative text" error in the WAVE accessibility checker:
<img src="google.jpg" alt="" />
You can't have a decorative image being the sole element of a link. This image is a link, it's not decorative.
<img src="google.jpg" alt="" />
When an image is the only content inside the link, its alternative should contain the link destination description.
In other cases, adding the role="presentation" would have been sufficient to explicitely state that you willingly wanted a decorative image which is not the case here.
Support for the title attribute in screen readers and other assistive technologies is extremely limited; it is also useless for sighted keyboard users.
See for example,
Don't Rely on the Title Attribute for Accessibility (2016)
Using the HTML title attribute – updated (2013)
If a link contains only an image and no text, the content of the alt attribute constitutes link's "link text", i.e. this is what a screen reader will announce when the link receives focus. For this reason, the alt attribute cannot be empty in this case. You need something like the following:
<img src="google.jpg" alt="Google" />
If you include actual text next to the image, as in the following example, you can leave the alt attribute empty:
<img src="google.jpg" alt="" />Google
In the last example, the image can be treated as a decorative one, due to the presence of proper link text. If the string Google were included in the alt attribute, it would be announced twice by a screen reader.
Adding a title attribute to the link is not a great idea for the following reasons:
It is useless to sighted keyboard users who cannot hover the mouse pointer over the link.
Screen reader support for the title attribute is not entirely consistent, as can be seen from the test results A "click here" link with TITLE attribute: Screen reader compatibility (last updated in April 2019). Adding the attribute title="google link" to the above examples would just lead to needless repetition in those screen reader and browser combinations that actually support that attribute on links.
The CKEditor 4.3 demo show an example of widget for work with HTML5 figure tag.
As a user (editing the demo text) I can not edit a second figcaption (one before image, as "figure title", and other after image, as caption): when edit (by CKEditor's source code) before, it goes after, when I add a paragraph (p tag) before image, also goes after. So, there are no way to user express distinct "head-caption" and "foot-caption", always CKeditor put after image.
There are some configuration to enable "head-captions"?
The edited source code:
<figure class="caption" style="float:right">
<figcaption>HEAD - Test</figcaption>
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
So, CKEditor transforms into,
<figure class="caption" style="float:right">
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>HEAD - Test</figcaption>
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
Idem with <p>HEAD - Test</p>. If I use only the <figcaption>HEAD - Test</figcaption>, it also goes after image (impossible to express a "before img caption").
NOTE-1: "head" and "foot" figcaptions are both valid in HTML5, as showed in this fiddle.
NOTE-2: another problem is a caption with more than one paragraph. CKEditor transforms it in a BR, that is not what author need in a typical journal.
NOTE-3: for this related needs — use of paragraphs, use of "before image" caption, and use of two captions —, see all needs of a typical journal at an stable standard like JATS fig element, or millions of article examples at PMC.
Short answer - no, there is no config option for that.
Some details - you're using the image widget, which is supposed to handle figure.caption>img+figcaption case. Specific widget may not work with every possible input and it happens in this case.
If you want to remove that limitation there are two ways:
Don't use the image widget by disabling it or remove class="caption" from your HTML. For example this HTML will not be changed:
<figure>
<figcaption>1</figcaption>
<img src="..." ...>
<figcaption>2</figcaption>
</figure>
Also, the enter key will work in a standard way inside figcaptions (will create <p> tags).
The other way, if you want to use the image widget, is to modify its behaviour. In case of simple widgets it can be done without touching widget code, inn the widgetDefinition event listener. However, image widget is pretty complex, so you'd have to change its code.
To change enter key behaviour, just change the widgetDefinition.editables.caption.allowedContent - it has to contain a p tag. This part can be done in widgetDefinition listener.
In order to be able to use two captions, you'd have to add another nested editable and modify the plugin code, because it handles only img+figcaption case.
I have written the following html to add a image to a script that is being used to generate a email
<a href="http://www.marshalls-seeds.co.uk/" target="_blank">
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png" alt="Marshall seeds logo"></a><br/>
If I check that in MS expression and outlook it works fine. But if I use hotmail or gmail the result look like this.
[Marshall seeds logo]<http://www.marshalls-seeds.co.uk/>
When I inspect the element I can see that the <img> has 'disappeared' and been treated as if it was text. But I cannot see why.
It is built-in security in gmail and Hotmail which removes the images.
Btw, you should always add width and height and en / in your <img>-tags.
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png" width="XXX" height="XXX" alt="Marshall seeds logo" />
You have forgotten to close your <img> tag; now you can put / at the end of your <img> tag like this:
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png"
alt="Marshall seeds logo"/>
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