Я очень надеюсь, что мои ученики
будут проверять свой код. Можно проверить его синтаксис, но также можно проверить и его доступность. Сегодня я покажу вам, как использую
инструмент WAVE для проверки разных сайтов. Я решила найти 10 самых посещаемых сайтов за 2018 год и нашла Google, Википедию, Reddit, Yahoo и Amazon. Давайте проверим, насколько доступны эти сайты. Есть два способа. Первый — зайти на сайт Wave,
т.е. wave.webaim.org. На этом сайте можно вставить адрес
любой страницы, которую вы хотите проверить, и этот способ прекрасно работает. Лично я добавила расширение Wave на свою страницу. Посмотрите сюда: можно загрузить на компьютер расширение, которое выглядит вот так, маленькая буква W. Она немного упрощает жизнь, потому что достаточно просто нажать кнопку,
не заходя на сайт. Давайте проверим несколько сайтов. Начну с Google. Я перешла в Google, теперь нажму
кнопку средства проверки Wave, и расширение проверит сайт на возможные ошибки. В этом случае у нас две ошибки. Обе связаны с пустыми ссылками. Где-то на этой странице есть ссылки, которые непонятно куда ведут. Я пытаюсь найти их, но не получается, потому что Wave проверяет все возможные вариации страницы. Такой код может хорошо смотреться на компьютере, но не всегда будет правильно отображаться на телефонах или планшетах. Google неплохо справился с проверкой. Теперь проверим Википедию. Зашли на Википедию, теперь я запущу Wave. Иногда требуется время, я всегда забываю, что нужно терпение, потому что если два раза подряд нажать кнопку, расширение включится и выключится. Я щелкнула расширение, подожду еще пару секунд. Как видите, разработчики Википедии, как и Google, неплохо справились с обеспечением доступности. Есть одна пустая кнопка и отсутствуют
метки элемента формы. Это означает, что на сайте есть форма, которую нужно заполнить. Однако человек с плохим зрением может не понять, какие данные необходимо ввести. Так что эти кнопки указывают на то, что добавить метку формы было бы прекрасной идеей, чтобы люди понимали, что нужно ввести. Вот эта метка, наверное, «поисковый запрос», а эта синяя кнопка — «нажми меня, чтобы выполнить поиск». Но всего три ошибки — это хорошо. Давайте перейдем на Reddit. Reddit — это очень популярный сайт, здесь, правда многие люди унижают других, чтобы почувствовать себя лучше, но другие действительно ищут информацию. Это очень популярный сайт. Я очень надеюсь, что он еще и доступный. Но посмотрим, что Wave скажет о Reddit. И здесь мы можем видеть, что Reddit...
Ох, на Reddit 73 ошибки. Неудивительно, потому что на этом сайте очень
много пользовательского содержимого. Многие загружают изображения или пишут тексты, не задумываясь о доступности. Они не знают, что, например, нужно добавлять альтернативный текст ко всем изображениям. В противном случае, это сделает их малодоступными. Посмотрите сюда. Именно об этом я и говорю. Здесь нет альтернативного текста. Здесь нет, здесь нет. Очень много таких пропусков. Кроме того, Wave очень рекомендует избегать пустых ссылок. Это ссылки, по которым трудно понять, куда они ведут. Расширение также не любит избыточные ссылки. Это значительно усложняет жизнь людям, которые пользуются только клавиатурой, потому что им приходится переходить по ссылкам много раз,
чтобы получить одну и ту же информацию. К сожалению, Reddit — не очень доступный сайт, но хорош в качестве примера, почему нужно проверять страницы. Теперь я проверю сайт Yahoo, а именно Yahoo Sports. Посмотрим, как сайт проявит себя. В отличие от Reddit, это все-таки коммерческая система профессионального уровня: людям платят за загрузку содержимого. Будем надеяться, что и доступность тут выше. Итак, на сайте Yahoo Sports выявлено 44 ошибки. Давайте посмотрим, с чем они по сути связаны. Они связаны с альтернативным текстом. Это даже странно, если так посмотреть. Как видите, расширение указывает на отсутствие альтернативного текста. Это значит, что здесь, где даны результаты матчей,
не текст, а изображения. Это доставляет массу трудностей. Иногда на экран нужно вывести изображение,
которое предназначено для передачи информации, а не украшения страницы. В таких случаях очень важен альтернативный текст. В противном случае люди с
нарушениями зрения не смогут узнать результаты игр. Итак, напоследок я проверю Amazon. Думаю, я сделаю это прямо на сайте Wave. Я зашла на него, ввела amazon.com, и Amazon неплохо справился с проверкой. Как видите, у них все те же
распространенные проблемы. Все всегда сводится к отсутствию
альтернативного текста, вот здесь. Этому есть несколько причин. На некоторые сайты изображения загружают пользователи. Они не знают об альтернативном тексте, поэтому нам нужно о нем рассказывать. Иногда это связано с тем, что мы пишем
программы, которые обновляют сайты, и, к сожалению, техника не всегда понимает, какой альтернативный текст нужно
добавить к изображениям. К несчастью, бывает так, что некоторые люди знают
про альтернативный текст, но они не думают, что он так уж важен. Поэтому я хочу, чтобы вы добавляли семантические и синтаксические указатели в код — чем больше, тем лучше. Сделайте так, чтобы люди, которые будут его просматривать или слушать, получили максимум пользы от этого.