В первой части этой серии из двух longdesc был рассмотрен атрибут longdesc включая его определение, критику и поддержку, а также отсутствие поддержки браузера. Во второй части давайте теперь обсудим, как реализовать longdesc , некоторые альтернативы и несколько других идей, чтобы предоставить подробное описание изображения.
Реализуя это
Основы
Основы использования longdesc просты. Атрибут добавляется к элементу изображения, а значение является ссылкой на описание.
<code><img src="/images/chart.png" alt="chart" longdesc="description.htm" /></code>
Чтобы упростить этот процесс, появился новый сервис ObjectDescription, который будет бесплатно размещать HTML-страницу с описанием.
Обратите внимание, что поскольку longdesc принимает URI в качестве значения, якорь, такой как #description должен быть допустимым значением так же, как и href="#description" . Однако никогда не вводите текст описания в значение.
Стандартная текстовая ссылка
Другой способ предоставить длинное описание и избежать longdesc поддержкой longdesc — это просто добавить обычную текстовую ссылку сразу после изображения. Текстовая ссылка указывает на внешнее описание, аналогичное longdesc .
<code><img src="/images/chart.png" alt="chart" /> <a href="description.htm">View long description of this chart.</a></code>
Недостатком здесь является то, что текстовая ссылка явно визуально очевидна; это может быть полезно для доступности и удобства использования, но может быть нежелательным по мнению дизайнера и владельца сайта (может считаться отвлекающим). Другая проблема этого метода заключается в том, что он не семантически или программно не связывает описание с изображением (не « программно определяется »). Это огромная дыра в работе с вспомогательными технологиями.
Если вам интересно, D-link — это метод старой школы, где «D» обозначает описание. По сути, это та же методика, что и для стандартной текстовой ссылки, но текст ссылки — это только символ «D», а не более подробный текст, например «Просмотр длинного описания этой диаграммы». Это также можно сделать с помощью связанной ссылки. 1-пиксельное прозрачное изображение с атрибутом alt «D» или «description». Метод D-link больше не рекомендуется.
Ария
Атрибут aria-describedby descriptionby является опцией для определения длинного описания, но, как указано в части 1 , с этим методом возникают проблемы. Чтобы реализовать его, к изображению добавляется атрибут aria-describedby . В качестве значения атрибута задается id контейнера длинного текста описания, что создает связь между описанием и изображением. Это похоже на метод связывания label с элементом формы.
<img src="/images/chart.png" alt="chart" aria-describedby="desc" /> <p id="desc">[content of long description here]</p>
Основной проблемой здесь является то, что текстовое описание должно быть на странице. Чтобы обойти это, нужно заменить контент длинного описания текстовой ссылкой на внешнюю страницу длинного описания, той же ссылкой, которую вы использовали бы в longdesc . Таким образом, содержание длинного описания не требуется на той же странице.
<img src="/images/chart.png" alt="chart" aria-describedby="desc" /> <a id="desc" href="description.htm">View long description of this chart.</a></code>
Гибрид идеален
Гибрид из описанных выше методов представляется идеальным решением, по крайней мере, на данный момент. longdesc атрибут longdesc добавляется стандартная текстовая ссылка и реализуется атрибут aria-describedby longdesc . Итак, давайте возьмем второй пример ARIA выше и добавим longdesc . В результате длинное описание доступно для всех случаев: браузеры, поддерживающие longdesc или нет, технологии, поддерживающие ARIA или нет, слепые или зрячие пользователи, пользователи мыши или клавиатуры и так далее.
<img src="/images/chart.png" alt="chart" aria-describedby="desc" longdesc="description.htm" /> <a id="desc" href="description.htm">View long description of this chart.</a>
Теперь при желании вы можете скрыть ссылку вне страницы от зрячих пользователей с помощью CSS. CSSquirrel делает это для своих комиксов (подробнее в CSSSquirrel’s Alone In The Pitch Black Dark ).
Другие решения
Добавить недостающее поведение в коде
Отличное решение для отсутствия поддержки longdesc в браузерах продемонстрировано в плагине jQuery Accessible Longdesc от Dirk Ginader . (Вы можете найти исходный код Ginader на GitHub .) Сценарий создает визуальную индикацию и ссылку, когда доступен longdesc . При активации он заменяет изображение с длинным описанием; Таким образом, новую страницу или окно не нужно открывать. Затем описание можно закрыть, восстановив изображение. Это легко реализовать, JavaScript ненавязчив и ссылки доступны с клавиатуры; блестящий!
Примечание. Размер снимков экрана был немного изменен в соответствии со статьей.
Используйте CSS вместо изображения
Один из способов избежать проблемы длинного описания — не использовать изображение в первую очередь. Например, если вы планируете отображать графическую диаграмму, можно выбрать разметку таблицы данных или списка определений, а затем использовать технику CSS, чтобы создать стильный вид, близкий к тому, что принесет графика. Легенда CSS Эрик Мейер предоставил образцы этого метода несколько лет назад; посмотрите его замечательные примеры с разметкой таблицы и списком определений .
Визуализировать плагин
В статье « Создание доступных диаграмм из блога Nomensa» Дэн Стрингер объясняет другое решение для диаграмм и графиков, но другой подход. Мы начнем с правильно размеченной таблицы данных, как пример CSS Майера выше, но на этом сходство заканчивается.
Графическая диаграмма создается с помощью умного плагина jQuery jQuery Visualize от Filament Group. Диаграмма построена с использованием HTML5 canvas и предоставляет решение Google / VML в качестве запасного варианта. Теперь у нас есть таблица и график. Сам график недоступен, но таблица есть. Чтобы скрыть таблицу от зрячих пользователей, используется классический метод CSS в сочетании с методом, подобным Modernizr, для отображения таблицы данных, когда JavaScript недоступен (поскольку для создания диаграммы требуется JavaScript). Visualize также вводит пару атрибутов ARIA (role и aria-label), чтобы помочь пользователям программы чтения с экрана определить, что к чему.
Резюме
longdesc изображения longdesc прост в реализации, но не поддерживается longdesc образом. Другие методы, такие как текстовые ссылки и ARIA, могут использоваться для достижения аналогичного результата, но могут не поддерживаться полностью или могут не быть эстетически приятными. Сегодня лучший способ реализовать длинное описание изображения, когда это необходимо, — это использовать гибридную технику с текстовой ссылкой, longdesc и ARIA. Появились другие методы (особенно для диаграмм), но пока W3C, производители браузеров и веб-разработчики не будут хорошо играть вместе, по-прежнему будут существовать фрагментированные и частично поддерживаемые решения, что является потерей для всех.