[HTML] 웹접근성과 시멘틱 태그

인터넷은 누구나 사용할 수 있어야 한다는 철학 위에 만들어졌습니다.

하지만 시각, 청각, 운동 능력 등 제약을 가진 사용자들이 웹을 사용하는 데 불편함을 겪는 경우가 많습니다.

이런 문제를 해결하기 위한 개념이 바로 **웹 접근성(Web Accessibility)**입니다.

이번 글에서는 웹 접근성이 무엇인지, 왜 고려해야 하는지,

그리고 실무에서 접근성을 높이는 방법까지 자세히 알아보겠습니다.

---

✅ 웹 접근성이란?

• 웹 접근성(Web Accessibility)이란,

장애가 있는 사람을 포함해 모든 사용자가 웹 콘텐츠에 접근하고 이용할 수 있도록 보장하는 것을 의미합니다.

즉, 웹사이트를 누구나, 어떤 환경에서도, 동등하게 사용할 수 있도록 만드는 것이 바로 웹 접근성입니다.

예를 들면?

• 시각 장애가 있는 사용자가 스크린 리더로 내용을 듣고 이해할 수 있어야 합니다.
• 마우스를 사용할 수 없는 사용자가 키보드만으로도 사이트를 탐색할 수 있어야 합니다.
• 색각 이상(색약)이 있는 사용자가 색상 구분 없이도 내용을 파악할 수 있어야 합니다.

---

✅ 왜 웹 접근성을 고려해야 할까?

✨ 1. 모두를 위한 웹

웹은 모두의 정보 공간입니다.

장애 유무, 연령, 사용 환경에 상관없이 모든 사람이 동등하게 이용할 수 있어야 합니다.

이는 단순한 기술 문제가 아니라 포용성과 배려의 문제이기도 합니다.

---

✨ 2. 법적 규제 및 기준

국가마다 웹 접근성 준수를 의무화하는 법이 마련되어 있습니다.

• 한국: 「장애인 차별 금지법」에 따라 공공기관 및 일부 민간 사이트는 접근성 준수 의무
• 미국: ADA, Section 508
• 국제 기준: W3C의 WCAG (Web Content Accessibility Guidelines)

준수하지 않으면 법적 책임이나 벌금이 발생할 수 있습니다.

---

✨ 3. 더 많은 사용자 확보

접근성을 높이면 더 많은 사람들이 사이트를 사용할 수 있게 되어

결과적으로 트래픽, 매출, 브랜드 신뢰도까지도 함께 향상됩니다.

• 시니어 유저
• 모바일/저사양 환경 사용자
• 일시적인 부상(예: 손목 통증, 화면 깨짐 등)

---

✅ 웹 접근성을 높이는 방법

접근성을 향상시키기 위해서는 기술적 + 디자인적 배려가 필요합니다.

🔹 1. 대체 텍스트 제공 (alt)

이미지에는 반드시 alt 속성을 제공해 스크린 리더가 읽을 수 있도록 해야 합니다.

<img src="profile.jpg" alt="홍길동 프로필 사진">

---

🔹 2. 시멘틱 태그 사용

<div> 대신 <header>, <nav>, <main> 등의 의미 있는 시멘틱 태그를 사용하면

보조 기술이 페이지 구조를 더 잘 이해할 수 있습니다.

---

🔹 3. 키보드 접근 가능하게 만들기

모든 인터랙션 요소(button, input, a)는 탭(Tab) 키로 이동 가능해야 하며,

포커스 스타일도 명확히 보이도록 처리해야 합니다.

css
복사편집
button:focus {
  outline: 3px solid #3399ff;
}

---

🔹 4. 명확한 대비와 색상 사용

텍스트와 배경 간의 명도 대비는 충분해야 하며, 색상만으로 정보를 전달하지 않아야 합니다.

/* 나쁜 예: 회색 글자 + 회색 배경 */
color: #888;
background-color: #ccc;

/* 좋은 예: 진한 글자 + 밝은 배경 */
color: #222;
background-color: #fff;

---

🔹 5. 레이블과 폼 연결

폼 요소에는 반드시 <label>을 연결하여 입력 필드의 의미를 명확히 알려줘야 합니다.

<label for="email">이메일</label>
<input type="email" id="email" name="email" required>

---

🔹 6. ARIA 속성 활용 (보조 기술 보완용)

ARIA 속성은 스크린 리더 같은 보조 기술을 위한 추가 힌트입니다.

<button aria-label="장바구니 열기">
  🛒
</button>

---

✅ 마무리

웹 접근성은 단순히 '장애인을 위한 기능'이 아닙니다.

모든 사용자가 다양한 상황에서도 웹을 사용할 수 있도록 돕는 철학이자 기술입니다.

조금만 신경 써도 여러분의 웹사이트는 더 많은 사람들에게 다가갈 수 있는 공간이 됩니다.