Защо пропускането на навигационни връзки има значение
Връзките за пропускане на навигация предоставят няколко предимства:
- Подобрена използваемост: Намалява усилието, необходимо за навигиране през менюта за потребители, разчитащи на помощни технологии.
- Подобрена достъпност: Гарантира съответствие с указанията за достъпност като WCAG и ADA.
- По-добро потребителско изживяване: Прави вашия сайт по-лесен за навигация за всички потребители.
Ръководство стъпка по стъпка за добавяне на прескачащи навигационни връзки
Стъпка 1: Добавете HTML за пропускащи връзки
Добавете HTML за връзка за пропускане в горната част на заглавния файл на вашия сайт:
Преминете към основното съдържание
Уверете се href сочи към идентификатора на вашия основен контейнер за съдържание.
Стъпка 2: Добавете ID към основното съдържание
Във вашата WordPress тема намерете основния контейнер със съдържание и добавете ID:
Стъпка 3: Стилизирайте връзката за пропускане
Оформете връзката за прескачане, за да сте сигурни, че е видима, когато е на фокус. Добавете следния CSS към вашата тема:
.skip-link { позиция: абсолютна; отгоре: -40px; ляво: 0; фон: #000; цвят: #fff; подложка: 10px; текст-декорация: няма; z-индекс: 100; } .skip-link:focus { top: 0; }
Стъпка 4: Тествайте връзката за пропускане
Използвайте клавиатура, за да навигирате в сайта си и да проверите дали връзката за прескачане се показва и функционира правилно. Натиснете Tab за да се фокусирате върху връзката за прескачане и Enter за да го активирате.
Най-добри практики за пропускане на навигационни връзки
- Поставете първо връзките за пропускане: Уверете се, че връзката за пропускане е първият фокусируем елемент на страницата.
- Използвайте ясни етикети: Текстът на връзката трябва ясно да посочва нейната цел, напр. „Преминаване към основното съдържание“.
- Тестване на различни устройства: Проверете функционалността на настолни компютри, таблети и мобилни устройства.
Казуси от практиката: Прескачане на връзки в действие
Казус 1: Образователен уебсайт
Образователна платформа внедри връзки за прескачане, което доведе до по-добра навигация за ученици, използващи екранни четци, и 15% подобрение в резултатите за достъпност.
Казус 2: Магазин за електронна търговия
Онлайн търговец на дребно добави връзки за пропускане към своето навигационно меню, намалявайки степента на отпадане и подобрявайки използваемостта за потребителите на клавиатурата.
ЧЗВ: Добавяне на връзки за пропускане на навигация
Какво представляват връзките за прескачане на навигация?
Връзките за пропускане на навигация позволяват на потребителите да заобиколят повтарящите се навигационни менюта и да отидат директно до основното съдържание на страницата.
Необходими ли са връзки за прескачане за съответствие с изискванията за достъпност?
Въпреки че не са изрично задължителни, връзките за пропускане спомагат за спазването на указанията на WCAG, като подобряват навигацията за потребителите на помощни технологии.
Мога ли да добавя връзки за пропускане без редактиране на код?
Да, някои добавки за достъпност като Плъгин за достъпност на WP One Tap може автоматично да добавя връзки за пропускане.
Работят ли връзките за прескачане на мобилни устройства?
Да, когато се внедри правилно, прескачащите връзки функционират на всички устройства, включително мобилни.
Как да тествам прескачащи навигационни връзки?
Използвайте клавиатура, за да навигирате през вашия сайт и се уверете, че връзката за прескачане е фокусируема и функционална.
