대체 텍스트를 사용하여 접근성 및 페이지 내용 개선하기
오늘 웹상의 어떤 웹 사이트라도 보시면 공통점이있는 이미지 중 하나가 이미지라는 것을 알 수 있습니다. 웹 사이트에서 이미지를 사용하여 시각적 감각을 더하고, 아이디어를 설명하고, 페이지의 전체 내용에 추가 할 수 있습니다. 올바른 이미지 를 선택하고 웹 전송을 위해 이미지 를 적절하게 준비하는 것 외에도 모든 이미지가 ALT 텍스트를 올바르게 사용하는지 확인하는 것은 이러한 이미지를 웹에서 올바르게 사용하는 데있어 매우 중요한 부분입니다.
대체 텍스트 란 무엇입니까?
대체 텍스트는 이미지를 볼 수없는 텍스트 브라우저 및 다른 웹 사용자 에이전트가 사용하는 대체 텍스트입니다. 또한 이미지 태그에 필요한 유일한 속성 중 하나입니다. 효과적인 대체 텍스트를 작성함으로써 화면 판독기 나 다른 보조 장치를 사용하여 사용자에게 액세스 할 수있는 사람들이 귀하의 웹 페이지 에 액세스 할 수 있음을 보증합니다. 또한 어떤 이유 (잘못된 경로, 전송 실패 등)로 인해로드되지 않는 경우 무언가가 이미지 대신 표시 될 수 있습니다. 이것은 Alt 텍스트의 진정한 목적이지만이 콘텐츠는 검색 엔진이 당신에게 불리하지 않는 SEO 친화적 인 텍스트를 추가 할 수있는 더 많은 공간을 제공 할 수 있습니다.
대체 텍스트는 이미지에서 텍스트를 반복해야합니다.
텍스트가 들어있는 이미지는 그 텍스트를 대체 텍스트로 가져야합니다. 대체 텍스트에 다른 단어를 배치 할 수 있지만 최소한 이미지와 동일한 것을 말해야합니다. 예를 들어 이미지에 로고가있는 경우 Alt 텍스트는 그래픽 로고로 작성된 회사 이름을 반복해야합니다.
또한 로고와 같은 이미지는 텍스트를 암시 할 수 있습니다. 예를 들어, About.com 웹 사이트에서 빨간색 공 아이콘이 표시되면 "About.com"을 의미합니다. 그래서 그 아이콘의 대체 텍스트는 "회사 로고"뿐만 아니라 "About.com"이라고 말할 수 있습니다.
텍스트를 짧게 유지하십시오.
대체 텍스트가 길수록 텍스트 브라우저에서 읽는 것이 더 어려워집니다. 대체 텍스트의 긴 문장을 작성하는 것은 유혹을 불러 일으킬 수 있습니다 (일반적으로 누군가 태그를 키워드로 채우려고하기 때문에 이루어집니다). 그러나 Alt 태그를 짧게 유지하면 페이지를 더 작게 만들고 작은 페이지를 더 빨리 다운로드 할 수 있습니다.
대체 텍스트에 대한 좋은 경험 규칙은 총 5 ~ 15 단어를 유지하는 것입니다.
Alt 태그에서 SEO 키워드 사용하기
사람들은 종종 대체 텍스트의 목적이 검색 엔진 키워드를 넣는 것이라고 잘못 생각합니다. 예, 추가 할 텍스트가 alt 태그의 실제 목적에 대해 의미가있는 경우에만 사용할 수있는 이점입니다. 누군가가 볼 수 없으면 이미지가 무엇인지 설명하는 지능적인 텍스트를 표시하는 것입니다.
이제 Alt Text가 SEO 도구로 사용되지 않는다고해서이 텍스트에서 키워드를 사용할 수 없다는 의미는 아닙니다. 대체 텍스트가 중요하고 이미지에 필요하기 때문에 검색 엔진은 추가하는 콘텐츠가 의미가있는 경우 키워드를 입력하면 불이익을받을 가능성이 거의 없습니다. 당신의 최우선 순위가 독자들에게 있다는 것을 기억하십시오. 대체 텍스트의 키워드 스팸은 탐지 될 수 있고 검색 엔진은 스패머를 방지하기 위해 항상 규칙을 변경합니다.
경험상 좋은 법칙은 검색 엔진 키워드를 이미지의 설명과 일치하는 곳에 사용하고 대체 텍스트에 둘 이상의 키워드를 사용하지 않는 것입니다.
당신의 텍스트를 의미심장하게 지키라.
대체 텍스트의 요점은 독자를위한 이미지를 정의하는 것임을 기억하십시오. 많은 웹 개발자는 이미지 크기, 이미지 파일 이름 등과 같은 대체 텍스트를 자체적으로 사용합니다. 이것은 당신에게 유용 할 수 있지만 독자에게는 아무런 도움이되지 않으므로이 태그에서 생략해야합니다.
아이콘과 글 머리 기호 만 공백 대체 텍스트 사용
글 머리 기호 또는 간단한 아이콘과 같이 유용한 설명 텍스트가없는 이미지를 주기적으로 사용합니다. 이러한 이미지를 사용하는 가장 좋은 방법은 대체 텍스트가 필요없는 CSS에서입니다. 그러나 HTML에 절대적으로 포함시켜야하는 경우 빈 alt 속성을 사용하지 말고 그대로 두십시오.
별표 (*)와 같은 글자를 글 머리 기호로 사용하는 것이 유혹적 일 수 있지만 단순히 공백으로 두는 것이 더 혼란 스러울 수 있습니다. 텍스트 "글 머리 기호"를 넣으면 텍스트 브라우저에서 더욱 이상하게 렌더링됩니다.
Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 3/3/17에 편집 됨