«Разбор полетов»: Как Теплица социальных технологий проектировала онлайн кинотеатр для незрячих

«Разбор полетов»: Как Теплица социальных технологий проектировала онлайн кинотеатр для незрячих
«Разбор полетов»: Как Теплица социальных технологий проектировала онлайн кинотеатр для незрячих

В фев­ра­ле 2015 года начал рабо­ту сайт пер­во­го побе­ди­те­ля Кон­кур­са малых сай­тов Теп­ли­цы соци­аль­ных тех­но­ло­гий – Мест­ной обще­ствен­ной орга­ни­за­ции инва­ли­дов по зре­нию «СВЕТ». Как создать онлайн-кино­те­атр для незря­чих? Имен­но на такой вопрос спе­ци­а­ли­стам Теп­ли­цы при­шлось най­ти ответ в ходе рабо­ты над про­ек­том. Читай­те об этом в нашем «раз­бо­ре поле­тов».

Поделитесь этой новостью с друзьями.

МРООИ «СВЕТ» – победитель конкурса малых сайтов

МРООИ «СВЕТ» – обще­ствен­ная орга­ни­за­ция инва­ли­дов по зре­нию суще­ству­ет уже более 20 лет. Орга­ни­зуя раз­лич­ные куль­тур­ные, досу­го­вые меро­при­я­тия для сво­их участ­ни­ков, она созда­ет усло­вия для обще­ния и вза­им­ной под­держ­ки с тем, что­бы они не чув­ство­ва­ли себя в изо­ля­ции и оди­но­че­стве.

Подготовка материалов для сайта и знакомство с организацией
Под­го­тов­ка мате­ри­а­лов для сай­та и зна­ком­ства с орга­ни­за­ци­ей.

Одним из важ­ных направ­ле­ний дея­тель­но­сти «СВЕ­Та» явля­ет­ся созда­ние филь­мов с тифло­ком­мен­ти­ро­ва­ни­ем, пред­на­зна­чен­ных для про­смот­ра сла­бо­ви­дя­щи­ми и даже тоталь­но незря­чи­ми людь­ми.

Тифло­ком­мен­та­рий в кино – это допол­ни­тель­ная зву­ко­вая дорож­ка, содер­жа­щая закад­ро­вое опи­са­ние видео­ря­да.

МРООИ «СВЕТ» созда­ла соб­ствен­ную тифло­ла­бо­ра­то­рию, и уже есть пер­вые филь­мы, доступ­ные для про­смот­ра в таком фор­ма­те.

Орга­ни­за­ция регу­ляр­но про­во­дит кино­се­ан­сы в соб­ствен­ном мини-кино­те­ат­ре у мет­ро ВДНХ в Москве и устра­и­ва­ет выезд­ные пока­зы в раз­ных рай­о­нах горо­да. Одна­ко охват ауди­то­рии в этом слу­чае полу­ча­ет­ся неболь­шой – воз­мож­но­сти Интер­не­та поз­во­ли­ли бы куда боль­ше­му коли­че­ству людей полу­чить доступ к про­смот­ру таких филь­мов.

Отзыв посе­ти­тель­ни­цы пока­за филь­ма с тифло­ком­мен­ти­ро­ва­ни­ем

Имен­но с этой иде­ей МРООИ «СВЕТ» при­ня­ла уча­стие в пер­вом раун­де Кон­кур­са малых сай­тов, про­во­ди­мом Теп­ли­цей соци­аль­ных тех­но­ло­гий, и вошла в чис­ло побе­ди­те­лей. И вот перед спе­ци­а­ли­ста­ми Теп­ли­цы вста­ла амби­ци­оз­ная зада­ча – созда­ние онлайн-кино­те­ат­ра для сла­бо­ви­дя­щих.

Задачи и приоритеты проекта

На эта­пе поста­нов­ки мы сра­зу обо­зна­чи­ли при­о­ри­те­том номер один обес­пе­че­ние доступ­но­сти сай­та для людей с огра­ни­чен­ны­ми воз­мож­но­стя­ми зре­ния. Мы хоте­ли, что­бы они мог­ли поль­зо­вать­ся им само­сто­я­тель­но, без помо­щи, несмот­ря на то, что сами пред­ста­ви­те­ли МРООИ «СВЕТ» не были уве­ре­ны в том, что это воз­мож­но.

Так, мы непо­сред­ствен­но столк­ну­лись с самым рас­про­стра­нен­ным мифом о том, что сла­бо­ви­дя­щие люди не поль­зу­ют­ся Интер­не­том. И реши­ли, что луч­ший спо­соб раз­ве­ять его – выяс­нить, как обсто­ят дела на прак­ти­ке и каков реаль­ный опыт сла­бо­ви­дя­ще­го чело­ве­ка в сети.

К рабо­те в каче­стве экс­пер­та мы при­влек­ли пред­ста­ви­те­ля такой ауди­то­рии – Фити­со­ва Алек­сея Вла­ди­ми­ро­ви­ча – участ­ни­ка хака­то­на «Тех­но­ло­гии рав­ных воз­мож­но­стей» (про­ве­ден­но­го Теп­ли­цей в сен­тяб­ре 2014 года). И, поль­зу­ясь слу­ча­ем, выра­жа­ем ему огром­ную бла­го­дар­ность за помощь и реко­мен­да­ции, кото­рые суще­ствен­но помо­га­ли нам по ходу про­ек­та.

Алексей Фитисов - участник хакатона «Технологии равных возможностей»
Алек­сей Фити­сов – участ­ник хака­то­на «Тех­но­ло­гии рав­ных воз­мож­но­стей»

Основ­ной прин­цип доступ­но­сти заклю­ча­ет­ся в том, что сла­бо­ви­дя­щие поль­зо­ва­те­ли не посе­ща­ют неко­то­рые «спе­ци­аль­ные» ресур­сы, но исполь­зу­ют спе­ци­аль­ные инстру­мен­ты и про­грамм­ное обес­пе­че­ние, кото­рое поз­во­ля­ет им полу­чить доступ к «обыч­ным» сай­там.

В слу­чае с веб – это про­грам­мы экран­но­го досту­па (как пра­ви­ло, рече­во­го – скрин­ри­де­ры, т.е. чита­ю­щие вслух весь види­мый на экране текст) и ути­ли­ты экран­но­го уве­ли­че­ния: сред­ства изме­не­ния мас­шта­ба про­смот­ра у бра­у­зе­ров и экран­ные лупы.

Послед­ние поз­во­ля­ют суще­ствен­но уве­ли­чить раз­мер види­мых эле­мен­тов или раз­гля­деть какие-то отдель­ные фраг­мен­ты стра­ниц.

Самый про­стой спо­соб полу­чить пред­став­ле­ние о рабо­те этих про­грамм – это попро­бо­вать. Поль­зо­ва­те­ли Windows могут уста­но­вить бес­плат­ный скрин­ри­дер NVDA, а поль­зо­ва­те­ли Mac OS могут вос­поль­зо­вать­ся встро­ен­ной ути­ли­той VoiceOver, для это­го им доста­точ­но нажать ком­би­на­цию кла­виш Command-F5.

Так мы сами пре­вра­ти­лись в поль­зо­ва­те­лей асси­стив­ных тех­но­ло­гий, ибо ника­кие реко­мен­да­ции не заме­нят лич­ный опыт. Мы тести­ро­ва­ли стра­ни­цы наше­го сай­та в скрин­ри­де­рах на раз­лич­ных эта­пах раз­ра­бот­ки и вно­си­ли кор­рек­ти­вы в тех слу­ча­ях, когда услы­шан­ное было недо­ста­точ­но ясным или запу­ты­ва­ло поль­зо­ва­те­лей (а так­же дели­лись эмо­ци­о­наль­ны­ми ком­мен­та­ри­я­ми в Сети по пово­ду услы­шан­но­го). Для инте­ре­су­ю­щих­ся тех­ни­че­ски­ми подроб­но­стя­ми пред­ла­га­ем отдель­ную ста­тью на Хаб­ре.

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

Процесс разработки

Наи­боль­шую труд­ность в таких про­ек­тах пред­став­ля­ет отсут­ствие эффек­тив­ных при­ме­ров и «гото­вых» прак­ти­че­ских нара­бо­ток, кото­рые мож­но было бы про­сто взять и при­ме­нить. Фак­ти­че­ски реко­мен­да­ции по доступ­но­сти пред­став­ля­ют собой в основ­ном набор под­хо­дов, кото­рые в каж­дом кон­крет­ном слу­чае необ­хо­ди­мо еще про­ин­тер­пре­ти­ро­вать, внед­рить в прак­ти­ку и про­те­сти­ро­вать.

С дру­гой сто­ро­ны, суще­ство­ва­ли содер­жа­тель­ные осо­бен­но­сти само­го про­ек­та: по усло­ви­ям про­грам­мы мате­ри­а­лы для сай­та гото­вят­ся и раз­ме­ща­ют­ся пред­ста­ви­те­ля­ми орга­ни­за­ции-побе­ди­те­ля.

В дан­ном слу­чае опы­та веб-пуб­ли­ка­ций и рабо­ты с сай­та­ми у пред­ста­ви­те­лей МРООИ «СВЕТ» не было. Поэто­му нам нуж­но было так­же нала­дить эту рабо­ту и спро­ек­ти­ро­вать сайт таким обра­зом, что неопыт­ные редак­то­ры мог­ли с ним вза­и­мо­дей­ство­вать без затруд­не­ний.

Экс­перт Теп­ли­цы по обу­че­нию Юлия Кры­ло­ва про­ве­ла четы­ре мастер-клас­са по кон­тент-менедж­мен­ту в режи­ме видео-кон­фе­рен­ции. Редак­то­ры сай­та подроб­но позна­ко­ми­лись с адми­ни­стра­тив­ным интер­фей­сом WordPress и при­е­ма­ми под­го­тов­ки мате­ри­а­лов для сай­та.

Мы бла­го­да­рим сотруд­ни­ков МРООИ «СВЕТ» Свет­ла­ну Юрьев­ну Усти­ми­ро­ву и Вик­то­ра Васи­лье­ви­ча Нау­мо­ва за актив­ное уча­стие, вклю­чен­ность в про­цесс и упор­ство, бла­го­да­ря кото­ро­му про­ект состо­ял­ся и был запу­щен.

В про­цес­се рабо­ты мы в конеч­ном ито­ге сосре­до­то­чи­лись на несколь­ких основ­ных направ­ле­ни­ях, обес­пе­чи­ва­ю­щих суще­ствен­ное улуч­ше­ние поль­зо­ва­тель­ско­го опы­та сла­бо­ви­дя­щих посе­ти­те­лей:

  • мини­ма­ли­стич­ность дизай­на, при отно­си­тель­но про­стой ком­по­зи­ции стра­ниц и нали­чии на них круп­ных эле­мен­тов, раз­де­лен­ных доста­точ­ным коли­че­ством «пусто­го» про­стран­ства;
  • адап­тив­ная верст­ка, эффек­тив­но под­стра­и­ва­ю­ща­я­ся не толь­ко под раз­ные раз­ме­ры экра­нов, но и под сред­ства экран­но­го мас­шта­би­ро­ва­ния и уве­ли­че­ния
  • обес­пе­че­ние соот­вет­ствия фор­маль­ным тре­бо­ва­ни­ям стан­дар­тов доступ­но­сти – в части визу­аль­но­го кон­тра­ста эле­мен­тов, раз­мет­ки стра­ниц, пове­де­ния интер­ак­тив­ных эле­мен­тов;
  • тести­ро­ва­ние и опти­ми­за­ция для про­грамм экран­но­го досту­па (скрин­ри­де­ры);
  • обес­пе­че­ние под­держ­ки нави­га­ции с кла­ви­а­ту­ры;
Процесс разработки дизайна сайта состоял из нескольких итераций
Про­цесс раз­ра­бот­ки дизай­на сай­та состо­ял из несколь­ких ите­ра­ций

Лока­ли­за­ция уси­лий поз­во­ли­ла нам не уто­нуть в подроб­но­стях и вый­ти на гото­вый про­дукт, пока­зав­ший хоро­шие резуль­та­ты в ходе поль­зо­ва­тель­ско­го тести­ро­ва­ния. (На самом деле нико­гда не забу­ду свои чув­ства, когда наш экс­перт заме­тил вскользь «если бы все сай­ты были таки­ми».)

Фор­маль­ные сред­ства тести­ро­ва­ния тоже пока­зы­ва­ли удо­вле­тво­ри­тель­ные резуль­та­ты, и сайт МРООИ «СВЕТ» начал свою онлайн жизнь по адре­су: svettiflo.ru.

Тест на соответствие стандартам доступности - пройден
Тест на соот­вет­ствие стан­дар­там доступ­но­сти – прой­ден

Из-за огра­ни­че­ний, свя­зан­ных с автор­ски­ми пра­ва­ми, доступ к про­смот­ру филь­мов могут полу­чить толь­ко сла­бо­ви­дя­щие поль­зо­ва­те­ли после запро­са учет­ной запи­си у пред­ста­ви­те­лей орга­ни­за­ции. Одна­ко любой посе­ти­тель может позна­ко­мить­ся с дея­тель­но­стью МРООИ «СВЕТ» и ока­зать посиль­ную помощь ее рабо­те.

Первые итоги

Самый важ­ный итог – онлайн-кино­те­атр МРООИ «СВЕТ» рабо­та­ет. На нем появ­ля­ют­ся новые мате­ри­а­лы о жиз­ни орга­ни­за­ции, ее участ­ни­ков, их исто­рии и даже сти­хи. Посту­па­ют и пер­вые запро­сы от людей и орга­ни­за­ций со всей стра­ны на доступ к про­смот­рам филь­мов (ката­лог их посте­пен­но попол­ня­ет­ся).

Главная страница сайта на разных устройствах
Глав­ная стра­ни­ца сай­та на раз­ных устрой­ствах

Как раз­ра­бот­чи­ки мы, без­услов­но, при­об­ре­ли новый опыт. Мы быст­ро разо­бра­лись с клю­че­вы­ми прин­ци­па­ми доступ­но­сти и суме­ли создать ресурс, удоб­ный для поль­зо­ва­те­лей с огра­ни­чен­ны­ми воз­мож­но­стя­ми зре­ния, кото­рым они могут поль­зо­вать­ся само­сто­я­тель­но.

Это зада­ча явля­ет­ся важ­ной, при­том что тре­бо­ва­ния меж­ду­на­род­но­го стан­дар­та доступ­но­сти веб-кон­тен­та WCAG 2.0 не пред­став­ля­ют собой какой-то вир­ту­аль­ный кос­мос. Если закла­ды­вать тре­бо­ва­ния доступ­но­сти на эта­пе про­ек­ти­ро­ва­ния (в мини­маль­но разум­ном объ­е­ме) , мож­но суще­ствен­но улуч­шить удоб­ство любо­го ресур­са (от про­сто­го сай­та-визит­ки до слож­но­го инфор­ма­ци­он­но­го пор­та­ла).

«Побоч­ным» эффек­том тако­го под­хо­да к про­ек­ти­ро­ва­нию явля­ет­ся ситу­а­ция, что при­ня­тые на ран­нем эта­пе реше­ния по обес­пе­че­нию доступ­но­сти дела­ют сайт более про­стым и удоб­ным для любо­го поль­зо­ва­те­ля.

Запуск про­ек­та вызвал инте­рес у дру­гих изда­ний и жур­на­ли­стов, бла­го­да­ря чему инфор­ма­ция о нем ста­но­вит­ся извест­ной все боль­ше­му чис­лу людей.

Мы тро­ну­ты бла­го­дар­но­стью, кото­рую полу­чи­ли от наших побе­ди­те­лей и в част­но­сти от Гали­ны Кузь­ми­нич­ны Журавле­вой, осно­ва­те­ля МРООИ «СВЕТ», кото­рая руко­во­дит ею бес­смен­но в тече­ние 20 лет.

Благодарственное письмо от МРООИ "СВЕТ"
Бла­го­дар­ствен­ное пись­мо от МРООИ «СВЕТ»

Публикации о проекте МРООИ «СВЕТ»

О Конкурсе малых сайтов

Кон­курс малых сай­тов про­грам­ма модер­ни­за­ции сай­тов НКО. В ходе каж­до­го кон­курс­но­го раун­да из посту­пив­ших заявок выби­ра­ют­ся три побе­ди­те­ля, кото­рым созда­ют­ся новые совре­мен­ные сай­ты сила­ми спе­ци­а­ли­стов Теп­ли­цы соци­аль­ных тех­но­ло­гий.

К уча­стию при­гла­ша­ют­ся неком­мер­че­ские орга­ни­за­ции, нефор­маль­ные обще­ствен­ные объ­еди­не­ния и отдель­ные акти­ви­сты. Узнать подроб­но­сти про­грам­мы и при­нять уча­стие мож­но на сай­те кон­кур­са kms.te-st.ru.