[사전 미션 - 워밍업] - 잭슨(김진서) 미션 제출합니다.

[eunoia-jaxson]

사전 미션 목표

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

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

해결 과정

Step 1: 언어 설정하기

• fix: HTML 문서의 doctype 및 언어 설정 수정 html의 lang 속성을 en에서 ko로 설정했습니다.
• 👉 스크린 리더가 영어가 아닌 한국어를 사용합니다. ex) heading level 2 -> 머리말 단계 2

Step 2: 시맨틱 태그 사용하기

• refactor: HTML 구조 개선 및 접근성 향상 App.tsx 내 div 태그를 적절한 시맨틱 태그로 변경하였습니다.
• 👉 스크린 리더가 메인을 읽습니다.

Step 3: 버튼 접근성 향상시키기

• fix: 성인 승객 수 조절 버튼에 접근성 속성 추가 및 CSS 색상 코드 수정 버튼에 aria-label 속성을 추가하고, disabled 상태일 때 스타일을 추가하였습니다.
• 👉 스크린 리더가 버튼의 aria-label 속 텍스트를 읽음으로써 버튼의 정확한 동작을 제시합니다. ex) 하이픈, 버튼, 빼기 -> 성인 승객 감소, 버튼

Step 4: 변경 사항에 대한 실시간 알림 추가하기

• abf7b52 현재 승객 수를 표시하는 span 태그에 aria-live 속성을 추가했습니다.
  • aria-live: 'polite': 다른 설명을 읽고 나서 숫자를 읽어줌(순차적)
  • aria-live: 'assertive': 다른 설명을 다 읽기 전에 먼저 숫자를 읽어줌(순서를 기다리지 않음)
• 👉 span 태그 속 값이 변해 렌더링 될 때마다 aria-live 속성에 의해 값을 읽어줍니다.

Step 5: 최소/최대 값 도달 시 상태 메시지 알림 추가하기

• feat: 성인 승객 수 조절 시 상태 메시지 추가 및 시각적으로 숨겨진 요소 구현 statusMessage 상태를 추가해 최소/최대 값 도달 시 상태 메시지를 읽습니다.

• statusMessage에 role="status" 속성을 추가해 상태 메시지용 라이브 영역임을 표시했습니다. 기본적으로 aria-live="polite"가 내재되어 있어, 화면 낭독기가 해당 영역의 변화(텍스트 업데이트)를 감지해 조용히 안내합니다(현재 읽고 있던 음성을 중단하지 않음).

  <div
    className="visually-hidden"
    role="status"
    aria-atomic="true"
  >
    {statusMessage}
  </div>

• visually-hidden 속성을 이용해 statusMessage를 숨기되 스크린 리더가 읽도록 설정했습니다.