Текст на връзки, който има смисъл извън контекста

Как потребителите на екранни четци всъщност навигират

Преди да говорим за това как да пишем текст на връзки, помага да разберем как хората всъщност използват връзките, когато не могат да виждат страницата.

Екранните четци предлагат пряк път, за чието съществуване повечето виждащи потребители не подозират: натискането на един клавиш (обикновено буквата L в повечето екранни четци) преминава през всички връзки на страницата, четейки ги една по една, извън контекста. Потребителите използват това, за да сканират страница бързо, по начина, по който окото на виждащ потребител би прегледало набързо заглавията и бутоните за призив към действие.

Ако страницата ви има дванадесет връзки, които казват „Прочетете повече”, този списък е безсмислен. Потребителят чува: „Прочетете повече. Прочетете повече. Прочетете повече. Прочетете повече…” Те не могат да разберат до какво води всяка от тях.

Това е основният проблем, който достъпността на текста на връзките се опитва да реши: всяка връзка трябва да описва сама себе си, защото контекстът изчезва, когато навигирате чрез връзки.

Какво казва WCAG

2.4.4 Цел на връзката (в контекст) на ниво A изисква целта на всяка връзка да може да бъде определена от текста на връзката сам по себе си или от текста на връзката заедно със заобикалящия го контекст (абзаца, елемента от списък, клетката на таблица или заглавието, в което се намира).

2.4.9 Цел на връзката (само връзка) на ниво AAA отива по-далеч, изисквайки целта на връзката от текста на връзката сам по себе си, без разчитане на контекст. Стремежът към това е добра идея, дори ако се целите само в съответствие с ниво AA.

2.5.3 Етикет в името (ниво A) изисква, когато връзка или бутон имат видим текстов етикет, достъпното име да започва с този текст. Бутон с икона с етикет „Научете повече за достъпността” с aria-label „Щракнете тук” не покрива този критерий.

Често срещани провали и какво да правите вместо това

„Щракнете тук” и „Прочетете повече”

Това са най-разпространените провали на достъпността на връзки в мрежата.

<!-- Проваля се: няма смисъл извън контекста -->
<a href="/blog/wcag-compliance">Прочетете повече</a>

<!-- Покрива: описва себе си -->
<a href="/blog/wcag-compliance">Прочетете нашето ръководство за съответствие с WCAG 2.2</a>

Поправката почти винаги е проста: заменете неясната фраза с текст, който описва местоназначението или действието.

Общи връзки „тук”

„Щракнете тук, за да изтеглите отчета” се проваля по същата причина — самата дума на връзката е просто „тук”.

<!-- Проваля се -->
<p>За пълните резултати щракнете <a href="/report.pdf">тук</a>.</p>

<!-- Покрива: текстът на връзката описва какво се свързва -->
<p>Изтеглете <a href="/report.pdf">отчета от одита за достъпност за 2025 г. (PDF)</a>.</p>

Обърнете внимание на индикатора PDF в скоби — това е добра практика, за да информирате потребителите, че следването на връзката ще отвори PDF, а не уеб страница.

Връзки към едно и също местоназначение с различен текст или различни местоназначения с еднакъв текст

И двете създават объркване. Ако пет навигационни връзки казват „Научете повече”, но сочат към различни страници на услуги, потребителите не могат да предвидят къде ще попаднат. Обратно, две различни връзки, които казват „Ръководство за съответствие с WCAG”, но водят до различни страници, са също толкова объркващи.

Връзки и бутони само с икона

Връзка или бутон, който съдържа само икона — без видим текст — трябва да има достъпно име, осигурено чрез aria-label или aria-labelledby. Без него екранните четци обявяват името на файла на изображението на иконата или нищо изобщо.

<!-- Проваля се: обявено като „връзка, графика" или името на SVG файла -->
<a href="/social/twitter">
  <svg><!-- икона на twitter --></svg>
</a>

<!-- Покрива: aria-label осигурява достъпното име -->
<a href="/social/twitter" aria-label="QualiBooth в Twitter">
  <svg aria-hidden="true"><!-- икона на twitter --></svg>
</a>

aria-hidden="true" върху SVG предотвратява екранните четци да обявяват заглавието или съдържанието на SVG — тъй като самата връзка вече има етикет, съдържанието на иконата е излишно.

Използване на aria-label за допълване на видим текст

Когато страница има множество връзки „Изтегляне” и не можете да промените видимия текст (дизайнерско ограничение), aria-label може да разшири достъпното име:

<!-- Видимият текст е „Изтегляне", но достъпното име е пълният низ -->
<a href="/report-2025.pdf" aria-label="Изтегляне на PDF отчета за достъпност за 2025 г.">
  Изтегляне
</a>

Едно предупреждение тук: WCAG 2.5.3 изисква достъпното име да започва с видимия текст. „Изтегляне на PDF отчета за достъпност за 2025 г.” започва с „Изтегляне” — добре. „Отчет за достъпност за 2025 г. — Изтегляне на PDF” не започва — лошо.

Връзки, които се отварят в нов раздел

Отварянето на нов раздел без предупреждение дезориентира потребителите, особено тези с когнитивни увреждания или потребителите на екранни четци, които може да не осъзнаят какво се е случило. Посочете поведението на нов раздел в текста на връзката или с визуално скрита бележка.

<!-- Сигнализира поведението на нов раздел визуално и към помощната технология -->
<a href="https://example.com" target="_blank">
  Вижте примерния отчет
  <span class="sr-only">(отваря се в нов раздел)</span>
</a>

Когато текстът на връзката работи, без да е очевиден

Контекстът може легитимно да осигури липсващия смисъл според WCAG 2.4.4. Връзка „Изтегляне” е приемлива, ако се намира в клетка на таблица, чието заглавие на колона казва „Годишен отчет”, а чието заглавие на ред казва „2025”. Контекстът прави целта ясна.

Това е различно от връзка „Прочетете повече” в края на самостоятелен абзац. Абзацът осигурява контекст, но „Прочетете повече” все пак се проваля, защото текстът на връзката би могъл да важи за всеки абзац — той не идентифицира еднозначно местоназначението.

Връзки с изображения

Когато съдържанието на връзката е изображение, а не текст, атрибутът alt на изображението става достъпното име на връзката. Алтернативният текст трябва да описва местоназначението на връзката, а не самото изображение.

<!-- Alt описва местоназначението на връзката, а не външния вид на изображението -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Услуги за одит на достъпността">
</a>

Ако изображението е чисто декоративно и е придружено от видим текст в същата връзка, изображението трябва да има alt="", за да се избегне обявяването на един и същ текст два пъти.

Бърз одит, който можете да проведете сами

Отворете страницата си и извикайте списъка с връзки с помощта на екранния си четец (или инсталирайте безплатното разширение за браузър HeadingsMap или WAVE, за да видите връзките, извлечени от контекста). Прочетете списъка. Ако не можете да разберете къде води всяка връзка само от текста, тя се нуждае от работа.

Най-честата поправка е добавянето на <span class="sr-only"> (визуално скрит, достъпен за екранни четци) с допълнителен контекст или просто пренаписване на текста на връзката изцяло. Пренаписването винаги е за предпочитане — то често подобрява използваемостта за всеки, не само за потребителите на екранни четци.

За задълбочен преглед на връзките на сайта ви и други WCAG критерии нашите ръчни одити за достъпност покриват целта на връзката като част от по-широк преглед от тестери, които използват помощни технологии всеки ден.