Have been running some accessibility checkers our website and they seem to indicate lang tag is empty.
Initially I thought the problem was caused because language was setup to be en-US. So I changed it to en-UK
Here is the code on header.php
<!DOCTYPE html /><!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes(); ?>><!--<![endif]-->
On wp-config.php I have set define('WPLANG', 'en-GB');. Have also downloaded a localised version of Wordpress. Created a languages subdirectory within wp-content and uploaded the en_GB.mo file onto it.
When I run this on the accessibility checker I am still getting an error saying lang tag is empty
http://wave.webaim.org/report#/http%3A%2F%2Fwww.warwickshire.gov.uk%2F
Could anybody point me in the right direction to fix this as it's being flagged up by other accessibility audits run on the site.
Many thanks.
There can be two reasons, the first one is that you missed using xml:lang attribute, also this is not mandatory. Maybe, Wave do care about it?
<html xml:lang="en_US" lang="en_US">
The second one, is the way you define your html tag which can cause problem to the Webaim parser.
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en-GB"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en-GB"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en-GB"><!--<![endif]-->
Note that the starting comment <!--> in the last line is not the same as <!-- --> See: http://www.w3.org/TR/html-markup/syntax.html#comments
I think that it's more some kind of parse error thing (I don't think Wabaim WAVE uses Webkit parser).
--- EDIT
After installating WAVE extension for Chrome, I can see that it does not return the error concerning the language of your page.
In fact, when you look closer at their online tool, they load a proxied version of your webpage, http://wave.webaim.org/data/getpage.php?reportkey=, with an html tag lacking of this attribute. So it is definitely a problem with the Wave parser.
So I suggest you to use the Chrome extension, which will be a better solution to pre-test your website as it does not modify your tag.
You can get this problem even without the IE conditional comments in there. I have / had (depending on when you may read this) a website with just this start:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- etc -->
And it also pops up with the error. I sent in this bug report:
WAVE feedback sent at 10:54 AM, October 11th, 2015
URL: http://wave.webaim.org/report#/http%3A%2F%2Fwww.jeroenheijmans.nl
The URL in question (a wave report of my index page on www.jeroenheijmans.nl) reports a missing "lang" attribute on the "html" element. However, the element is clearly there (if you open the site on its own in a seperate tab and view the source you'll see this). I get this both with Chrome and Firefox latest version on Windows 8.1. I've also tried Chrome incognito mode.
It does seem that if I choose "View Frame Source" on my page inside the WAVE tool that I get a source without the "lang" attribute. I might be experiencing the same issue as https://stackoverflow.com/q/28692421/419956 where it's suggested that the problem is with the way WAVE loads the page under evaluation.
And received the following feedback:
This is a known bug with WAVE that will be fixed in a release in the
very near future.
Thanks,
Jared Smith
WebAIM.org
In short, you're fine. You can try the workaround suggested in the other answer by #Adam, or just ignore the error safely.
In order to fix this problem you have fix two tags for your tool to stop pointing accessibility error. You have to set both "lang" as well as "xml:lang" tag. One way to achieve this through pure Javascript is below. I am proposing this solution as it is independent of any platform.
(function() {
document.getElementsByTagName('html')[0].setAttribute('lang', 'en-US');
document.getElementsByTagName('html')[0].setAttribute('xml:lang','en-US');
})();
You may replace 'en' with language of your choice to correctly point the correct language in place
Related
Since this afternoon, Facebook is not able to read the og tags of a website I'm working on anymore. Facebook debugger says all my properties are missing (og:url, og:type, og:title, og:image, og:description, etc) when I can clearly see all of them in my source code.
When I view the source of this page (or any other page on this domain), everything looks ok.
However, when I input that page in Facebook's debugger and use 'See exactly what our scraper sees for your URL', the code is all messed up with words and spaces missing. In fact, the whole section containing the og properties is missing.
What's happening? I haven't changed anything to the website recently and it was working fine before. Only thing that changed recently are my dns settings, but this should not be affecting Facebook...
Anyone sees what I'm missing here?
Many people suggested in other threads that the problem is because the paths are relatives instead of absolute (like for og:image, for exemple), but that clearly isn't my problem as my paths are absolute, and the section with all my og properties is simply just not showing up when scraping as Facebook.
Thanks
I found this problem on my websites too. It's because of W3 Total Cache's Minify feature. Disable it and purge all caches, then you're good to go.
Sometimes the browsers auto fix some HTML for rendering the page correctly, things like closing tags, adding missing semantic tags, etc. But the bots are a bit more demanding on valid HTML.
Let's take the first 12 lines of the source of that page you shared. This is what the browser receives:
<!doctype html>
<!--[if IE 8]><html
class="ie8" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if IE 9]><html
class="ie9" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if gt IE 8]><!--><html
lang="fr-FR" prefix="og: http://ogp.me/ns#"> <!--<![endif]--><head><link
rel="stylesheet" type="text/css" href="http://cdn.vedettequebec.com/wp-content/cache/minify/ef20c.css?x41125" media="all" /><meta
charset="UTF-8" /><meta
name="viewport" content="width=device-width, initial-scale=1.0"><link
rel="pingback" href="http://vedettequebec.com/xmlrpc.php" /><meta
name="author" content="BadassB"><link
As you can see, the attributes are wrapped up to the next line, which is kind of valid and most browsers will handle that, but looks like the Facebook scraper trims the \n characters and interprets the code like so:
<!doctype html><!--[if IE 8]><htmlclass="ie8" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]--><!--[if IE 9]><htmlclass="ie9" lang="fr-FR" prefix="og: http://ogp.me/ns#"> <![endif]--><!--[if gt IE 8]><!--><htmllang="fr-FR" prefix="og: http://ogp.me/ns#"> <!--<![endif]--><head><linkrel="stylesheet" type="text/css" href="http://cdn.vedettequebec.com/wp-content/cache/minify/ef20c.css?x41125" media="all" /><metacharset="UTF-8" /><metaname="viewport" content="width=device-width, initial-scale=1.0"><linkrel="pingback" href="http://vedettequebec.com/xmlrpc.php" /><metaname="author" content="BadassB"><link
You see the issue now? The code is broken due to the attributes being added right next to the tag name, causing tons of "unclosed tags". For example, check the <html> tag being converted to <htmlclass> and its closing tag will be </html> because there's nothing right after the tag name, making that tag unclosed.
Disable any plugins that could be harming your HTML, plugins like HTML minifiers. Check in the settings if there's something like "wrap attributes to new lines".
I am designing a responsive website. My CSS file starts with a block for the mobile layout, followed by a media query for the notepad layout and another media query for the desktop layout. I would like to make some concessions for IE8, which does not support media queries. SO, as currently structured, when my site is viewed in IE8, it reverts to the mobile layout, which is the first CSS block encountered in the style sheet. Not a good look for a desktop monitor, which I would expect the IE8 user to be.
Is it possible to insert some code in the CSS sheet that says "If you are an old IE browser, go to the desktop block for the layout?" OR, "Skip the mobile layouts"? ALternatively, I can create a separate IE CSS sheet, using conditional comments in the source code to call it up. If that's the way to go.
Will the extra style sheet be a drag on the load time for my page? (There's a limit to how far I'll go to accommodate people still on IE8!)
I like the way html5 boilerplate handles conditionals. It attaches ie classes to the html tag like so:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
It makes it pretty easy to target what you want after that. Paul Irish talks about it. I would probably just stick with one large css file rather than have multiple, unless it's only one page of my site or I want to punish ie users.
Developping for all browsers, then fighting for IE compatibility is a well know step in all web developement process.
Not being a web integrator, do you know any generic compatibility stylesheet that are good to include for IE ( In my case I'm only concerned about IE7, but I'll let the question open for all version )
normalize.css is a good reset that addresses a lot of cross-browser issues.
http://necolas.github.com/normalize.css/
Twitter Bootstrap is good if you want pre-made components. It is IE compatible.
If you decide to use Bootstrap, its reset is actually adapted from normalize.css (so you won't need both)
HTML5 Boilerplate may also help with some best-practice markup if you're getting started from scratch:
https://github.com/h5bp/html5-boilerplate
In particular, I'd recommend using the HTML5BP conditional comments to target specific IE versions, like this:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
That means in your CSS you can address IE version specific issues with classes:
.lt-ie8 .awesome-component { ... }
Finally, I would recommend AGAINST using javascript polyfills like CSS3PIE. In my experience they just cause more hassle than they're worth, adding unnecessary markup.
Learn a bit about graceful degradation / progressive enhancement.
Another answer mentioned IE7.js which I believe is fine, though I can't remember how useful it is. You'll definitely need to shim missing JS functions (if you're using js) such as Array.indexOf in IE <= 8. I just found this ECMAScript5 shim which looks pretty good:
https://github.com/kriskowal/es5-shim
I generally use Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/) which is a good simple starting point.
You may also wish to consider using ie7js (http://code.google.com/p/ie7-js/), which uses JavaScript to get different versions of IE to behave better.
I have a CSS quandary.
If I do this:
<!--[if gte IE 8]> <link href="/ELS_Soulard_Project-web/css/soulard_base_ie_butchery.css" rel="stylesheet" type="text/css" media="screen, projection" /> <![endif]-->
That line of code shows up across the top of IE 9 and the css file that gets the IE fonts under control and provides background gradient isn't read. But... the page looks great in Firefox and Chrome.
If I change the statements to:
<!--[if gte IE 8]><!--> blah blah blah <!--<![endif]-->
variety, it looks great in IE 9 and Chrome.... BUT! Firefox ends up actually reading the file and ends up shrinking its own fonts and changing line height so that it all looks like ugly double spacing. I know Firefox is reading it because I went to the file meant only for IE and changed things in and it was reflected in Firefox.
Can someone help me figure out what is going on?
This is running on Glassfish 3.1.2.
In your second example you have added <!--> inside your conditional comment. That way the conditional comment is still open, but the HTML-comment is closed and the code in between is rendered by any browser.
Compare to this chunk:
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="de-DE">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html dir="ltr" lang="de-DE">
<!--<![endif]-->
The last tag is excluded for several IE versions, but included for any non-MS browser and IE >= 9.
So here was the problem. I am using facelets and this was in the template file. What I didn't realize is that conditional statements as normally applied don't work with facelets. When processed by the servlet it just trashes anything it doesn't 'get' and so all stylesheets are read.
If you want to use conditional statements with facelets you have to put them in something like an element. It can get ugly.
Fortunately a stacker named BalusC has come up with a clever library that includes a tag for taking care of conditional statements. After a day of trying everythign every which way and looking everywhere on this, I finally found a single post that mentioned this issue with facelets and conditional statements. That lead to a Google code page for an 'Omnifaces' project where the tag (and a bunch of other useful features) is documented.
The library is available by way of maven (where I got it) but possibly other ways. Anyway from reading the post to fixing the code was all of about a half hour if that.
Facelets plus IE conditional statements = bad news.
Use outputText or Omnifaces or write your own component.
I have a problem with HTML 5 on my blog. I have made some small tiny changes to the default Twentyeleven theme and they site now blows up on IE6, IE7 and IE8.
Since I've started looking under the hood I've been thinking of re-skinning the site myself in HTML 4 Strict doctype.
Taken from the current markup: isn't all this a whole bunch of nonsense?
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://www.example.com/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
All this conditional formatting, for what? If the world isn't ready for it, why use HTML 5 at all?
Is there ANY technical reason to do that? Is my site ever going to validate if I take the HTML 4 route? Will I have to override the output of all plugins I'm using?
Looking forward to your comments.
There is no definitive answer to this question. It depends on the users (specifically, which browsers they are running) and requirements of the site.
Some sites need bleeding-edge technology or rapid design changes, both situations with which HTML5/CSS3 can help. Other sites are very simple and stable, and HTML5 is entirely optional.
There's no need to use HTML5 just because you can - if you can do everything you want to do in HTML4, use that.
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
Is it typo? Closing conditional comment tag missed. Add this code after yours
<![endif]-->
Maybe it will help.
Second. If you have different opening html tag for dfferent versions of IE, how do show this tag for other browsers? Conditional comments are understood only by IE.
More information more help.