React, Next.js 프로젝트를 위한 웹 접근성 (a11y) 실전 체크리스트

모든 사용자가 동등하게 웹 콘텐츠에 접근하고 이용할 수 있도록 하는 웹 접근성(a11y)은 현대 웹 개발에서 선택이 아닌 필수 요소입니다. 특히 React, Next.js와 같은 프레임워크를 사용하여 복잡한 UI를 구축하는 프론트엔드 개발자에게는 초기 단계부터 접근성을 고려하는 것이 매우 중요합니다. 이 글에서는 React, Next.js 프로젝트에서 웹 접근성을 효과적으로 구현하기 위한 실전 체크리스트와 함께 TypeScript 기반의 코드 예제를 제공하여, 모든 사용자를 포용하는 웹 서비스를 만드는 데 필요한 지식을 공유하고자 합니다.

1. Semantic HTML의 올바른 활용

Semantic HTML은 웹 접근성의 가장 기본적인 토대입니다. <div>나 <span> 태그만을 남용하기보다는, 각 요소의 의미와 역할을 나타내는 적절한 HTML5 태그를 사용하는 것이 중요합니다. 이는 스크린 리더와 같은 보조 기술이 페이지 구조와 콘텐츠를 정확하게 이해하고 사용자에게 전달하는 데 도움을 줍니다.

체크리스트:

• 구조적 요소: header, nav, main, article, section, aside, footer 등을 사용하여 페이지의 주요 영역을 정의합니다.
• 콘텐츠 요소: h1~h6, p, ul, ol, li, blockquote, figure, figcaption 등을 콘텐츠의 의미에 맞게 사용합니다.
• 대화형 요소: button, a, input, select, textarea 등은 기본적으로 키보드 접근성을 제공하므로, 필요한 경우에만 커스텀 컴포넌트를 만들고 접근성을 보장해야 합니다.

코드 예시:

// components/Layout.tsx
import React, { ReactNode } from 'react';

interface LayoutProps {
  children: ReactNode;
  title: string;
}

const Layout: React.FC<LayoutProps> = ({ children, title }) => {
  return (
    <>
      <header>
        <h1>{title}</h1>
        <nav aria-label="메인 메뉴">
          <ul>
            <li><a href="/">홈</a></li>
            <li><a href="/about">소개</a></li>
            <li><a href="/contact">문의</a></li>
          </ul>
        </nav>
      </header>
      <main>
        {children}
      </main>
      <footer>
        <p>&copy; 2023 My Accessible App</p>
      </footer>
    </>
  );
};

export default Layout;

위 예시처럼 header, nav, main, footer와 같은 Semantic 태그를 사용하여 페이지의 구조를 명확히 하면, 스크린 리더 사용자가 웹 페이지의 전체적인 흐름을 쉽게 파악할 수 있습니다.

2. 키보드 접근성 확보

마우스 없이 키보드만으로 웹 페이지의 모든 기능에 접근하고 조작할 수 있도록 하는 것은 웹 접근성의 핵심 요구사항 중 하나입니다.

체크리스트:

• 포커스 가능성: 모든 대화형 요소(버튼, 링크, 폼 컨트롤 등)는 키보드 Tab 키로 포커스될 수 있어야 합니다.
• 포커스 순서: 포커스 이동 순서는 시각적인 흐름과 논리적으로 일치해야 합니다.
• 포커스 표시: 현재 포커스된 요소는 시각적으로 명확하게 구분되어야 합니다 (기본 브라우저 스타일 또는 커스텀 스타일).
• tabindex 활용:
  • tabindex="0": 요소가 일반적인 탭 순서에 포함되도록 만듭니다. (자주 사용)
  • tabindex="-1": 요소가 프로그래밍 방식으로만 포커스될 수 있도록 만듭니다. (모달 열릴 때 내부 요소에 포커스 이동 등)
  • tabindex > 0: 권장하지 않습니다. 탭 순서를 수동으로 지정하여 혼란을 야기할 수 있습니다.

tabindex 값에 따른 동작 비교:

tabindex 값	설명	사용 사례
0	요소가 일반적인 탭 순서에 포함되며, 키보드로 접근 가능합니다.	div나 span과 같은 비대화형 요소에 키보드 이벤트를 부여해야 할 때.
-1	요소가 탭 순서에서 제외되지만, JavaScript를 통해 포커스될 수 있습니다.	모달이 열릴 때 모달 내부의 특정 요소에 포커스를 강제 이동시킬 때.
1 이상	요소의 탭 순서를 수동으로 지정합니다. 사용을 강력히 지양합니다.	시각적인 순서와 DOM 순서가 크게 다를 때 임시 방편으로 사용될 수 있으나, 유지보수가 어렵습니다.

코드 예시:

// components/AccessibleButton.tsx
import React from 'react';

interface AccessibleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
}

const AccessibleButton: React.FC<AccessibleButtonProps> = ({ label, ...props }) => {
  return (
    <button
      type="button" // 기본적으로 button은 포커스 가능
      {...props}
    >
      {label}
    </button>
  );
};

export default AccessibleButton;

// components/FocusTrapModal.tsx
import React, { useEffect, useRef } from 'react';

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

const FocusTrapModal: React.FC<FocusTrapModalProps> = ({ isOpen, onClose, children }) => {
  const modalRef = useRef<HTMLDivElement>(null);
  const firstFocusableEl = useRef<HTMLElement | null>(null);
  const lastFocusableEl = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen && modalRef.current) {
      // 모달이 열리면 모달 내부에 포커스 트랩 설정
      const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
      );
      firstFocusableEl.current = focusableElements[0];
      lastFocusableEl.current = focusableElements[focusableElements.length - 1];

      firstFocusableEl.current?.focus(); // 모달 열릴 때 첫 번째 요소에 포커스

      const handleKeyDown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
          onClose(); // ESC 키로 모달 닫기
        } else if (event.key === 'Tab') {
          if (event.shiftKey) { // Shift + Tab
            if (document.activeElement === firstFocusableEl.current) {
              lastFocusableEl.current?.focus();
              event.preventDefault();
            }
          } else { // Tab
            if (document.activeElement === lastFocusableEl.current) {
              firstFocusableEl.current?.focus();
              event.preventDefault();
            }
          }
        }
      };

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

  if (!isOpen) return null;

  return (
    <div
      ref={modalRef}
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      tabIndex={-1} // 모달 자체는 탭 순서에서 제외하지만, JS로 포커스 가능하게
      className="modal-overlay"
    >
      <div className="modal-content">
        <h2 id="modal-title">모달 제목</h2>
        {children}
        <button onClick={onClose}>닫기</button>
      </div>
    </div>
  );
};

export default FocusTrapModal;

위 FocusTrapModal 예시는 모달 내부에 포커스를 가두어(Focus Trap), 모달이 열려 있는 동안 사용자가 모달 외부의 요소로 포커스를 이동시키지 못하게 합니다. 이는 스크린 리더 사용자에게 매우 중요한 사용자 경험을 제공합니다.

3. WAI-ARIA의 적절한 활용

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)는 Semantic HTML만으로는 표현하기 어려운 복잡한 UI 컴포넌트의 의미와 상태를 보조 기술에 전달하기 위한 속성 세트입니다.

체크리스트:

• role 속성: 요소의 역할을 명시합니다 (예: role="dialog", role="alert", role="tablist").
• aria- 상태 및 속성: 요소의 현재 상태나 속성을 나타냅니다 (예: aria-expanded="true", aria-checked="false", aria-label="사용자 이름", aria-describedby="설명 ID").
• aria-live 영역: 동적으로 업데이트되는 콘텐츠를 스크린 리더에 알립니다 (예: aria-live="polite").
• 과도한 사용 금지: Semantic HTML로 충분한 경우 ARIA 속성을 중복해서 사용하지 않습니다. ("No ARIA is better than Bad ARIA")

코드 예시:

// components/Accordion.tsx
import React, { useState } from 'react';

interface AccordionProps {
  title: string;
  children: React.ReactNode;
}

const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const id = React.useId(); // React 18+ useId 훅으로 고유 ID 생성

  return (
    <div className="accordion-item">
      <h3>
        <button
          type="button"
          onClick={() => setIsOpen(!isOpen)}
          aria-expanded={isOpen} // 아코디언의 확장/축소 상태를 알림
          aria-controls={`accordion-panel-${id}`} // 어떤 패널을 제어하는지 명시
          id={`accordion-header-${id}`}
        >
          {title}
        </button>
      </h3>
      {isOpen && (
        <div
          id={`accordion-panel-${id}`}
          role="region" // 영역의 역할을 명시
          aria-labelledby={`accordion-header-${id}`} // 어떤 헤더에 의해 레이블되는지 명시
          className="accordion-panel"
        >
          {children}
        </div>
      )}
    </div>
  );
};

export default Accordion;

aria-expanded, aria-controls, role="region", aria-labelledby 등의 ARIA 속성을 통해 스크린 리더 사용자는 아코디언의 상태와 콘텐츠를 명확하게 이해할 수 있습니다.

4. 색상 대비 및 시각적 요소

시각적인 요소의 접근성은 저시력자, 색맹 사용자 등 다양한 시각 장애를 가진 사용자를 위해 중요합니다.

체크리스트:

• 색상 대비: 텍스트와 배경색의 대비율은 WCAG(Web Content Accessibility Guidelines) 2.1 AA 등급 기준을 충족해야 합니다 (일반 텍스트 4.5:1, 큰 텍스트 3:1).
• 색상 외 정보 제공: 색상만으로 정보를 전달하지 않습니다. (예: 에러 메시지를 빨간색으로만 표시하는 것이 아니라 텍스트로도 명확히 설명)
• 이미지 대체 텍스트 (alt): 모든 의미 있는 이미지에는 이미지를 설명하는 alt 속성을 제공합니다. 장식용 이미지는 alt=""로 비워둡니다.
• 아이콘 텍스트 레이블: 아이콘만으로 기능을 나타내는 경우, aria-label이나 숨겨진 텍스트로 대체 설명을 제공합니다.
• 움직임 및 애니메이션: 과도하거나 빠르게 움직이는 애니메이션은 피하고, prefers-reduced-motion 미디어 쿼리를 사용하여 사용자가 선호하는 경우 애니메이션을 줄이거나 비활성화할 수 있도록 합니다.

코드 예시:

// components/ImageWithAlt.tsx
import React from 'react';
import Image from 'next/image'; // Next.js Image 컴포넌트 활용

interface ImageWithAltProps {
  src: string;
  alt: string; // alt 속성은 필수로 받도록 강제
  width: number;
  height: number;
}

const ImageWithAlt: React.FC<ImageWithAltProps> = ({ src, alt, width, height }) => {
  return (
    <Image
      src={src}
      alt={alt} // alt 텍스트는 이미지의 내용을 설명해야 합니다.
      width={width}
      height={height}
      priority // 중요 이미지인 경우
    />
  );
};

export default ImageWithAlt;

/* styles/globals.css */
/* prefers-reduced-motion을 활용한 애니메이션 제어 */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none !important;
    animation: none !important;
  }
}

/* 색상 대비 예시 */
.high-contrast-text {
  color: #333;
  background-color: #f0f0f0; /* 대비율 충분 */
}

.error-message {
  color: #d32f2f; /* 빨간색 */
  font-weight: bold;
  /* 색상 외에 추가적인 시각적 강조나 아이콘 사용 */
}

5. 폼(Form) 접근성

사용자가 폼을 통해 정보를 입력할 때 발생하는 접근성 문제는 서비스 이용에 큰 장애가 될 수 있습니다.

체크리스트:

• 레이블 (<label>): 모든 폼 컨트롤(input, textarea, select)에는 명확한 레이블이 있어야 합니다. <label for="input-id">와 <input id="input-id">를 연결하여 사용합니다.
• 필수 필드 표시: 필수 입력 필드는 시각적으로 명확하게 표시하고 (* 또는 텍스트), aria-required="true" 속성을 사용합니다.
• 에러 메시지: 에러 발생 시 사용자에게 명확하고 접근 가능한 방식으로 에러를 알리고, 에러가 발생한 필드로 포커스를 이동시키는 것이 좋습니다. aria-invalid="true"와 aria-describedby를 활용합니다.
• 플레이스홀더 사용 주의: 플레이스홀더는 레이블을 대체할 수 없습니다. 보조 기술 사용자에게는 플레이스홀더 텍스트가 사라지면 해당 필드의 목적을 알기 어려워집니다.

코드 예시:

// components/AccessibleInput.tsx
import React from 'react';

interface AccessibleInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  id: string;
  errorMessage?: string;
  isInvalid?: boolean;
}

const AccessibleInput: React.FC<AccessibleInputProps> = ({
  label,
  id,
  errorMessage,
  isInvalid = false,
  ...props
}) => {
  const errorId = `${id}-error`;

  return (
    <div className="form-group">
      <label htmlFor={id}>
        {label}
        {props.required && <span className="sr-only"> (필수)</span>} {/* 스크린 리더용 숨김 텍스트 */}
      </label>
      <input
        id={id}
        aria-required={props.required || undefined}
        aria-invalid={isInvalid}
        aria-describedby={isInvalid ? errorId : undefined} // 에러 메시지와 연결
        {...props}
      />
      {isInvalid && errorMessage && (
        <p id={errorId} role="alert" className="error-message"> {/* role="alert"로 에러 즉시 알림 */}
          {errorMessage}
        </p>
      )}
    </div>
  );
};

export default AccessibleInput;

6. React/Next.js 개발 환경에서의 접근성 도구 활용

React 및 Next.js 개발에서는 접근성을 더욱 쉽게 관리할 수 있는 도구와 패턴이 존재합니다.

체크리스트:

• eslint-plugin-jsx-a11y: ESLint 플러그인을 사용하여 JSX 코드 내에서 접근성 문제를 자동으로 감지하고 경고합니다.
• Next.js Image 컴포넌트: next/image는 alt 속성을 필수로 요구하여 이미지 접근성을 강화합니다.
• Next.js Link 컴포넌트: next/link 사용 시 내부에는 반드시 <a> 태그를 포함해야 합니다. (Next.js 13+에서는 <a> 태그를 직접 자식으로 포함하지 않아도 되지만, 여전히 Semantic HTML 관점에서 권장됩니다.)
• TypeScript 활용: 인터페이스나 타입 정의를 통해 alt, label 등 접근성 관련 속성들을 필수로 지정하여 개발 단계에서 누락을 방지합니다.
• React Fragments (<>...</>): 불필요한 div 래퍼를 줄여 DOM 구조를 단순화하고 Semantic HTML을 유지하는 데 도움을 줍니다.

eslint-plugin-jsx-a11y 설정 예시 (.eslintrc.js):

// .eslintrc.js
module.exports = {
  // ... 기타 설정
  extends: [
    'next/core-web-vitals',
    'plugin:jsx-a11y/recommended', // 이 부분을 추가
  ],
  plugins: [
    'jsx-a11y',
  ],
  rules: {
    // 필요에 따라 특정 규칙을 비활성화하거나 레벨 변경
    // 'jsx-a11y/anchor-is-valid': ['error', {
    //   components: ['Link'],
    //   specialLink: ['hrefLeft', 'hrefRight'],
    //   aspects: ['invalidHref', 'preferButton'],
    // }],
  },
};

Next.js Link 컴포넌트 사용 예시:

// components/NavLink.tsx
import React from 'react';
import Link from 'next/link';

interface NavLinkProps {
  href: string;
  children: React.ReactNode;
}

const NavLink: React.FC<NavLinkProps> = ({ href, children }) => {
  return (
    <Link href={href} passHref legacyBehavior> {/* Next.js 13 미만 또는 특정 패턴에서 legacyBehavior 사용 */}
      <a>{children}</a>
    </Link>
  );
};
// Next.js 13+ 에서는 <Link href={href}>{children}</Link> 형태로 <a> 태그를 직접 포함하지 않아도 됩니다.
// 하지만 Semantic HTML 관점에서 Link 컴포넌트가 <a> 태그를 렌더링하도록 하는 것이 좋습니다.
// <Link href="/about">About Us</Link> 와 같이 사용하면 자동으로 <a> 태그를 렌더링합니다.

export default NavLink;

마무리

웹 접근성은 모든 사용자가 제약 없이 정보를 얻고 상호작용할 수 있도록 하는 중요한 가치입니다. React, Next.js 기반의 프론트엔드 프로젝트에서 Semantic HTML, WAI-ARIA, 키보드 접근성, 색상 대비 등을 고려하는 것은 더 나은 사용자 경험을 제공할 뿐만 아니라, 법적 요구사항을 충족하고 기업의 사회적 책임을 다하는 일이기도 합니다. 이 체크리스트를 활용하여 개발 초기 단계부터 웹 접근성을 고려하고, 꾸준히 개선해 나가는 문화를 정착시켜 모두를 위한 웹을 만들어나가시기를 바랍니다.