Посилання
дивитись опис критерію у WCAG 2.1
Букмарклет для швидкої перевірки
Приклад посилань у тексті
Вимога виконується, бо між тегами <a> і </a> присутній текст.
<!-- Відповідний код HTML виглядає так -->
<p>Деякий текст. Додаткову інформацію можна знайти<br>в <a href="terms/">умовах використання</a> і <a href="privacy/">політиці приватності</a>.</p>
Приклад посилань у вигляді зображень (соцмережі, тощо)
Вимога виконується, бо зображенням вказано атрибут "alt".
<!-- Відповідний код HTML виглядає так -->
<div><a href="facebook/">
<img class="img_social" alt="фейсбук" src="../../img/fb.svg">
</a></div>
<div><a href="linkedin/">
<img class="img_social" alt="лінкедін" src="../../img/ln.svg">
</a></div>
<div><a href="telegram/">
<img class="img_social" alt="телеграм" src="../../img/tg.svg">
</a></div>
Вимога теж виконується, бо зображенням вказано пустий атрибут "alt",
а самим лінкам проставлено атрибут "aria-label".
<!-- Відповідний код HTML виглядає так -->
<div><a href="facebook/" aria-label="фейсбук">
<img class="img_social" alt="" src="../../img/fb.svg">
</a></div>
<div><a href="linkedin/" aria-label="лінкедін">
<img class="img_social" alt="" src="../../img/ln.svg">
</a></div>
<div><a href="telegram/" aria-label="телеграм">
<img class="img_social" alt="" src="../../img/tg.svg">
</a></div>
Вимога не виконується, бо зображенням вказано пустий атрибут "alt", а самим лінкам проставлено
атрибут "title", який не має достатньої підтримки серед асистивних технологій (скрінрідерів).
<!-- Відповідний код HTML виглядає так -->
<div><a href="facebook/" title="фейсбук">
<img class="img_social" alt="" src="../../img/fb.svg">
</a></div>
<div><a href="linkedin/" title="лінкедін">
<img class="img_social" alt="" src="../../img/ln.svg">
</a></div>
<div><a href="telegram/" title="телеграм">
<img class="img_social" alt="" src="../../img/tg.svg">
</a></div>
Вимога не виконується, бо зображенням вказано пустий атрибут "alt", а самим лінкам проставлено:
- атрибут "title", який не має достатньої підтримки серед асистивних технологій (скрінрідерів),
- атрибут "aria-label", вміст якого відрізняється від вмісту атрибуту "title" в гірший бік.
<!-- Відповідний код HTML виглядає так -->
<div><a href="facebook/" title="фейсбук" aria-label="фб">
<img class="img_social" alt="" src="../../img/fb.svg">
</a></div>
<div><a href="linkedin/" title="лінкедін" aria-label="лі">
<img class="img_social" alt="" src="../../img/ln.svg">
</a></div>
<div><a href="telegram/" title="телеграм" aria-label="тг">
<img class="img_social" alt="" src="../../img/tg.svg">
</a></div>
Вимога не виконується, бо зображенням не вказано атрибут "alt",
і при фокусі на посиланні скрінрідер не озвучить, куди веде посилання.
<!-- Відповідний код HTML виглядає так -->
<div><a href="facebook/">
<img class="img_social" src="../../img/fb.svg">
</a></div>
<div><a href="linkedin/">
<img class="img_social" src="../../img/ln.svg">
</a></div>
<div><a href="telegram/">
<img class="img_social" src="../../img/tg.svg">
</a></div>
В останньому випадку розширення "Accessibility Insights" видасть 6 помилок (див. скріншот нижче), а саме:
- три помилки "image-alt" за відсутній атрибут "alt" в зображень;
- три помилки "link-name" за відсутню текстову мітку в гіперпосилань.
