이미지가 장식적이지 않을 수 있습니다.

img 요소의 alt 속성은 "nulled"일 수 있으며, 이는 텍스트 설명 대신 빈 문자열로 설정하는 행위입니다. 대체 설명을 null로 지정하면 여는 따옴표와 닫는 따옴표 사이에 정보가 없습니다. 빈 공간이 있으면 null로 간주되지 않습니다.

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

"장식"은(는) 무슨 뜻인가요?

이미지를 null로 지정하면 이미지가 장식용임을 나타냅니다.

여기서 장식이란 페이지 또는 보기의 목적과 이미지가 그 일부로 포함된 이유를 이해하는 데 중요한 정보를 이미지가 시각적으로 전달하지 않는다는 것을 의미합니다.

장식이라고 해서 이미지에 장식으로 간주되는 콘텐츠가 포함되어 있다는 의미는 아닙니다.

"

예를 들어, 벽지를 판매하는 웹사이트는 벽지 샘플에 대한 대체 설명을 원할 것입니다.

 <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>

대체 설명에 구두점도 포함되어 있는지 확인하십시오!

이미지를 장식적으로 만들고 싶은 이유는 무엇입니까?

보조 기술은 null 이미지를 건너뛰고 존재를 알리지 않습니다. 이렇게 하려는 이유는 대부분 역사적입니다.

오래된 레이아웃 기법

초기 웹 개발 기술은 다양한 운영 체제, 브라우저 및 브라우저 버전에서 일관된 레이아웃 을 보장하기 위해 이미지에 의존했습니다. 이것의 가장 일반적인 예는 spacer.gif 입니다. 1x1 투명 픽셀은 콘텐츠를 제자리에 밀어넣기 위해 다양한 크기로 늘어납니다.

이 기술은 일반적으로 많은 간격 이미지 를 사용하여 시각적 디자인을 만듭니다. 이러한 이미지는 자신의 존재를 억누를 수 있는 방법이 없으면 보조 기술이 발표한 내용을 어지럽히고 웹 콘텐츠를 탐색하고 조치를 취하는 데 혼란스럽고 시간이 많이 소요됩니다.

오래된 디자인 기법

box-shadow 와 같은 CSS 속성이 있기 전에 개발자는 높이나 너비가 불확실한 콘텐츠와 함께 작동하도록 장식 스타일을 잘게 자르는 기술을 사용해야 했습니다. 이 기술을 9슬라이스 스케일링이라고 하며, 생성해야 하는 콘텐츠의 9개 섹션을 지칭하는 용어입니다.

스페이서 이미지와 마찬가지로 9슬라이스 스케일링은 원하는 시각 효과를 만들기 위해 여러 이미지를 사용했습니다. 그리고 스페이서 이미지와 마찬가지로 이 이미지가 생성된 어수선함을 제거하는 유일한 방법은 이미지를 장식용으로 표시하는 것이었습니다.

중복 공지

페이지 또는 보기에서 이미지가 반복되는 드문 시나리오가 있으며 반복 배치가 추가 컨텍스트를 제공하지 않습니다. 이 상황에서 이미지를 장식으로 표시하는 데 주의해야 합니다. 화면 리더를 사용하는 저시력 사용자에게 가시 이미지에 대한 안내가 없으면 혼동을 줄 수 있기 때문입니다.

추가 아이콘

아이콘을 사용하는 링크와 버튼에는 항상 기능을 전달하는 액세스 가능한 이름이 있어야 합니다. 디자인에 아이콘도 포함되어 있으면 아이콘의 디자인을 전달할 필요가 없습니다.

 <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 요소는 암시적인 역할을 하지 않습니다. 즉, 그림 요소의 존재가 보조 기술에 어떤 목적도 전달하지 않음을 의미합니다. 이것은 "그림"의 존재를 의미론적으로 설명하는 데 사용할 수 없음을 의미합니다.

picture 요소는 source 및 img 요소의 컨테이너입니다. img 요소의 alt 속성을 사용하여 부모 picture 요소에 대한 대체 설명을 제공합니다.

 <a href="/product/9091866/color/3"> <picture> <source 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 와 같은 다른 속성과 결합하여 알 수 없는 크기의 콘텐츠가 디자인을 손상시키지 않고 표시되도록 합니다.

이와 같은 시나리오에서 우리의 오랜 친구 spacer.gif 가 다시 도움이 될 수 있습니다!

인라인 SVG

SVG는 img 요소의 src 속성을 통해 연결하거나 SVG 코드를 페이지 또는 보기에 인라인으로 배치하여 표시할 수 있습니다.

인라인 SVG를 사용하는 경우 alt 속성 대신 SVG의 title (및 잠재적으로 desc ) 요소를 사용해야 합니다.

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

동등한 경험

현대 웹 디자인 및 개발에서 이미지를 표시하는 것은 매우 의도적인 행위입니다. 대체 설명을 통해 이미지의 내용을 설명할 수 있으며, 그렇게 함으로써 이미지를 포함할 가치가 있는 이유를 전달할 수 있습니다 .

이미지가 기발한 것을 표시한다고 해서 설명할 가치가 없다는 의미는 아닙니다. 그 존재를 발표하면 능력이나 상황에 관계없이 누구나 디지털 경험을 완전히 이해할 수 있습니다.

SmashingMag에 대한 추가 정보:

• Chrome DevTools의 접근성
• 접근성 도구에 대한 완전한 가이드
• 가장 중요할 때 사용할 수 있는 이미지
• 접근 가능한 SVG: 스크린 리더 사용자를 위한 완벽한 패턴
• 모션 감도를 위한 모션 감소 설계
• 접근성, 사용성 및 UX에 대한 더 많은 기사를 읽어보십시오.