В « Преступлениях против гипертекста» я обнаружил несколько распространенных примеров плохой гиперссылки. Это вызвало интересную дискуссию, поэтому я решил написать продолжение, добавив еще несколько примеров и некоторые решения.
Последние Разбойники
Первый новичок в галерее нашего мошенника любезно предоставлен нашим языковым редактором Келли. Она была озадачена отдельной связью нескольких смежных слов с одной и той же целью ссылки, а не просто соединением их в одну ссылку. Она назвала это Двойник .
Следующий пришел из Бел , комментатор, который сказал:
Закамуфлированная для засады, эта ссылка выглядит так, как будто она собирается открыть другую веб-страницу, но вместо этого фактически собирается открыть PDF, DOC, адрес электронной почты и т. Д. Всегда, когда вы спешите, быстро просматриваете то, что вы ищете , вы нажимаете одну из них, а затем BAMM — вы застряли в ожидании со связанными руками, пока он запускает ваше клиентское программное обеспечение. О, крики огорчения донеслись из моего угла, когда я в спешке наступил на одну из этих наземных мин с гиперссылкой. «Нееееееееееееееееет!»
Я называю это, Диверсант . Раена, другой технический редактор SitePoint, подумала, что эту игру следует называть The Crying Game . Я оставлю это вам, чтобы обдумать это.
Наконец, от другого комментатора, Wynnefield , это ссылка называется Mime Artist . Это ссылка, которая оставляет вас желающим «Подробнее >>»:
<p>It's often taken for granted but the lack of good
hypertext makes reading a web page a generally
unpleasant experience. There are several essential
hyperlinking techniques you should know.</p>
<p><a href="/">More >></a></p>Художник Mime так назван, потому что он неопределенно указывает в бессмысленном направлении, не дает вам никаких подсказок относительно того, куда он идет, и оставляет вас желающим, чтобы вы могли вернуть свои деньги.
Хорошая практика ссылок
Консенсус относительно хорошей практики связывания заключался в том, что ссылка должна указывать, что пользователь найдет при нажатии на нее. Текст ссылки должен помочь пользователю решить, следует ли ему перейти по ссылке.
Некоторые авторы предложили мне переписать хороший пример, чтобы связать намерение ссылки вместо названия целевого сайта . Итак, вместо этого:
For excellent examples of finely crafted hypertext
look no further than <a href="http://kottke.org/">
kottke.org, the online home of Jason Kottke</a>.
… Я бы переписал ссылку так:
For <a href="http://kottke.org/">excellent examples
of finely crafted hypertext</a> look no further than
kottke.org, the online home of Jason Kottke.
Что имеет смысл для меня.
Это поддерживается Руководством по доступности веб-контента 2.0 , в котором говорится , что назначение ссылки должно быть определено только по ее тексту ссылки или контексту, в котором она размещена. Фактически, руководящие принципы описывают отказ доступности, когда:
… Такие ссылки, как «нажмите здесь» или «еще» [которые] используются в качестве якорных элементов, где вам нужно иметь окружающий текст, чтобы понять их назначение.
Так как же нам избежать таких проблем с доступностью?
Решения
Есть много сторонников использования фразы «щелкни здесь» — тавтологической ссылки — в качестве призыва к действию, чтобы больше читателей нажимали на ссылку. Я понимаю необходимость призыва к действию, поэтому я, скорее всего, изучу альтернативы, прежде чем прибегнуть к «щелкнуть здесь». Например, вы можете увидеть:
To see how you can improve your hypertext
today, <a href="/">click here</a>.
Сначала я хотел бы рассмотреть вопрос об изменении языка следующим образом:
<a href="/">See how you can improve your
hypertext today!</a>
Но если клиент требует указатель «нажмите здесь», я бы предложил:
<a href="/">Click here to see how you can
improve your hypertext today!</a>
Что касается ссылки на Mime Artist, если вам нужно реализовать ссылку, в которой в качестве текста ссылки используется слово «more», рекомендации также предлагают простое решение (это отражено на веб-сайте Max Design и многих других): используйте CSS, чтобы скрыть часть текста ссылки, которую вы хотите оставить невидимой.
Давайте повторно используем некоторые из предыдущей разметки, но добавим span
<p>It's often taken for granted but the lack of good
hypertext makes reading a web page a generally
unpleasant experience. There are several essential
hyperlinking techniques you should know.</p>
<p><a href="/">More<span> about creating quality
hypertext</span></a></p>
Затем вы используете CSS для перемещения текста внутри элемента span Два решения (ссылки выше) используют абсолютное позиционирование для перемещения текста, но делают это немного по-другому. На них стоит посмотреть.
Результатом любого решения является сделать видимым только нужный текст ссылки, в то же время делая расширенный текст ссылки для программ чтения с экрана и поисковых систем.