-
Notifications
You must be signed in to change notification settings - Fork 3
♿️ 접근성 개선 리포트
YUNAH edited this page Oct 24, 2024
·
1 revision
- 페어룸 만들기
- 페어룸 유형 선택하기
- 페어룸 정보 입력하기 (페어룸 온보딩)
- 타이머 시작하기
- 타이머 중지하기
- 스크린 리더 사용자가 페어룸 만들기 버튼을 선택할 수 있는가?
- 스크린 리더 사용자가 페어룸 만들기 모달이 열렸는지 알 수 있는가?
- 키보드만으로 페어룸 만들기 버튼과 모달에 접근할 수 있는가?
- 스크린 리더 사용자가 페어룸 유형을 선택할 수 있는가?
- 페어룸 유형들의 의미를 모든 사용자가 명확하게 이해할 수 있는가?
- 키보드만으로 페어룸 유형 선택 버튼을 조작할 수 있는가?
- 스크린 리더 사용자가 도움말 텍스트를 명확하게 읽을 수 있는가? (사용자 이름, 페어 이름, 역할 설정, 시간 설정)
- 스크린 리더 사용자가 새로운 입력 필드가 추가되었음을 인식할 수 있는가?
- 모든 입력 필드에 적절한 레이블이 연결되어 있는가?
- 입력 오류가 발생했을 때 스크린 리더 사용자가 인지할 수 있는가?
- 스크린 리더 사용자가 현재 몇 번째 항목을 입력하고 있는지 알 수 있는가?
- 키보드만으로 모든 입력 필드와 버튼을 조작할 수 있는가?
- 드라이버/내비게이터 선택 드롭다운을 키보드로만 조작할 수 있는가?
- 스크린 리더 사용자가 타이머가 시작되었음을 알 수 있는가?
- 스크린 리더 사용자가 현재 드라이버/내비게이터 정보를 인지할 수 있는가?
- 스크린 리더 사용자가 타이머의 남은 시간을 인지할 수 있는가?
- 키보드만으로 타이머를 시작할 수 있는가?
- 스크린 리더 사용자가 타이머가 중지되었음을 알 수 있는가?
- 키보드만으로 타이머를 중지할 수 있는가?
- 이미지의
alt텍스트로 이미지가 나타내는 구체적인 서비스 정보를 파악할 수 없다. - 스크린 리더가 불필요한 태그와 꾸밈 이미지들을 모두 읽어내어 핵심 기능에 접근하기 어렵다.
- 주요 정보나 기능을 담은 영역들이 적절히 구분되어 있지 않아 페이지의 구조를 이해하기 어렵다.
- 구성 요소의 포커스 순서가 사용자의 흐름에 맞지 않다.
- 모달이 열릴 때 첫 번째 버튼에 포커스가 고정되어 키보드로 다른 요소들로 이동이 불가능하다.
- 모달 외부의 콘텐츠도 함께 읽혀 현재 모달 내부의 중요 콘텐츠에 집중하기 어렵다.
- 모달의 열림 상태와 제목이 스크린 리더에 적절히 안내되지 않아 현재 컨텍스트를 파악하기 어렵다.
- 전체 온보딩 단계 중 현재가 몇 번째 단계인지 안내되지 않아 진행 상황을 파악할 수 없다.
- 사용자가 입력하고 있는 필드의 현재 값을 스크린 리더로 확인할 수 없다.
- 입력 값 유효성 검사 실패 시 발생하는 에러 메시지를 스크린 리더가 읽지 않아 어떤 오류가 있는지 파악할 수 없다.
- 페어 역할 선택을 위한 드롭다운의 현재 선택된 옵션과 사용 가능한 옵션 목록을 알 수 없다.
- 페어 역할 선택 드롭다운의 상태가 스크린 리더에 안내되지 않아 현재 상태를 파악하기 어렵다.
- 실시간으로 변경되는 타이머 정보나 타이머 상태 변화가 스크린 리더에 적절히 안내되지 않는다.
- 키보드로 타이머 시작, 중지 버튼에 접근할 수 없다.
- 랜딩 페이지의 최상위 요소에 헤딩 지정
- 페이지 전체에
aria-label및 이미지 대체 텍스트 속성 추가 - 꾸밈 요소에 (아이콘, 이미지 등)
alt=''를 추가해 불필요한 요소 읽기 방지 -
role="presentation"및aria-hidden="true"속성을 적절하게 사용하여 불필요한 태그 읽기 방지 - 키보드 포커스가 순서대로 적용되도록 요소 재정렬
-
useAriaTrap훅을 통해 모달을 띄웠을 때 스크린 리더가 모달 외부 요소를 읽는 현상을 방지 -
useFocusTrap훅을 통해 모달을 띄웠을 때 모달 내부 요소에서만 포커스가 이동하도록 구현
- 헤딩 태그 재정렬
- 모든 입력 필드에 적절한 레이블 연결
- 페어룸 온보딩 과정에서 필요한 설명을 한 번에 읽을 수 있도록
aria-label추가 - 페어룸 온보딩 과정에서 몇 번째 항목을 설정하고 있는지 확인할 수 있도록
aria-label추가 - 키보드만으로 모든 입력 필드와 버튼을 조작할 수 있도록 적절한
autoFocus추가
- 스크린 리더 사용자가 사이드바의 정보를 적절하게 읽을 수 있도록
aria-label속성 추가 - 사이드바 열림 상태에 따라 다른
aria-label제공 - 사용자의 로그인 상태에 따라 다른
aria-label제공
- 설정된 페어 프로그래밍 역할을 한번에 확인할 수 있도록
aria-label추가 - 각 역할에 대한 설명을 확인할 수 있도록 설명에 대한
aria-label추가
- 타이머 시작하기, 타이머 중지하기 버튼에 알맞은
aria-label을 추가 -
role="alert",aria-live="assertive”속성으로 타이머가 시작, 중지되었음을 실시간으로 알림 -
role="timer"속성으로 스크린 리더 사용자에게 타이머를 인식시키고 남은 시간을 알림
- 헤더에 적절한
aria-label을 추가해 스크린 리더 사용자가 헤더를 선택하면 카드를 열고 닫을 수 있음을 올바르게 안내 - 스크린 리더가 툴팁의 내용을 읽을 수 있도록 구현