search

web-standards-ru / weblind.ru

Рекомендации по разработке сайтов для людей с нарушениями зрения
https://weblind.ru/
110 stars 19 forks source link

Добавить на сайт озвученные скринридером примеры #58

Open sukhoverkhova opened 6 years ago

sukhoverkhova commented 6 years ago

У многих разделов есть примеры кода. Добавить озвучку кода скринридером «хорошего» и «плохого» примеров, чтобы показать, как улучшится восприятие сайта.

Gaponchuk commented 6 years ago

День добрый, подскажите пожалуйста как реализовать такую задачу? Что можно почитать по этой теме? У меня пока опыта мало, но очень хочу принять участие.

pepelsbey commented 6 years ago

@Gaponchuk можно выделить демки на отдельные страницы (а можно и тут же попробовать), открыть скринридер и записать, как он читает. На macOS есть QuickTime, на Windows 10 тоже какой-то встроенный рекордер.

sukhoverkhova commented 6 years ago

Скринридеры для винды, которыми я пользовалась, — JAWS 18, NVDA. Что-то почитать о них можно на официальных сайтах, какие-то новости на сайте Тифлокомп.

JAWS — платная программа, есть демо-доступ на 40 минут, который обновляется после перезагрузки компьютера. У меня сломались некоторые шрифты после установки JAWS, если что, не удивляйтесь :)

NVDA — бесплатный, но нужно поднастроить скорость чтения и голос (там вроде несколько есть), чтобы на слух было понятно.

Для Мака есть встроенный VoiceOver, я пользовалась им меньше.

@Gaponchuk можно выделить демки на отдельные страницы (а можно и тут же попробовать), открыть скринридер и записать, как он читает.

Полученные записи можно добавить под примеры. Например, можно начать с JAWS или с VoiceOver.

sergeicodes commented 6 years ago

У меня сломались некоторые шрифты после установки JAWS, если что, не удивляйтесь :)

@asuhoverhova скорей всего что-то с русской версией, в английской ничего такого не видел.

Вот здесь можно посмотреть доступные голосовые пакеты для русского языка для NVDA: https://github.com/nvaccess/nvda/wiki/ExtraVoices

Честно сказать все не очень - шумно, не понятно.

Есть еще https://vocalizer-nvda.com/ но там платно.

sergeicodes commented 6 years ago

Добавить озвучку кода скринридером «хорошего» и «плохого» примеров

@asuhoverhova может случиться так, что поменяется дизайн, отыщется баг и перепишется компонент, обновится скрин ридер или что угодно еще, а видео останется старое. Столько работы зря.

Что если выбрать яркий пример (валидатор форм например), записать на него видео со скрин ридером и поместить его на главной странице как пример доступного интерфейса на практике.

А для тех, кто пока не очень со скрин ридером, можно сделать небольшую шпаргалку с основными командами или quick start guide по популярным скрин ридерам (думаю об этом https://github.com/web-standards-ru/weblind.ru/issues/56, верно?)

Таким образом компоненты будут читабельнее (только решение и ничего лишнего) и глядишь больше людей начнут пользоваться скрин ридерами.

@pepelsbey @Gaponchuk что думаете? 👆

можно выделить демки на отдельные страницы

Идея отличная, создал issue https://github.com/web-standards-ru/weblind.ru/issues/59