Web accessibility and alt property

웹 접근성을 위해 alt 속성을 반드시 사용해야 하는 이유는 크게 세 가지입니다.

---

1. 시각 장애인을 위한 '눈' 역할

시각 장애인은 '스크린 리더'라는 프로그램을 통해 웹사이트를 읽습니다. 이미지에 alt 속성이 있으면 프로그램이 그 내용을 말로 설명해 주지만, 없으면 이미지가 있다는 사실조차 모르거나 파일명(예: IMG_123.jpg)을 그대로 읽어버려 혼란을 줍니다.

2. 이미지가 안 뜰 때의 '대본' 역할

네트워크 연결이 불안정하거나 경로가 잘못되어 이미지를 불러오지 못할 때, 브라우저는 이미지 대신 alt에 적힌 텍스트를 보여줍니다. 이를 통해 사용자는 이미지가 없어도 어떤 내용이 있었는지 파악할 수 있습니다.

3. 검색 엔진의 '이해' 도구

구글이나 네이버 같은 검색 로봇은 사진의 시각적 내용을 완벽히 이해하지 못합니다. alt 속성에 적힌 설명을 통해 "아, 이 이미지는 사과 사진이구나"라고 인식하며, 이는 검색 결과 노출(SEO)에도 긍정적인 영향을 줍니다.

---

💡 한 줄 요약: 이미지를 볼 수 없는 사람과 기계에게 **"이 사진은 이런 내용이에요"**라고 친절하게 알려주기 위해서입니다.

---

---

alt=""

---

장식용 이미지에 alt=""라고 비워두는 것은 스크린 리더 사용자에게 **"이 이미지는 중요한 정보가 아니니 그냥 지나치셔도 됩니다"**라고 신호를 보내는 아주 중요한 약속입니다.

그 이유를 상세히 설명해 드릴게요.

---

1. 노이즈(소음) 방지

스크린 리더는 alt 속성이 아예 없으면 파일명(image-01.jpg 등)을 읽거나, 이미지가 있다는 사실을 억지로 알리려 합니다. 만약 페이지에 예쁜 배경 줄무늬나 단순한 아이콘이 수십 개 있는데 매번 "이미지", "파일 이름"이라고 읽어준다면 시각 장애인 사용자에게는 엄청난 스트레스와 소음이 됩니다.

2. 콘텐츠 집중도 향상

alt=""를 넣어두면 스크린 리더는 해당 이미지를 완전히 무시하고 다음 텍스트로 넘어갑니다. 이를 통해 사용자는 불필요한 장식 정보에 방해받지 않고, 웹사이트의 진짜 핵심 내용에만 집중할 수 있게 됩니다.

---

💡 실무에서의 구분 방법

어떤 이미지에 내용을 적고, 어떤 이미지를 비워둘지 결정하는 간단한 기준입니다.

• 내용을 적어야 할 때 (alt="설명")
  • 사진이 정보를 전달할 때 (예: 뉴스 기사 사진, 상품 이미지)
  • 클릭하면 동작하는 아이콘 (예: 돋보기 아이콘 → alt="검색")
• 비워둬야 할 때 (alt="")
  • 단순히 분위기를 내기 위한 배경 이미지
  • 텍스트 옆에 중복으로 들어간 아이콘 (예: '전화하기' 글자 옆의 수화기 그림)

---

실무자의 시선

실무에서는 더 깔끔한 방법을 선호하기도 합니다.

• CSS 배경 처리: 정말 순수하게 꾸미기 위한 용도라면 HTML의 <img> 태그를 쓰지 않고, CSS의 background-image 속성을 사용하는 것이 가장 좋습니다. 그러면 스크린 리더가 아예 인식조차 하지 않아 접근성 측면에서 가장 깔끔합니다.
• 공백( ) 주의: alt=" "처럼 따옴표 사이에 한 칸을 띄우면 안 됩니다. 반드시 붙여서 alt=""라고 써야 '빈 값'으로 정확히 인식됩니다.

---

결국 웹 접근성은 '꼭 필요한 정보는 친절하게, 불필요한 정보는 조용하게' 전달하는 배려에서 시작됩니다.

이미지 처리에 대해 완벽히 이해하셨나요?

---