Question

当我使用siteimprove chrome扩展名检查我的网站时，在Mac中出现“ 2.4.7可见焦点” AA错误。有时它在Windows系统中可以正常工作。

这是我的代码。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <script type="text/javascript" src="/js/lib/dummy.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">
    a#login-as-guest:focus{ background-color: yellow; }

    a#login-as-guest-active:active{ background-color: yellow; }
  </style>
  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">        
    window.onload=function(){

    }    
   </script>    
</head>
<body>
  <a tabindex="0" id="login-as-guest">Cancel and browse as guest</a>    
<br />
<a id="login-as-guest-active">Active Cancel and browse as guest</a>      
  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "t2hbS"
      }], "*")
    }
  </script>
</body>
</html>

它已经在我的服务器“ https://myappdemo.com/focus/test.html”中运行

请提前帮助我。

Answer 1

您的代码示例仅更改了焦点背景颜色，而您的demo link仅设置了焦点文本颜色。典型的焦点指示器是轮廓边框，大多数（所有？）浏览器默认提供轮廓边框，但是您的颜色变化也足以显示焦点。实际上，由于在两个示例中分别只更改了:focus{background-color}和a{color}，因此您将获得和浏览器默认焦点边框的颜色更改。

我不明白为什么siteimprove对其进行了标记。您能否发布siteimprove声称的错误以及它抱怨的所有相关信息？

Answer 2

确保可以突出显示键盘焦点的用户界面元素。

a:hover, a:active, a:focus {
    text-decoration: underline;
    color: green;
}

如何修复“ 2.4.7可见焦点”元素在Mac计算机中未突出显示

2 个答案: