중요한 대체 텍스트 작성

만약 내가 누구에게나 접근성이 그들에게 무엇을 의미하는지 묻는다면, 보통 그들이 식별할 수 있는 첫 번째 일은 "alt-text 추가!"이다.당신이 해야 할 일은 당신의 사진에alt 라벨을 추가해서 당신의 사이트를 더욱 쉽게 방문할 수 있도록 하는 것입니다. 그렇죠?나는 접근 가능한 오류를 줄이는 열정을 좋아하지만, 나는 너에게 분노스러운 대답을 할 것이다.상황을 보고 결정하다.
alt-text를 추가하는 것은 접근 가능한 스캔에서 대체 텍스트가 부족한 얄미운 오류가 발생하지 않는다는 것을 의미할 수 있지만, 이것은 반드시 그림이 더 좋은 의미를 가진다는 것을 의미하지는 않습니다.때때로, 더 쉽게 접근할 수 있는 그림을 얻기 위해 비어 있는alt 태그가 실제로 필요합니다.너는 이미 사람을 어안이 벙벙하게 하는 이모티콘과/또는gif를 생각했니?

이것이 바로 내가 그것을 공부할 때의 느낌이다. 이것은 나로 하여금 다른 사람에게alt 텍스트 복구에 관한 잘못된 건의를 얼마나 많이 주었는지 깨닫게 한다.이 박문 후에 나의 양심이 결백하길 바란다.나는 과거에 모든 그림에 반드시 대체 문자가 있어야 한다고 생각했지만, 나는 그것을 쓰는 데 그리 많은 신경을 쓰지 않았다.나는 당신이 접근하기 쉬운 오류를 피하는 데 도움을 줄 뿐만 아니라, 시력이 손상된 사용자에게 어떻게 최상의 체험을 제공할 수 있는지 더욱 비판적이고 전략적으로 생각할 수 있는 조언을 기꺼이 드리겠습니다.
나는 더 좋은 대체 텍스트를 쓰기 위한 전략이 있다. 나는 보통 자신에게 다음과 같은 질문을 한다.

그것은 장식성이 있습니까?

나는 누군가가 CMS 미디어 라이브러리에 들어가기 전에 먼저 고려하는 것은 기술적인 문제가 아니기를 바란다.이것은 전략적이다.이 이미지가 존재하는 목적은 무엇입니까?만약 우리가 이 그림을 가져가서 시각 사용자가 사용할 수 있도록 제공한다면, 우리는 우리가 필요로 하는 정보를 얻을 수 있습니까?내가 먼저 이 점을 언급한 것은 시작하기 전에 자신에게 상대적으로 간단한 문제를 물었기 때문이다.많은 조직 사이트의 실례부터 시작하자. 전기 페이지.
예를 들어 우리 사이트에'팀'페이지가 있는데 거기에서 우리는 링크를 눌러서 이 사람의 페이지로 안내하여 더 많은 정보를 읽을 수 있다.우리는 CEO 페이지를 클릭하면 이 회사의 CEO 사진을 볼 수 있다.CEO의 사진은 당신의 접근성 테스트에 영향을 주지 않을 때가 많습니다. 왜냐하면alt 텍스트에서 "CEO 존 바울의 사진"같은 것을 볼 수 있기 때문입니다.이런 이미지에 대해 이런 정보는 시각장애가 있는 사람들에게 매우 쓸모없고 쓸데없는 것이다.CEO에 대한 모든 중요한 정보는 그의 사진 옆에 있을 가능성이 높다.이것은 이 사진으로 하여금 장식성을 가지게 할 것이기 때문에 비어있는alt=""이면 충분하다.
또 하나 내가 대체 텍스트가 비어 있는 시간을 고려할 수 있는 것은 우리가 이미지 아이콘을 사용할 때이다.주의해야 할 것은 이미지 아이콘을 말할 때, 나는 Font Awesome 같은 아이콘 글꼴을 사용하는 것을 가리키는 것이 아니다.예:

자료 출처: Refactoring UI
이런 상황에서 우리는 이러한 이미지 아이콘을 사용하여 어떠한 의미도 전달하지 않을 것이다.이것은 단지'강력 기능'목록의 모든 목록 항목을 장식하기 위해서이다.그것은 디자인의 활력을 증가시켰지만, 진정으로 어떤 문법적 가치도 증가하지 않았고, 시력이 손상된 사용자는 놓칠 수도 있다.
이정의 측면에서 볼 때, 당신이 장식적인 이미지에 비공식적인 대체 텍스트를 놓을 때, 그것은 시각장애인 사용자에게 어떤 작용을 합니까?만약 내가 그들의 입장에 서 있다면, 나는 그들의 강력한 기능이 무엇인지 알고 싶다. 나는 이 그림들이 나에게 아무런 가치가 없기 때문에, 읽는 그림을 듣는 것에 대해 화를 낼 것이라고 생각한다.내가 어떤 물건이 장식성이 있는지 생각할 때, 나는 보통 자신에게 이 문제를 묻는다.

이 그림의 배경은 무엇입니까?

묘사부호를 고려하기 전에, 때때로 우리는 먼저 질문을 해야 한다. 형식입니까, 기능입니까?때때로 가장 간단한 방법은 "이것이 링크나 단추입니까, 아니면 이것이 내용입니까?"물론, 이것은 당신의 모든 기초를 포함하지는 않지만, 다른 페이지로 넘어가거나 우리의 내용에 상하문을 추가할 수 있는지를 자신에게 물어보는 것이 좋은 시작이다.

일하는 그림

우선, 어떤 일을 하는 예를 봅시다.여기서 다음 코드를 얻겠습니다.Facebook 페이지를 구성하는 Facebook 아이콘입니다.현재, 그것은alt 텍스트가 없습니다.

<a href="https://www.facebook.com/DrupalGovCon">
  <img src="facebook.svg">
</a>

때때로 여기에 alt 텍스트를 추가해서 그림을 설명하기 쉽습니다.이렇게

<a href="https://www.facebook.com/DrupalGovCon">
  <img src="facebook.svg" alt="facebook icon">
</a>

문제는 그림의 기능에 상하문을 추가하는 데 도움이 되지 않는다는 것이다.화면 판독기를 사용하는 사람들은 전체 사이트의 모든 다른 상하문에 따라 링크의 행방을 논리적으로 추측할 수 있다.그러나, 나는 내 사용자에게 추측하고 싶지 않다. 나는 그들에게 알려주고 싶다.이 그림을 클릭하면 Drupal GovCon의 페이스북 페이지로 들어갑니다.이 링크의 시각적 효과와 상관없이 엔드 유저에게 잘 알려 드리겠습니다.

<a href="https://www.facebook.com/DrupalGovCon">
  <img src="facebook.svg" alt="Go to the DrupalGovCon Facebook Page">
</a>

사물을 묘사하는 이미지

이제 어떤 일을 묘사하는 예시를 봅시다.나는 음식 블로그에 관심을 갖는 것을 정말 좋아한다. (나는 보통 그들의 페이지가 너무 오래 불러오는 것을 싫어하지만, 하하) 그들이 어떤 레시피를 가지고 있는지 보자.물론 이것은 내가 주목하는 식품 블로그가 아니지만, 나는 구글에서'최고의 브라우니 식단'을 검색했는데, 이것은 내가 찾은 첫 번째 식단이다.신성한 아보카도 소스, 사진으로 볼 때, 이 브라운들은 보기에 매우 좋아 보인다!

자료 출처: Cafe Delights
이 그림의alt 텍스트를 어떻게 만듭니까?창조성을 얻기 위한 아주 재미있는 시간이다!이것은 미식 블로그이기 때문에, 당신은 듣기에 매우 흥미로운 방식으로 그것을 묘사하고 싶을지도 모른다. "나는 내가 설탕 섭취를 줄이든 안 하든 상관없다. 나는 지금 그 초콜릿 케이크를 만들어야 한다."
다음은 내가 한 일이다.

<img src="Best-Fudgiest-Brownies-IMAGE-1001.jpg" alt="Gooey, fudgy chocolate brownies with melted chocolate dripping throughout">

당신의 내용 전략은 무엇입니까?

우리는 문서에 삽입된 그림을 위해 대체 텍스트를 작성하고 있습니까?디자이너가 우리 브랜드의 이미지를 전달하고 싶어하는 건가요?우리는 누가 이런 결정에 참여했는지 생각해야 한다. 왜냐하면 이것이 바로 우리가 예비 텍스트를 작성하는 데 참여하고 싶은 사람이기 때문이다.
미식 블로그와 유사하다. 만약 당신이 도서 출판사와 합작하고 있다면, 그 출판사는 새로운 요리책을 보급하고 있다.예를 들어 마케팅 부서는 초점팀, 조사 등을 이용하여 그들의 목표 시청자를 연구하는 데 많은 시간을 들였다. 그리고 그들은 마케팅 계획에 많은 정력을 투입했고 시각 효과가 마케팅에 매우 중요하다고 결정했다.그들은 한 사진작가와 합작하여 맛있는 식단의 새로운 사진을 찍었다.설마 너는 보조 기술로 이 사진들의 목적을 반영하고 싶지 않니?우리는 아마도 텔레비전 요리 프로그램 진행자의 방식으로 이 식단을 묘사하고 싶을 것이다. "매운 이태리 소시지와 고추에 대량의 평엽 파슬리와 백리향을 곁들인다."

Wouldn't you want the purpose of those photographs to be reflected with assistive technology?

이것이 바로 기술적인 측면보다 전략이 더 중요한 이유다.이것은 마케팅 전략팀과 협력하여 대체 텍스트를 작성해야 한다는 것을 의미한다.이것도 왜 디자인이 브랜드 이미지와 관련되어야 하는지, 왜 그들이 그들을 거기에 두어야 하는지에 관한 것이다.만약 이 팀들이 존재하지 않는다면, 적어도 우리는 이미지가 존재하는 목적을 생각해 냈다.내가 가장 좋아하는 예는 WebAim's documentation on Alt Text 오른쪽의 예다.조지 워싱턴의 전투 중인 사진이 한 장 있지만, 만약 우리가 역사에 관한 사이트에, 또는 예술에 관한 사이트에 있다면, 같은 사진은 매우 다른 대체 텍스트가 있을 것이다.

너무 많이 생각하지 마세요.

만약 당신이 이 방면에 어려움이 있다면, 대체 텍스트를 쓸 때, 이 세 가지 전략을 취해 보세요.그것은 네가 과도하게 생각할 기회를 감소시켰다. (솔직히 말하면 나는 이 일을 하는 여왕이다.)예비 텍스트를 작성하는 배후의 전략은 사고 전략과 밀접한 관계를 가진다.이것은 현재 진행 중인 일이라는 것을 명심해라.대체 텍스트는 시간이 지남에 따라 조정되고 향상될 수 있습니다:).
나는 네가 나의 대체 텍스트 방법을 배우는 것을 좋아하길 바란다.문제가 있으면 언제든지 연락 주세요.