웹 접근성을 고려한 이미지 alt 텍스트 작성하기 🖼️
웹 접근성은 모든 사용자가 웹사이트를 이용할 수 있도록 보장하는 것을 목표로 합니다. 특히 시각 장애가 있는 사용자들에게 이미지의 내용을 전달하는 것은 매우 중요한데요, 이를 위해 alt 텍스트의 올바른 작성법을 알아보겠습니다.
이미지에 alt 텍스트를 추가하는 이유
alt 텍스트는 이미지가 로드되지 않거나, 시각 장애가 있는 사용자가 스크린 리더를 사용할 때 이미지 대신 읽히는 텍스트입니다. 이는 웹 접근성을 높이는 데 핵심적인 역할을 합니다.
alt 텍스트 작성 팁
- 명확하고 간결하게: 이미지를 설명할 때는 명확하고 간결하게 작성하세요. 사용자가 이미지를 볼 수 없다고 가정하고, 그들이 필요로 하는 정보를 제공해야 합니다.
- 중요한 정보 포함: 이미지가 정보를 전달하는 경우, 그 정보를
alt텍스트에 포함시키세요. 예를 들어, 그래프 이미지라면 그래프의 주요 결과를 요약해서 작성합니다. - 불필요한 텍스트 피하기: "이미지", "사진"과 같은 단어는 사용하지 않습니다. 스크린 리더 사용자는 이미 이것이 이미지라는 것을 알고 있기 때문입니다.
예시
HTML에서 이미지에 alt 텍스트를 추가하는 방법은 다음과 같습니다:
<img src="web-accessibility.png" alt="웹 접근성 가이드라인을 설명하는 인포그래픽">
이 코드는 "web-accessibility.png"라는 이미지 파일에 "웹 접근성 가이드라인을 설명하는 인포그래픽"이라는 alt 텍스트를 추가합니다. 이렇게 하면 이미지가 제대로 로드되지 않거나, 시각 장애가 있는 사용자가 페이지를 방문했을 때, 이미지 대신 alt 텍스트가 읽히게 됩니다.
마무리
웹 접근성은 모든 사용자가 웹사이트를 편리하게 이용할 수 있도록 하는 중요한 요소입니다. 이미지에 적절한 alt 텍스트를 추가함으로써, 웹 접근성을 크게 향상시킬 수 있습니다. 웹 개발을 할 때 이러한 웹 접근성 가이드라인을 항상 염두에 두세요.