[Web] 웹 접근성과 비즈니스 전략의 접근성

들어가며

웹 접근성은 단순히 장애인을 위한 추가 기능이 아니라, 웹이 마땅히 갖추어야 할 본질적인 품질이다. W3C와 MDN, web.dev 등의 공식 문서에 따르면, 접근성이란 사용자가 처한 신체적 상태나 환경적 제약에 상관없이 누구나 동등하게 정보에 접근할 수 있도록 보장하는 것을 의미한다. 이는 손을 다쳐 마우스를 쓰지 못하는 일시적 상황이나, 소음이 심한 곳에서 영상을 봐야 하는 환경적 제약까지 모두 포함하는 보편적 사용자 경험(UX)의 영역이다.

 

접근성 높은 웹을 만드는 핵심은 크게 의미 있는 마크업, 키보드 조작 가능성, 보조 기술 호환성이라는 세 가지 기둥으로 지탱된다. 그중에서도 개발자가 가장 정교하게 설계해야 할 영역은 바로 키보드 지원과 포커스(Focus) 관리다. 대부분의 인터랙션은 포커스 이동과 조작으로 모델링되기 때문이다.

 

포커스 순서와 DOM 구조의 중요성

포커스는 현재 키보드 입력을 받는 지점을 의미하며, 주로 버튼, 링크, 폼 요소 등 인터랙티브한 요소가 그 대상이 된다. 사용자는 Tab 키로 다음 요소를 탐색하고, Shift + Tab으로 이전 요소로 돌아온다. 이때 가장 중요한 원칙은 포커스의 순서가 화면에 보이는 시각적 순서보다 DOM(문서 객체 모델)의 소스 코드 순서를 우선해야 한다는 점이다.

Tab 키는 키보드 포커스를 DOM 위로 이동한다. Shift + Tab은 포커스를 DOM 아래로 이동합니다.

 

web.dev의 가이드는 기본 탭 순서가 코드 작성 순서를 따른다고 강조한다. 만약 CSS의 flex-direction이나 order 속성을 사용해 시각적 위치만 억지로 바꾸면, 키보드 사용자는 예측할 수 없는 포커스 이동을 경험하게 되어 큰 혼란에 빠진다. 따라서 논리적인 콘텐츠 흐름에 맞게 HTML 구조를 설계하는 것이 접근성의 첫걸음이다.

 

포커스 표시기와 시각적 피드백

실무에서 자주 범하는 실수 중 하나는 디자인을 이유로 outline: none 속성을 사용하여 포커스 스타일을 제거하는 것이다.

포커스 표시기는 키보드 사용자가 현재 자신의 위치를 파악할 수 있는 유일한 단서다. 브라우저의 기본 스타일을 그대로 사용하거나, 서비스의 테마에 맞춘 맞춤형 포커스 스타일을 제공하여 반드시 시각적으로 명확히 드러나게 해야 한다. 특히 배경색과의 대비가 3:1 이상이 되도록 설계하여 저시력 사용자도 쉽게 인지할 수 있도록 배려해야 한다.

 

tabindex 속성의 올바른 활용

정교한 포커스 제어를 위해 tabindex 속성을 활용할 때는 다음의 세 가지 기준을 명확히 지켜야 한다.

 

첫째, tabindex="0"은 원래 포커스를 받지 않는 div나 span 같은 요소에 자연스러운 탭 순서를 부여하고 싶을 때 사용한다. 다만, 포커스만 주는 것에 그치지 않고 해당 요소가 Enter나 Space 키로 실제 동작하도록 키보드 이벤트 처리를 반드시 병행해야 한다.

 

둘째, tabindex="-1"은 탭 키로는 도달하지 않지만, 자바스크립트의 .focus() 메서드를 통해 프로그래밍적으로 포커스를 보낼 수 있게 만든다. 이는 본문 바로 가기(Skip Link) 기능을 구현하거나, 아래에서 설명할 모달 창 제어 시 매우 유용하다.

 

셋째, 1 이상의 양수 tabindex는 사용을 지양해야 한다. 이는 브라우저의 자연스러운 흐름을 무너뜨려 예측 불가능한 사용자 경험을 유발하고 유지보수를 매우 어렵게 만든다.

 

모달과 Focus

모달을 사용할 때 가장 흔히 발생하는 결함 중 하나는, 모달이 열렸음에도 포커스가 모달 뒤편의 본문에 머물거나 빠져나가는 현상이다. 이를 해결하기 위해 모달 내부에서만 포커스가 순환하도록 하는 '포커스 가두기(Focus Trap)' 설계가 필요하다.

 

아래는 useEffect와 useRef를 활용해 모달 내부의 포커스를 제어하는 간단한 예제 코드다.

import React, { useEffect, useRef } from 'react';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

const AccessibilityModal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
  const modalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!isOpen) return;

    // 1. 모달이 열리면 모달 자체 혹은 첫 번째 요소에 포커스 부여 (tabindex="-1" 필요)
    modalRef.current?.focus();

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
      if (e.key !== 'Tab') return;

      const focusableElements = modalRef.current?.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      
      if (!focusableElements || focusableElements.length === 0) return;

      const firstElement = focusableElements[0] as HTMLElement;
      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;

      // 2. Tab 순환 로직 (Shift + Tab 포함)
      if (e.shiftKey) { // Shift + Tab: 첫 번째 요소에서 마지막 요소로 이동
        if (document.activeElement === firstElement) {
          e.preventDefault();
          lastElement.focus();
        }
      } else { // Tab: 마지막 요소에서 첫 번째 요소로 이동
        if (document.activeElement === lastElement) {
          e.preventDefault();
          firstElement.focus();
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div 
      className="modal-overlay" 
      role="dialog" 
      aria-modal="true" 
      aria-labelledby="modal-title"
    >
      <div 
        className="modal-content" 
        ref={modalRef} 
        tabIndex={-1} // JS로 포커스를 주기 위해 필요
      >
        <h2 id="modal-title">{title}</h2>
        {children}
        <button onClick={onClose}>닫기</button>
      </div>
    </div>
  );
};

 

이 코드의 핵심은 tabindex="-1"을 활용해 모달 컨테이너에 초기 포커스를 주고, 키보드 이벤트를 감지하여 첫 번째와 마지막 포커스 요소 사이를 강제로 연결하는 데 있다.

 

시각적 요소(img)와 대체 텍스트(alt) 전략

이미지 태그의 alt 속성은 단순히 기계적으로 채우는 것이 아니라, 정보의 성격에 따라 전략적으로 작성해야 한다.

• 의미 있는 이미지: 단순히 "로고"라고 적기보다 "NHN Cloud 서비스 로고"처럼 구체적인 정보를 제공해야 한다. 이미지 안에 중요한 텍스트가 포함되어 있다면 해당 내용을 그대로 alt 값에 포함한다.
• 장식용 이미지: 디자인을 위한 배경이나 장식용 아이콘이라면 alt=""와 같이 빈 값을 주어 스크린 리더가 해당 요소를 무시하고 지나가게 해야 한다. (aria-hidden을 사용해 스크린 리더가 탐색할 수 없게 만드는 것도 방법이다.)
• 아이콘 버튼: 텍스트 없이 아이콘만 존재하는 버튼은 버튼 태그에 aria-label 속성을 사용하여 해당 버튼의 기능을 명확히 설명해야 한다.

 

시멘틱 태그와 ARIA 속성의 관계

웹 접근성에서 가장 중요한 점은 "ARIA를 쓰지 않아도 된다면 쓰지 않는 것(No ARIA is better than Bad ARIA)"이다. HTML5가 제공하는 시맨틱 태그(button, nav, main 등)는 그 자체로 브라우저와 보조 기술에 자신의 역할(Role)을 알린다. 불필요하게 div에 role="button"을 부여하기보다 실제 button 태그를 사용하는 것이 훨씬 안전하다.

 

ARIA는 시맨틱 태그만으로는 설명하기 어려운 동적인 상태를 표현할 때 보조적으로 사용해야 한다. 아코디언 메뉴의 펼침 상태를 알리는 aria-expanded, 여러 탭 중 현재 선택된 탭을 나타내는 aria-selected 등이 대표적이다.

 

비즈니스 전략과 웹 접근성

많은 의사결정권자가 접근성을 비용으로만 간주하지만, 실질적으로 접근성은 시장 점유율을 넓히고 브랜드 가치를 높이는 전략적 투자에 가

깝다. 다음과 같은 관점에서 접근성은 비즈니스의 매출 성장에 기여한다.

잠재 고객층의 극대화

전 세계 인구의 약 15%는 어떤 형태로든 장애를 가지고 있다. 접근성을 무시하는 것은 전 세계 수억 명의 잠재 고객을 스스로 포기하는 것과 같다. 고령화 사회로 진입하면서 시력이나 인지 기능이 저하된 실버 세대가 주요 소비 계층으로 부상하고 있는 점을 고려하면, 접근성은 더 이상 '틈새시장'이 아닌 '메인스트림'을 잡기 위한 필수 조건이다.

검색 엔진 최적화(SEO)와의 시너지

검색 엔진의 크롤러는 화면을 보지 못하는 사용자(스크린 리더 사용자)와 매우 유사한 방식으로 웹 사이트를 탐색한다. 시맨틱 마크업을 준수하고 이미지에 적절한 대체 텍스트를 제공하는 접근성 개선 작업은 곧 검색 엔진이 우리 사이트의 콘텐츠를 더 잘 이해하게 만든다. 이는 검색 결과 상위 노출로 이어지며, 광고비 지출 없이도 유입량과 매출을 늘리는 결과로 나타난다.

법적 리스크 방지와 브랜드 신뢰도 구축

미국이나 유럽 등 글로벌 시장에서는 웹 접근성 미준수로 인한 소송이 매년 급증하고 있으며, 한국 역시 '장애인차별금지법'에 따라 웹 접근성 준수가 의무화되어 있다. 소송 비용이나 브랜드 이미지 실추로 인한 손실을 예방하는 것은 매출을 지키는 가장 확실한 방법이다. 반대로 접근성이 뛰어난 서비스는 '모두를 배려하는 전문적인 브랜드'라는 이미지를 심어주어 고객 충성도를 높인다.

전반적인 사용자 경험(UX) 개선 및 이탈률 감소

접근성 가이드라인은 본질적으로 '사용하기 쉬운 설계'를 지향한다. 로딩 속도 최적화, 명확한 포커스 표시, 논리적인 레이아웃은 장애가 없는 사용자에게도 더 쾌적한 환경을 제공한다. 모바일 기기를 사용하거나 인터넷 속도가 느린 환경에서도 원활하게 작동하는 사이트는 사용자 이탈률을 낮추고 구매 전환율(Conversion Rate)을 높이는 핵심 동력이 된다.

 

마치며

개발 중인 UI가 접근성을 충실히 따르고 있는지 확인하려면 다음 세 가지 질문을 던져보아야 한다.

1. 마우스 없이 키보드만으로 모든 기능을 조작할 수 있는가?
2. 포커스가 어디 있는지 눈에 잘 보이는가?
3. 커스텀 컴포넌트가 브라우저의 기본 키보드 동작을 그대로 유지하고 있는가?

결론적으로 웹 접근성은 프로젝트의 끝에서 점검하는 체크리스트가 아니라, 설계의 시작부터 고려해야 할 철학이다. 또 웹 접근성은 비즈니스 전략과 가장 가깝게 위치하고 있다.

접근성을 준수하기 위해서 포커스를 주는 이유와 그에 따른 조작 방식이 논리적으로 설계될 때, 비로소 웹은 장벽 없이 모든 이에게 열린 공간이 될 수 있다.