웹 접근성 적용하기

🌐 웹 접근성이란?

웹사이트에서 제공하는 정보를 모든 사람(장애인, 고령자)이 동등하게 접할 수 있도록 보장해주는 것입니다.

웹 접근성은 꼭 필요하지만 대기업 페이지를 제외하고 쇼핑몰, 작은 사이트 등을 볼 경우 웬만하면 웹 접근성을 지키지 않은 사이트들이 많습니다.

이 페이지에서는 웹 접근성을 지키는 방법에 대해 주로 설명하겠습니다.
웹 접근성 설명에 관한 자세한 내용은 안나옵니다...

📌 웹 접근성 지키는 방법

제가 생각하기에 주로 사용된다고 생각되는 것들을 소개하겠습니다.

input, select

input, select를 사용할 때, label이랑 한 세트처럼 써야 하지만, 보통은 그냥 input만 쓰는 경우가 있습니다.
스크린 리더기로 읽을 경우, 어떤 역할의 input인지 알 수 없습니다.

이를 해결하려면, title을 사용해주면 됩니다. 안에 내용은 해당 input이 무엇을 받은 지 써주면 됩니다.

Bad:

<input type="text" />

Good:

<input type="text" title="아이디 입력">

img

이미지는 대체 텍스트를 제공해줘야 합니다.
이미지를 설명해주는 태그는 alt입니다.

출처: 네이버

위 사진은 네이버 로고 사진입니다. 웹 접근성에 알맞게 작성하려면

Bad:

<img src="logo" />

Good:

<img src="logo" alt="네이버 로고" />

해당 코드처럼 작성하면 됩니다.

만약, 아이콘의 경우는 alt=""로 빈칸으로 써주시면 됩니다.

Good:

<img src="icon" alt="" />

지도

지도 같은 경우, 아래 사진같이만 표시하거나 간단하게 설명되어 있는 경우가 있습니다.

하지만, 간단하게가 아닌 자세하게 쓰여 있어야 합니다.
ex) 오목교역 1번 출구, 30m 우측, 10m 전방에 위치
형식으로 상세하게 작성해야 합니다.

배경 영상

웹 접근성에 페이지에 접속하자마자 영상이 자동 재생되서는 안 되는 것이 있습니다.
하지만, 영상을 틀고 싶다면 소리를 제외하고 재생시키면 됩니다.

outline

검은색 선이 outline

outline은 페이지를 만들 때, 정말 보기 싫은 것? 인 것 같습니다....
하지만 웹 접근성에 따라 현재 포커스가 어디 있는지 알기 위해서는 있어야 하기 때문에 어쩔 수 없습니다..

 

키보드 제어

마우스 없이 키보드로만 페이지를 이용할 수 있어야 합니다.

팁?으로 말하면 레이어 팝업 작성 시, 리턴 포커스를 주어야 합니다.
쉽게 말하면, 팝업을 닫았을 때 눌렀던 버튼으로 포커스가 갈 수 있게 작성해야 한다는 뜻입니다.
안 그러면 키보드로만 움직일 경우, 팝업만 들어가면 다시 처음으로 돌아가게 됩니다.

📐 웹 접근성 도구

여러 도구가 있지만 저는 크롬 확장 프로그램 중 하나인 openwax를 주로 사용합니다.

💡 추천

웹 접근성 연구소 이 페이지에 좀 더 자세하게 나와있습니다. 한 번 참고하셔도 좋을 것 같습니다.