"웹 접근성은 공공기관이나 대기업 사이트에만 해당되는 것 아닌가요?"

많은 중소기업과 스타트업 실무자분들이 웹사이트를 제작할 때 웹 접근성(Web Accessibility, A11y)을 '나중에 여유가 생기면 챙겨야 할 옵션' 정도로 생각하곤 합니다. 하지만 이는 큰 오해입니다. 장애인차별금지법에 따라 국내 법인은 웹사이트 운영 시 모든 이용자에게 동등한 접근권을 보장해야 하는 법적 의무를 지니고 있습니다.

더 중요한 사실은, 구글과 네이버의 검색 로봇 역시 '스크린 리더(화면 낭독기)'와 똑같은 방식으로 웹사이트 코드를 읽는다는 점입니다. 즉, 웹 접근성을 철저히 준수한 웹사이트는 자연스럽게 검색엔진 최적화(SEO) 점수가 높아져 오가닉 검색 유입이 크게 증가합니다. 오늘 위드스텝에서는 실무자가 반드시 알아야 할 웹 접근성 핵심 가이드 4가지를 소개합니다.

1. 시맨틱 마크업(Semantic HTML)과 제목 계층 구조

웹사이트의 구조를 짤 때 모든 요소를 의미 없는 <div>와 <span> 태그로만 감싸는 경우가 많습니다. 이렇게 만들어진 웹페이지는 시각적으로는 멀쩡해 보이지만, 스크린 리더와 검색엔진 봇 입장에서는 어디가 메뉴이고 본문인지 분간할 수 없는 '의미 없는 코드 덩어리'에 불과합니다.

• 시맨틱 태그 활용: 웹페이지 영역을 명확히 구분하는 <header>, <nav>, <main>, <section>, <footer> 태그를 적재적소에 사용해야 합니다.
• 제목 태그(Heading) 위계 준수: <h1>부터 <h6>까지 순서대로 논리적 계층을 유지해야 합니다. 단지 글자 크기를 키우기 위해 임의로 <h2>를 건너뛰고 <h4>를 사용하는 것은 지양해야 합니다.

<div class="nav">
  <div class="link">소개</div>
</div> <!-- 스크린리더 인식 불가 -->

<nav aria-label="메인 메뉴">
  <a href="/about">소개</a>
</nav> <!-- 봇과 스크린리더 완벽 색인 -->

2. 이미지 대체 텍스트(alt 속성)와 명도 대비(Contrast Ratio)

국내 웹사이트에서 가장 자주 적발되는 대표적인 접근성 위반 사례는 '통이미지 배너'입니다. 중요한 공지사항이나 이벤트 내용을 커다란 그래픽 이미지 하나로 만들고 alt="이벤트 배너"처럼 대충 기재하거나 비워두는 경우가 허다합니다.

• 구체적인 대체 텍스트 제공: 시각장애인이 스크린 리더로 들었을 때 이미지의 핵심 정보(일정, 혜택, 유의사항 등)를 완벽히 이해할 수 있도록 alt 속성에 명확한 설명을 넣어야 합니다. 단순 장식용 이미지인 경우에만 alt=""로 처리합니다.
• 4.5:1 이상의 명도 대비 준수: 텍스트와 배경색 간의 명도 대비는 최소 4.5:1(큰 텍스트는 3:1) 이상이어야 합니다. 밝은 회색 바탕에 연한 회색 글씨는 저시력자나 야외 햇빛 아래 모바일 화면을 보는 일반 사용자에게도 심각한 피로감을 유발합니다.

3. 키보드 접근성(Keyboard Navigation)과 포커스 인디케이터

신체적 제약으로 마우스를 쓰지 못하거나 키보드로 업무를 처리하는 고급 사용자들은 Tab 키만을 이용해 웹사이트를 탐색합니다. 키보드만으로 사이트의 모든 메뉴와 기능을 이용할 수 없다면 그 웹사이트는 접근성 관점에서 낙제점입니다.

• outline: none; 삭제 금지: 디자이너나 개발자가 파란색 사각 포커스 테두리가 보기 싫다는 이유로 CSS에 *:focus { outline: none; }을 일괄 적용하는 경우가 많습니다. 이는 키보드 사용자의 '마우스 커서'를 화면에서 지워버리는 것과 같습니다. 브랜드 컬러에 맞춘 눈에 띄는 커스텀 포커스 스타일을 반드시 정의해 주어야 합니다.
• 본문 바로가기(Skip Navigation) 링크: 시각장애인이나 키보드 이용자가 헤더의 수십 개 메뉴를 일일이 탭하지 않고 곧바로 본문 핵심 영역으로 점프할 수 있는 '본문 바로가기 링크'를 최상단에 제공해야 합니다.

4. 최신 프레임워크 동향과 WAI-ARIA 올바른 활용법

현대 웹사이트는 리액트, 뷰, 최신 그누보드 테마 등을 통해 아코디언 메뉴, 모달 팝업, 탭 UI 등 수많은 동적 컴포넌트를 사용합니다. 동적으로 화면이 바뀌는 컴포넌트는 보조 기술(보조공학기기)에 상태 변화를 알려주어야 합니다. 이때 사용하는 표준이 바로 WAI-ARIA입니다.

• 동적 컴포넌트 상태 안내: 모달 팝업이 열렸을 때 aria-modal="true" 및 포커스 트랩(Focus Trap) 설정, 드롭다운 메뉴가 펼쳐졌을 때 aria-expanded="true/false"를 실시간 반영해야 합니다.
• WAI-ARIA 제1원칙: "HTML 기본 태그로 해결할 수 있다면 ARIA를 쓰지 마라." 무리하게 <div role="button">을 만들기보다는 기본 <button> 태그를 쓰는 것이 스크린리더 호환성과 키보드 엔터 키 작동을 가장 확실하게 보장합니다.

• 목록