Skip to main content

<div> 쓰기 전에 생각했나요? 🤔

🚀 프론트엔드 취업 차별화 전략​

  • 웹 표준
  • 웹 접근성
  • 웹 호환성
  • SEO (Search Engine Optimization)
  • 웹 보안
  • 웹 성능 최적화
  • UX/UI
  • …

한 가지 강점을 가지면 취업할 때 좋습니다

🎯 도입: 왜 접근성을 지켜야 하는가?​

1. 접근성, '선택'이 아닌 '필수'입니다.​

  • 정의: 장애 유무와 관계없이 모든 사용자가 웹 콘텐츠를 동등하게 이용할 수 있도록 하는 것.
  • 법적 의무: 국내에서는 「장애인차별금지법」 등에 따라 웹 접근성이 의무화되어 있습니다.
  • 🔥 비즈니스적 이점:
    • 사용자 확대: 시각/청각 장애인, 노인, 일시적 장애 사용자까지 서비스 대상이 넓어집니다.
    • SEO 개선: 시맨틱 코드는 검색 엔진 크롤러에게도 친화적이므로, 검색 순위 향상에 기여합니다.
    • 벌금 개선 : https://www.newspim.com/news/view/20210218001172

2. 먼저, 웹 표준을 준수합시다!​

  • 웹 표준 : 브라우저가 따르는 표준 ⇒ 페이지가 동일하게 보임.
  • 웹 표준 지키면 이점이 많다
    • 웹 표준 준수 → 예측 가능한 문서 → 접근성 향상
    • 예측 가능한 문서 → 크롤링 bot 좋은 문서로 인식 → SEO 최적화

핵심 1. 시맨틱 HTML로 시작하라​

문제 인식: 우리의 코드가 스크린 리더에게 어떻게 읽히는지 상상해 보세요. div와 span만으로는 아무 정보도 전달되지 않습니다.

1. 태그의 의미론적 역할 복원​

역할비시맨틱 (나쁜 코드)시맨틱 (좋은 코드)
페이지 구조< div id="header">`<header>, <main>, <nav>, <footer>
액션<div onclick="..."><button>
이동<span onclick="..."><a href="...">

2. 이미지 처리: alt의 중요성​

alt는 단순한 설명이 아닌, 이미지가 전달하는 정보의 대체 수단입니다.

이미지 종류alt 속성 값
정보 전달용구체적인 정보 제공 (alt="파이 차트: 2024년 1분기 매출 50% 증가")
장식용alt="" (빈 값)
복잡한 차트alt로 요약 제공 후, 본문 또는 ARIA로 상세 설명 제공

핵심 2. ARIA 속성 활용과 동적 콘텐츠 제어​

시맨틱 HTML이 한계에 부딪히는 동적인 컴포넌트 (탭, 모달, 아코디언)는 ARIA(Accessible Rich Internet Applications) 속성으로 보완합니다.

1. ARIA 3요소: 역할, 상태, 속성​

ARIA는 HTML 태그에 역할(Role), 상태(State), **속성(Property)**을 부여하여 스크린 리더에게 전달합니다.

  • role="tablist": 이 요소가 탭 목록 역할을 한다.
  • aria-expanded="false": 현재 상태가 닫혀 있음을 의미한다.
  • aria-label="장바구니": 요소의 기능을 레이블로 명확히 지정한다.

2. 모달/아코디언 제어 예시​

자바스크립트로 콘텐츠의 가시성이 바뀔 때, ARIA 상태도 함께 변경되어야 합니다.

컴포넌트상태 변경 전상태 변경 후 (JS로 제어)
아코디언 버튼<button aria-expanded="false">제목</button><button aria-expanded="true">제목</button>
모달 창모달이 닫힐 때:
<div role="dialog" hidden>...</div>모달이 열릴 때: aria-modal="true" 및 포커스 관리

핵심 3. 키보드 접근성 및 포커스 관리​

시각 장애인뿐만 아니라 손 부상, 운동 장애, 혹은 마우스를 사용할 수 없는 모든 사용자는 키보드만으로 웹 서비스를 이용합니다. 아무리 ARIA를 잘 적용해도 키보드로 조작이 안 되면 무용지물입니다.

1. 포커스 트랩(Focus Trap) 설계 실패​

  • 모달/팝업이 열려도 Tab 키를 누르면 모달 뒤의 요소로 포커스가 빠져나가 버립니다.
  • 시각적으로 focus 된 항목을 표시하지 않아, 항목이 어디를 focus 하는지 알 수 없습니다.
  • 치명적 결과: 키보드 사용자(장애인, 마우스 미사용자)는 모달을 닫거나 내부 요소를 조작할 수 없습니다.
  • 해결 방법:
    1. 모달이 열릴 때 tabindex="-1"을 이용해 모달에 포커스를 주고.
    2. 모달 내부에서만 포커스가 순환되도록 강제하는 포커스 트랩 로직을 구현하거나, 관련 라이브러리(e.g., react-focus-lock)를 사용.
    3. 모달이 닫히면 원래 포커스 위치로 복귀시켜야 함.

2. 클릭 이벤트 + 키보드 이벤트​

  • onClick 을 이용한 상호작용 구현 시, 반드시 Enter 나 Space 키를 이용한 실행이 가능해야 합니다
  • 기본적으로 interactive 한 태그 (button, a) 는 키보드로 조작 가능
  • div 태그에 onClick 이벤트를 이용한 상호작용 구현 시 Enter 나 Space 키로 조작 가능하게 설계

그 외…​

  • WCAG 명도 대비 기준 숙지: 일반 텍스트 4.5:1, 큰 텍스트 3:1 준수.
  • 오류 처리 시 텍스트, 아이콘, 굵기 등 2가지 이상의 시각적 단서를 함께 제공 (aria-live)
  • 브라우저 확대시, 페이지 깨지지 않는지 확인
  • blind 클래스 활용 - 안보이지만 읽어주는 기능 활용
  • …

결론: 100% 사용자를 위한 코드로​

1. QA 단계에서의 접근성 검증​

  • 자동화 도구: 개발 단계에서부터 검증 비용을 최소화해야 합니다.
    • Lighthouse: Chrome 개발자 도구 내장 (접근성 항목 체크)
    • Axe-core: Jest, Cypress 등 테스트 환경에 통합하여 빌드 단계에서 접근성 오류를 잡아냅니다.
  • 수동 테스트: 자동화 도구로 잡지 못하는 맥락적 오류(예: alt 내용의 적절성)는 키보드 테스트와 스크린 리더를 사용해 직접 확인해야 합니다.

2. 핵심 메시지​

웹 접근성을 준수한 개발자는 사용자에 대한 깊은 이해와 견고한 아키텍처 설계 능력을 갖춘 증거입니다.

여러분이 만드는 코드가 모든 사용자에게 차별 없이 전달되기를 바랍니다.

감사합니다.

Q&A​

웹 표준​