Перейти на PRO

Какие знаешь требования к дизайну в Accessibility

Тип вопроса: Доступность Вероятность: 10% Категория: Frontend Разработчик

Ответ

Доступность (Accessibility) в веб-дизайне включает ключевые требования:

  1. Контрастность: Минимальное соотношение 4.5:1 для текста (3:1 для крупного текста). Пример:
body {
  color: #333; /* Темно-серый */
  background: #fff; /* Белый */
  /* Контраст ~12:1 */
}

  1. Размер текста: Основной текст ≥16px, возможность увеличения до 200% без потери функциональности.

  2. Альтернативные тексты: Обязательные alt для изображений:

<img src="logo.png" alt="Логотип компании">

  1. Клавиатурная навигация: Все элементы должны быть доступны через Tab, с визуальным фокусом.

  2. ARIA-атрибуты: Для сложных элементов:

<button aria-expanded="false">Меню</button>

  1. Семантическая вёрстка: Использование правильных HTML-тегов (<header>, <nav>, <main>).

  2. Предсказуемость: Отсутствие резких изменений без предупреждения (например, внезапных аудио-эффектов).

  3. Формы: Чёткие <label>, ошибки в доступном формате.

Ответ 18+ 🔞

Ну ты смотри, какие заморочки эти ваши веб-дизайнеры придумали! Доступность, блядь. Не просто чтоб красиво было, а чтоб вообще все могли пользоваться, даже если у человека глаза — хуй с горы, а руки — как у мартышлюшки.

Вот смотри, основные правила, без которых твой сайт — говно полное, а не продукт.

Во-первых, контрастность. Текст должен быть виден, а не сливаться с фоном, как мудя в тумане. Минимум 4.5 к 1. Если шрифт крупный — можно 3 к 1. А то сделают серенький текст на беленьком фоне — и думают, охуенно стильно. Стильно, блядь, в пизду! Половина пользователей нихуя не увидит.

body {
  color: #333; /* Темно-серый */
  background: #fff; /* Белый */
  /* Контраст ~12:1 — вот это уже дело! */
}

Во-вторых, размер текста. Мелкий шрифт — это для мудаков. Основной текст — от 16 пикселей минимум. И чтоб его можно было увеличить аж до 200% без того, чтобы вся вёрстка накрылась медным тазом.

В-третьих, картинки. Ты ж не просто для красоты их вставляешь? Для слепых, которые сайт через скринридер читают, надо описание писать. Атрибут alt, ёпта! Без него — ты пидарас шерстяной.

<img src="logo.png" alt="Логотип компании">

В-четвёртых, клавиатура. Не все мышь держать могут, понимаешь? Всё должно работать с одной кнопки Tab. Нажал — фокус перескочил, и видно, куда он перескочил. А то бывает, тыкаешь-тыкаешь — нихуя не понятно, где ты сейчас.

В-пятых, ARIA-атрибуты. Это для особо хитрожопых интерфейсов. Скажем, выпадающее меню. Надо явно сказать скринридеру, открыто оно или нет.

<button aria-expanded="false">Меню</button>

В-шестых, семантика. Не надо всё делать на div и span, как последний распиздяй. Есть теги <header>, <nav>, <main> — вот их и используй! Роботы и скринридеры от этого в восторге, блядь.

В-седьмых, предсказуемость. Никаких внезапных пиздецов! Если у тебя через 5 секунд на всю квартиру заиграет реклама — предупреди. Или лучше не делай так вообще. Волнение ебать у пользователя будет, а не радость.

В-восьмых, формы. Это отдельная песня. Каждое поле должно иметь чёткую подпись (<label>), а ошибки — объясняться человеческим языком, а не кодом «ERROR_404_FIELD_INVALID».

Вот и вся доступность, если коротко. Делаешь по этим пунктам — не обосрёшься. Делаешь как попало — будь готов, что тебя пошлют нахуй, и будут правы.

© ХакСобесов, 2026
support@hacksobesov.com