I would like to add a small message above adsense advertisements to signify that it is an advertisement and thank the user for not using adblock. Obviously I would like this to be hidden if the user does use adblock.
I remember doing this a few years ago by simply wrapping the advert using <div class="advert"> and putting the text inside that. It seems that adblock no longer blocks elements in this way as the ad is blocked yet the text remains.
<div class="advert">
Thank you for not using adblock!
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Advertisements directly support the hosting of this site
</div>
I could create a script to detect adblock and hide the text with that but I would rather let the adblock script do the hiding if possible. I am mainly wondering if that is at all possible. Is there somewhere I can include the text so it will be seen as part of the advert and thus be blocked with it?
Well the solution is actually really simple. You just need to apply styles for the text to .adsbygoogle and then use the ::before and ::after pseudo elements to display the text. When the advertisement is blocked the .adsbygoogle element is not present so the pseudo elements aren't created.
.adsbygoogle {
font-size: 12px;
text-align: center;
}
.adsbygoogle:before {
content: 'Text above';
}
.adsbygoogle:after {
content: 'Text below';
}
It is simple, clean and semantic too which is always a plus. No need for extra markup or any javascript.
I'm sorry, but the correct answer to your question is non-technical and negative: you are not allowed to "add a small message above adsense advertisements to signify that it is an advertisement and thank the user for not using adblock".
"Thank you for not using adblock!" anywhere on your site or page:
very big risk, and I think it is a violation of AdSense policies.
"Thank you for not using adblock!" above AdSense unit:
"Unnatural attention" and "Misleading label" in AdSense.
"Advertisements directly support the hosting of this site":
obvious violation - "Encouraging users to click Google ads".
In order to ensure a good experience for users and advertisers,
publishers participating in the AdSense program may not:
Compensate users for viewing ads or performing searches, or promise compensation to a third party for such behavior.
Encourage users to click the Google ads using phrases such as "click the ads", "support us", "visit these links" or other similar
language.
Direct user attention to the ads using arrows or other graphical gimmicks.
Place misleading images alongside individual ads.
Place ads in a floating box script.
Format ads so that they become indistinguishable from other content on that page.
Format site content so that it is difficult to distinguish it from ads.
Place misleading labels above Google ad units. For instance, ads may be labelled "Sponsored Links" or "Advertisements", but not
"Favourite Sites" or "Today's Top Offers".
Source: AdSense program policies
Publishers are not allowed to use language to lead users to click
Google ads, such as:
"Feel free to click an ad"
"Contribute to the cause, visit an ad"
"Help keep this site running, check out our sponsors"
"We need a new server. Support us!"
Source: Ad placement policies
For horizontal ads, wrap your ad with a div
<div class="adHorizontal">
This CSS works for me:
div.adHorizontal ins.adsbygoogle:before {
content: 'Advertisement';
position: relative;
top: 15px;
color: #888;
font-size: .75rem;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
transform-origin: right top 0;
float:right;}
Related
This question is about Accessibility.
Here is my code:
<a href="https://example.com/url-to-details">
<img src="https://example.com/item.png" alt="some description">
</a>
some description
It's not perfect, as we know we should avoid Adjacent links go to the same URL (this is what the WAVE accessibility tool says for me on my webpage about this piece of code).
With another words, the problem here is you use th Tab key consequently and still appear on the same link. This is not perfect.
My solution is to set tabindex="-1" for one of the links.
So, my questions are:
1. is it a good idea, or you have a better approach?
2. Which code is better from the Accessibility point of view:
<a href="https://example.com/url-to-details" tabindex="-1">
<img src="https://example.com/item.png" alt="some description">
</a>
some description
or
<a href="https://example.com/url-to-details">
<img src="https://example.com/item.png" alt="some description">
</a>
some description
P.S. There is a 3rd approach: to unite two <a></a><a></a> into one such as <a> picture + some description</a>, but I would avoid it for some reasons.
P.P.S. The description text "some description" is equal for both the image description and the text in the anchor tag.
I don't see a use case for having both an image link and an adjacent textual link that use the same URL. It should be a single link, so you have three options:
get rid of the image link,
get rid of the textual link,
combine the image and the text into a single link, where the image has an empty alt attribute:
<img src="https://example.com/item.png" alt=""> some description
In the third case, the alt attribute should be empty in order to avoid duplication of text (screen reader users don't want to hear the link text twice). This also results in simpler code that does not rely on tabindex="-1". See also WCAG Technique H2: Combining adjacent image and text links for the same resource.
Note that using two adjacent links, both with the href attribute and one of them having tabindex=-1, as proposed in the question, will result in both links being listed in a screen reader's list of links. This duplication should be avoided.
Assuming that your alt description should be equal to your link text is a misguided approach, in my opinion.
Let's say you are designing a products list page for an online store.
If the link goes to a product detail page, then the link text should describe that detail page. However, the image alt should describe the image itself, not the detail page.
.link {
display: flex;
flex-direction: column;
align-items: center;
}
<a class="link" href="https://www.mywebsite.org/detail-page-100">
<img class="link-img" src="https://picsum.photos/200" alt="2 puppies running through a meadow in the summer sun">
<span class="link-desc">Buy organic pet food - 5kg</span>
</a>
The tabindex only changes the keyboard order, but screen reader will still announce the same link twice.
Making the img clickable using javascript will avoid annoying keyboard users or screenreader users, letting mouse users click on the image itself.
From a purely WCAG accessibility point of view, nothing has to change in the original code. That fact that WAVE points it out is just an artifact of that tool. It's not an error, but an "alert" (in WAVE terms). The doc for WAVE says this about "alerts":
The goal should not be to get rid of all icons, except for the errors. Alerts will require close scrutiny - the[y] likely represent an end user issue.
The key being that alerts are "end user" issues, meaning usability or user experience issues. Not accessibility failures.
So, if you're trying to comply to WCAG AA, having a redundant link is not a failure and does not have to be fixed. But if you're looking at the user experience, reducing the number of tab stops and links that point to the same destination is always a good thing.
How you fix that issue seems to be the crux of the OP. When two links that are adjacent point to the same location, the best way is to combine the links into one. Adding tabindex="-1" to one is generally a bad idea because that only affects keyboard users and not screen reader users.
I would keep them both, because if a person using a screen reader is tabbing through your website you would like them to hear the image description as well as the text in the anchor tag.
The correct answer is - it depends.
If your image better describes your link, then use the image.
If your anchor tag better describes it - then use the <a>.
Some info for tabindex
Please see all the accessibility you can add to a link here
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
I'm in the process of marking up a site and I've been really trying to hone my accessibility skills. I'm wondering what the most semantic mark-up is for tabbed content. This is what I have now:
<section>
<nav>
Stuff
Stuff
Stuff
</nav>
<section id="content" aria-live="polite" role="region">
<article>...</article>
<article>...</article>
<article>...</article>
</section>
</section>
I have a few specific questions about this.
Am I on the right track? If not can someone recommend some changes?
Will I need to make changes if I were to load in the articles via AJAX?
Do I need the nav tag?
Are WAI-ARIA roles enough here?
Are these the correct WAI-ARIA roles to use?
1.Am I on the right track? If not can someone recommend some changes?
Yes, you've absolutely started in a good way. Some of the tab stuff could be given some tab-related roles if you want to improve it, but it's functional as is.
2.Will I need to make changes if I were to load in the articles via AJAX?
No. It should be fine. The fact that it is a live region should (tested with NVDA only) mean that new content is announced. Is this the behaviour you're after?
3.Do I need the nav tag?
No, but I think it helps make it crystal clear what that bit of the document is for. A note though, that if you do what I've done below and mark it as a tablist, the fact that it's a navigation element doesn't get announced anymore.
4.Are WAI-ARIA roles enough here?
If by ARIA roles you're also including states and properties, yes essentially you should be covered for loading dynamic content (if that's what you're after). There's no case for moving the user's keyboard focus or anything with things as they are. IMO, you'd only really want to do that if there's a lot of navigational stuff between what the user clicked and what content you're giving them.
5.Are these the correct WAI-ARIA roles to use?
You're not far off. If you really want a tab-style experience, then you need the tablist, tab and tabpanel roles. I'll give an example.
I've taken your code and made a contrived but working example to test it. It's not loading anything in AJAX, just showing and hiding stuff. I wanted to be sure before I gave this answer, but I'll put the code here too in case it helps.
<html>
<head>
<title>Aria test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').on('click', function () {
hideArticles();
deslectAllTabs();
$(this).attr('aria-selected', true);
var tab = '#' + $(this).attr('aria-controls');
$(tab).show();
});
});
function hideArticles() {
$('article').hide();
}
function deslectAllTabs() {
$('nav a').attr('aria-selected', false);
}
</script>
<style type="text/css">
article { display: none; }
</style>
</head>
<body>
<section>
<nav role="tablist">
Stuff1
Stuff2
Stuff3
</nav>
<section id="content" aria-live="polite" role="region">
<article id="content1" role="tabpanel">The lazy dog jumped over the quick fox</article>
<article id="content2" role="tabpanel">If you click this tab then your life will be better</article>
<article id="content3" role="tabpanel">Know your roles</article>
</section>
</section>
</body>
</html>
I hope this helps.
Semantics tend to get vague at this level, but yeah I think you're on the right track as long as each of the tabs would really count as a separate article.
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Source
I don't think the <nav> is misplaced here, although it depends on how important the different tabs are in regards to the whole of your website:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.
Source
I wouldn't use sections to wrap the stuff in it though.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
Source
An additional rule of fist for the <section> element is that they should have a title. If not, it's probably not really a "section" but just a group of elements that you needed to wrap in something, so just use a <div>.
I want to display ads on ad sense from dynamic content, I.E call an API and send in some keywords to get ads, is this possible?
E.G:
Adsense.GetAdsForKeywords("car, subaru, auckland");
Or failing that, have some mark up on the page for words to be used with adsense E.G
<span class="adsense-words">car,subaru,auckland</span>
you can't choose keywords for your ads , Google automatically choose ads for your site based on the text content of your site, as mentioned here Link .
but you can do Section Targeting , to emphasize the content between the section, you can use it as folows
<!-- google_ad_section_start -->
your preferred content goes here, google will emphasize more on this section, you can put your keywords span here
<span class="adsense-words">car,subaru,auckland</span>
<!-- google_ad_section_end -->
reference on section targeting
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>