[웹 접근성 가이드] 2. 운용의 용이성 : 입력장치 접근성

 

안녕하세요! 알씨타운입니다! 🤗

저번 포스팅에선 웹 접근성 지침 4가지 원칙 중

첫번째 인식의 용이성에 대해 알아 보았습니다.

생각보다 웹을 만들 때 준수해야 할 사항이 많았는데요.

하지만 아직 이것 맛보기에 불과 할 뿐!

 

​

오늘은 두번째 운용의 용이성 원칙에 대해 공부하도록 합시다!

​

​

[ 운용의 용이성 ]

2.1 입력장치 접근성

2.2 충분한 시간 제공

2.3 광과민성 발작 예방

2.4 쉬운 네비게이션

 

 

 

우리는 평소에 웹 페이지를 이용할 때 마우스를 사용해

웹을 검색하고 제공하는 정보를 얻을 수 있습니다.

하지만 마우스 사용이 어려운 장애인들은 주로 키보드를 이용해 웹 페이지를 이용합니다.

그래서 반드시 키보드 사용만으로도 웹을 이용할 수 있도록 제작해야 합니다.

​

​

​

2.1 입력장치 접근성

​

 

1. 키보드 사용 보장​

 

모든 기능은 키보드의 버튼만으로도 웹을 이용할 수 있도록 만들어야 합니다.

또한 pc웹 뿐만 아니라 모바일 웹에서도

터치(touch) 기반 모바일 기기의 모든 컨트롤이 누르기 동작으로 제어할 수 있어야 합니다!

 

 

 

 

예를 들면 메뉴에 마우스를 갖다대면 (hover하면)

서브메뉴가 슬라이드 다운 되는 형태를 많이 보셨을 거예요.

마우스를 갖다대면 서브메뉴가 보이는 것처럼

키보드 키를 눌렀을 때도 마우스로 갖다대거나 클릭한 것처럼

똑같이 기능이 작동 되어야 합니다!

 

 

그럼 이러한 웹 접근성을 준수하기 위해

키보드 tab키로 조작이 가능하도록 마크업을 할 수 있을까요??

---

 

2. 초점 이동

 

키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

 

주로 키보드의 tab키와 shift + tab키를 이용해

마우스의 역할을 대신하는데요.

초점이동 순서는 좌측 상단부터 시작해 우측 하단 영역으로 순서대로 이동되도록 만들어야 합니다!

tab키 : 좌측상단 → 우측 하단으로 이동

shift + tab키 : 역순 이동

 

 

부스트코트 웹UI개발 - 웹 접근성 지침사례 중 초점이동 관련 콘텐츠

( 초점이동이 논리적으로 이루어지고 있는 사진입니다 )

 

 

---

 

그럼 키보드의 tab키가 해당 요소에 접근할 수 있도록 만드는 태그는

무엇일까요?

<a> : 하이퍼링크 태그

<input> 관련 type : 서식 관련 정보를 입력할 수 있는 태그

<button> : 버튼 태그

<select> : 선택 태그

<textarea> : 텍스트 상자 태그

출처 입력

이러한 태그들을 활용해 마크업을 하면 됩니다!

 

 

이때 디자이너/퍼블리셔들은 tab키를 눌렀을 때

해당 요소에 focus(초점)영역의 테두리 스타일이 투박해 안보이게 처리하는 경우가 많은데,

안보이게 처리하면 tab키를 아무리 눌러도 눈으로 볼 수 없기 때문에

웹 접근성에 어긋나는 행위 입니다!

 

그러므로 반드시 focus가 되도록 하기 위해선

다음과 같이 3가지 속성을 쓰지 않도록 유의해야 해요!

[ tab키 사용 시 해당 요소에 focus가 안 되는 경우 ]

 

1) hideFocus

2) outline : none;

3) onfocus=this.blur();

 

이 3가지 중 한가지 속성이라도 지정되어 있다면,

해당 요소에 focus가 안 잡힐 수 있습니다!

tab키를 누르면 기본 스타일이 까맣고 굵은 테두리가 디폴트 값이니,

만약 스타일을 변경하고 싶다면 outline의 속성을 바꿔주면 됩니다!!

 

---

 

3. 조작 가능

 

사용자 입력 및 컨트롤이 조작 가능하도록

요소를 만들 때 알맞은 크기, 여백을 제공해야 합니다.

 

컨텐츠의 크기가 너무 작거나

컨텐츠 간의 여백이 너무 인접해 있으면 조작하는 데 어려움이 많습니다.

그렇기 때문에 알맞은 크기와 여백을 지정해 주어야 하는데요.

 

 

 

일반적으로 웹 기준은 조작 가능한 요소(ex. 버튼)는

대각선 방향의 길이를 6mm이상으로 제공해야 합니다.

 

모바일 기준은 터치 오류를 최소화하기 위해

가로*세로 = 9mm * 9mm이상으로 제작하고,

2단 구성의 컨텐츠 제작시 간격은 13mm * 13mm로 제작되도록 권고하고 있습니다.

 

또한 input 요소 또는 링크 등 안의 여백은 최소 1px 이상의 여백을 주는 것이 좋습니다!

 

 

 

---

오늘 포스팅은 어떠셨나요?

웹 접근성 지침 중 운용의 용이성 : 입력장치의 접근성에 대해 정리해 보았습니다!

다음 포스팅에도 이어서 운용의 용이성에 대해 더 배워보도록 해요!