main-logo

기본적인 웹 접근성 작업 체크 리스트

화면 작업 시 지켜야 하는 가장 기본적인 웹 접근성 준수 사항 알아보기

profile
zurang23
2024년 01월 15일 · 0 분 소요

들어가며

우리 그룹은 웹 접근성 프로젝트가 아니더라도 기본적인 웹 접근성을 지키면서 하자! 기본이어서 신규 입사자분들이 오거나 주니어 작업자분들이 작업할 때 웹 접근성 관련 코드 피드백을 종종 드리곤 하는데요,
기본적인 웹 접근성은 과연 어느 정도를 말하는지 모호해서 이 정도는 지켜주세요! 하는 체크리스트를 만들어두면 코드 리뷰나 신규 작업자 가이드 시에도 편할 거 같아 짧게 작성해 보았습니다.

 

 

화면 작업 시 지켜야 하는 기본적인 웹 접근성 준수 사항

div 보다는 사용 목적에 맞는 의미 있는 마크업 사용

습관성으로 div를 사용하는 경우가 많은데 main, aside, nav, header, footer, section, article 등 시멘틱 마크업을 적극적으로 사용합니다.

  • section, article 사용 시에는 반드시 해당 콘텐츠의 heading 태그를 포함합니다.
  • ul, ol, dl, p도 목적에 맞게 구분해서 사용합니다.

 

적절한 Heading 태그를 순서대로 사용

요즘은 재활용 가능한 컴포넌트를 만든 후 작업하는 경우가 많아 페이지에서 어떤 heading level이 맞을지 알 수 없어 heading tag를 쓰지 않는 경우도 많은데요, 이럴 때 props로 heading level을 바꿀 수 있게 해서라도 각 페이지에서 적절한 heading 태그를 사용할 수 있게 하는 것이 맞습니다.

  • heading 태그는 중간 단계를 생략해서 사용하지 않습니다. h1 - h2 - h3 - h4 - h5 - h6 등으로 순서대로 사용합니다.
  • h1을 사이트 로고로 사용하는 경우가 많은데, 그보다는 각 페이지의 title과 동일하게 해당 페이지의 title 을 h1으로 사용하는 것을 권장합니다.

 

img alt 태그는 이미지를 대체하는 목적으로 사용

의미가 없는 단순 디자인 용 이미지일 경우는 빈 alt 값으로 작성합니다. (alt="배경 이미지" 또는 alt ="OOO 이미지" 와 같이 쓰지 않습니다.)

이미지 alt의 잘못 사용 된 예

[alt 태그 잘못 작성된 예]

 

클릭 요소가 아닌 곳에 클릭 이벤트를 넣지 않기

div 요소에 clickEvent를 넣는 경우가 종종 있는데, 어쩔 수 없이 div에 clickEvent를 넣을 경우는 role="button"을 반드시 넣어 div의 role을 지정해 주는 것을 권장합니다.

 

링크, 버튼의 outline을 css로 강제 삭제하지 않기

간혹 디자인에서 클릭했을 때 나오는 outline이 이쁘지 않다며 없애달라고 하는 경우가 종종 있습니다. 그럴 때는 focus-visible로 실제 키보드로 focus 이벤트가 일어났을 때만 ouline이 나올 수 있게 설정해 줄 수 있습니다.

 

버튼, 링크에는 반드시 텍스트를 포함

버튼, 링크를 사용 시 대부분 텍스트를 잘 넣지만 간혹 빠트리는 경우가 있습니다. 바로 이미지를 쓰는 경우인데요,

이 경우 img 태그를 쓰는 경우는 alt 값으로 대체할 수 있습니다. img 태그가 아닌 svg 이미지를 쓰는 경우는 꼭 Hidden Text를 사용해 줍니다.

(Hidden Text 사용은 웹 접근성을 준수하는 코드 작성하기 #번외편를 참고해주세요)

 

버튼, 링크의 상태 값 작성하기

toggle 버튼인 경우 해당 버튼의 상태 값을 나타내주는 aria 값(aria-expanded)이나, 선택됨 같은 Hidden Text를 포함하여 현재 상태를 알려줍니다. 

현재 활성화된 페이지의 링크 active 표현 시 aria 값(aria-current) 또는 Hidden Text로 상태를 표시해 줍니다.

menu_active_ex.png

aria_current_ex.png

[메뉴 active 표현 시 aria-current 적용 예시]

 

포커스가 가면 안되는 요소에 적절한 조치 취하기

화면에 보이지 않는 요소를 display: none이 아니라 height: 0; overflow: hidden으로 표현했을 경우는 (아코디언 인터렉션을 위해 해당 방식으로 사용하는 경우가 종종 있음) aria-hidden="true"를 넣어줘서 키보드 포커스가 해당 요소로 가지 않게 추가해 줍니다.

 

 

마치며

정말 기본적으로 지켜야 할 웹 접근성 관련 체크리스트를 작성해 보았습니다. 해당 체크리스트는 제가 PL 또는 선임자로 코드 리뷰를 하거나, 검수를 할 때 웹 접근성 측면에서 지켜져야 할 최소의 관점으로 작성된 리스트입니다. 실제 웹 접근성 준수 프로젝트를 진행한다면 지금 리스트보다 지켜야 할 것들이 훨씬 더 많겠지만 특별히 웹 접근성 준수라는 말이 없다고 하더라도 화면을 구현하는 프론트엔드 개발자 또는 퍼블리셔라면 이 정도는 기본으로 지키면서 작업하는 게 좋지 않을까 생각해 봅니다.