웹 접근성 & 웹 표준

웹 접근성

웹 접근성 대상자

전맹 시각장애인, 청각장애인, 노인, 학생 등 다양한 연령대의 다양한 상황의 사용자들

웹 접근성 준수 사항

• 시맨틱 태그 활용 section, button, dialog와 같이 의미가 있는 태그를 사용함으로서 스크린리더가 순서와 목적에 맞게 요소를 읽을 수 있도록 함.

• 웹 접근 향상을 위한 attribute 활용 aria-label, aria-modal 과 같은 속성을 사용해 특정 상황에서 스크린리더가 해당하는 상황을 설명할 수 있도록 함.

img 태그의 alt 속성을 사용해 이미지에 이미지에 대한 설명을 제공.

• 키보드로 모든 요소에 접근 가능 tab-index를 적절히 부여하고, 방향키로 조작가능하게 함으로 마우스 사용없이도 모든 요소에 접근 가능하게 함.

• 색상 대비 표준 모든 텍스트에 대해 4.5:1의 AA(최소) 명암비

웹 표준 & 시맨틱 태그

웹 표준 준수사항

다양한 브라우저(크롬, 엣지, 웨일, 사파리, 파이어폭스 등)에서 큰 차이 없이 동일한 웹사이트를 사용할 수 있습니다. 모바일에서 웹을 사용하는 경우를 고려해 반응형으로 구현해 모바일 버전에서도 서비스 이용에 어려움이 없습니다.

시맨틱 태그 준수사항

• 적절한 section 태그를 사용해 구간을 나눈 코드

• 모달에 dailog 태그 사용, 버튼에 button태그 사용한 코드

• 이 외에도 img, footer, title등 상황에 맞는 태그를 적절히 사용