Fatal编程技术网
  • html/
  • Html 为什么我的链接没有可识别的名称？

Html 为什么我的链接没有可识别的名称？

html

Html 为什么我的链接没有可识别的名称？,html,accessibility,lighthouse,Html,Accessibility,Lighthouse,我已经阅读了一些与这个问题相关的其他问题，但它们没有帮助我。我曾尝试添加aria标签，但也没有效果。作为失败的元素，我仍然得到类型的链接 下面是讨论中的HTML（只是一个基本的浏览器检查器，可以在表中输出一些信息）： 测试 检查您的浏览器是否相对安全 操作系统 Windows过去在浏览器安全方面有几个问题。还有一些事情要说。 浏览器 确保浏览器相对安全的最佳方法是。 知识产权 IP可以作为系统的入口点。 浏览器时区 如果浏览器和IP时区不匹配，可以假定您正在使用VPN。 IP时区 插件 插件越

我已经阅读了一些与这个问题相关的其他问题，但它们没有帮助我。我曾尝试添加
aria标签
，但也没有效果。作为失败的元素，我仍然得到
类型的链接

下面是讨论中的HTML（只是一个基本的浏览器检查器，可以在表中输出一些信息）：


测试
检查您的浏览器是否相对安全

操作系统
Windows过去在浏览器安全方面有几个问题。还有一些事情要说。
浏览器
确保浏览器相对安全的最佳方法是。
知识产权
IP可以作为系统的入口点。
浏览器时区
如果浏览器和IP时区不匹配，可以假定您正在使用VPN。
IP时区
插件
插件越多，攻击区域越大。
字体
你拥有的字体越多，你的浏览器拥有独特配置的可能性就越大，同时它的熵也会增加。
监视器大小
用于指纹识别。
浏览器大小
此屏幕是一个
Adblocking是
闪光是
是
从安全（而非隐私）的角度来看，随着第三方连接数量的增加，其中一个是恶意连接的可能性也随之增加。此外，更少的连接就意味着更少的网络使用，这使得事情变得更快。
推荐人
推荐人是您到达当前页面的页面。现在，如果您从银行网站到达这里，并且您的银行在URL中包含敏感信息，该怎么办？这并不罕见。不时地
这不是您的浏览器提供的唯一信息检查浏览器的更多方法：


    

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  •
发生了什么事？这是灯塔问题吗？

代码示例中的链接既有有有意义的链接文本（尽管域名应替换为站点名称），也有
aria标签
属性。如中所述，
aria label
实际上只适用于链接文本不能（或不能）提供链接目标的有意义描述的情况：

此技术的目的是使用aria标签属性描述链接的用途。当页面上没有描述对象的可见元素时，aria label属性提供了在对象（如链接）上放置描述性文本标签的方法。（……）

此外，WAI-ARIA Authoring Practices 1.1中的示例指出，ARIA有时会覆盖原始语义或内容，例如使用
ARIA标签

提交的代码示例中的链接有
aria label
值，读“Twitter3”、“Twitter5”、“Twitter4”等，我希望屏幕阅读器阅读这些值而不是链接文本，从而创建一种无法访问的体验。因此，在这种情况下，应该删除
aria标签
属性

正如和许多其他无障碍专家所指出的那样：

咏叹调俱乐部的第一条规则是……你不能使用咏叹调

有了正确的链接文本，没有
aria标签
属性，问题应该会消失。（当我通过HTTP测试它时，它就这样做了。）如果Lighthouse仍然抱怨它，您可能需要清空浏览器缓存和/或清除存储（请参见Lighthouse中“运行审核”按钮上方的复选框）。一旦链接文本被更新并且
aria标签
属性被删除，我就无法重现该问题



注：关于“阿里亚俱乐部第一条规则”的正式表述，请参见W3C，在撰写本文时，W3C是一份工作草案：

如果您可以使用一个本机HTML元素或属性，该元素或属性的语义和行为符合您所需的已内置的，而不是重新指定元素的用途并添加一个ARIA角色、状态或属性以使其可访问，那么就这样做


你说的“名字”到底是什么意思？不仅仅是
name=“…”
属性？我指的是链接文本。根据Lighthouse的说法：“可识别、独特且可聚焦的链接文本（以及图像的替代文本，当用作链接时）改善了屏幕阅读器用户的导航体验。”然而，每个
属性都有可识别的文本。我相信这是因为您案例中的实际链接文本不是非常具体。“一篇Gizmodo文章”如果对链接更为具体，就会更容易辨认，比如“谷歌因为没有修复WIndows 10而羞辱微软”@Fraze我在每个链接中添加了太多的文本，这太可笑了。不过…@Fraze链接文本对我来说已经足够具体了@wombat尝试用真实的站点名称替换类似域名的链接文本，看看问题是否依然存在；e、 g.Panoptick而不是
panoptick.eff.org
。也可能是
aria标签
覆盖了链接文本，这些属性值看起来非常糟糕。仅供参考，关于aria使用的第一条规则的参考“正式”记录在W3页面上。它说如果可以使用本机标记，那么就这样做，如果必须的话，就使用ARIA。从技术上讲，它并没有说不要使用咏叹调。这是一个吹毛求疵的问题，但对那些新接触的人来说可能很重要。我在上面加了一条说明。

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