2024.07.23 기록

웹표준과 접근성 - alt

<a aria-label="장바구니 아이템: 3" 
href="https://www.nike.com/kr/cart"
title="장바구니 아이템:3">

나이키 웹페이지 - 장바구니 마크업

<a href="https://www.nike.com/kr/cart">
<img src="./image..." alt="cart">
</a>

난 보통 img 태그에 alt에 장바구니를 쓴다.
만약 img를 쓰지않고 css - background를 쓰게 된다면 alt를 쓸 수 없다.
즉, 시각 장애인은 음성인식으로 alt 내용을 듣게 되는데 alt가 없다면 이미지 설명을 들을 수 없게된다.

<li><a href="https://www.nike.com/kr/cart">
<span>cart</span>
<b>3</b>
</a></li>

그리하여 alt역할을 대신해 태그에 'cart' 이미지 설명을 추가하고 font-size:0으로 하여 화면에는 안보이나 시각 장애인이 이미지의 설명을 듣고 용도를 이해할 수 있도록 한다.

이모티콘 이미지 - ‘웃고있지만 눈물을 흘리는 표정’
QR코드 이미지 - alt=‘http://.....com 바로가기 QR코드’
캡쳐 이미지 - alt=‘나이키 메인 스크린 캡쳐’ 또는 alt=‘보안 문자’

이밖에 썸네일 이미지, 배경 이미지도 텍스트 제공을 해야한다.

• alt 는 쓰지 않으면 비표준
• display:none, visibility:hidden 설명 불가
• 의미 없는 이미지는 alt= "" 공백 처리
• 중복 설명일 경우 한 태그로 묶고, 하나는 alt= "" 공백 처리

참고사이트 https://velog.io/@line_jeong32/%EC%82%AC%EC%9A%A9%EC%B0%A8-%EC%B9%9C%ED%99%94-%EC%9B%B9-%EC%9B%B9-%ED%91%9C%EC%A4%80-%EC%A0%91%EA%B7%BC%EC%84%B1