Современный интернет ушами незрячего – Заголовки (дополнение)27.07.2015 15:34

Предисловие

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

Немного про софт

Один человек в комментариях к моей предыдущей статье интересовался программным обеспечением, которое я использую. Мною используется Win 7 64-bit, Firefox 39 32-bit и Jaws 16 64-bit.

Внимание

В этой статье я использую ссылки на некоторые коммерческие ресурсы, которые я посещал или посещаю. Эти ссылки не являются рекламой услуг и товаров, которые размещены на страницах этих ресурсов. Они мне требуются в качестве хорошего или плохого примера.
Так же, мнение высказанные мною в этой статье об этих ресурсах являются моим личным мнением и не более.

Одни из самых популярных страниц сети

Как известно, самыми посещаемыми страницами являются страницы поисковых систем, Яндекса и Гугла. Начнём изучать отечественный поисковик.

У меня есть ящик на Яндексе, и я им давно пользуюсь, но мы будем рассматривать страницу не авторизованного пользователя. Не авторизованная страница очень проста и довольно удобна с точки зрения незрячего. Все разделы её помещены под заголовки второго уровня, что очень удобно и даёт возможность одним из самых быстрых способов добраться до нужной части страницы. Приведу заголовки с начала до конца страницы: Новости → Курсы ЦБ → тут реклама сервиса Яндекс Музыки → Карта моего города → Погода (Видимо тоже в моём городе) → Афиша → Сервисы → Телепрограмма → Почта. Не понятно только одно, почему же заголовок почты расположен в конце этой цепочки, ведь это один из самых посещаемых сервисов. Единственная и главная часть страницы, куда нельзя быстро по заголовкам добраться — поисковое поле. На странице авторизованного пользователя отличий по навигации нет.

На странице с результатами поиска все десять (если вы авторизованы, можете увеличить их количество на одной странице) ссылок являются заголовками второго уровня, что очень удобно. Никаких больше заголовков на странице нет, то есть спокойно можно перемещаться по результатам поиска, не боясь забрести в какие-нибудь дебри. Печалит только одна вещь, слово «Страницы» никак вообще не выделяется, то есть добраться до него средствами быстрой навигации невозможно, но сами номера страниц являются кнопками, что даёт возможность относительно быстро до них добраться, на этой же странице есть ещё около десятка кнопок.

На главной странице Гугла всё намного скромнее, если вы не авторизованный пользователь, то вам не составит труда добраться до поиска. А если авторизованный, то эта задача станет на несколько ссылок труднее. Заголовков на этой странице нет. На странице результатов поиска всё не так хорошо, как у Яндекса. Помимо десяти ссылок в результатах, что опять же удобно, зачем-то сделана заголовком графика «Google». Ещё есть абсолютно бессмысленный заголовок «Результаты поиска» и более полезный заголовок «Вместе с этим ищут». А вот и печаль, номера страниц являются самыми обыкновенными ссылками. К ссылкам переходить-то можно, но их на странице довольно много, так что это не быстрая навигация.

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

В сутки YouTube посещают миллионы людей. Так почему бы и нам не послушать музыку и не «посмотреть» видео! На самом деле сайт довольно удобно построен. На главной странице (я авторизованный пользователь) нас встречает заголовок второго уровня «Главная», и за ним следом идёт «Подписки», третий уровень. Примечательно, что если нажать на подписки, то мы перейдём именно туда, но вернуться через заголовок «Главная» не сможем, поскольку заголовок второго уровня «Главная» перестал существовать, а на его месте осталась просто ссылка. Нельзя же быть такими безалаберными, товарищи! Следуем дальше. Обращаю ваше внимание, что меню слева мы ещё не миновали, что нам позволяет быстро миновать всю верхушку сайта, перейти к заголовкам и от них стрелочками добраться до этого меню, есть и более быстрые способы добраться до него, но об этом в другой статье… На главной странице идут новые из подписок и популярные видео. Каждый название канала из подписок и каждое название категории популярных видео — это всё заголовки второго уровня. Забыл, тут ещё есть рекомендованные каналы, но их названия тоже являются заголовками такого же уровня, причём вместе с фразой «рекомендованный канал». Под каждым из этих заголовков второго уровня есть эскиз видео, его название и дата добавления. Каждое название видео в свою очередь является заголовком третьего уровня.

Тут нужно пояснить, что Jaws позволяет переходить ни только по всем заголовкам на странице, но и по заголовкам нужного уровня, от первого до шестого (наличие такой возможности не проверялось мною в NVDA). Таким образом, получается возможность молниеносной навигации по всем видео на странице! Быстро шагаем по заголовкам второго уровня, выбираем канал, затем сразу от названия канала шагаем по третьему уровню, просматриваем названия видео. К сожалению, листая заголовки третьего уровня, невозможно понять к какому они каналу относятся. Я думаю, что про YouTube достаточно.

Лирическое отступление

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

Торговля через интернет и её доступность

В этой части статьи мы не будем рассматривать магазины специализированных товаров, поскольку там и так всё понятно, они имеют относительно высокую доступность, в них используется минимальное количество графических элементов и максимум текстовой информации. Вот интересные у нас люди (или безалаберные), знали ведь для кого делали сайты, но ни одного элемента aria не использовали. Мы быстренько пробежимся по двум интересным, но не без странностей примерам.

Есть очень хороший магазин, работающий по всей России. Большинство системных администраторов и железячников знают о нём — это НИКС. Сайт этого магазина является очень качественным и подробным справочником по комплектующим и электронике. Огромный прайс-лист и детальная проработка фильтров и системы поиска — всё это очень облегчает поиск необходимых комплектующих. Этот пример один из важнейших, поскольку при таком размере прайс-листа, заголовки просто необходимы. На этой странице экранный диктор насчитал сто семьдесят пять заголовков и девятьсот ссылок. Количество ссылок немного варьируется, но никогда не бывает ниже восьмисот. Как видите, здесь огромное количество категорий товаров, на линейное пролистывание этой страницы может уходить до десяти минут, если спешить, а если не спешить, то до двадцати. Как видите, очень огромная разница в количестве ссылок и заголовков, и эта разница очень сильно сказывается на время поиска нужной категории товаров при использовании средств быстрой навигации. Но у этого же магазина есть огромная оплошность с точки зрения удобства. С московским прайс-листом всё в полном порядке, а вот с региональными полная засада! Вот, например, сайт НИКСа в моём городе. Нас сразу выкидывает на прайс-лист с местными ценами и тут заголовки отсутствуют напрочь! Вернее, есть два штуки «В этом магазине работают сертифицированные специалисты по продукции Apple», ведь мне ни холодно, ни жарко от этого заголовка, а второй с адресом магазина в городе. А на странице семьсот двенадцать ссылок. Ещё одной проблемой являются дефисы, стоящие перед всеми подкатегориями товаров. Давайте грубо округлим и посчитаем. Допустим в прайс-листе с этими дефисами всего пятьсот ссылок, но на каждый дефис тоже приходится одно нажатие клавиши. Таким образом 500 (ссылки) + 500 (дефисы) = 1000 (нажатие клавиш). Не весёлая арифметика. Вот от таких, вроде бы очень информативных и полезных сайтов, бежать хочется.

Второй пример. Магазин DNS является довольно новой сетью, для меня он стал известен только в 2012 году. Сразу скажу, что прайс-лист тут тоже без заголовков, но сюда мы заглянем на страницу с каким-нибудь товаром. Товар выбран абсолютно случайно, он был на главной странице, и я просто перешёл на страницу описания этого товара. Нас интересует именно страница описания товара, они все однотипны. Для примера привожу эту страницу. Очень удобным является заголовок с названием и кратким описанием товара, он находится над ценой и картинкой, этот заголовок позволяет очень быстро миновать всю бесполезную в данном случае верхушку сайта. Следующий заголовок (очень неплохой рекламный ход) «Сопутствующие товары», позволяет быстро перейти к чехлам, флешкам и прочей дребедени, которая может понадобится человеку при эксплуатации этой техники. Далее «Отзывы», вместе с числом отзывов, что даёт представление о наличии оных сразу, без каких-либо телодвижений. Ещё один полезный заголовок — «Вопрос — Ответ». Печально, что нельзя быстро перейти к характеристикам, но при нажатии на ссылку «Характеристики», которая находится рядом с ссылками «Описание» и «Отзывы», открывается страничка с характеристиками, причём вся страница не перезагружается. Текстовое описание товара может увеличится, и чтобы его миновать прямо с той ссылки можно перейти к заголовку «Характеристики». Вот такие, довольно удобные цепочки навигации на этой странице.

В качестве заключения

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

Примечание

Термин «цепочки навигации» взят из программы «Total Commander». Этот термин наиболее точно характеризует схему взаимодействия пользователей, использующих экранный диктор, с веб-страницами.

© Habrahabr.ru