HTML Alt 속성 이미지 태그에 대해 알아보기

웹 사이트의 접근성을 높이는 가장 간단한 방법 중 하나는 이미지 태그에 alt 속성을 사용하는 것입니다. 얼마나 많은 사람들이이 단순한 속성을 사용하는 것을 잊어 버리는 것이 놀랍습니다. 사실, 이제 유효한 XHTML을 작성하려면 img 태그에 alt 속성이 필요합니다. 그럼에도 사람들은 여전히 ​​그것을하지 않습니다.

ALT 특성

alt 속성은 img 태그 의 속성으로 비 시각적 인 브라우저가 이미지를 보게 될 때 유용합니다. 즉, 이미지가 페이지에 표시되지 않을 때 텍스트가 사용됩니다. 대신 표시되거나 읽혀지는 내용이 대체 텍스트 입니다.

많은 브라우저는 고객이 마우스를 이미지 위에 올려 놓으면 alt 텍스트도 표시합니다. 이것은 텍스트가 명확하고 읽기 쉬워야하고 페이지에서 마우스를 일시 중지하는 모든 독자에게 거대한 팝업 악몽을주지 않아야 함을 의미합니다. 대체 텍스트를 추가하는 것은 간단합니다. 단순히 이미지의 alt 속성을 사용하십시오. 다음은 alt 태그를 작성하기위한 팁입니다.

브리핑

대체 텍스트가 너무 길면 일부 브라우저가 실제로 중단됩니다. 이미지에 정확히 무엇이 들어 있는지 설명하는 것이 좋을 수도 있지만 alt 태그의 목적이 아닙니다. 대신 문맥에 이미지를 넣는 데 필요한 단어로 정확히 채워 져야합니다.

명확하게

문맥이 혼란스럽지 않도록 너무 짧지 마십시오. 일부 사용자는 alt 태그의 텍스트 만 볼 수 있으므로 너무 짧으면 사용자가 보여주고 자하는 것을 이해하지 못할 수도 있습니다. 예 :

문맥 상이어야 함

컨텍스트에서 볼 의도가있는 이미지는 설명하지 마십시오. 예 : 회사 로고 이미지가있는 경우 "회사 이름 로고"가 아닌 "회사 이름"을 작성해야합니다.

사이트의 내부 작동을 표시하지 마십시오.

스페이서 이미지 를 입력하는 경우 alt 텍스트의 공백을 사용하십시오. "spacer.gif"라고 쓰면 유용한 정보를 제공하는 것이 아니라 사이트에 관심을 불러 일으키는 것입니다. 기술적으로, 유효한 XHTML을 작성하려는 경우 스페이서 이미지 대신 CSS를 사용해야하므로 alt 텍스트는 해당 이미지에서 벗어날 수 있습니다.

검색 엔진을 의식하게하십시오

좋고, 간결하고, 대체 텍스트가 분명하다면 페이지의 이미지가 키워드를 홍보하고 향상시키는 것처럼 검색 엔진 순위에 실제로 도움이 될 수 있습니다.

검색 엔진 최적화에만 사용해서는 안됩니다.

많은 사이트에서는 검색 엔진이 대체 텍스트를 검색 엔진 최적화 도구로 사용하면 검색 엔진을 "속여서"사이트에 최적화되지 않은 키워드를 사이트에 최적화 할 수 있다고 생각합니다. 그러나 검색 엔진이 결과를 위조하려고 시도하고 결과에서 완전히 제거한다고 판단하면 역효과를 낼 수 있습니다.