Содержание
С древних времен для указания дополнительной информации в печатном тексте использовались довольно неуклюжие приемы, вроде сносок, приложений и заметок на полях. Но гипертекст обладает одной замечательной особенностью — это особенность соединять воедино разрозненное содержимое нелинейно, но очень информативно.
Вот почему на наши хрупкие плечи ложится бремя обеспечения такого взаимодействия между ссылками, которое будет понятно пользователям любого уровня. К сожалению, это немного сложнее, чем простой отказ от использования фраз типа “нажмите здесь”.
Давайте разберемся, что для этого нужно.
Итак, как выглядит хороший текст со ссылками?
Согласно текущим Рекомендациям по Доступности Веб-Контента от W3C — подчеркивание задает общий контекст ссылкам, а небольшой акцент позволяет сделать ссылку понятной людям с ограниченными возможностями.
Я считаю такой подход неверным.
Приложения для чтения экрана предлагают весьма ограниченный набор способов интерпретации страниц. Один из распространенных методов — генерация списка ссылок (вне контекста) для определения содержания страницы. Пользователи экранных дикторов также зачастую сканируют страницу просто переходя от ссылки к ссылке, не читая текста между ними.
При большом количестве ссылок вида “Нажмите чтобы скачать годовой отчет” или “Подробнее о лодках” такие подходы абсолютно бесполезны.
Текстовые ссылки также становятся серьезной проблемой, когда речь заходит о мобильных сайтах или сайтах для планшетов.
Два наиболее известных набора правил обеспечения доступности мобильных приложений — Лучшие практики для обеспечения доступности мобильных приложений от W3C и Указания по обеспечению доступности мобильных приложений от BBC — предлагают четкие правила идентификации и описания формирования ссылок.
Во время тестирования сайтов все ссылки типа “кликните здесь”, я помечаю как неудачные. Конечно, и по таким ссылкам можно пройти с помощью клавиатуры, но сам текст подразумевает, что вам нужна мышь, чтобы нажать на неё. Это недостаток.
Конечно, не стоит утверждать, что ссылки типа “здесь” или “больше” вообще неверны согласно WCAG2.
Так что представлю вашему вниманию список из 15 пунктов, которых стоит придерживаться при задании ссылок на веб-страницах.
Правило 1: не используйте слово «ссылка»
Это самое простое правило. Экранные дикторы сообщают пользователю, когда они натыкаются на ссылку в тексте, так что вам не обязательно указывать фразы типа “ссылка”, “ссылка на” или “ведет к”.
Правило 2: не переводите ссылки в верхний регистр
С ссылками в верхнем регистре две проблемы.
Во-первых, некоторые программы чтения с экрана читают слова в верхнем регистре побуквенно. Это даже иногда происходит, когда сам HTML-текст находится в нормальном регистре, а перевод в верхний регистр осуществляется с помощью CSS.
Вторая проблема состоит в том, что буквы в верхнем регистре тяжелее читать (всем, но в особенности людям с ограниченными возможностями).
Текст в верхнем регистре — это один сплошной прямоугольник, при беглом взгляде в нем не различаются перепады, характерные для обычного текста.
Взгляните на следующий пример:
ТЕКСТ В ВЕРХНЕМ РЕГИСТРЕ ТЯЖЕЛЕЕ ЧИТАТЬ. ОН — ОДИН СПЛОШНОЙ ПРЯМОУГОЛЬНИК
Текст в верхнем регистре тяжелее читать. Он — один сплошной прямоугольник
Главное правило, применяемое к чтению: если текст тяжело читать обычному человеку, то для человека с нарушениями восприятия это практически невозможно.
И кому нравится кричать на свою публику?
Правило 3: избегайте использования символов ASCII
В разделе 1.1.1. Критериев успеха: не-текстовое содержимое должно предоставлять текстовые альтернативы для символов ASCII.
Особое правило H86: для ASCII-картинок, смайликов и транслита говорит о том, что на странице должны быть представлены текстовые альтернативы для таких вещей, как смайлики.
Они рекомендуют использовать атрибут TITLE, несмотря на то, что он не очень хорошо поддерживается, или элементы ABBR и ACRONYM.
Как бы то ни было, если вам действительно необходимо использовать смайлики, то как минимум пометьте их каким-нибудь ARIA-атрибутом:
<span class="sr-only">Smiley face</span> <span aria-hidden="true">:-)</span>
Давайте посмотрим на пример с длинными тире: следующий текст ссылок может быть понятен обычному пользователю, но для пользователя экранных дикторов это совершенно другая история:
Некоторые программы чтения с экрана прочтут этот пример как “ссылка один шесть один семь лет конец ссылки”.
Намного проще заменить длинное тире на слово “по”. В этом случае экранный диктор прочтет это как “ссылка шестнадцать по семнадцать лет конец ссылки”. Намного понятнее, не так ли?
Правило 4: избегайте использования URL в качестве текста ссылки
Когда мы видим ссылку “www.londontoylibrary.co.uk”, мы хорошо различаем части ‘london’, ‘toy’ и ‘library’, но экранные дикторы прочтут ее как “дубль-ве, дубль-ве, дубль-ве, точка, эл-о-эн-дэ…”
Как вы можете представить, это перестает восприниматься на слух после 4-5 букв.
Так что всегда используйте понятный текст, например “Библиотека Игрушек Лондона”. Если вам действительно нужно вставить URL в текст — например, если вы предполагаете, что текст будет печататься, — добавьте URL в стилях для печати с помощью CSS:
@media print{
a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
}
Правило 5: текст ссылок должен быть кратким
Хорошая идея — ограничить длину текста ссылки максимум 100 символами.
У экранных дикторов есть довольно большое количество возможностей, позволяющих пользователям перейти к следующему слову, следующему предложению, следующему параграфу или заголовку, но они должны будут прочесть текст ссылки полностью.
Можно представить, что если вы превратите весь параграф в ссылку (что наблюдается с распространением блочных ссылок в HTML5), то вся ссылка будет прочтена экранным диктором.
Можете представить, насколько это утомительно.
Правило 6: ограничьте количество текстовых ссылок на странице
Это важно, так как пользователи видят ссылки как некую форму навигации: если они находятся не на той странице, что им нужна, они будут искать ссылки, которые приведут их туда, куда им нужно.
Если на странице большое количество ссылок — становится тяжелее передвигаться по сайту.
И, конечно же, пользователи экранных дикторов могут выбрать все ссылки на странице, а если на странице сотни ссылок — их чтение становится ужасно неудобным.
Хорошо, сколько же ссылок — это “слишком много”? Это вопрос того, насколько длинные строки используются в ссылках, и зависит от типа информации, предоставляемой вашим сайтом.
Что насчет тех областей, где дополнительный текст ссылки или контекстная информация имеют важное значение?
Есть три ключевых области, где дополнительный текст ссылки или контекстная информация являются обязательными:
- ссылки на загрузки
- ссылки, открываемые в новом окне
- нумерация страниц / алфавитный указатель
Рассмотрим их по отдельности.
Правило 7: не давайте прямые ссылки на загрузки
При тестировании юзабилити я был свидетелем одной общей проблемы: люди ненавидят загрузки. И чего они не любят в особенности — это когда при переходе по ссылке начинается загрузка, а ты этого не ожидаешь.
Но если для обычных пользователей это всего-лишь небольшое неудобство, то для людей с ограниченными возможностями это становится серьезной проблемой. Важно явно указать, что ссылка ведет на загрузку файла.
Если вы используете иконки вместо текста, всегда задавайте значения соответствующим ALT атрибутам.
Так же в своей практике я часто наблюдал следующую картину: использование иконки для ссылки на загрузку посредством CSS. Запомните, что такая информация зачастую не видна через экранные дикторы — они не обрабатывают изображения, заданные в CSS. Так что никогда не встраивайте критичную информацию через CSS.
Я всегда рекомендую указывать немного больше информации, кроме простого указания типа загружаемого файла — например, также хорошо указывать размер загружаемого файла.
И еще не так страшно, если у вас всего один загружаемый файл. Но если файлов для загрузки много?
WCAG2 предлагает что-то подобное (в качестве примера задан заголовок “Годовой отчет по услугам для людей с ограниченными возможностями”)
Или даже что-то подобное (где первый столбец и первая строка представлены табличными заголовками <th>)
Или комбинацией этих двух примеров (текстовый и табличный заголовки)
Намного чище, понятнее и намного более доступно.
Правило 8: всегда сообщайте пользователю об открытии новых окон
Важно предупреждать пользователей с ограниченными возможностями о том, что открывается новое окно.
Наилучший способ указать, что ссылка будет открыта в новом окне — добавить текст рядом со ссылкой вроде “(будет открыто в новом окне)”.
вы также можете добавить иконку с соответствующим ALT-атрибутом, но вы также должны объяснить значение такой иконки где-нибудь на странице, как это сделано на сайте FRIENDS Life (хотя и их сайт безнадежно устарел в плане доступности информации для людей с ограниченными возможностями).
Если же вам просто необходимо использовать специализированный символ для того, чтобы пометить ссылку, как открывающуюся в новом окне, я рекомендую использовать значок «Внешняя ссылка« из иконочного шрифта Font Awesome.
HTML код для этого:
<a href="http://www.google.com/" target="_blank">Google <span class="sr-only">Открывается в новом окне</span> <i aria-hidden="true" class="fa fa-edit fa-external-link"></i> </a>
а CSS-код:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
Результат будет примерно таким:
Всегда добавляйте иконку после текста ссылки. Иначе экранные дикторы, которые выбирают все ссылки со страницы прочитают сначала “открывается в новом окне” вместо значимого текста ссылки.
Правило 9: избегайте пагинации и алфавитных указателей
Для обычного человека список нумерованных ссылок под результатами поиска означает “перейти к такой-то странице”, но мое тестирование показало, что люди с нарушениями не знают, что эти ссылки означают.
Чтобы сделать такие ссылки доступными для людей с нарушениями, просто добавьте какую-нибудь вспомогательную информацию перед списком ссылок, вроде “Перейти к странице 1, 2 … и т.д.”.
Если это какой-нибудь список ссылок алфавитного указателя, добавьте ему какой-нибудь объясняющий заголовок:
Пользовательские программы и вспомогательные технологии хорошо разбирают смежные ссылки, так что нет необходимости в разделительных вертикальных чертах, как в примере выше.
Но в любом случае важно, чтобы смежные ссылки были разделены дополнительным пространством.
Устройства на базе Android увеличивают масштаб при нажатии на область, в которую попадает несколько ссылок, чего нельзя сказать об устройствах Apple и Windows.
Я рекомендую использовать свойство border в CSS вокруг ссылок для того, чтобы они выглядели более похожими на кнопки. Это позволяет сделать все пространство внутри границ кликабельным, и этого можно добиться простым добавлением кода:
border: 1px solid black;
Также я часто вижу использование выделения цветом текущих страниц в пагинации или алфавитных указателях, вроде:
Это нарушает пункт Критериев успеха 1.4.1 Использование цвета: «Цвет не должен использоваться в качестве единственного средства передачи информации, реакции на действие или визуального выделения элемента»
Наилучший способ — указать номер текущей страницы простым текстом, а остальные номера страниц — ссылками.
И позаботьтесь о том, чтобы ссылки были подчеркнуты! Таким образом ссылки будут дополнительно выделены визуально (не полагаясь только на цвет), и программно.
Другая проблема с пагинацией и алфавитными указателями состоит в том, что они предоставляют довольно небольшую по площади цель. Это не является проблемой для пользователей, которые используют клавиатуру, но пользователи, использующие другие устройства ввода (мышь, джойстик, сенсорные панели), могут столкнуться с тем, что им будет тяжело попасть в такую маленькую цель.
Хорошо было бы увеличить размер ссылок с одним символом (цифры/буквы) по отношению к окружающему тексту. Также разумно увеличить поля вокруг ссылки, чтобы увеличить кликабельную площадь:
padding-left: 1em; padding-right: 1em;
Если объединить эти техники получим:
span.pag a {
padding: 1em;
border: 1px solid black;
margin: 0.5em;
background: #ffffc3;
color: black;
}
span.current-page {
padding: 1em;
border: 1px solid black;
margin: 0.5em;
background: black;
color: white;
}
И HTML-код для представленного примера следующий:
<span class="pag"> <a href="http://www.one.com">1</a> <a href="http://www.two.com">2</a> <a href="http://www.three.com">3</a> <span class="current-page">4</span> <a href="http://www.five.com">5</a> <a href="http://www.six.com">6</a> </span>
И мы получим следующие ссылки пагинации:
Разумеется, вы можете изменить представленный код по своему усмотрению, и немного его приукрасить.
Правило 10: будьте внимательны при использовании ссылок-якорей
К ссылкам-якорям нужно относиться очень внимательно.
Я видел немало пользователей, просматривающих большие страницы, которые, нажимая на ссылки-якоря ожидали, что они перейдут на другую страницу. Зачастую они не замечают того, что они просто перемещаются вверх или вниз по странице.
Запомните: если что-то неудобно для обычного пользователя, то для пользователя с нарушениями это будет серьезной проблемой.
Экранные дикторы обычно подсказывают, что ссылка является якорем, добавляя фразу “внутристраничная ссылка”, что, по крайней мере, предоставляет хоть какую-то обратную связь при клике на такие ссылки. Но люди с нарушением зрения, которые используют экранную лупу и люди с нарушениями восприятия могут вообще не понять, что они активировали ссылку-якорь.
Я рекомендую использовать стандартную предшествующую фразу для того, чтобы указать, что данная ссылка является якорем, например “На этой странице”, “Перейти ниже”, или “На этой странице есть следующее содержимое”
Правило 11: ссылки надо подчеркивать
Люди ожидают, что ссылка будет подчеркнута.
Когда они видят подчеркнутый текст, то волей неволей ожидают, что встретили ссылку (вот почему никогда не надо подчеркивать текст на странице, если это не ссылка).
WCAG2 рекомендует подчеркивать текстовые ссылки, но также позволяет разработчикам использовать и другие способы выделения — контрастность 3:1 по отношению к окружающему тексту, дополнительные визуальные выделения ссылок в фокусе, если для выделения используется только цвет.
Необходимо, чтобы ваши ссылки хорошо контрастировали с окружающим текстом (у W3C есть список цветов ссылок, которые хорошо контрастируют с черным текстом и белым фоном), а также чтобы у ссылки было дополнительное визуальное отличие, когда на нее наведен курсор или она выделена с помощью клавиатуры.
Визуальным отличием может служить подчеркивание, выделение жирным или курсивом, увеличение размера шрифта, это может быть добавление дополнительного символа или изображения. Это может быть реализовано и средствами CSS.
Но не забудьте добавить стили для a:focus и a:hover !
Правило 12: не упускайте из виду пользователей, которые могут пользоваться только клавиатурой
Дополнительная информация, представляемая в атрибуте TITLE ссылки не доступна для клавиатурных пользователей (для них она просто не отображается).
Другая проблема при использовании клавиатуры состоит в возможном отсутствии индикатора фокуса элемента, что зачастую делает практически невозможным использование сайта «клавиатурными пользователями».
Единственная возможность дать знать клавиатурному пользователю о том, что выбран какой-либо элемент навигации — задать элементам индикатор фокуса. Как видно на следующем скриншоте, элемент с индикатором фокуса отличается по цвету от окружающего контента, а также окружен точечной границей.
Я всегда рекомендую — если элемент меняет свой вид при наведении курсора, то же должно происходить при фокусировке с помощью клавиатуры. Почти во всех случаях вам надо добавить селектор a:focus в те места, где у вас заданы стили для a:hover.
Скриптовые ссылки
Использование скриптовых JavaScript событий для эмуляции ссылок напрочь отвергается WCAG2.
Все ссылки должны создаваться с использованием A HREF или AREA. Использование событий onclick на случайных элементах типа SPAN, IMG или DIV не дозволяется.
Отрицательные значения TABINDEX
Отрицательные значения TABINDEX, которые были введены в HTML5
Правило 13: будьте внимательны при использовании изображений в качестве ссылок
Для изображений-ссылок есть особые требования. Атрибут ALT в этом случае действует как текст ссылки. Как упоминалось ранее, вам не нужно добавлять слово “ссылка”, и вам также не нужно добавлять слово “графическая” или “изображение”, так как экранные дикторы подсказывают своим пользователям, что перед ними изображение.
Вам нужно быть внимательными при создании ALT-атрибутов для изображений-ссылок, так как к ALT-атрибутам есть два требования: они должны описывать изображение, и они должны говорить пользователю, что произойдет, когда пользователь активирует ссылку.
Для изображения-кнопки, текст ALT типа “Искать”, “Найти” или “Отправить” достаточен, но избегайте использовать слово “Вперед”, так как я встречал пользователей, которые не понимают такую терминологию (они спрашивают “Вперед — куда?”).
Если у вас есть изображение-ссылка сразу за обычной текстовой ссылкой, и если они ведут на один и тот же URL, то в большинстве случаев у такого изображения должен быть пустой атрибут ALT. Это требование Техники H2: Комбинирование смежных текстовых и графических ссылок на один ресурс.
Еще одно требование — одна ссылка должна оборачивать текст и изображение. К счастью, сейчас это можно сделать, так как HTML5 позволяет использовать тег <a> как блочный элемент.
Есть лишь одно исключение из этого правила — когда изображение передает дополнительную важную информацию, не представленную в тексте ссылки
Как не надо делать с изображениями-ссылками
Код для этой комбинации изображения/ссылки настолько ужасен, что я просто не могу не привести его в качестве плохого примера:
<div class="list-preview-item-wide"> <a onclick="(new Image()).src='/rg/list-user-wide/list-image/images/b.gif?link=%2Flist%2Fgm7xsjP4vD8%2F';" href="/list/gm7xsjP4vD8/"><img alt="image of title" title="image of title" src="http://ia.media-imdb.com/images/M/MV5BMTIxMjc4NTA2Nl5BMl5BanBnXkFtZTYwNTU2MzU5._V1._SX86_CR0,0,86,86_.jpg" class="loadlate" width="86" height="86"/> <noscript><img height="86" width="86" alt="image of title" title="image of title" src="http://ia.media-imdb.com/images/M/MV5BMTIxMjc4NTA2Nl5BMl5BanBnXkFtZTYwNTU2MzU5._V1._SX86_CR0,0,86,86_.jpg" class="" /></noscript> </a></div> <div class="list_name"><b><a onclick="(new Image()).src='/rg/list-user-wide/list-title/images/b.gif?link=%2Flist%2Fgm7xsjP4vD8%2F';" href="/list/gm7xsjP4vD8/">Top TV Series of the Past 20 Years</a></b></div>
Этот код содержит длинный ряд встроенного JavaScript, который может быть легко заменен на HTML-код. Также здесь представлен умопомрачительно бесполезный ALT-атрибут, который читается как “изображение заголовка” (“image of title”). И, чтобы окончательно добить, они добавили текст “image of title” и в атрибут TITLE!
В предыдущем примере изображение и текст “Top TV series of the Past 20 years” ведут на одну и ту же страницу, так что они должны были быть обернуты в одну ссылку.
Однако, изображение обложки сериала “Клан Сопрано” предоставляет нам какую-то важную информацию: сериал “Клан Сопрано” находится в топ-20 сериалов. В таком случае изображению должен был быть назначен ALT-атрибут с текстом «Клан Сопрано».
Код по правилам (без JavaScript):
<a href="/list/gm7xsjP4vD8/"> <span class="list-preview-item-wide"> <img alt="The Sopranos" src="http://ia.media-imdb.com/images/M/MV5BMTIxMjc4NTA2Nl5BMl5BanBnXkFtZTYwNTU2MzU5._V1._SX86_CR0,0,86,86_.jpg" class="loadlate" width="86" height="86"/> </span> <span class="list_name"><b>Top TV Series of the Past 20 Years</b></span></a>
Правило 14: избавьтесь от битых или пустых ссылок
Многие пользуются специальными утилитами для поиска битых ссылок.
Но почти на каждом сайте, которые я тестирую, часто вижу такие примеры:
<a href='someplace.html'></a>
Я могу только догадываться, что они вставляются из-за глюков каких-нибудь Систем Управления Контентом (CMS).
Люди с ограниченными возможностями расценят эту ссылку как “ссылка конец ссылки”, и им остается только гадать — а не пропустили ли они что-то важное? Либо они предполагают, что это было изображение с пустым атрибутом ALT.
В любом случае, это очень раздражает.
Правило 15: Используйте одни и те же стили
Единые стили — это очень хорошая практика. Она позволяет вашим пользователям быстро ориентироваться.
Все на вашем сайте должно быть согласованным: заголовки, метки, кнопки и т.д. Ваши ссылки не являются исключением из правил.
Это особенно важно если, несмотря на мои советы, вы решили не использовать подчеркивание ссылок.
Ваши пользователи будут просматривать сайт и определять, каким образом вы отображаете текстовые ссылки, так что убедитесь, что все они исполнены в одном и том же стиле. Не используйте один цвет для выделения ссылок на одной странице, и другой цвет для ссылок на другой странице.
Правило 16: Проверьте ваш цветовой контраст
Необходимо убедиться в том, что цвет ваших ссылок достаточно контрастирует с цветом фона. Это необходимо независимо оттого, подчеркнуты ли ваши ссылки или нет.
Если вы меняете цвет ссылки при наведении курсора и при клавиатурном фокусе, необходимо убедиться, что новый цвет тоже соответствует требованиям цветового контраста.
Существует ряд онлайн-инструментов для для тестирования цветового контраста:
- Check My Colors (checkmycolours.com)
- Luminosity Colour Contrast Ratio Analyser (juicystudio.com)Источник урока: http://www.sitepoint.com/15-rules-making-accessible-links/
