I'm adding WCAG accessibility to non-Google display ads. I produce ads using transparent PNGs that tween to 0,0 to animate and build the ad and to show the focus/hover state. Our text in the ad is part of the PNGs. My simplified code below is:
<!DOCTYPE html>
<html>
<head>
<meta content="width=300,height=250" name="ad.size">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>300x250</title>
<link href="300x250.css" rel="stylesheet" type="text/css">
<script defer src="https://url.com/script-that-animates-images/" type="text/javascript"></script>
</head>
<body>
<div id="container">
<a href="https://url.com" title="Advertisement — Text that repeats the image's text. Call to action." id="rolloverCatch">
<div id="content">
<!-- animated images that include the text -->
<img src="https://www.fillmurray.com/300/250">
</div>
</a>
</div>
</body>
</html>
I've added title to the anchor — on hover the image text is repeated — but is that correct and enough? (e.g., alt is for images, title for links, is this correct?) I realize the ideal situation would be to render plain text but what more can be done to better align with accessibility requirements using only images in a display ad? On the images themselves, should I be adding aria-hidden=true? Is there an appropriate reference to use here?
Concerning Google display ads, is the accessibility functions added within that system? I'm tracking I do not have anchors within the uploaded HTML source, should Google display ads have alt text on the top-most image instead?
I'm using accessibleweb.com and Disability Studies Quarterly as references for the above but I'm having trouble finding timely or better resources.
I think in your example the most natural way to do it is to add an alt attribute to the <img> element:
<div id="container">
<a href="https://url.com" id="rolloverCatch">
<div id="content">
<!-- animated images that include the text -->
<img src="https://www.fillmurray.com/300/250" alt="Advertisement — Text that repeats the image's text. Call to action.">
</div>
</a>
</div>
When the <a> element has a text, or another element having itself an accessible name between its opening and closing tags, it takes that as its own accessible name.
And by the way, all the images that have something meaningful must have an alternative text (with alt, aria-label or aria-albelledby).
I am currently at a dead end on one of the projects I am working on.
I'm working on the translation of an application in Xamarin Ios, at the moment
the entire application can be translated and the language of the application can be changed directly via the app.
But this application also has Tutorials pages that explain in a few words what is the purpose of this feature.
These pages are in html and have a relatively simplistic content that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p>Use this page to add a new friend</p>
<p>It could be a good idea to give him a pseudo</p>
</div>
</body>
</html>
These pages should be translated on the fly when the user
decides to change the language of the application.
Currently the entire application could be translated into several languages except these html pages, simply because I have no idea what's the best way to do it.
I didn't find any information or documentation about this (I'm pretty sure that's because I'm using Xamarin Ios).
I am looking for a way to fill my html file with the contents of my resx files in which I would put the content html pages.
1 - I will have to save Html tags in my resx files if I decide to write <strong> this word </ strong>, which does not seem to me very practical and will oblige me to record every sentence and / or word that stands between specific tag ?
2 - How can I do this binding between my html file and my resx file? To get something like this
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p> [contentFromMyResxFile] </p>
<p> [AnotherContentFromMyResxFile] </p>
</div>
</body>
</html>
content being loaded directly from my resx file and so could adapt to the language of the application.
I have a strange situation with my website where whenever it appears on Google Search, the alt text of one of the images is also displayed despite not being part of the <title> tag.
On my website (sparen.github.io), I have the following header:
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Andrew Fan's Code Dump: The Embodiment of Code and Hacks (AFCDTECH)</title>
<link rel="stylesheet" type="text/css" href="blah.css">
<meta content="Andrew Fan's Code Dump: The Embodiment of Code and Hacks (AFCDTECH)"
name="description">
<meta name="keywords" content="Sparen, Touhou, Danmakufu, ph3, Tutorial, Script, Project">
<meta name="viewport" content="initial-scale=1">
<script>
<!-- Removed Google Analytics stuff for purposes of StackOverflow Question-->
</script>
</head>
<body id="mhome">
<div class="yui-t1" id="top">
<center><img alt=""Site Logo"" src="images/logo.png" style="width:90%"></center>
However, in Google Search, the title appears as follows:
***This is actually a different page, but all pages on my website seem to have the same issue, and all have the same header structure.
I don't know why it has that extra 'Site Logo' thing, which only appears as part of the image alt text in my banner (which is not even in the head but rather the body of the page).
It hasn't disappeared in the past few months, and it'd be nice to know if there's something I never took into consideration when originally building my website or if there's something BlueGriffon did before I migrated away from it.
Google seems to be confused by your quotes inside the alt text. Just remove them or use
<img alt='"Site Logo"' src="images/logo.png" style="width:90%">
Am I wrong or this could be a flaw (vulnerability?) in Google Search?
Ive been making a website for a technology fair project, and it has come to a stage where I want to make it more universal. However when I try to add another language (Chines Mandarin as an example) It just converts the text to some wired english characters.
Here is my example Website
<html lang="cmn">
<head>
<title></title>
</head>
<body>
<!-- This is meant to say in Mandarin "This is some text" -->
這是一些文本
</body>
</html>
But when the page loads, this is what I get
這是一些文本
Im pretty sure that its not some settings in my browser Firefox, because I've or so tried it in Google Chrome
Any suggestions?
Add the following meta definition inside your head tag:
<meta charset="utf-8" />
Did you tried:
<meta charset="utf-8" />
?
I just made a website for a french restaurant. The website is in english, but I guess there is enough french on the website (labeled pictures of menu items) to prompt the visitor to translate the website if using Chrome.
Is there something I can add to the html to prevent chrome from asking to translate the page? I'd assume it'd be something like <html lang="en"> but that doesn't work.
Any ideas?
Thanks
New Answer
Add translate="no" to your <html> tag, like so:
<html translate="no">
MDN Reference
Old Answer
(This should still work but is less desirable because it is Google-specific, and there are other translation services out there.)
Add this tag in between <head> and </head>:
<meta name="google" content="notranslate">
Documentation reference
So for the ultimate solution I made;
<!DOCTYPE html>
<html lang="en" class="notranslate" translate="no">
<head>
<meta name="google" content="notranslate" />
</head>
<body>
...
</body>
</html>
This worked for me.
The meta tag in the <head> didn't work for me, but
class="notranslate"
added to a parent div (or even <body>) did work and allows more precise control of the content you don't want to be translated.
Solution:
<html lang="en" class="notranslate" translate="no"> <!-- All translators -->
<head><meta name="google" content="notranslate" /> <!-- Just for google -->
</head> <!-- Close head -->
The more simple way is just adding the translate="no" proprety.
This can be made in divs, text and more.
Here's an example:
// Just for instructions
// Do not copy or paste
console.log("The first div don't alows translateing. But the second, alows it.")
console.log("Open the translator and see the efect.")
DIV1
<div translate="no">
Try translating me!
<b>Olá - Hello - Hola</b>
</div>
<hr> DIV2
<div translate="">
Now, you can do it!
<b>Olá - Hello - Hola</b>
</div>
Note that this example has some problems with the StackOverflow viewer.
Disclaimer: This answer is repeated, on it is on the Community Wiki.
Disable google translate on your website
Add this to your <head></head>:
<meta name="google" content="notranslate" />
Add this in your <head>:
<meta name="google" content="notranslate" />
and change your <html> tag to
<html lang="en" class="notranslate" translate="no">
The more simple way is just adding the translate="no" proprety.
This can be made in divs, text and more.
Here's an example:
/* Just some basic styling */
div[translate] {
width: 50%;
border: 1px solid black;
padding: 20px;
border-radius: 7px;
text-align: center;
font-family: Arial;
}
<div style="display: flex;gap:20px;">
<div translate="no"> <!-- Disables translation -->
Enabled<br>
<b>Olá - Hello - Hola</b>
</div>
<div translate> <!-- Enables translation -->
Disabled<br>
<b>Olá - Hello - Hola</b>
</div>
</div>
Note that this example has some problems on the stackoverflow viewer.
The google tag for not translating the page has been updated to
<!-- opt out of translation features on all search engines that support this directive -->
<meta name="robots" content="notranslate">
or
<!-- opt out of translation features on Google -->
<meta name="googlebot" content="notranslate">```
For more info check this links:
https://developers.google.com/search/docs/crawling-indexing/special-tags
https://developers.google.com/search/docs/appearance/translated-results
Moreover, I had to update this because it was not working on Edge browser by using only translate="no" as below:
<html translate="no">
So for a full solution as mentioned here too, i had to do something like this to not translate anything from search engines
<html lang="en" class="notranslate" translate="no">
<meta name="robots" content="notranslate" />
...
</head>
FYI, if you want something that will work for all content in your site (including that which is not HTML), you can set the Content-Language header in your response (source) to the appropriate language, (in my case, en-US).
This has the benefit here is that it will "disable" the offer to translate the page for you (because it will know the source language correctly), but for other, non-native readers, they will still have the option to translate your site into their own language, and it will work correctly.
(Also for my use case, where Chrome was offering to translate well formatted JSON from latin to English, that BS goes away.)
My Windows is german in german.
I made the following experiences in Chrome:
If I set
<html lang="en" translate="no">
Google Translate comes up with suggestion to translate english.
Definitely I have to omit the lang property. This works for me:
<html translate="no">
No popup is coming up and the translation icon in the URL field is no longer displayed.
sometimes you need to block not all html, but specific element, in such case you could add class="notranslate" only to that element.
ie. <div class="notranslate"> some content </div>