Руководство по доступности сайта

Краткая методичка СООИ ВОИ: как незрячий пользователь работает с клавиатурой и экранным диктором, что важно в формах и в описаниях изображений. Для заявления о соответствии — страница «Доступность сайта»; термины — в глоссарии.

1. Клавиатура на ощупь

Незрячий пользователь ориентируется на клавиатуре по памяти, тактильным меткам и озвучке диктора. Печать ведётся «вслепую»: пальцы возвращаются к исходным клавишам по выпуклым полоскам.

Тактильные ориентиры

  • Русская раскладка: выпуклости обычно на клавишах А и О.
  • Английская раскладка: на F и J.
  • Цифровой блок: на клавише 5 (слева 4, справа 6, выше 8, ниже 2).

Левый указательный палец ставят на «А», правый — на «О»; от этих точек восстанавливают положение рук.

Как печатают

  • Указательные пальцы — центральные клавиши; средние — соседние; безымянные и мизинцы — крайние.
  • Большие пальцы обычно нажимают пробел.
  • После сбоя позиции снова ищут «А» и «О» на ощупь.

2. Экранный диктор и контроль ввода

Что напечатано, пользователь узнаёт по голосу (NVDA, JAWS, VoiceOver и др.). Диктор может:

  • озвучивать каждую букву или целое слово;
  • читать строку и абзац;
  • сообщать об ошибках и о положении курсора;
  • объявлять Shift, Ctrl, Alt, Caps Lock;
  • читать знаки пунктуации;
  • сообщать о смене раскладки («Русский», «Английский»).

На сайте СООИ ВОИ в панели «Доступность» есть режимы озвучки ввода: каждая буква, слово после пробела, служебные клавиши; отдельный переключатель «не говорить поверх NVDA / JAWS».

Раскладка

Язык клавиатуры переключают сочетаниями Alt+Shift, Ctrl+Shift или Win+пробел. Если диктор не назвал язык, его проверяют по введённой букве.

Навигация по интерфейсу

  • Tab / Shift+Tab — следующий и предыдущий элемент;
  • Enter — открыть ссылку или нажать кнопку;
  • Пробел — флажок или кнопка;
  • стрелки — списки и меню;
  • Esc — закрыть окно;
  • Ctrl+A / C / V / Z — выделить, копировать, вставить, отменить.

Исправление ошибок

  • Backspace — удалить слева; Delete — справа;
  • стрелки и Ctrl+стрелки — по символам и словам;
  • Home / End — начало и конец строки;
  • повторное прослушивание слова или предложения диктором.

3. Работа с формой

  1. Пользователь нажимает Tab и слышит имя поля.
  2. Вводит текст; диктор подтверждает ввод.
  3. Переходит к следующему обязательному полю.
  4. Нажимает кнопку отправки и слушает результат: успех или ошибка.

Плохо: диктор говорит только «поле редактирования» — назначение неизвестно.

Хорошо: «Адрес электронной почты, обязательное поле, поле редактирования».

Плохо: после «Отправить» — красная рамка без текста.

Хорошо: «Ошибка в поле „Номер телефона“. Введите номер в формате +7 999 123-45-67». Фокус переводится в первое ошибочное поле; введённые данные не сбрасываются.

4. Альтернативный текст изображений

Диктор озвучивает не художественное описание, а краткий alt — то, что важно для понимания страницы.

Схема: кто или что + действие или состояние + место + важная особенность.

  • Хорошо: «Вход в поликлинику с пандусом и поручнями». Нельзя указывать ширину двери, если она не измерена.
  • Хорошо: «Специалист измеряет ширину дверного проёма с помощью рулетки».
  • Для ссылки-картинки — действие: «Открыть фотографии входной группы».
  • Декоративное изображение: alt="", чтобы диктор его пропустил.

Не начинайте с слов «фото» или «картинка», не пишите субъективные оценки («красивый пандус»), не дублируйте подпись под рисунком целиком. Подробный текст лучше размещать рядом с изображением, а не в длинном alt.

На сайте СООИ ВОИ краткие alt формируются для новостей, доски почёта, мероприятий и снимков обхода/паспорта (модуль альтернативных текстов). Точное описание конкретного кадра при публикации всё равно предпочтительнее.

5. Что важно на доступном сайте

  • доступные подписи полей (label + for/id);
  • логический порядок Tab;
  • понятная HTML-разметка и landmarks;
  • кнопки и ссылки с понятными именами;
  • текстовые сообщения об ошибках;
  • совместимость с экранным диктором;
  • меню без обязательной мыши;
  • видимый фокус клавиатуры;
  • сохранение введённых данных после ошибки.

6. Связанные страницы

Дата обновления руководства: