时间戳

首页 > 解决方案 > 如何修复 Mac 机器中未突出显示的“2.4.7 Focus Visible”元素

html - 如何修复 Mac 机器中未突出显示的“2.4.7 Focus Visible”元素

问题描述

当我使用siteimprove chrome 扩展程序检查我的网站时，它在 Mac 中出现“2.4.7 Focus Visible”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 ”中运行

请帮助我提前谢谢。

标签： htmlaccessibility

解决方案

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

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

推荐阅读