Достъпност за разработчици: Създаване на приобщаващ код
Разработчиците са архитектите на достъпността на ниво имплементация. Докато дизайнерите задават визуалната и интерактивната основа, именно кодът в крайна сметка определя дали уебсайтът работи с клавиатурна навигация, комуникира правилно с екранни четци и поддържа достъпност в различни браузъри и устройства.
Добрата новина е, че повечето най-добри практики за достъпност се съгласуват с общите най-добри практики за чист, семантичен и стандартно-съвместим код. Писането на достъпен код не означава добавяне на сложност — означава писане на код правилно от самото начало.
Семантичен HTML на първо място
Най-значимото нещо, което можете да направите за достъпността, е да използвате семантични HTML елементи правилно. HTML5 предлага богат набор от елементи с вградено значение и функции за достъпност. Елементът <button> автоматично може да получи фокус, да бъде активиран с клавиатура и е обявяван като бутон от екранните четци. Елемент <div> с onclick обработчик няма нито една от тези функции без значителна допълнителна работа.
Използвайте <nav> за навигационни области, <main> за основното съдържание, <header> и <footer> за съответните секции, <section> и <article> за области със съдържание, <h1> до <h6> за заглавия в правилен йерархичен ред, <ul> и <ol> за списъци, <table> с <th> за таблични данни, <label> с for атрибути за полета на формуляри и нативни <button> и <a> елементи за интерактивни контроли.
Структура на заглавията
Заглавията създават структурната рамка на вашата страница. Потребителите на екранни четци често навигират чрез заглавия, за да разберат организацията на съдържанието. Всяка страница трябва да има точно едно <h1> и заглавията трябва да следват логична йерархия без прескачане на нива.
Клавиатурна достъпност
Цялата функционалност трябва да може да се управлява единствено чрез клавиатура. Това означава, че всеки интерактивен елемент — връзки, бутони, полета на формуляри, менюта, модални прозорци, плъзгачи, табове — трябва да може да бъде достигнат чрез клавиша Tab, активиран с Enter или интервал и напуснат, когато е необходимо.
Никога не създавайте клавиатурни капани, при които потребителите могат да влязат в елемент с Tab, но не могат да излязат от него. Модалните диалози трябва да задържат фокуса вътре, докато са отворени, и да върнат фокуса към задействащия елемент при затваряне, но натискането на Escape винаги трябва да затваря диалога.
Уверете се, че редът на фокуса следва логична последователност, съответстваща на визуалното оформление. Избягвайте да използвате положителни стойности на tabindex, които заменят естествения ред на фокуса. Използвайте tabindex="0", за да направите неинтерактивни елементи фокусируеми, когато е необходимо, и tabindex="-1" за елементи, които трябва да получават фокус само програмно.
Език на страницата
Укажете стандартния език на всяка страница чрез атрибута lang на елемента <html>. Това казва на екранните четци какви правила за произношение да използват. Ако езикът се променя в рамките на съдържанието, маркирайте промяната с атрибут lang на обхващащия елемент.
Достъпност на формуляри
Формулярите са мястото, където потребителите предоставят данни, и те са чест източник на грешки в достъпността. Всяко поле на формуляр трябва да има програмно свързан етикет, обикновено чрез използване на елемента <label> с атрибут for, съответстващ на id на полето. Групирайте свързани полета чрез <fieldset> и <legend>.
Когато бъдат открити грешки, идентифицирайте полето с грешка и опишете грешката в текст. Използвайте атрибута autocomplete за активиране на автоматичното попълване на браузъра за стандартни полета като име, имейл, адрес и телефонен номер.
Алтернативен текст
Всяко недекоративно изображение трябва да има смислен алтернативен текст, описващ неговото съдържание или функция. За информативни изображения опишете какво предава изображението. За функционални изображения опишете функцията. За декоративни изображения използвайте празен атрибут alt (alt="").
WAI-ARIA
Спецификацията за достъпни богати интернет приложения предоставя допълнителна семантика в ситуации, в които нативният HTML е недостатъчен. ARIA ви позволява да комуникирате роли, състояния и свойства на помощни технологии за персонализирани уиджети и динамично съдържание.
ARIA обаче трябва да се използва разумно. Първото правило на ARIA е: ако можете да използвате нативен HTML елемент, който има нужната семантика и поведение, направете го. ARIA не добавя функционалност — добавя само семантика.
Адаптивен дизайн и преформатиране
Съдържанието трябва да може да бъде представено без загуба на информация при ширина от 320 CSS пиксела без нужда от хоризонтално скролване. Това гарантира, че потребители, които увеличават до 400% на стандартен десктоп екран, все още могат да достъпят цялото съдържание.
Skip-връзки
Осигурете на потребителите на клавиатура механизъм за прескачане на повтарящи се блокове от съдържание, като навигационни менюта, и директно преминаване към основното съдържание. Най-разпространената реализация е връзка „Преминете към основното съдържание", която е първият фокусируем елемент на страницата.
Чеклист за тестване на разработчика
Преди да пуснете функция, проверете: цялата функционалност работи само с клавиатура; редът на фокуса е логичен; фокусът е видим на всички интерактивни елементи; всички изображения имат подходящ алтернативен текст; всички полета на формуляри имат етикети; езикът на страницата е указан; йерархията на заглавията е правилна; ARIA се използва правилно и само когато е необходимо; съдържанието се преформатира при ширина 320px; и динамичните актуализации на съдържанието се обявяват на екранните четци.
В тази секция
Достъпен ли е вашият уебсайт?
Сканирайте уебсайта си безплатно и получете вашия WCAG резултат за минути.
Сканирайте сайта си безплатно