lighthouse 개선(5) accessibility
웹 애플리케이션의 접근성을 검사한다. 접근성이란, 가능한 한 많은 사람이 웹사이트를 사용할 수 있도록 하는 방법이다.
lighthouse 접근성 점수는 모든 접근성 항목의 가중 평균으로, 가중치는 ax 사용자 영향 평가를 기반으로 한다.
우리 서비스에서 접근성 개선이 필요한 항목으로는 총 세가지가 있었다.
<button> 태그에 별다른 접근 가능한 이름이 없어서, 스크린 리더가 ‘버튼’이라고만 읽기 때문에 스크린 리더에 의존하는 사람들은 해당 버튼을 이해하기 어렵다.
aria-label을 통해 브라우저가 스크린 리더 사용자에게 전달해야할 내용을 적을 수 있다.
또한 title 속성을 사용하면, 마우스를 올렸을 때 툴팁을 제공할 수 있고, aria-labelledby 속성을 사용하면 다른 요소의 id를 참조하여 버튼에 이름을 부여할 수 있다.
- 왼쪽 상단 로고 버튼
왼쪽 상단의 로고 버튼은 로그인 버튼/워크스페이스 이동 버튼으로 쓰이는데, 버튼 태그에 별다른 설명이 없었다.
‘LogoBtn’ aria-label을 추가하여 설명을 부여했다.
- 메뉴 버튼: 페이지 리스트를 토글할 수 있는 버튼
 |
 |
|---|
이 메뉴 버튼을 클릭하면, 페이지 리스트를 확인할 수 있다.
이 버튼에는 ‘MenuBtn’ aria-label을 추가했다.
- 커서 버튼
커서 버튼을 클릭하면, 사용자의 프로필 이름과 커서 색상을 변경할 수 있는 설정 메뉴를 확인할 수 있다.
이 버튼에는 ‘CursorBtn’ aria-label을 추가했다.
<img> 요소의 alt 속성은, 이미지가 로드되지 않거나 시각적으로 볼 수 없는 사용자에게 이미지의 내용을 설명한다.
또한 검색엔진이 이미지 내용을 이해하는 데 도움을 주어 SEO에도 긍정적인 영향을 미친다.
- 로고 버튼 이미지
우리 프로젝트에서는 이 로고에 alt 속성이 없었고, ‘logo’ alt 속성을 추가하여 접근성을 높일 수 있었다.
- 로그인 이미지
카카오, 네이버 로그인 이미지에 별다른 설명이 없어 alt 속성으로 각각 ‘KakaoLogo’, ‘NaverLogo’를 추가하였다.
텍스트(포그라운드)와 백그라운드 색상의 대비율이 충분하지 않다면, 사용자가 텍스트를 읽는 데 어려움을 겪을 수 있다.
웹 콘텐츠 접근성 지침에 따르면 작은 글자는 4.5:1, 큰 글자는 3:1의 최소 대비를 가지고 있어야 한다.
백그라운드와 포그라운드 색상의 대비율의 pass/fail 여부를 알려주는 웹사이트가 있어 빠르게 색 대비 결과를 즉각적으로 확인할 수 있다.
- 공유 버튼
 |
 |
|---|
공유 텍스트와 파란색 백그라운드의 대비가 지침에 어긋나서, 좀 더 대비가 확실하게 진한 파란색으로 변경하였다.
- tailwind 기준 bg-blue-400 에서 bg-blue-600으로, hover 시에는 bg-blue-600에서 bg-blue-700으로 변경했다.
- connecting 상태
 |
 |
|---|
connecting 상태의 노란색이 하얀 배경과 대비가 약해, 텍스트 색상을 더 진하게 변경하였다.
- tailwind 기준 text-amber-500에서 text-yellow-700으로 변경하였다.
- 옆의 동그라미도 bg-amber-500에서 bg-yellow-700으로 변경하였다.
- connected 상태
 |
 |
|---|
연결된 상태를 나타내는 ‘connected’ 또한 하얀 배경과의 대비가 약해, 텍스트 색상을 더 진하게 변경하였다.
- tailwind 기준 text-green-500에서 text-green-700, 옆의 동그라미도 bg-green-500에서 bg-green-700으로 변경하였다.
그 결과 접근성 항목은 83점에서 100점까지 끌어올릴 수 있었다.
레퍼런스