[사전 미션 - 워밍업] - 파슬리(김윤아) 미션 제출합니다.

[anttiey]

📌 목표

• 스크린 리더로 성인 승객 수를 늘리거나 줄일 수 있어야 한다.
• 인원 수는 최소 1명, 최대 3명까지만 가능하게 구현한다.
• 승객 수를 늘리는 경우 실제 스크린 리더는 아래와 같이 읽을 수 있어야 한다.

  항공권 예매
  성인
  성인 승객 감소, 버튼
  1
  성인 승객 증가, 버튼
  (선택)
  성인 승객 증가
  2
  (선택)
  성인 승객 증가
  3
  (선택)
  최대 승객 수에 도달했습니다.
  

💡 해결 방법

1️⃣ index.html 언어 설정 변경

• 페이지의 기본 언어를 en 에서 ko-KR 로 변경하여 한국어로 스크린 리더가 적절히 작동하도록 수정했습니다.

2️⃣ 시멘틱 태그 적용

• App.tsx에서 div 를 main, section 등으로 대체하여 HTML 구조를 시멘틱하게 개선했습니다.

3️⃣ aria-label, aria-live 속성 설정

• 각 버튼에 적절한 aria-label 을 추가하여 버튼의 기능을 명확히 전달했습니다.
• 승객 수가 변경될 때 스크린 리더가 실시간으로 변화를 읽어주도록 aria-live 속성을 적용했습니다.

4️⃣ visually-hidden 클래스 사용

• 에러 메시지가 화면에 표시되지 않도록 visually-hidden 클래스를 적용해 스크린 리더에만 메시지가 전달되도록 처리했습니다.