[웹접근성 지침-일반기술 G149] 포커스 받을 때 강조 표시 해주는 브라우저 인터페이스를 이용하자.

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G149.html

---

요소가 포커스를 받으면 브라우저가 해당요소를 강조합니다.

브라우저에서 제공하는 강조가 잘 보이도록 만들어야 합니다. 그래야 포커스 받은 요소의 위치를 알 수 있습니다.

---

기술설명

이 기술의 목적은 '브라우저(= user agent)'에서 지원하는 기술을 이용하여 사용자가 포커스(focus) 받은 요소를 시각적으로 식별할 수 있도록 하는 것입니다. 브라우저는 포커스 받은 요소를 강조하게 되어있습니다.

UAAG 규격의 브라우저는 체크 포인트 [10.2 선택 항목, 콘텐츠 초점, 활성화된 요소, 방문한 링크 강조]를 충족하게 되어있습니다. 사용자가 브라우저에서 지원하는 이 기술을 사용하면 사용자는 표준적이고 예측 가능한 방식으로 초점의 위치를 알 수 있습니다.

 

 

예시

- HTML 텍스트 입력 필드에 포커스가 맞춰 지면 브라우저는 텍스트 필드의 삽입 지점에 깜박이는 가로 막대를 표시합니다.

 

- HTML 링크가 포커스 받으면 점선으로 된 사각형에 둘러싸여 집니다. 이런 방식으로 포커스 된 것을 강조하는 것입니다.

 

 

자료

사용자 에이전트 접근성 지침 10.2: 선택 항목 강조, 콘텐츠 초점, 활성화된 요소, 방문한 링크

 

 

 

점검절차

웹 페이지에서 포커스를 맞출 수 있는 요소가 있는 경우.

1. 해당 요소에 포커스를 맞춥니다.

2. 브라우저가 어떤 식으로 강조 표시를 하는지 확인합니다.

 

 

---

 

나의 정리

브라우즈에서 웹 페이지를 보는 경우, 대부분 마우스를 통해 요소를 선택하고 이동합니다. 하지만 마우스를 사용하지 못하는 환경에 있거나 키보드만 사용하는 사용자의 경우 키보드의 '탭(Tab)키'를 이용하여 요소를 이동하며 콘텐츠를 확인 합니다.

탭(Tab)키를 누르면 '포커스(=초점,focus)'이 코딩된 순서 데로 요소에 접근합니다.

이렇게 요소에 포커스 간 상태를 '초점을 맞췄다.' 또는 '포커스를 받았다'라고 표현합니다.

요소가 포커스를 받으면 브라우저는 해당 요소가 어디인지를 사용자가 알아 볼 수 있도록 강조를 합니다.

해당 요소에 검은색 테두리를 주거나 검은 선 테두리를 주어 시각적으로 강조하는 합니다.

참고로 강조하는 방법은 브라우저마다 조금 씩 다릅니다.

제작자는 브라우저가 기본적으로 제공하는 강조가 잘 나타날 수 있도록 제작해야 합니다.

포커스를 받았을 때 테두리 선이 얇아 보이거나 한쪽 면의 선이 안보이거나 아무런 강조표시가 사용자들은 포커스 받은 요소의 위치를 알아보기 힘들 것입니다.

 

요소가 포커스를 받으면 브라우저가 해당요소를 강조합니다.

브라우저에서 제공하는 강조가 잘 보이도록 만들어야 합니다. 그래야 포커스 받은 요소의 위치를 알 수 있습니다.

---

 

G149: Using user interface components that are highlighted by the user agent when they receive focus

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G149.html

G149: Using user interface components that are highlighted by the user agent when they receive focus | Techniques for WCAG 2.0