액세스 가능한 이미지, 아이콘 및 이모티콘

이 글은 처음에 발표되었다 Up Your A11y: Accessible, images, icons and emojis
우리가 흔히 알고 있는 인터넷 접근성에 관한 첫 번째 일은 웹 사이트와 응용 프로그램에서 사용하는 이미지에 대체 텍스트를 제공해야 한다는 것이다.이 점은 매우 중요하다. 왜냐하면 이미지의 alt 텍스트는 다음과 같은 내용에 상하문 정보를 제공하기 때문이다.

시력이 손상된 사용자(화면 판독기를 통해), 그렇지 않으면 그림을 잘 볼 수 없음

네트워크 연결 속도가 느린 사용자는 이미지를 로드할 수 없습니다

검색엔진의 최적화를 결정하는 파충류는 페이지에 나타난 내용을 이해하기 위해 보이지 않는 방법이 필요하다

그러나 이 대체 텍스트를 실제로 실현하는 것과 관련이 있을 때 무엇을 써야 할지 알기 어려울 수도 있습니다!

alt text의 흔한 고장

웹의 많은alt text 실례에 다음과 같은 고장 중 하나가 있습니다.

주위 문자가 이미 기술한 내용을 반복

이미지..."

와 같은 이중화된 구문을 사용합니다.

순수한 장식 구성 요소(예를 들어 분리선)에 무의미한 대체 텍스트 제공

이미지가 무엇을 전달하는 것이 아니라 무엇을 전달하는 데 사용되는지 주목

나는 점차적으로 몇 가지 관건적인 질문에 대답할 것이다. 내용에 이미지를 추가할 때, 의미 있는 대체 텍스트를 식별하는 데 도움을 줄 수 있다.그리고 사용할 수 있는 대체 이미지 (emojis와font-awesome 아이콘) 와 접근 가능한 방식으로 이 이미지를 처리하는 방법을 소개합니다.

사전 요약:

이 글에서 나는 HTML 요소 그룹의 화면 캡처를 사용하여 설명했다.아래의 예는 인접 <img> 과 텍스트 요소로 만들어졌으며, 주변 텍스트를 이미지 자체의 단독 HTML 요소로 고려하고 있음을 이해해 주십시오.

문제1: 당신의 사진은 정말 대체 문자가 필요합니까?

모든 <img /> 요소는 alt 속성을 가져야 하지만 모든 이미지가 텍스트를 대체해야 하는 것은 아니다.우리는 보통 순수한 장식적인 방식으로 그림을 사용한다. 예를 들어 페이지에 공간을 남기고 텍스트의 양이 많은 페이지에 색을 조금 추가하여 화려한 요점으로 사용한다. 사용한 그림은 순수한 장식적인 상황에서 빈 대체 텍스트를 제공할 수 있다.
만약 페이지에 이 그림이 없다면 사용자는 무엇을 놓칠 수 있습니까?만약 답이 순전히 그렇게 좋아 보이지 않는다면, 텍스트를 대체할 필요가 없을 것 같다.

대체 텍스트가 필요하지 않은 몇 가지 예:

레이아웃 목적으로만 사용되는 이미지

위의 예에서 이미지는 장식적 경계선을 제공하는 데 사용됩니다.상하문이나 기능 값을 추가하지 않기 때문에alt 속성은 비어 있습니다. 즉, alt=""

글머리 기호로 사용되는 이미지

이 예에서는 <ul> 을 만들고 표준 목록 스타일을 삭제하며 li 항목마다 이미지를 사용합니다.
만약 우리가 각 항목 기호에 대체 텍스트를 설정했다면, 화면 판독기 사용자는 모든 목록 항목의 시작에 같은 대체 텍스트를 들을 것이다.아이콘은 순전히 장식적이기 때문에 상당히 시끄러울 것이다. 별도의 가치가 없다.이것은 또 다른 좋은 빈alt 텍스트 용례입니다. alt="".

주위 문자는 이미 묘사적인 이미지에 충분하다

때때로 우리가 그림을 사용하여 페이지에 상하문을 전달할 때, 우리는 텍스트를 추가하고, 그림에 제목을 추가하거나 다른 방식으로 그림을 설명합니다.다음 예제를 고려하십시오.

우리가 실현하고자 하는 목표에 따라 이 파이의 이미지에 대체 텍스트를 추가할 필요가 없을 수도 있습니다. 옆에 있는 텍스트에 이미 쓴 내용을 제외하고는 더 이상 교류하고 싶지 않습니다.이런 상황에서 비어있는alt 텍스트도 받아들일 수 있다.
그러나 만약 우리가 정말로 그림을 통해 추가 정보를 전달하고 싶다면, 우리는 관련 대체 텍스트를 추가해야 한다.예를 들어, 위의 예제에서 "Slice of Cherry Pie"텍스트가 없으면 상상해 보십시오.이런 상황에서alt 텍스트를 추가하는 것은 관련이 있다. 그렇지 않으면 체리 파이 한 조각에 500칼로리가 함유되어 있다는 메시지를 전달할 수 없다.

문제2: 이 이미지는 기능이 있습니까?

질문 1을 통해 당신은 당신의 이미지를 대체할 문자가 필요하다고 확신했습니다.다음 문제는 어떤 그림을 묘사하고 싶은지입니다.응용 프로그램의 많은 이미지에는 내용의 일부분만이 아니라 기능이 포함되어 있을 수 있다.
예를 들어 개발자 로고의 이미지를 포함하는 개발자 사이트의 제목 부분을 고려한다.
이런 상황에서 텍스트를 대체하여 이미지를 간결하게 전달하는 기능(예를 들어 "집")은 의미가 있다.
홈 링크, 네비게이션 홈 페이지, 홈 페이지로 돌아가기, 홈 아이콘 등 추가 텍스트를 추가하려고 하지 마십시오. HTML의 의미는 이러한 정보를 제공합니다.
이 그림은 링크의 일부분이 될 것입니다. 따라서 화면 판독기는 그림과 링크라고 선포할 것입니다.이러한 쓸데없는alt 텍스트를 피하면 화면 판독기 사용자의 체험을 간소화하는 데 도움이 될 것입니다.

문제3: 이 사진은 또 어떤 다른 내용을 제공했습니까?

1단계와 2단계를 통해 우리는 이미지가 일부 내용을 전달했지만 관련 기능이 없음을 확인한다.따라서 이미지는 사용자가 제공한 컨텍스트를 잃어버리지 않도록 텍스트를 대체해야 합니다.
그림에 대체 텍스트를 추가하는 것을 고려할 때, 관건적인 지도는 사용자를 위해 다시 한 번 몸을 던져 생각하는 것이다. "만약 내가 이 그림을 볼 수 없다면, 나는 무엇을 알아야 이 내용을 감상할 수 있습니까?"이것은 대답하기 쉬운 문제는 아니지만, 자세히 고려할 만하다.화면 판독기에서 사용할 수 있을 뿐만 아니라 이미지 로딩이 실패했을 때 페이지에 표시되어 검색 엔진이 내용을 이해할 수 있다는 것을 기억하십시오.
같은 이미지는 서로 다른 상황에서 다른 대체 텍스트가 필요합니다.예를 들어, 동일한 이미지를 사용하는 예는 다음과 같습니다.

예 1: 이미지는 머리글

여기에서 우리가 사용하는 이미지는 제목과 같다. 아래의 설명은 계속 해석해야 할 성분이나 처방 절차에 필요한 항목이다.이 경우,alt 텍스트는 그림의 대상의 이름, 즉'체리 파이'가 될 수 있습니다.

예 2: 이미지의 세부 사항이 중요합니다.

이런 상황에서 우리는 이미지의 디테일이 의미를 전달하는 핵심임을 볼 수 있다.이런 상황에서 우리는alt 텍스트에서 더 많은 디테일을 제공하기를 희망한다. 예를 들어 "체리 파이 한 조각이 흰색 접시에 놓여 있고 옆에 신선한 체리 두 개가 있다."
보시다시피 그림을 잃어버렸을 때 어떤 내용을 잃어버렸는지 고려하는 것 외에는 딱딱한 규정이 없습니다!

일부 특수한 유형의 이미지

어떤 경우, 페이지의 시각 이미지는 사실상 이미지가 아니다.흔히 볼 수 있는 예는 글꼴 아이콘과 이모티콘이다.

글꼴 아이콘

본고의 예는 Font Awesome 아이콘을 특히 주목할 것이다. 왜냐하면 아이콘은 가장 유행하고 광범위하게 사용되는 글꼴 아이콘 공급자 중의 하나이기 때문이다.그것들이 이렇게 광범위하게 사용되고 있음을 감안하면 그것들의 사용도 이상할 것이 없다their own handy guide to how to use their icons accessibly.총결산은 아래와 같다.

1. 앞에서 말한 바와 같이 질문: 대체 텍스트가 필요합니까?

만약 아이콘이 순전히 장식적이라면alttext는 필요하지 않습니다.그러나 그림과 달리 글꼴 아이콘은 비어 있는 "alt"속성이 없습니다.이런 상황에서 우리는'ariahidden'속성을 사용하여 보조 기술 사용자에게 그것을 숨길 수 있다.예:

  <i aria-hidden="true" class="fas fa-car"></i>

아리아hidden은 예시처럼 true로 설정해야 합니다. 속기 aria-hidden 는 무효입니다.

2. 아이콘에 동작이 있습니까?

만약 아이콘이 상호작용 요소 (예를 들어 링크) 와 관련이 있다면, 우리는 상호작용 요소에 "아리아 라벨"을 추가하고, 아이콘 자체를 숨길 수 있습니다. 1단계와 같습니다.예:

<a href="/" aria-label="Home">
  <i aria-hidden="true" class="fas fa-home"></i>
</a>

3. 다른 경우 화면 밖으로 선택 가능한 텍스트 표시

아이콘 자체에 대체 텍스트를 추가할 수 없기 때문에, 실제 텍스트를 추가할 수 있지만, 표시 방식은 보조 기술 사용자에게만 보여야 합니다.이렇게 하면 CSS를 사용하고 화면 외부에 텍스트를 표시할 수 있습니다.이전과 마찬가지로 아이콘 자체에 "aria hidden"을 추가합니다. (주의: 글꼴 Awesome의 "title"속성은 시력 있는 사용자가 도구 알림을 표시할 수 있도록 합니다.

<i aria-hidden="true" class="fas fa-plant" title="Vegetarian"></i>
<span class="screen-reader-only">Vegetarian</span>

CSS는 다음과 같이 보입니다.

.screen-reader-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

이모티콘

Emojis는 img 태그에 나타나지 않는 또 다른 특수한 이미지입니다.우리는 이모티콘의 유니코드 값을 복사하여 브라우저에 표시할 수 있지만, 접근할 수 있도록 추가 절차가 필요합니다.

만약 순전히 장식적이라면 숨긴다

위의 글꼴 아이콘 예시와 유사합니다. 만약 이모티콘이 순전히 장식적이라면 우리는 그것을 숨길 수 있습니다.그러나 이모티콘은 자신의 라벨이 없기 때문에 이를'span'에 포장해야 한다.

<span aria-hidden="true">&#x1F4D6;</span>

그렇지 않으면 "img" 역할 추가

모든 다른 상황에서 브라우저가 이모티콘을 이미지로 간주하는지 확인할 수 있습니다.우리는'role'과'arialabel'속성을 사용하여 이 점을 실현할 수 있다.예:

<span role="img" aria-label="open book">&#x1F4D6;</span>

마지막 생각

위의 모든 설명서는 다음과 같은 몇 가지 주요 고려 사항으로 요약됩니다.

이 그림은 순전히 장식적인 것입니까?

이 이미지는 기능이 있습니까? 아니면 순수한 내용입니까?

이미지를 잃어버리면 사용자는 어떤 내용을 놓칠까요?

마지막 문제는 가장 대답하기 어렵지만 이 위에 약간의 시간을 쓰면 모든 사용자의 체험을 개선하고 검색엔진의 최적화를 개선할 수 있습니다!
이 장편 문장을 완성하는 데 대한 특별 보상으로 저는 작은 결정 트리를 가지고 있습니다. 다운로드/저장할 수 있습니다. 이것은 시각 흐름도에서 상술한 절차를 정리했습니다.