Руководство по доступности сайта
Краткая методичка СООИ ВОИ: как незрячий пользователь работает с клавиатурой и экранным диктором, что важно в формах и в описаниях изображений. Для заявления о соответствии — страница «Доступность сайта»; термины — в глоссарии.
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. Работа с формой
- Пользователь нажимает Tab и слышит имя поля.
- Вводит текст; диктор подтверждает ввод.
- Переходит к следующему обязательному полю.
- Нажимает кнопку отправки и слушает результат: успех или ошибка.
Плохо: диктор говорит только «поле редактирования» — назначение неизвестно.
Хорошо: «Адрес электронной почты, обязательное поле, поле редактирования».
Плохо: после «Отправить» — красная рамка без текста.
Хорошо: «Ошибка в поле „Номер телефона“. Введите номер в формате +7 999 123-45-67». Фокус переводится в первое ошибочное поле; введённые данные не сбрасываются.
4. Альтернативный текст изображений
Диктор озвучивает не художественное описание, а краткий alt — то, что важно для понимания страницы.
Схема: кто или что + действие или состояние + место + важная особенность.
- Хорошо: «Вход в поликлинику с пандусом и поручнями». Нельзя указывать ширину двери, если она не измерена.
- Хорошо: «Специалист измеряет ширину дверного проёма с помощью рулетки».
- Для ссылки-картинки — действие: «Открыть фотографии входной группы».
- Декоративное изображение:
alt="", чтобы диктор его пропустил.
Не начинайте с слов «фото» или «картинка», не пишите субъективные оценки («красивый пандус»), не дублируйте подпись под рисунком целиком. Подробный текст лучше размещать рядом с изображением, а не в длинном alt.
На сайте СООИ ВОИ краткие alt формируются для новостей, доски почёта, мероприятий и снимков обхода/паспорта (модуль альтернативных текстов). Точное описание конкретного кадра при публикации всё равно предпочтительнее.
5. Что важно на доступном сайте
- доступные подписи полей (
label+for/id); - логический порядок Tab;
- понятная HTML-разметка и landmarks;
- кнопки и ссылки с понятными именами;
- текстовые сообщения об ошибках;
- совместимость с экранным диктором;
- меню без обязательной мыши;
- видимый фокус клавиатуры;
- сохранение введённых данных после ошибки.
6. Связанные страницы
- Заявление о доступности — нормы, функции, ограничения, контакты;
- Глоссарий — МГН, WCAG, скринридер, фокус и др.;
- Вопросы и ответы: сайт и доступность;
- Опрос об удобстве сайта.
Дата обновления руководства: