[CSS, HTML] Ваше изображение не декоративно (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Размещение изображений на сайте очень важно т.к. это помогает передать смысл страницы. Это значит, что почти каждое изображение, которое вы создаете, должно иметь альтернативное описание.Атрибут alt элемента img может быть "обнулен", что означает установку для него пустой строки вместо текстового описания. Обнуление атрибута alt означает, что между открывающейся и закрывающейся скобочкой нет никакой информации. Если есть пустое место, оно не будет считаться "обнуленным":
<img alt="" src="/images/cat.jpg" />
<!--это изображение обнулено-->
<img alt=" " src="/images/cat.jpg" />
<!--это изображение НЕ обнулено-->
Что значит "декоративное изображение" ?Обнуление изображения значит, что оно предназначено только для декоративных целей и не несет в себе смысловой нагрузки. В этом контексте декоративный означает, что изображение не передает визуальную информацию, которая важна для понимания цели сайта. Например, сайт продающий обои должен сделать альтернативное описание для образцов обоев:
<a href="/products/umbrella?variant=73849024783051">
<img
alt="Small red and white illustrated umbrellas on a teal background."
src="/images/73849024783051.png" />
</a>
Другим примером может служить сайт музея, где для представления произведения может быть полезно добавлять как альтернативное описание, так и подпись:
<figure
role="figure"
aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds.">
<img
alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border."
src="/collection/w0895/2005-1057.png" />
<figcaption>
View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds.
</figcaption>
</figure>
Убедитесь что ваше альтернативное описание включает знаки препинания !Почему вы хотите сделать изображение декоративным ? Старые методы версткиРаньше, методы веб-разработки основывались на изображениях, которые гарантировали что сайт будет выглядеть одинаково в разных операционных системах, браузерах и версиях браузеров. Наиболее распространенным примером этого был spacer.gif, прозрачный пиксель размером 1 × 1, который растягивался чтобы поместить контент в определенное место.
В этом методе используется много изображений с интервалом для создания визуального дизайна. Но, обычно такие изображения затрудняют навигацию и взаимодействие с контентомСтарые методы дизайнаДо того как в CSS появилось свойство box-shadow разработчикам приходилось использовать специальную технику. Эта техника называлась 9-сегментным масштабированием (9-slice scaling),термин, который относится к 9 разделам контента, которые вам необходимо было создать.
Подобно разделительным изображениям, 9-сегментное масштабирование (9-slice scaling) использовало несколько изображений для создания желаемого визуального эффекта. И как и в случае с изображениями-разделителями, единственный способ устранить "беспорядок", создаваемый этими изображениями - это пометить их как декоративные. Лишнее объявление изображенийВ редких случаях изображение повторяется на странице, и эти повторяющиеся изображения, обычно, не несут никакого дополнительного смысла. Вы должны быть осторожны, когда помечаете изображение как декоративное, так как отсутствие альтернативного описания может сбить с толку человека с ослабленным зрением, использующего программу для чтения с экрана. Дополнительные иконкиСсылки и кнопки которые используют иконки должны всегда иметь понятное имя которое говорит о том, что они делают.
<button type="button">
<img src="icon-print.svg" alt="" />
Print
</button>
Если компонент использует только иконку (без текста), тогда её следует использовать для создания понятного имени
<button type="button">
<img src="icon-print.svg" alt="Print." />
</button>
Обратите внимание, что видимый текст предпочтительнее чем иконка. Видимый текст может быть переведен и может более четко передавать цель элемента.Современное использование Современные CSS методы и стили означают что размещение изображения теперь является преднамеренным. Это значит что если вы используете изображение, скорее всего, ему понадобится альтернативное описание.Альтернативное описание должно говорить о цели изображения. Описание включает в себя содержание изображения, но также может включать причину, по которой оно включено в контекст страницы. Другие способы отображения изображений Есть несколько других способов отобразить изображение на странице. Очень важно добавить альтернативное описание, если изображение содержит важный контент.Элемент pictureЭлемент picture не имеет явной роли, это значит что его присутствие не говорит нам о какой-либо цели. Это означает, что его нельзя использовать для семантического описания картинки.
<a href="/product/9091866/color/3">
<picture>
<source
srcset="9091866-3.avif"
type="image/avif" />
<img
alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue."
src="9091866-3.png" />
</picture>
</a>
Фоновое изображениеМы можем использовать CSS для того чтобы сделать изображения в качестве заднего фона для HTML элемента.Однако, другой довольно популярный метод - использовать background-image при размещении изображения таким способом разработчик не может контролировать размер загружаемого изображения. background-image в сочетании с другими свойствами, таким как background-size, гарантирует, что содержимое неизвестного размера будет отображаться без нарушения. Встроенный SVGSVG можно отобразить путем ссылки на него через атрибут src в элементе img, либо путем размещения кода SVG на странице.Если вы используете встроенный SVG, вам следует использовать элемент SVG title (и, возможно, desc)вместо атрибута alt.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Eric Bailey
===========Похожие новости:
- [CSS, HTML] Новые форматы графики в CSS с помощью обновлённой функции image-set (перевод)
- [Веб-дизайн, HTML, Социальные сети и сообщества] Причиной неполадок «Госуслуг» стали новые сервисы
- [Open source, Разработка игр, HTML, Дизайн игр, DIY или Сделай сам] Что случилось с игрой «Колобок» в июне
- [Разработка веб-сайтов, JavaScript, HTML, Angular, ReactJS] Карго-культ HTML в современном фронтенде
- [Обработка изображений, Читальный зал, Научно-популярное, Искусственный интеллект] Наглядно о том, как работает свёрточная нейронная сеть (перевод)
- [HTML, Accessibility] 3 техники с атрибутом aria-label, которые прокачают ваш HTML
- [Программирование, Учебный процесс в IT, Логические игры] 10 игр для программистов, которые позволят улучшить свои навыки (перевод)
- [Разработка веб-сайтов, CSS, HTML] Дизайнерский Multiselect на протеинах
- [Разработка веб-сайтов, HTML, Angular, TypeScript] Bindon: малоизвестные фишки шаблонов Angular
- [Разработка под e-commerce, Управление e-commerce, Управление продуктом, Управление продажами, Социальные сети и сообщества] Facebook создает инструменты поиска товаров по их изображениям
Теги для поиска: #_css, #_html, #_izobrazhenija (изображения), #_html, #_css, #_html
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:58
Часовой пояс: UTC + 5
Автор | Сообщение |
---|---|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
Размещение изображений на сайте очень важно т.к. это помогает передать смысл страницы. Это значит, что почти каждое изображение, которое вы создаете, должно иметь альтернативное описание.Атрибут alt элемента img может быть "обнулен", что означает установку для него пустой строки вместо текстового описания. Обнуление атрибута alt означает, что между открывающейся и закрывающейся скобочкой нет никакой информации. Если есть пустое место, оно не будет считаться "обнуленным": <img alt="" src="/images/cat.jpg" />
<!--это изображение обнулено--> <img alt=" " src="/images/cat.jpg" />
<!--это изображение НЕ обнулено--> <a href="/products/umbrella?variant=73849024783051">
<img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a> <figure
role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure> В этом методе используется много изображений с интервалом для создания визуального дизайна. Но, обычно такие изображения затрудняют навигацию и взаимодействие с контентомСтарые методы дизайнаДо того как в CSS появилось свойство box-shadow разработчикам приходилось использовать специальную технику. Эта техника называлась 9-сегментным масштабированием (9-slice scaling),термин, который относится к 9 разделам контента, которые вам необходимо было создать. Подобно разделительным изображениям, 9-сегментное масштабирование (9-slice scaling) использовало несколько изображений для создания желаемого визуального эффекта. И как и в случае с изображениями-разделителями, единственный способ устранить "беспорядок", создаваемый этими изображениями - это пометить их как декоративные. Лишнее объявление изображенийВ редких случаях изображение повторяется на странице, и эти повторяющиеся изображения, обычно, не несут никакого дополнительного смысла. Вы должны быть осторожны, когда помечаете изображение как декоративное, так как отсутствие альтернативного описания может сбить с толку человека с ослабленным зрением, использующего программу для чтения с экрана. Дополнительные иконкиСсылки и кнопки которые используют иконки должны всегда иметь понятное имя которое говорит о том, что они делают. <button type="button">
<img src="icon-print.svg" alt="" /> </button> <button type="button">
<img src="icon-print.svg" alt="Print." /> </button> <a href="/product/9091866/color/3">
<picture> <source srcset="9091866-3.avif" type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a> =========== Источник: habr.com =========== =========== Автор оригинала: Eric Bailey ===========Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:58
Часовой пояс: UTC + 5