辅助功能 - lang html 标签未被识别

Question

已经运行在我们的网站上进行了一些辅助功能检查，它们似乎表明 lang 标签是空的。最初我认为问题是因为语言设置为 en-US。所以我把它改成了 en-UK 这是 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]-->

在 wp-config.php 我设置了 define('WPLANG', 'en-GB');。还下载了 Wordpress 的本地化版本。在 wp-content 中创建了一个语言子目录，并将 en_GB.mo 文件上传到其中。

当我在可访问性检查器上运行时，我仍然收到一条错误消息，提示 lang 标签为空

http://wave.webaim.org/report#/http%3A%2F%2Fwww.warwickshire.gov.uk%2F

任何人都可以指出正确的方向来解决此问题，因为它已被网站上的其他可访问性审核运行标记。非常感谢。

Answer 1

可能有两个原因，第一个是你错过了使用 xml:lang 属性，而且这不是强制性的。也许，Wave 关心它？

<html xml:lang="en_US" lang="en_US">

第二个是您定义 html 标记的方式，它可能会导致 Webaim 解析器出现问题。

<!--[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]-->

注意最后一行开始注释不一样见：http://www.w3.org/TR/html-markup/syntax.html#comments

我认为这更多是某种解析错误（我不认为 Wabaim WAVE 使用 Webkit 解析器）。

--- 编辑

为 Chrome 安装 WAVE 扩展程序后，我发现它没有 return 关于您页面语言的错误。

事实上，当您仔细查看他们的在线工具时，他们会加载您网页的代理版本，http://wave.webaim.org/data/getpage.php?reportkey=，带有缺少此属性的 html 标签。所以肯定是Wave解析器的问题。

因此，我建议您使用 Chrome 扩展程序，因为它不会修改您的代码，所以这将是预测试您网站的更好解决方案。

Answer 2

即使没有 IE 条件注释，你也会遇到这个问题。我有/有（取决于你什么时候可以读到这篇文章）一个只有这个开头的网站：

<!DOCTYPE html>
<html lang="en">
<head>
<!-- etc -->

而且还弹出错误。我发送了这个错误报告：

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 where it's suggested that the problem is with the way WAVE loads the page under evaluation.



并收到以下反馈：


  This is a known bug with WAVE that will be fixed in a release in the
  very near future.
  
  Thanks,
  
  Jared Smith

  WebAIM.org


简而言之，你很好。您可以尝试  中建议的解决方法，或者安全地忽略该错误。

Answer 3

为了解决这个问题，您已经为您的工具修复了两个标签以停止指向可访问性错误。您必须同时设置 "lang" 和 "xml:lang" 标签。下面是通过纯 Javascript 实现此目的的一种方法。我提出这个解决方案是因为它独立于任何平台。

(function() {
       document.getElementsByTagName('html')[0].setAttribute('lang', 'en-US');
       document.getElementsByTagName('html')[0].setAttribute('xml:lang','en-US');
})();

您可以将 'en' 替换为您选择的语言以正确指向正确的语言

辅助功能 - lang html 标签未被识别

Accessibility - lang html tag not being recongnised

accessibility