Видел ли версии сайта для слабовидящих

Версии сайта для слабовидящих и веб-доступность

Что такое доступность веб-сайта

Web Accessibility (веб-доступность) — это практика разработки сайтов и приложений, доступных для всех пользователей, включая людей с ограничениями по зрению, слуху, моторике и когнитивным функциям. Это критически важный аспект современной веб-разработки, регулируемый стандартами WCAG (Web Content Accessibility Guidelines).

Версии для слабовидящих

Да, я видел подходы реализации веб-доступности для слабовидящих пользователей:

1. Версии с повышенным контрастом

• Темная тема с высококонтрастными цветами
• Светлая тема с повышенной насыщенностью
• Специальные палитры для колоробслепых

2. Масштабирование и размеры шрифта

• Поддержка zoom браузера до 200-400%
• Регулируемый размер шрифта через UI
• Переопределение дефолтных размеров в CSS

// Пример: сохранение размера шрифта в localStorage
const setFontSize = (size: small | medium | large) => {
  const sizeMap = {
    small: 14px,
    medium: 16px,
    large: 20px
  };
  document.documentElement.style.fontSize = sizeMap[size];
  localStorage.setItem(fontSize, size);
};

// Восстановление при загрузке
const savedSize = localStorage.getItem(fontSize) || medium;
setFontSize(savedSize as any);

3. Семантическая разметка

• Правильное использование тегов <header>, <nav>, <main>, <article>
• Правильная иерархия заголовков <h1> → <h6>
• <label> для форм, связанные с атрибутом for

<form>
  <label for="email">Email:</label>
  <input id="email" type="email" />
</form>

4. ARIA-атрибуты (Accessible Rich Internet Applications)

• aria-label для описания элементов без видимого текста
• aria-hidden="true" для скрытия декоративных элементов
• aria-live="polite" для уведомлений
• aria-expanded, aria-checked для состояний

<button aria-label="Открыть меню" aria-expanded={isOpen}>
  <MenuIcon />
</button>

5. Поддержка screen readers

• NVDA (Windows)
• JAWS (платный, Windows)
• VoiceOver (macOS/iOS)
• TalkBack (Android)

Best Practices

• Цветовой контраст: минимум 4.5:1 для обычного текста (WCAG AA)
• Фокус клавиатуры: все интерактивные элементы должны быть доступны через Tab
• Подтекст для изображений: alt атрибуты для всех <img>
• Тестирование: использование инструментов axe, WAVE, Lighthouse

Примеры реализации

// Компонент с доступностью
interface AccessibleButtonProps {
  onClick: () => void;
  label: string;
  ariaLabel?: string;
  disabled?: boolean;
}

export function AccessibleButton({
  onClick,
  label,
  ariaLabel,
  disabled
}: AccessibleButtonProps) {
  return (
    <button
      onClick={onClick}
      aria-label={ariaLabel || label}
      disabled={disabled}
      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
    >
      {label}
    </button>
  );
}

Инструменты для проверки доступности

1. Lighthouse — встроен в Chrome DevTools
2. axe DevTools — браузерное расширение
3. WAVE — онлайн инструмент и расширение
4. Pa11y — CLI инструмент для автоматизации
5. Testing Library — при написании тестов

Веб-доступность не просто «фича» — это обязательная часть профессионального веб-разработки, делающая интернет инклюзивным для всех пользователей.