Lighthouse 검사 결과, 대부분의 접근성 문제는 1. 버튼의 식별 요소 2. 색상 대비 부족 문제였습니다.
색상의 경우 메인 컬러인 var-orange-600 과 white 의 대비가 부족한 부분인데, 이는 메인 컬러가 디자인상 지정된 것으로 바꾸기 어려워 버튼에 관련한 부분만 수정하였습니다.
[x] GNB 의 로고 링크 / 테마 토글 버튼 에 aria-label 속성 추가
[x] 모달의 X 버튼에 aria-lavel 속성 추가 aria-label 속성 추가
[x] Card, Card-list 컴포넌트 아이콘 버튼에 aria-label 속성 추가
[x] Input password 컴포넌트 아이콘 버튼에 aria-label 속성 추가
[x] pagination 컴포넌트 페이지 이동 아이콘 버튼에 aria-label 속성 추가
[x] 마이페이지 프로필 수정 아이콘 버튼에 aria-label 속성 추가
[x] GNB 컴포넌트 활성화 된 메뉴의 font-weight을 조절
그 결과 기존 85~89점 이었던 접근성 점수가, 모든 페이지 96~97점으로 향상되었습니다.
✏️ 작업 내용
Lighthouse 검사 결과, 대부분의 접근성 문제는 1. 버튼의 식별 요소 2. 색상 대비 부족 문제였습니다. 색상의 경우 메인 컬러인
var-orange-600
과white
의 대비가 부족한 부분인데, 이는 메인 컬러가 디자인상 지정된 것으로 바꾸기 어려워 버튼에 관련한 부분만 수정하였습니다.aria-label
속성 추가aria-lavel
속성 추가aria-label
속성 추가aria-label
속성 추가aria-label
속성 추가aria-label
속성 추가aria-label
속성 추가font-weight
을 조절그 결과 기존
85~89점
이었던 접근성 점수가, 모든 페이지96~97점
으로 향상되었습니다.📷 스크린샷
✍️ 사용법
🎸 기타
close #220