본문 바로가기
카테고리 없음

[React] 접근성을 고려한 React 컴포넌트 개발 가이드

shaprimanDev 2024. 8. 11. 09:35
반응형

 

 

웹 접근성은 모든 사용자가 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것을 의미합니다. React 애플리케이션을 개발할 때 접근성을 고려하는 것은 매우 중요합니다. 이 가이드에서는 React 컴포넌트를 개발할 때 고려해야 할 주요 접근성 원칙과 구현 방법에 대해 알아보겠습니다.

1. 시맨틱 HTML 사용하기

React에서 시맨틱 HTML을 사용하는 것은 접근성의 기본입니다. 적절한 HTML 요소를 사용하면 스크린 리더와 같은 보조 기술이 콘텐츠를 더 잘 이해하고 해석할 수 있습니다.

// 나쁜 예
const Header = () => (
  <div className="header">
    <div className="title">웹사이트 제목</div>
  </div>
);

// 좋은 예
const Header = () => (
  <header>
    <h1>웹사이트 제목</h1>
  </header>
);

이 예시에서, <header>와 <h1> 태그를 사용함으로써 이 섹션이 페이지의 헤더이며 "웹사이트 제목"이 주요 제목임을 명확히 표현합니다.

2. 적절한 ARIA 속성 사용하기

ARIA(Accessible Rich Internet Applications) 속성은 HTML에 추가적인 의미를 부여하여 접근성을 향상시킵니다. React에서 ARIA 속성은 camelCase로 작성합니다.

const ExpandableSection = ({ expanded, toggleExpand, children }) => (
  <div>
    <button
      onClick={toggleExpand}
      aria-expanded={expanded}
      aria-controls="expandable-content"
    >
      {expanded ? '접기' : '펼치기'}
    </button>
    <div id="expandable-content" aria-hidden={!expanded}>
      {children}
    </div>
  </div>
);

이 컴포넌트에서 aria-expanded와 aria-controls 속성은 버튼의 상태와 제어하는 내용을 명확히 표현합니다. aria-hidden 속성은 접혀있을 때 스크린 리더가 내용을 무시하도록 합니다.

3. 키보드 내비게이션 지원하기

많은 사용자가 키보드로 웹사이트를 탐색합니다. React 컴포넌트는 키보드 내비게이션을 적절히 지원해야 합니다.

const NavigationMenu = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleKeyDown = (e, index) => {
    switch (e.key) {
      case 'ArrowRight':
      case 'ArrowDown':
        setActiveIndex((activeIndex + 1) % items.length);
        break;
      case 'ArrowLeft':
      case 'ArrowUp':
        setActiveIndex((activeIndex - 1 + items.length) % items.length);
        break;
    }
  };

  return (
    <nav>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            <a
              href={item.url}
              onKeyDown={(e) => handleKeyDown(e, index)}
              tabIndex={index === activeIndex ? 0 : -1}
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

이 예시에서는 화살표 키를 사용하여 메뉴 항목 간 이동이 가능합니다. tabIndex 속성을 사용하여 현재 활성화된 항목만 탭 순서에 포함되도록 합니다.

4. 색상 대비 고려하기

시각적 접근성을 위해 텍스트와 배경 간의 충분한 색상 대비를 제공해야 합니다. React에서는 동적으로 스타일을 적용할 때 이를 고려해야 합니다.

const Button = ({ primary, children }) => {
  const style = primary
    ? { backgroundColor: '#0056b3', color: '#ffffff' }
    : { backgroundColor: '#f8f9fa', color: '#212529' };

  return <button style={style}>{children}</button>;
};

이 예시에서는 primary 버튼과 기본 버튼에 대해 각각 다른 색상 조합을 사용합니다. 실제 애플리케이션에서는 이러한 색상 조합이 WCAG(Web Content Accessibility Guidelines) 기준을 충족하는지 확인해야 합니다.

5. 폼 레이블과 에러 메시지

폼 요소에는 항상 레이블을 연결해야 하며, 에러 메시지는 명확하게 관련 입력 필드와 연결되어야 합니다.

const FormField = ({ id, label, type, value, onChange, error }) => (
  <div>
    <label htmlFor={id}>{label}</label>
    <input
      id={id}
      type={type}
      value={value}
      onChange={onChange}
      aria-invalid={!!error}
      aria-describedby={error ? `${id}-error` : undefined}
    />
    {error && <span id={`${id}-error`} role="alert">{error}</span>}
  </div>
);

이 컴포넌트에서 htmlFor 속성은 레이블과 입력 필드를 연결합니다. aria-invalid와 aria-describedby 속성은 에러 상태와 에러 메시지를 입력 필드와 연결합니다.

6. 동적 콘텐츠 업데이트 알리기

React 애플리케이션에서 동적으로 콘텐츠가 변경될 때, 이를 스크린 리더 사용자에게 알려야 합니다.

const LiveRegion = ({ message }) => (
  <div aria-live="polite" aria-atomic="true">
    {message}
  </div>
);

const NotificationSystem = () => {
  const [notification, setNotification] = useState('');

  // 어떤 이벤트 발생 시 setNotification 호출

  return (
    <div>
      {/* 다른 컴포넌트들 */}
      <LiveRegion message={notification} />
    </div>
  );
};

aria-live 영역을 사용하면 동적으로 변경되는 콘텐츠를 스크린 리더가 자동으로 읽어줍니다.

7. 이미지에 대체 텍스트 제공하기

모든 의미 있는 이미지에는 대체 텍스트를 제공해야 합니다.

const Image = ({ src, alt }) => (
  <img src={src} alt={alt} />
);

// 사용 예
<Image src="logo.png" alt="회사 로고" />

장식용 이미지의 경우 빈 alt 속성을 사용합니다:

<img src="decoration.png" alt="" />

8. 모달 및 대화상자 접근성

모달이나 대화상자를 사용할 때는 키보드 트랩과 포커스 관리를 적절히 처리해야 합니다.

const Modal = ({ isOpen, onClose, children }) => {
  const modalRef = useRef(null);

  useEffect(() => {
    if (isOpen) {
      modalRef.current.focus();
    }
  }, [isOpen]);

  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      onClose();
    }
  };

  if (!isOpen) return null;

  return (
    <div
      ref={modalRef}
      role="dialog"
      aria-modal="true"
      tabIndex="-1"
      onKeyDown={handleKeyDown}
    >
      {children}
      <button onClick={onClose}>닫기</button>
    </div>
  );
};

이 모달 컴포넌트는 열릴 때 자동으로 포커스를 받고, ESC 키를 누르면 닫히며, aria-modal 속성을 사용하여 스크린 리더에 모달임을 알립니다.

9. 테스트와 도구 활용하기

접근성 테스트는 개발 프로세스의 중요한 부분입니다. React 애플리케이션의 접근성을 테스트하고 개선하기 위한 몇 가지 도구와 방법은 다음과 같습니다:

  1. ESLint와 eslint-plugin-jsx-a11y 플러그인을 사용하여 접근성 문제를 정적 분석합니다.
  2. React 개발자 도구의 Accessibility 탭을 활용합니다.
  3. 브라우저의 개발자 도구에서 제공하는 접근성 감사 도구를 사용합니다.
  4. 실제 스크린 리더로 애플리케이션을 테스트합니다.
// .eslintrc.json
{
  "extends": [
    "react-app",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["jsx-a11y"]
}

 

접근성을 고려한 React 컴포넌트 개발은 모든 사용자가 애플리케이션을 효과적으로 사용할 수 있도록 보장합니다. 이는 단순히 장애가 있는 사용자만을 위한 것이 아니라, 모든 사용자의 경험을 향상시키는 중요한 요소입니다.

 

이 가이드에서 다룬 주요 포인트를 정리하면 다음과 같습니다:

  1. 시맨틱 HTML을 사용하여 콘텐츠의 구조를 명확히 합니다.
  2. ARIA 속성을 적절히 사용하여 추가적인 의미를 부여합니다.
  3. 키보드 내비게이션을 지원하여 마우스를 사용할 수 없는 사용자도 쉽게 탐색할 수 있게 합니다.
  4. 충분한 색상 대비를 제공하여 시각적 접근성을 보장합니다.
  5. 폼 요소에 명확한 레이블과 에러 메시지를 제공합니다.
  6. 동적 콘텐츠 변경을 적절히 알립니다.
  7. 이미지에 대체 텍스트를 제공합니다.
  8. 모달과 대화상자의 접근성을 고려합니다.
  9. 다양한 도구를 활용하여 접근성을 테스트하고 개선합니다.

접근성은 개발 과정의 시작부터 고려되어야 하며, 지속적인 관심과 개선이 필요합니다. 이러한 원칙들을 적용함으로써, 우리는 더 포용적이고 사용하기 쉬운 웹 애플리케이션을 만들 수 있습니다.

반응형

티스토리툴바