2

我已经阅读了与此问题相关的其他一些问题,但它们对我没有帮助。我试过添加aria-labels,但这也没有帮助。作为失败的元素,我仍然得到 type 的链接<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>

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

4

1 回答 1

2

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

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

此外,WAI-ARIA 创作实践 1.1 中的原则 2:ARIA 既能掩饰又能增强,既能制造力量又能带来危险aria-label,并以此为例指出,ARIA 有时会覆盖原始语义或内容。

提交的代码示例中的链接具有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 角色、状态或属性以使其可访问,那么就这样做

于 2018-12-13T15:29:18.740 回答