웹 접근성 향상을 위해 모든
<img />태그에는alt속성을 포함해야 하는 것으로 알고 있을텐데요! 그 이유는 스크린 리더라는 것이 이alt속성을 통해 이미지를 해석하기 때문이죠.
📌 스크린 리더란, 시각 장애인을 포함한 다양한 사용자들이 컴퓨터 화면의 콘텐츠를 음성으로 듣거나 점자 디스플레이를 통해 읽을 수 있도록 돕는 보조 기술 소프트웨어입니다.
따라서, 스크린 리더는 텍스트/이미지/버튼/링크 등의 화면 요소를 파악하고 이를 음성으로 읽거나 점자 출력 장치에 전달하여 사용자와 상호작용하기 때문에alt속성은 웹 접근성을 실현하는데 중요한 역할을 하는 요소 중 하나이죠!
💡 그러나, 위와 같이 단순한 장식용 이미지의 경우, alt 속성을 빈 값(alt="")으로 설정하여 스크린 리더가 이를 무시하도록 해야 한다고 합니다!
그냥
alt속성을 안넣으면 되는거 아니에요? 🤔
➡️ alt 속성이 없다면 스크린 리더가 이미지명을 읽어 사용자에게 혼란을 줄 수 있기 때문에 빈 값(alt="")을 제공해 스크린 리더가 꾸밈 요소인 것을 인지 시켜줘야 한다고 해요!
WAI-ARIA의 role="presentation" 속성을 사용하여 스크린 리더가 이미지를 무시하도록 설정할 수 있으나, 이 방법은 지원 범위가 제한적이므로 일반적으로 alt=""를 사용하는 것이 더 권장됩니다.
따라서, 정보 전달에 영향을 주지 않는 장식용 이미지에는 반드시 alt=""를 설정하여 스크린 리더가 이를 무시하도록 하여 불필요한 정보 제공을 방지하고 사용자 경험을 향상시켜봅시다! :)
