이미지에 대체 텍스트를 추가하려면 alt 속성을 사용합니다. 이미지가 로딩 오류 등의 이유로 화면에 표시되지 않는 경우, alt 속성에 지정한 텍스트가 그 자리에 나타나 사용자에게 이미지의 내용을 알려줍니다.
또한 alt 속성은 스크린 리더(screen reader)가 웹페이지의 내용을 읽어 줄 때 중요한 역할을 합니다. 시각 장애가 있는 사용자도 대체 텍스트를 통해 이미지가 담고 있는 정보를 이해할 수 있기 때문에, 접근성 측면에서 모든 이미지에 의미 있는 alt 텍스트를 작성하는 것이 권장됩니다.
예제
아래 코드를 실행하면 HTML에서 alt 속성을 어떻게 적용하는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML alt attribute</title> </head> <body> <p>Simple Image Insert</p> <img src = “https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg” alt = "Tutorials Library" /> </body> </html>