이미지

액세스할 수 있는 이미지는 언뜻 보기에는 단순한 주제처럼 보일 수 있습니다. '대체 텍스트' 이미지를 추가하면 됩니다. 하지만 이 주제는 좀 더 미묘하고 더 치열해집니다. 이 섹션에서는 다음에 대해 알아봅니다.

• 이미지에 액세스할 수 있도록 코드를 업데이트하는 방법
• 사용자와 공유해야 하는 정보 및 공유 위치
• 장애인을 지원하기 위해 이미지를 개선하는 다양한 방법

이미지의 용도 및 컨텍스트

코드를 한 줄도 작성하기 전에 먼저 이미지 및 이미지가 사용되는 방식을 설명합니다. 스스로에게 질문하기 이미지의 목적과 맥락이 있다면 이미지를 가장 효과적으로 전달하는 방법을 개인 정보를 보조 기술 (AT) 사용할 수 있습니다

다음과 같이 자문해 볼 수 있습니다.

• 이미지가 기능 또는 페이지의 맥락을 이해하는 데 필수적인가요?
• 이미지가 전달하려는 정보 유형은 무엇인가요?
• 이미지가 단순하거나 복잡한가요?
• 이미지가 감정을 유발하거나 사용자의 행동을 유도하나요?
• 아니면 이미지가 단순히 시각적으로 '캔디'인지 어떻게 해야 할까요?

다음과 같은 시각적 플로우 차트 이미지 결정 트리, 이미지가 속한 카테고리를 결정하는 데 도움이 됩니다.

브라우저 확장 프로그램을 사용하여 사이트나 웹 앱의 이미지를 숨겨 보세요. 사용할 수 있습니다. 그런 다음, '콘텐츠를 내가 이해할 수 있는가?'라고 자문해 보세요. 그렇다면 장식 이미지일 가능성이 높습니다. 그렇지 않은 경우 이미지 대신 어떤 식으로든 상황에 따라 필요한 정보를 제공하는 것입니다. 생성한 후에는 이미지의 용도를 결정하면 가장 정확한 코딩 방법을 결정할 수 있습니다 압니다.

장식 이미지

장식 이미지는 콘텐츠에 추가적인 맥락이나 정보를 추가하지 않고 사용자가 맥락을 더 잘 이해할 수 있습니다. 장식 이미지는 보완적인 역할을 함 본질보다는 스타일을 더할 수 있습니다.

장식용 이미지를 사용하는 경우 이미지를 프로그래매틱 방식으로 숨겨야 합니다. AT에서 들었습니다. 이미지를 숨기도록 프로그래밍하면 AT에 이미지는 페이지의 콘텐츠, 맥락 또는 작업을 이해하는 데 필요하지 않습니다. 거기 이미지를 숨기는 다양한 방법(예: 빈/null 텍스트 대체 텍스트 사용, ARIA 적용 CSS 배경으로 이미지를 추가하는 것입니다. 다음은 장식 이미지를 만듭니다.

비어 있거나 null인 alt

비어 있거나 null인 대체 텍스트 속성이 누락된 대체 텍스트 속성과 다름 text 속성입니다. 대체 텍스트 속성이 누락된 경우 AT는 파일 이름이나 주변 콘텐츠를 언급하여 사용자에게 추가 정보를 제공합니다. 자세히 알아볼 수 있습니다

역할이 presentation 또는 none(으)로 설정됨

presentation 또는 none(으)로 설정된 역할 접근성에 노출되지 않도록 요소의 의미 체계를 제거합니다. 있습니다. 그동안 aria-hidden= "true" 는 접근성 API입니다.

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

aria-hidden를 사용하면 요소가 숨겨질 수 있으므로 주의해서 사용하세요. 숨기고 싶지 않습니다.

CSS의 이미지

CSS로 배경 이미지를 추가할 때 스크린 리더는 합니다. 이 방법을 적용하기 전에 이미지를 숨기려고 하는지 확인하세요.

정보성 이미지

정보 제공 이미지는 간단한 개념, 아이디어, 감정을 전달하는 이미지입니다. 유익한 이미지에는 실제 사물의 사진, 필수 아이콘, 간단한 그림, 텍스트 이미지가 포함됩니다.

이미지가 정보를 제공하는 경우 이미지의 목적을 설명하는 프로그래매틱 대체 텍스트를 포함해야 합니다. 대체 이미지 설명(약칭 '대체 텍스트'라고도 함)은 AT 사용자에게 이미지에 관한 더 많은 컨텍스트를 제공하고 이미지의 메시지나 의도를 더 잘 이해하는 데 도움이 됩니다.

간단한 대체 설명: <img> 요소 파일 형식과 관계없이 alt 속성을 포함하면 됩니다. (예: .jpg, .png, .svg 등)을 가리킵니다.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

그러나 <svg> 요소를 인라인으로 사용하는 경우 접근성에 주의해야 합니다.

첫째, SVG는 의미론적으로 코딩되므로 AT는 기본적으로 이를 건너뜁니다. 장식 이미지가 있는 경우에는 문제가 되지 않습니다. AT는 사용할 수 있습니다 하지만 정보성 이미지가 있다면 ARIA role="img" AT에서 이미지로 인식하려면 패턴에 를 추가해야 합니다.

둘째, <svg> 요소는 alt 속성을 사용하지 않으므로 서로 다른 코딩 방법을 대신 을 사용합니다.

  <svg role="img"...>
     <title>Cartoon drawing of a red, black, and gray ladybug.</title>
  </svg>

기능 이미지

기능 이미지는 확인할 수 있습니다. 기능적인 이미지의 예로는 홈페이지, 검색 버튼으로 사용되는 돋보기 또는 소셜 미디어 다른 웹사이트 또는 앱으로 연결됩니다.

정보성 이미지와 마찬가지로 기능 이미지에는 대체 텍스트 변환 이미지가 포함되어야 합니다. 모든 사용자에게 용도를 알려야 합니다. 정보 제공 이미지와 달리 각 기능 이미지는 이미지의 동작을 설명해야 하며 볼 수 있습니다.

로고 예시에서 이미지는 정보를 전달하고 링크처럼 작동하는 이미지입니다. 이와 같은 경우 각 요소에 대해 대체 설명을 추가할 수 있지만 요구사항을 충족해야 합니다

이미지에 대체 설명을 추가하는 한 가지 방법은 시각적으로 숨기는 것입니다. 있습니다. 이 메서드를 사용하면 스크린 리더가 텍스트를 읽는데 DOM에 있지만 맞춤 CSS를 사용하여 시각적으로 숨겨집니다.

'홈페이지로 이동'이라는 코드 스니펫에서 는 이미지 대체 텍스트는 "Lovely Ladybugs for your 잔디밭에서 일합니다." 스크린 리더로 로고 코드를 들을 때 행동을 시각적인 방식으로 전달하는 역할을 합니다

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

복잡한 이미지

복잡한 이미지가 자주 사용됨 꾸미거나 정보를 제공하거나 살펴보겠습니다 짧은 대안과 긴 대안이 모두 필요합니다. 전체 메시지를 전달합니다. 복잡한 이미지에는 인포그래픽, 지도, 그래프/차트 및 복잡한 삽화가 포함됩니다. 인코더-디코더 아키텍처를 여러 가지 방법으로 기본 이미지 형식을 추가할 수 있습니다. 복잡한 이미지에 대한 설명을 추가할 수 있습니다.

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug."><a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

이미지에 설명을 추가하는 한 가지 방법은 리소스로 연결되는 링크를 제공하는 것입니다. 또는 페이지의 뒷부분에 나오는 자세한 설명으로 연결되는 링크를 제공하세요. 이 방법 AT 사용자뿐만 아니라 IT 지원 전문가로서 인지, 학습, 읽기 장애 장애—이 추가 이미지가 있으면 도움을 줄 수 있는 사람 정보를 코드에 묻지 않고 화면에서 쉽게 확인할 수 있습니다.

사용할 수 있는 또 다른 방법은 aria-describedby 속성을 <img> 요소 이미지를 더 길게 설명하겠습니다. 이 방법은 이미지와 텍스트 사이에 전체 설명을 볼 수 있습니다 자세한 설명은 숨김 처리되도록 할 수 있지만 지원 시에도 보이도록 노력하세요. 더 많은 사람을 만나게 될 것입니다.

짧은 대체 설명과 더 긴 설명을 그룹화하는 또 다른 방법은 HTML5 <figure> 및 <figcaption> 요소를 사용하는 것입니다. 이러한 요소는 요소를 의미론적으로 그룹화하여 이미지와 이미지 설명 사이에 더 강력한 연결을 형성한다는 점에서 aria-describedby와 유사하게 작동합니다. ARIA role="group"를 추가하면 <figure> 요소의 네이티브 의미 체계를 지원하지 않는 이전 웹브라우저와의 하위 호환성이 보장됩니다.

대체 텍스트 권장사항

물론, 대체 텍스트를 포함하는 것만으로는 충분하지 않습니다. 또한 텍스트는 있습니다. 예를 들어 물고기를 씹는 무당벌레 떼에 관한 이미지라면 장미 덤불의 잎사귀를 버리지만 대체 텍스트는 '벌레'라고 되어 있습니다. 할 것이다 메시지를 전달할 수 있을까요? 절대 아니에요.

대체 설명은 관련성 높은 시각적 정보를 최대한 많이 포착해야 하며, 최대한 간결하게 작성하세요. 광고의 문자 수에는 제한이 없지만 스크린 리더가 읽을 수 있는 경우 일반적으로 대체 텍스트를 독자가 피로를 느끼지 않도록 150자(영문 기준) 이하여야 합니다. 광고 항목 유형을 더 추가해야 하는 이미지에 컨텍스트를 추가하려면 복잡한 이미지 패턴 중 하나를 사용하고 캡션 텍스트를 추가하거나 기본 카피의 이미지를 더 자세히 설명할 수 있습니다.

가장 좋은 추가 대체 텍스트 관행에는 다음이 포함됩니다.

• '이미지'와 같은 단어를 사용하지 않습니다. 또는 '사진' 와 같이 스크린 리더가 이러한 파일 형식을 식별합니다.
• 이미지 이름을 지정할 때는 최대한 일관되고 정확해야 합니다. 이미지 대체 텍스트가 누락되거나 무시되는 경우 이를 대체합니다.
• 영문자가 아닌 문자 (예: #, 9 &)를 사용하지 말고 대시를 사용하세요. 을 사용하세요.
• 가능하면 적절한 구두점을 사용하세요. 이미지 설명이 없으면 마치 길고 끝없이 이어지는 하나의 문장처럼 들릴 것입니다.
• 로봇이 아닌 사람과 같이 대체 텍스트를 작성합니다. 유인 키워드 반복의 기능 아무에게도 유익하지 않을 것입니다. 스크린 리더 사용자는 짜증이 날 것이고 검색엔진 알고리즘은 사용자에게 불이익을 줄 것입니다.

이해도 확인

ARIA 및 HTML에 관한 지식 테스트