Search
✈️

항공사 웹사이트의 컴포넌트 접근성 높이기

🔔 안내 사항

이번 미션은 항공사 웹사이트의 컴포넌트의 접근성 높이기 입니다. 이번 미션을 통해서 스크린리더 예시대로 실제로 읽는지 체크해보며 접근성을 높여보는 연습을 할 예정입니다.
✔️ 이 미션의 첫 PR을 2021년 9월 30일 목요일 10:00 까지입니다. ✔️ 3개의 웹 접근성 미션을 모두 구현 완료하는 것을 목표로 해주세요.

🎯 미션1 Spin Button: 승객수 입력하기

소량의 수량을 조정하기에 쉽고 편리한 스핀 버튼은 쇼핑과 관련한 모든 곳에서 쉽게 볼 수 있는데요. 항공사에서도 승객 수를 선택할 때 스핀 버튼을 사용하는데 제대로 구현하지 않으면 스크린 리더 사용자는 현재 상태를 알 수 없어 사용하기가 어렵습니다. 이 부분의 웹 접근성을 개선해보도록 하겠습니다.
최대 인원수는 3명까지만 가능하게 구현한다.
실제 스크린 리더는 아래와 같이 읽을 수 있어야 한다.
성인 탑승자 한명 줄이기(버튼) 성인 1 텍스트 숫자만 수정 성인 탑승자 한명 늘리기 (버튼) 성인 승객 추가 2 성인 탑승자 한명 늘리기 (버튼) 성인 승객 추가 3
Plain Text

🎯 미션2 Carousel: 지금 떠나기 좋은 여행

대한항공 홈페이지의 메인에서는 지금 프로모션하는 도착지에 대한 노선과 가격정보를 확인할 수 있는데요. 아래 정보들을 스크린 리더기로 읽을 수 있게 만들어주세요.
실제 스크린 리더는 아래와 같이 읽을 수 있어야 합니다.
1. 지금 떠나기 좋은 여행 2. 목록 8개 항목 포함 서울/인천 로스앤젤레스 일반석 왕복 1,481,800 대한민국 원 링크 목록 항목 3. 다음 버튼 (사용 중지) 4. 이전 버튼 (사용 중지)
Plain Text

🎯 미션3 메인 네비게이션

보통 항공사 웹페이지에서는 정말 많은 기능들을 제공하는데요. 그래서 각 기능들 페이지로 접근하기 위해 메인 네비게이션에는 많은 메뉴들이 있습니다. 그래서 이 메인 네비게이션에 대한 접근성은 매우 중요한데요. 탭키로 서브 메뉴들을 이동할 수는 있지만, 스크린리더 사용자에게는 치명적인 불편함이 있습니다.
예를 들어 아래와 같이 아시아나 항공사에서 마일리지 사용을 위해 아시아나클럽 > 마일리지사용 > 아시아나항공으로 넘어가기 위해서는 무려 탭키를 거의 100번 가까이 눌러야 하는데요.
이렇게 탭키를 이용해 메뉴를 탐색하는건 기능은 사용할 수 있지만 굉장히 불편합니다. 그래서 대한항공의 경우 메인 메뉴가 서브 메뉴를 엔터키를 눌러 펼쳐질 수 있게 구현하였습니다.
실제 스크린 리더가 아래와 같이 읽도록 구현해주세요.
탭 목록 항목 예매 버튼 접힘 목록 항목 공항 버튼 접힘 목록 항목 기내 버튼 접힘 목록 항목 스카이패스 버튼 접힘 (엔터키 누르기) 스카이패스 버튼 펼쳐짐 목록 5개 항목 포함 우수회원 혜택 링크 목록 항목
Plain Text

📝 코드리뷰시 체크 리스트

불필요한 마크업은 없는가?
웹표준에 어긋나는 마크업은 없는가?
스크린리더가 예시와 같도록 읽는가?