[사전 미션 - 워밍업] - 세라(김세빈) 미션 제출합니다.

[keemsebin]

요구사항

언어 설정하기

lang 속성을 en에서 ko로 변경했습니다.
테스트해보니 en일 때와 비교했을 때 차이는 숫자 발음, 제목(h 계열) 읽는 방식, 그리고 영어 발음 부분이었습니다.
추가 학습을 통해 ul, ol, li, table, form 등 다양한 요소를 스크린 리더가 읽을 때 구조적인 정보(ex. 목록, 항목 5개)를 함께 제공한다는 사실도 알게 되었습니다. 이를 통해 HTML 시맨틱 태그를 올바르게 작성하는 것이 왜 중요한지 다시 한번 깨닫는 계기가 되었습니다.

시맨틱 태그 사용하기

최상단 div의 첫번째 자식을 문서의 핵심 콘텐츠 영역으로 지정해주었습니다.
flight-booking-container 영역을 section으로 분리해주었는데, 지정한 의미가 크게 와닿지 않아서 추가적으로 학습을 진행해봤는데요!

<main>: 문서에서 가장 중요한 콘텐츠 블록을 의미하며 랜드마크 점프를 지원합니다. 따라서 페이지에 진입했을 때 스크린 리더가 바로 메인 영역으로 이동할 수 있었고, 이것이 탐색 속도를 단축시켜준다는 점을 알게 되었습니다.
<section>: 문서의 논리적 구획을 나타내며, 보통 제목과 함께 쓰입니다. 현재 “항공권 예매”가 <h2>로 표시되어 있어, 스크린 리더에서 탐색 가능한 구획으로 인식된다는 것을 확인했습니다.

버튼 접근성 향상시키기

스크린 리더가 버튼을 읽을 때 단순히 “버튼”이라고만 인식하지 않도록, aria-label 속성을 활용해 구체적인 의미를 부여했습니다.

as is	to be

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

동적인 상태 변화를 즉시 전달하기 위해 aria-live 속성을 적용했습니다. 이를 통해 화면 전환 없이도 변경된 정보가 스크린 리더에 실시간으로 읽히도록 개선했습니다.

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

• 스크린 리더 사용자에게는 상태 메시지를 전달해 최소/최대 값에 도달했음을 안내했습니다.
• 시각 사용자에게는 버튼에 disabled 속성 적용 및 dimmed 처리를 통해 더 이상 선택할 수 없다는 점을 직관적으로 알 수 있도록 했습니다.

스크린샷

2025-09-21.1.10.58.mov