Web Accessibility

 

 

웹 접근성 테스트하는 법

 

1. 키보드로만 웹사이트 돌아다녀보기(tab키로)
2. focus ring이 생기는지? 접근성을 위해 못생겼어도 없애서는 안되고, 이쁘게 만들 수는 있다...?
3. hover 상태를 구분하는 방법.
   색맹이라면? 커서 모양을 통해 알 수 있지만 그건 pc만. underline 등으로 확실하게 표시해줘야 함.
4. Reduce Motion 옵션을 통해 애니메이션 없앨 수 있는가?
   animation이나 transition, transform 등은 reduced motion mode에서 없애주어야 함

 

유용한 툴

 

1. Lighthouse: 웹 접근성 점수가 90점 이상은 되어야 함. 개선이 필요한 부분을 목록으로 보여줌.
2. Siteimprove Accessibility Checker: Choose responsibility에서 Developer로 설정
   WCAG 기준에 맞춰서 확인할 수 있음

 

기타 HTML elements 관련

 

Images

alt 항상 함께 상세하게, 묘사하는 식으로 적어줘야 함

단순 장식용 이미지라면 alt 대신 role="presentation" 쓰면 됨

로고나 텍스트를 보여주는 이미지라면 해당 로고에 들어간 텍스트를 alt에 넣어주기.

 

Links, Buttons

hover 상태, focus outline은 항상 있어야 함
상태마다 색상만으로 구분하는 것이 아닌 physical change가 필요함 e.g. hover할 때 그림자 효과
외부 링크는 아이콘이나 텍스트로 외부로 이동될 것이라는 걸 보여줘야 함
Read more 같은 버튼엔 aria-labelledby="어떤 링크인지 설명" 달아줘야 함
e.g. Read more about blog postings

 

Inputs

focus outline 있어야 함
label 필수 (웬만하면 label 태그 안에 input이 위치하도록 하는 게 좋음)

 

 

 

결국은 친절하게...!!

 

 

평소에 고려하지 못한 부분들이 많은 것 같아서 되게 반성하게 됐다.

그리고 UX에 관심이 생기다 보니 이전의 3D나 화려한 애니메이션에 대한 관심이 사용자 경험과 접근성 쪽으로 옮겨가고 있다.

 

이 글과는 조금 다른 맥락이지만 공감됐던 댓글: So the thing is real industry don't want crazy animation but clean and better visuality