그림의alt 속성과 보조 기능
개시하다
"alt가 가끔 비어 있을 때도 있어요
alt="""라고 전달하기 위해 정리했다.alt 속성
이미지의 대체 텍스트 속성을 지정합니다.
<img src="images/cat.jpg" alt="猫の写真">
대체 텍스트 표시
통신 오류나 이미지 링크 중단 등으로 브라우저가 이미지를 표시할 수 없을 때alt 속성이 있으면 대체 텍스트를 표시합니다.
SEO
alt 속성이 있으면 검색엔진에 적합한 이미지 내용을 전달할 수 있습니다.
보조 기능
화면 판독기에서alt 속성을 읽을 수 있습니다.
따라서 이미지를 시각적으로 이해할 수 없는 사용자도 이미지의 내용을 이해할 수 있다.
W3CWeb Content Accessibility Guidelines (WCAG)에서는 이미지에 alt 속성을 사용한다는 것을 나타낸다. 특히 2016년JIS X 8341-3 개정 이후 보조적인 측면에서 볼 때alt를 써야 하는 운동이 증가했다.
alt 속성은 무엇을 써야 합니까
alt 속성을 추가한 내용은 이미지 내용에 따라 다릅니다.
이미지 문자
주로 문자로 구성된 이미지에서, 예를 들어 로고, 제목 이미지 등
그림의 문자와 같은 내용을 입력하십시오.
// ⭕ Good
<img src="images/logo_sample.png" alt="Sample株式会社">
// ❌ Bad
<img src="images/logo_sample.png" alt="ロゴ画像">
HTML 텍스트의 경우 사용자가 쉽게 읽을 수 있도록 텍스트를 확대하고 색상을 변경할 수 있습니다.
사진이나 삽화의 상황
만약 사진과 삽화를 통해 전달된 정보가 페이지의 내용을 이해하는 중요한 정보라면 전달하고자 하는 정보를 기술하겠습니다.
<img src="images/cat.jpg" alt="絨毯でくつろぐ茶トラ白猫の写真">
장식용 이미지와 이미지의 정보가 페이지의 텍스트에서도 전달되는 상황
alt="".중점은'alt 속성을 넣지 않는다'는 것이 아니라'빈 alt를 명기한다'는 것이다.
<img src="images/icon.png" alt="">
화면 판독기로 어떻게 읽습니까
alt에 지정된 내용은 화면 리더(iOS의 Voice Over)로 실제로 어떻게 읽어내는지 시험해 봤다.
alt 속성이 없는 경우
(이미지 파일 이름) + image로 읽습니다.
파일 이름만 가지고는 그림의 내용을 이해하기 어려워 불친절하다.
// 「cat.jpg image」
<img src="images/cat.jpg">
alt 속성이 있는 경우
'(alt의 내용)+image'로 읽습니다.
이렇게 되면 이미지를 직관적으로 이해하지 못하더라도 이미지의 내용을 이해할 수 있다.
// 「猫の写真 image」
<img src="images/cat.jpg" alt="猫の写真">
alt 속성이 있습니다. 비어 있을 때
건너뛰다
그림 설명이 있으면 지루해지고 읽기가 편해진다.
// 何も読まれない
<img src="images/cat.jpg" alt="">
총결산
참고 자료
WCAG2.0 달성 방법집
Reference
이 문제에 관하여(그림의alt 속성과 보조 기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/pacchiy/articles/650e6212dee77b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
