유효alt 텍스트

어느 날, 다음 경기 라인업을 보여주는 사진이 올라온 트위터를 봤어요.내가 평론을 읽을 때, 나는 재미있는 조언을 보았다. "줄을 서 있는 사람을 쓰는 것이 어떻습니까? 이것은 맹인에게 더욱 쉬울 것입니다. 왜냐하면 스크린 리더가 그림을 잘 처리하지 못하기 때문입니다."Twitter는 #PraCegoVer자까지 1000자의 선택적 텍스트를 지원합니다.그러나 정확한 alt 텍스트를 작성하는 것은 여전히 도전이다.

내가 왜 그것에 관심을 가져야 합니까?

나에게 있어서 전방 개발자로서 인코딩뿐만 아니라 사용자 체험도 관련된다. 이것은 접근성과 매우 큰 관계를 가진다.Alt 텍스트는 사진에서 볼 수 있는 내용에 대한 상세한 설명을 제공하여 화면 판독기를 사용하는 사용자의 보기 이미지를 도와줍니다.인터넷 서비스가 나빠서 그림을 거의 불러올 수 없는 사람들에게도 유용하다.전 세계에서 285 million people명의 시력 손상자가 있는데 인터넷은 그들을 보지 말아야 한다.
또한 웹 사이트를 만들 때 SEO는 매우 중요하다.선택할 수 있는 텍스트는 텍스트 형식으로 하나의 요소를 묘사하는데 이것은 검색엔진에 있어서 더 좋은 정보이기 때문에pa의 순위가 더욱 높다.
그러니 더 이상 말하지 말고 더 좋은alt 텍스트를 쓰는 기교를 봅시다!

쓸데없는 말 작작 해라

이 제목은 반드시 사람들의 주목을 끌어야 한다. 왜냐하면 이 힌트는 기억해야 하기 때문이다.누구나 재생 중인 내용에 대한 생각 대신 단어를 최대한 적게 사용하고 125글자의 제한을 견지해 보세요. 이것은 화면 리더가 보통alt 텍스트를 잘라내는 곳입니다.그럼에도 불구하고 긴 설명이 필요한 경우(예를 들어 도표)가 있다. 이때 longdesc: 텍스트가 아닌 내용의 긴 설명이 포함된 URI가 나왔다. 그러나 모든 화면 판독기가 이 기능을 지원하는 것은 아니다.

<img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/>

키워드 채우기 방지

이것은 이전 문장의 속편이다.그림 내용을 묘사하는 주요 목적은 접근성을 높이는 것이다.공교롭게도 SEO 최적화에도 사용되지만 이것은 상관없는 키워드가 가득해야 한다는 것을 의미하지 않는다. 첫째, Google can detect keyword-stuffing, 둘째, 대체 텍스트는 간결해야 한다. 불필요한 단어를 피해야 한다.
토스토는 역사상 가장 위대한 축구 선수 중의 하나다.
키워드로 Alt: 브라질인, 축구선수, 축구선수, 브라질 국가대표팀을 채운다.
Alt 키워드 없음: 브라질 축구 국가대표 선수 토스토, 왼쪽을 보세요.

어떤 그림들은 심지어 한 푼의 가치도 없다...

장식 사진은 텍스트에 관련 정보를 휴대하지 않기 때문에 텍스트를 대체할 필요가 없다.단추와 목록 요소의 아이콘은 보통 탭이 있습니다. 이것은 그림을 설명할 필요가 없는 좋은 예입니다.이러한 경우 빈 alt 속성을 사용하십시오.

응용 프로그램 메뉴.아이콘은 장식에만 사용됩니다.

... 어떤 사람들은 그것들이 없으면 쓸모가 없다.

링크나 단추로 사용되는 그림을 기능 그림이라고 하는데,alt 텍스트는 그것들에게 매우 중요하다.스크린 리더로 페이지를 훑어보았을 때, 갑자기 그림을 보았는데, 그것이 홈 페이지로 가져갈지 모르는 것 같았다.이 일곱 개의 지옥에서 사용자는 어떻게 그것을 처리해야 할지 알아맞힐 수 있습니까?이러한 상황에서 alt은 시각적 효과가 아니라 이미지 기능을 묘사해야 한다.

코드 세그먼트:

<a href="https://dev.to">
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/y7iccxquxqw4ueq9ruq3.jpg" alt="Dev.to home">
</a>

"그림/사진/사진..."그래?

페이지를 탐색할 때 화면 판독기는 강조 표시된 내용이 그래픽인지 여부를 판단할 수 있으므로 제목에 표시된 문자를 멀리하십시오.군더더기를 줄이는 것은 좋은 사용자 체험 실천이다.

Alt:눈 위에 금발의 여자가 붉은 여우 한 마리를 어깨에 메고 있는 사진.

figcaption는alt를 대체할 수 없습니다

앞에서 말한 바와 같이 대체 텍스트는 이미지의 기능에 대한 설명을 제공하고 묘사된 내용에 대한 요약을 제공한다.다른 한편, 제목은 편집적인 묘사일 수 있다. 사진을 보아야만 알 수 있는 정보다.

알래스카타는 2018년 코린티안과의 브라질컵 결승에서 경기 규칙을 바꿨다.

Alt: 크루세로 축구선수, 파란색 유니폼을 입고 경축, 손 흔들기, 달리기.

설명: 2018년 코린티안과의 브라질컵 결승전에서 알래스카타는 경기 규칙을 바꿨다.

이제 어떡하지?

이 글은 대체 텍스트 쓰기를 개선하는 기교를 포함하고 있지만, 이 일에 있어서는 더 많은 것을 찾아야 한다.더 많은 정보를 얻으려면 W3C의 이미지에 관한 글을 보십시오. 그리고 decision tree이 하나 더 있습니다. 매우 편리합니다.a11y(접근성을 대표) 프로젝트는 안내서와 tips을 제공하여alt 텍스트뿐만 아니라 더 많은 접근성 주제에도 적용된다.