[사전 미션 - 워밍업] - 썬데이(김유선) 미션 제출합니다.

[useon]

안녕하세요 ! 웹 접근성 사전 미션 제출합니다 🌞

✨ 요구 사항

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

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

🌟 해결 과정

1. 언어 설정하기

index.html의 lang 속성이 en로 설정되어 있었는데 ko로 수정했습니다.
보이스오버로 사용해보니 en인 경우 헤딩이라고 읽어주고 ko인 경우 머리말로 읽어주더라고요 !

2. 시맨틱 태그 사용하기

리드미에서는 App.tsx 대상으로만 살펴보라고 적혀있었지만 .. 하위 컴포넌트도 수정해 버렸습니다 ...... 🤭

• App.tsx

해당 페이지에 h1이 없고 h2부터 시작하길래 header 태그 안에 h1 태그로 항공사 이름을 추가했습니다.
의미없는 div 태그 대신 main, article 태그를 사용했습니다.

• FlightBooking.tsx

div 태그 대신 section 태그를 사용했습니다.

3. 버튼 접근성 향상시키기

aria-label을 사용하면 텍스트보다 우선 순위가 높게 설정되어 aria-label로 적힌 문자를 읽어준다고 합니다.

사용자가 더 쉽게 이해할 수 있도록 성인 승객 감소, 성인 승객 증가로 텍스트를 제공하도록 했습니다.

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

사용자가 증가 또는 감소 버튼을 누를 시 변경에 대한 알림을 주도록 aria-live를 사용했습니다.

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

css .visually-hidden 클래스로 시각적으로는 보이지 않도록 설정합니다.
role = 'alert' 추가하여 알람 역할을 설정합니다.
설정한 최대/최소인 경우 메세지가 설정되도록 코드를 추가했습니다.
위 작업으로 시각적으로는 보이지 않지만 최대/최소 수에 도달하였다고 음성 안내를 합니다.

6. 추가 구현) 최소 상태일 때 감소를 누를 때마다, 최대 상태일 때 증가를 누를 때마다 최소/최대 수에 도달하였다고 안내하기

최초 도달 시에만 안내해주고 누를 때마다 안내를 안 해줘서 해당 기능이 필요하다고 생각했습니다.
해당 코드를 추가해서 DOM이 새로 그려지도록 하여 도달 시 추가로 버튼을 누를 때마다 안내 음성이 나오도록 기능을 추가했습니다.