为什么我的链接没有可分辨的名称?

时间:2018-12-13 12:32:10

标签: html accessibility lighthouse

我已经阅读了与此问题相关的其他一些问题,但它们并没有帮助我。我尝试添加aria-labels,但这也无济于事。作为失败的元素,我仍然得到<a href="" target="_blank" rel="noopener noreferrer"></a>类型的链接。

这是有问题的HTML(只是在表中输出一些信息的基本浏览器检查器):

<!doctype html>
<html lang=en>

<head>
  <title>test</title>
  <meta charset="utf-8">
  <meta name="description" content="An internship project. Holla at ya boy!">
  <meta name="theme-color" content="#175506">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <script defer src="js/test.js"></script>
</head>

<body>
  <div class="header">
    <p>Check if your browser is relatively secure</p>
  </div>

  <table>
    <tr>
      <td>OS</td>
      <td id="os"></td>
      <td>Windows had several problems in the past with browser security. <a href="https://gizmodo.com/google-shames-microsoft-for-not-fixing-windows-10-brows-1792819255" target="_blank" rel="noopener noreferrer" aria-label="Twitter">A Gizmodo article</a> and <a href="https://news.softpedia.com/news/google-discloses-windows-10-browser-vulnerability-that-microsoft-failed-to-patch-519844.shtml" target="_blank" rel="noopener noreferrer" aria-label="Twitter2">a Softpedia article</a> have some things to say about it.</td>
    </tr>
    <tr>
      <td>Browser</td>
      <td id="browser"></td>
      <td>The best way to make sure your browser is relatively secure is to <a href="https://updatemybrowser.org" target="_blank" rel="noopener noreferrer" aria-label="Twitter3">keep it up to date</a>.</td>
    </tr>
    <tr>
      <td>IP</td>
      <td id="ip"></td>
      <td>The IP can be an entry point into your system.</td>
    </tr>
    <tr>
      <td>Browser timezone</td>
      <td id="timezoneBrowser"></td>
      <td rowspan="2">If the browser and IP timezones don't match, one can assume that you are using a VPN.</td>
    </tr>
    <tr>
      <td>IP timezone</td>
      <td id="timezoneIP"></td>
    </tr>
    <tr>
      <td>Plugins</td>
      <td id="plugins"></td>
      <td>The more plugins you have, the bigger the attack area.</td>
    </tr>
    <tr>
      <td>Fonts</td>
      <td id="fonts"></td>
      <td>The more fonts you have, the chance that your browser has a unique configuration increases, alongside its entropy <a href="https://panopticlick.eff.org/static/browser-uniqueness.pdf" target="_blank" rel="noopener noreferrer" aria-label="Twitter4">(EFF whitepaper)</a>.</td>
    </tr>
    <tr>
      <td>Monitor size</td>
      <td id="monitorSize"></td>
      <td rowspan="4">Useful for fingerprinting.</td>
    </tr>
    <tr>
      <td>Browser size</td>
      <td id="browserSize"></td>
    </tr>
    <tr>
      <td>This screen is a</td>
      <td id="touchscreen"></td>
    </tr>
    <tr>
      <td>Adblocking is</td>
      <td id="block_me"></td>
    </tr>
    <tr>
      <td>Flash is</td>
      <td id="flash"></td>
      <td><a href="https://www.cvedetails.com/vulnerability-list/vendor_id-53/product_id-6761/Adobe-Flash-Player.html" target="_blank" rel="noopener noreferrer" aria-label="Twitter5">Flash is bad, mkay?</a></td>
    </tr>
    <tr>
      <td><a href="https://en.wikipedia.org/wiki/Do_Not_Track" target="_blank" rel="noopener noreferrer" aria-label="Twitter6">Do Not Track</a> is</td>
      <td id="dnt"></td>
      <td>From a security (not privacy) standpoint, as the number of third-party connections increases, so does the chance that one of them is malicious. Also, less connections equals less network usage, making things speedier.</td>
    </tr>
    <tr>
      <td>Referrer</td>
      <td id="referrer"></td>
      <td>A referrer is the page from which you arrived at the current page. Now what if you arrived here from your bank's website and your bank included sensitive info in the URL? It's not that uncommon. <a href="https://blog.avatao.com/How-I-could-steal-your-photos-from-Google/" target="_blank" rel="noopener noreferrer" aria-label="Twitter7">Even Google has this problem</a> from time to time.</td>
    </tr>
  </table>

  <div class="flex-container">
    <p><strong>This is not the only information that your browser gives away!</strong> More ways to check your browser:</p>
    <ul>
      <li><a href="https://browserleaks.com" target="_blank" rel="noopener noreferrer" aria-label="Twitter8">browserleaks.com</a></li>
      <li><a href="https://panopticlick.eff.org" target="_blank" rel="noopener noreferrer" aria-label="Twitter9">panopticlick.eff.org</a></li>
      <li><a href="https://dnsleaktest.com" target="_blank" rel="noopener noreferrer" aria-label="Twitter10">dnsleaktest.com</a></li>
      <li><a href="https://ipleak.net" target="_blank" rel="noopener noreferrer" aria-label="Twitter11">ipleak.net</a></li>
      <li><a href="https://ip-check.info/?lang=en" target="_blank" rel="noopener noreferrer" aria-label="Twitter12">ip-check.info</a></li>
      <li><a href="http://browserspy.dk" target="_blank" rel="noopener noreferrer" aria-label="Twitter13">browserspy.dk</a></li>
      <li><a href="https://amiunique.org/fp" target="_blank" rel="noopener noreferrer" aria-label="Twitter14">amiunique.org</a></li>
      <li><a href="https://tenta.com/test" target="_blank" rel="noopener noreferrer" aria-label="Twitter111">tenta.com</a></li>
    </ul>
  </div>
</body>

</html>

这是怎么回事?这是灯塔问题吗?

1 个答案:

答案 0 :(得分:2)

代码示例中的链接具有有意义的链接文本(尽管域名应替换为网站名称)和aria-label属性。如WCAG Technique ARIA8中所述,aria-label实际上仅用于以下情况:链接文本不能(或不能)提供链接目标的有意义的描述:

  

此技术的目标是使用aria-label属性描述链接的目的。当页面上没有可见的描述对象的元素时,aria-label属性提供一种在对象(如链接)上放置描述性文本标签的方法。 (...)

此外,WAI-ARIA创作实践1.1中的Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger指出,ARIA有时会以aria-label为例来覆盖原始的语义或内容。

提交的代码示例中的链接具有aria-label值,它们分别读取“ Twitter3”,“ Twitter5”,“ Twitter4”等,我希望屏幕阅读器读取的是而不是链接文本,从而创造出无法访问的体验。因此,在这种情况下,aria-label属性应被删除。

正如Patrick Lauke和其他许多可访问性专家所指出的:

  

ARIA俱乐部的第一条规则是...您不使用ARIA

使用正确的链接文本并且没有aria-label属性,该问题应该会消失。 (当我通过HTTP测试它时,它就是这样做的。)如果Lighthouse仍然抱怨它,则可能需要清空浏览器缓存和/或清除存储(请参阅Lighthouse中“运行审核”按钮上方的复选框)。更新链接文本并删除aria-label属性后,我无法重现此问题。


注意:有关“ ARIA俱乐部的第一条规则”的正式表述,请参阅W3C的Using ARIA,这是撰写本文时的工作草案:

  

如果您可以使用具有语义和行为的本机HTML元素[HTML51]或属性,则需要已内置,而不是重新使用元素并添加ARIA角色,状态或属性以使其可访问,请然后