Как добавить тег привязки ‹a› к блоку html?

У меня есть блок HTML, который я хочу использовать как интерактивную ссылку. В приведенном ниже блоке кода я хотел бы превратить весь div в ссылку.

<div id="clickableLink">
    <h3>Link Heading</h3>
    <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>

HTML5 позволяет окружать html тегом привязки (я думаю). См. ниже

<a href="goThere.html">
    <div id="clickableLink">
        <h3>Link Heading</h3>
        <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    </div>
</a>

Однако мне это кажется неправильным. Как программное обеспечение, такое как программы чтения с экрана, будет описывать ссылку.

Я также рассмотрел следующий трюк с CSS. Я изменил HTML на

<div id="clickableLink">
    <h3>Link Heading</h3>
    <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    <a href="goThere.html"></a>
</div>

а затем использовал CSS для стилизации ссылки, чтобы охватить весь div. См. ниже:

#clickableLink {
    position: relative;
    width: 100px;
    height: 200px;
    z-index: 0;
}

h3 {
    z-index: 0;
}

img {
    z-index: 0;
}

a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 200px;
    z-index: 1;
}

Это отлично работает во всех браузерах, кроме IE. Есть ли у кого-нибудь еще какие-нибудь предложения?


html css anchor internet-explorer-8
person fa6le    schedule 09.12.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

То, что позволит более старым браузерам правильно отображать его (и убедиться, что он проверяет), - это использовать встроенные элементы внутри встроенного элемента. Другими словами, элементы уровня блока нельзя помещать внутрь встроенных (в соответствии с HTML, а не значениями, которые CSS может дать элементу). Затем вы можете использовать CSS, чтобы диапазон действовал так, как будто это уровень блока. Таким образом, разметка может быть такой:

<a href="goThere.html">
    <span id="clickableLink">
        <span class="headerthree">Link Heading</span>
        <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    </span>
</a>

Если вы объявите, что A - это уровень блока, тогда вам даже не понадобится span. Проблема здесь в том, что вы теряете SEO при использовании элементов заголовка. Так...

Лучше всего, вероятно, оставить его специфицированным для HTML5, как указано выше, даже если это кажется неправильным. Чтобы помочь SEO и программам чтения с экрана, используйте тег заголовка для «описания» привязки. Код будет проверен нормально. Затем убедитесь, что ваш A - это display: block, и я думаю, что старые браузеры тоже его обработают.

person J. Hogue    schedule 09.12.2010
comment
Спасибо. Задав вопрос, я также нашел этот ресурс: w3. org / TR / 2010 / NOTE-WCAG20-TECHS-20101014 / H2 Здесь демонстрируются передовые методы обеспечения доступности. Он почти идентичен тому, что у вас выше. Все, что вам нужно убедиться, это то, что «Альтернативный текст ссылки» не повторяет заголовок. - person fa6le; 12.01.2011

arrow_upward
1
arrow_downward

Ваш первый подход на самом деле лучший. Чтобы описать вашу ссылку, вы должны использовать атрибуты элемента a, такие как title, alt и, возможно, любую разметку WAI-ARIA, которую вы хотите использовать. В любом случае это хорошая отраслевая практика, позволяющая заключать контент в тег a, не беспокоясь о доступности.

person Phil.Wheeler    schedule 09.12.2010