M

MLOG

Български

Ръководство за имплементиране на достъпни подсказки чрез посочване и фокус, осигуряващо използваемост за всички потребители, включително тези с увреждания.

Имплементация на подсказки: Достъпна информация при посочване и фокус

Подсказките са малки, контекстуални помощни съобщения, които се появяват, когато потребител посочи с мишката или фокусира елемент. Те могат да предоставят допълнителна информация, да изяснят целта на даден елемент или да предложат съвети как да се използва дадена функция. Въпреки това, подсказките лесно могат да се превърнат в кошмар за достъпността, ако не са имплементирани правилно. Това ръководство очертава най-добрите практики за създаване на подсказки, които са използваеми от всички, включително потребители с увреждания.

Защо достъпността е важна при подсказките

Достъпността не е просто въпрос на съответствие; тя е свързана със създаването на по-добро потребителско изживяване за всички. Когато подсказките не са достъпни, това може да изключи потребители, които разчитат на асистивни технологии като екранни четци, навигация с клавиатура или гласово въвеждане. Разгледайте тези сценарии:

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

Ключови принципи за достъпни подсказки

Следните принципи са от решаващо значение за създаването на достъпни подсказки:

  1. Осигурете алтернативен достъп: Уверете се, че подсказките са достъпни както при посочване с мишка, така и при фокус с клавиатура.
  2. Използвайте ARIA атрибути: Използвайте атрибути на ARIA (Accessible Rich Internet Applications), за да идентифицирате и опишете правилно подсказките за асистивните технологии.
  3. Управлявайте фокуса: Контролирайте къде отива фокусът, когато подсказката се показва и скрива.
  4. Осигурете достатъчен контраст: Осигурете достатъчен цветови контраст между текста на подсказката и фона.
  5. Оставете достатъчно време: Дайте на потребителите достатъчно време, за да прочетат съдържанието на подсказката.
  6. Направете ги затваряеми: Осигурете ясен начин за затваряне на подсказката.
  7. Избягвайте прекомерната употреба: Използвайте подсказките пестеливо и само когато е необходимо.

Техники за имплементация

1. Използване на посочване и фокус

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

HTML:

<a href="#" aria-describedby="tooltip-example">Примерен линк</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Това е примерна подсказка.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Гарантира, че подсказката е най-отгоре */
}

Обяснение:

JavaScript (Разширен контрол - по избор):

Докато CSS може да се справи с просто показване/скриване, JavaScript позволява по-стабилен контрол, особено когато подсказките се генерират динамично или се нуждаят от по-сложно поведение.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. Използване на ARIA атрибути

ARIA атрибутите са от съществено значение за предоставянето на семантична информация на асистивните технологии. Ето разбивка на ключовите атрибути:

Пример:

<button aria-describedby="help-tooltip">Изпрати</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Кликнете тук, за да изпратите формуляра.</div>

JavaScript (за aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Управление на фокуса

Когато се появи подсказка, тя обикновено *не трябва* да „открадва“ фокуса от задействащия елемент. Фокусът трябва да остане върху елемента, който е задействал подсказката. Това гарантира, че потребителите на клавиатура могат да продължат да навигират в страницата без неочаквани прекъсвания.

Въпреки това, може да има ситуации, в които *искате* да преместите фокуса върху подсказката, особено ако тя съдържа интерактивни елементи (напр. линкове, бутони). В този случай се уверете, че:

В повечето случаи избягването на управлението на фокуса в самата подсказка е за предпочитане за по-голяма простота и използваемост.

4. Осигуряване на достатъчен контраст

Цветовият контраст е от решаващо значение за четливостта. Уверете се, че цветът на текста във вашите подсказки има достатъчен контраст спрямо цвета на фона. Насоките за достъпност на уеб съдържанието (WCAG) препоръчват съотношение на контраста от поне 4.5:1 за нормален текст и 3:1 за голям текст (18pt или 14pt удебелен).

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

Пример (добър контраст):

.tooltip {
  background-color: #000;
  color: #fff;
}

Пример (лош контраст):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Осигуряване на достатъчно време

Потребителите се нуждаят от достатъчно време, за да прочетат съдържанието на подсказката. Избягвайте подсказки, които изчезват твърде бързо. Въпреки че няма магическо число, стремете се към минимално време на показване от няколко секунди. Също така, подсказката трябва да остане видима, докато потребителят посочва с мишка или е фокусирал задействащия елемент. Ако трябва да затворите подсказката поради други събития, осигурете индикатор, че тя ще се затвори.

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

6. Направете ги затваряеми

Въпреки че подсказките често изчезват автоматично, когато потребителят премести мишката си или премахне фокуса, добра практика е да се осигури ясен начин за ръчното им затваряне, особено за дълги подсказки или такива, съдържащи интерактивни елементи.

Методи за затваряне на подсказки:

Пример (бутон за затваряне):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Това е съдържанието на моята подсказка.
  <button onclick="hideTooltip()">Затвори</button>
</div>

Пример (клавиш Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Заменете с вашата реална функция за скриване на подсказката
  }
});

7. Избягване на прекомерна употреба

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

Алтернативи на подсказките:

Разширени съображения

Динамично съдържание

Ако съдържанието на вашата подсказка се генерира динамично (напр. заредено от API или актуализирано въз основа на потребителско въвеждане), уверете се, че атрибутът aria-describedby и видимостта на подсказката се актуализират съответно. Използвайте JavaScript, за да управлявате тези актуализации.

Позициониране

Внимателно обмислете позиционирането на вашите подсказки. Избягвайте да ги поставяте по начин, който закрива важно съдържание или причинява разместване на оформлението. Внимавайте с различните размери и резолюции на екрана и използвайте CSS, за да гарантирате, че подсказките винаги са видими в рамките на прозореца (viewport).

Мобилни устройства

Подсказките традиционно разчитат на взаимодействия с посочване на мишката, които не са налични на устройства със сензорен екран. За мобилни устройства обмислете използването на алтернативни методи за взаимодействие, като например:

Тестване на вашите подсказки

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

Методи за тестване:

Интернационализация (i18n) и локализация (l10n)

Когато разработвате подсказки за глобална аудитория, имайте предвид интернационализацията и локализацията:

Заключение

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

Ресурси