Почему мои ссылки не имеют заметного имени? - PullRequest
Новая
       32

Почему мои ссылки не имеют заметного имени?

0 голосов
/ 13 декабря 2018

Я читал некоторые другие вопросы, связанные с этой проблемой, но они не помогли мне.Я пытался добавить 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 голосов
/ 13 декабря 2018

Ссылки в примере кода имеют как содержательный текст ссылки (хотя доменные имена должны быть заменены именами сайтов), так и атрибуты aria-label.Как объясняется в WCAG Technique ARIA8 , aria-label действительно только для ситуаций, когда текст ссылки не может (или не дает) содержательного описания цели ссылки:

Цель этого метода - описать назначение ссылки с помощью атрибута aria-label.Атрибут aria-label обеспечивает способ размещения описательной текстовой метки на объекте, такой как ссылка, когда на странице нет видимых элементов, описывающих объект.(...)

Кроме того, принцип 2: ARIA может скрывать и улучшать, создавая мощь и опасность в WAI-ARIA Authoring Practices 1.1 указывает, что ARIAиногда переопределяет исходную семантику или контент, используя aria-label в качестве примера.

Ссылка в приведенном примере кода имеет значения aria-label, которые читают "Twitter3", "Twitter5", "Twitter4" и т. Д., И я ожидаю, что программы чтения с экрана будут читать вместо текст ссылки, создавая тем самым недоступный опыт.Поэтому в этом случае атрибуты aria-label должны быть удалены.

Как и Патрик Лоук и многие другие эксперты по доступности отметили:

первое правило клуба ARIA - вы не используете ARIA

При правильном тексте ссылки и без атрибутов aria-label проблема должна исчезнуть.(Это было сделано, когда я тестировал его по HTTP.) Если Lighthouse по-прежнему жалуется на это, вам может потребоваться очистить кэш браузера и / или очистить хранилище (см. Флажок над кнопкой «Запустить аудит» в Lighthouse).Я не могу воспроизвести проблему после обновления текстов ссылок и удаления атрибутов aria-label.

Примечание: для официальной формулировки "первого правила клуба ARIA" см. W3C Используя ARIA , который на момент написания статьи является рабочим проектом:

Если вы можете использовать собственный элемент HTML [HTML51] илиатрибут с требуемой семантикой и поведением , уже встроенный в , вместо повторного выбора элемента и добавления роли, состояния или свойства ARIA, чтобы сделать его доступным, , а затем сделать .

...