Загальні помилки доступності веб-дизайну та як їх уникнути
Добре, початкуючі веб-розробники! Приготуйтеся, оскільки ми вирушаємо в подорож через дику гущавину доступності веб-дизайну. Звісно, не панікуйте. Так, “доступність” звучить як велике, лякаюче, багатослівне слово. Але насправді це схоже на чарівну фею-кришталівку, яка обсипає ваші веб-дизайни пилом успіху, зроблюючи їх зручними для всіх, включаючи людей з обмеженими можливостями.
Ми розглянемо найпоширеніші пастки доступності та як професійно уникати їх. Зверніться до своїх друзів, оскільки ми збираємося переконатися, що ваші веб-дизайни стануть Королевами балу, не потрібні гарбузові карети!
H2: Пастка 1: Недостатні контрастні співвідношення
Читання тексту, розфарбованого кольорами, на схожому за кольором тлі – це майже як спроба знайти Вальда в фабриці м’ятних цукерок. Це просто неможливо і залишає користувачів зі скривленими, роздратованими, і, можливо, з бажанням покинути ваш сайт.
H3: Виправлення:
Використовуйте контрастні співвідношення 4,5:1 для звичайного тексту та 3:1 для великого тексту. З цими співвідношеннями користувачі не будуть відчувати, що вони беруть участь у серйозній грі “Де Вальдо”!
H2: Пастка 2: Неописовий текст посилання
Використання “клікніть тут” для тексту посилання – це майже так само корисно, як шоколадний чайник. Це не дає користувачеві жодної інформації про те, куди веде це посилання.
H3: Виправлення:
Замість цього розгляньте використання описового тексту. Наприклад, “Перегляньте наше смачне меню піци” залучить користувачів більше, ніж сухий, неописовий “клікніть тут”.
H2: Пастка 3: Залежність від мишиного навігації
Деякі користувачі переходять по веб-сайтах без використання миші. Тому створення сайту, який покладається виключно на цей метод, є подібним до планування подорожі без карти. Звісно, ви можете потрапити кудись цікаво, але ймовірно просто загубитеся.
H3: Виправлення:
Переконайтеся, що ваш веб-сайт може легко навігуватися за допомогою клавіатури. ‘Tab’, ‘Shift’ + ‘Tab’, ‘Enter’ та ‘Space’ повинні стати вашими новими кращими друзями по кодуванню.
H2: Пастка 4: Відсутність альтернативного тексту для зображень
Без альтернативного тексту екрани не можуть пояснити, про що зображення. Це трохи схоже на те, що показати комусь картину пухнастого лами, не пояснивши, що це лама.
H3: Виправлення:
Додавання альтернативного тексту, наприклад “пухнаста, біла лама, що стоїть на гірському схилі”, дає всім користувачам однаковий доступ до вашого зображення. Тепер, хто не цінує хорошу ламу на гірському схилі, правда?
Перш ніж завершити, дозвольте мені сказати вам, новачкам, щось. Розігніть кістки, нахилившись до клавіатури, і створіть свої веб-сайти, як поети коду. З цими пастками доступності з вашого плеча, ваша подорож у всесвіт веб-дизайну стане великим задоволенням космічного мандрівника. Отже, рушайте, зробіть веб кращим, більш доступним місцем. Щасливого кодування!
