[웹접근성 지침-일반기술 G107] 콘텍스트 변화의 시발점은 '포커스(Focus)'가 아닌 '활성화(Activate)'이어야 합니다.

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

---

사용자가 상황을 예측하고 선택할 수 있도록 '포커스(Focus)'가 아닌  '활성화(activate)'를 제공해 주어야 합니다.

---

기술설명

이 기술의 목적은 사용자가 요소들의 변화를 예측할 수 있는 활성화(activate) 방법을 제공하는 것입니다.

인지 장애가 있는 사용자, 화면 판독기 사용자, 화면 확대경 사용자들의 경우, 자동으로 양식(Form)을 제출하거나 콘텍스트에 변화를 주는 기능을 작동시키는 예상치 못한 사건 때문에 무척 혼란스러워 할 수 있습니다.

 

이 기술을 사용하면 모든 콘텍스트의 변화는 사용자의 특정 동작에 의해서만 시작(trigger)됩니다.

또한 해당 동작은 링크를 클릭하거나 버튼을 누르는 것과 같이 일반적인 동작으로도 가능합니다.

단순히 포커스를 해당 요소로 옮겨가는 동작으로 콘텍스트의 변화를 일으키지는 않습니다.

 

 

예시

사용자가 버튼을 클릭하거나 스페이스 바를 사용할 때 만, 팝업(Popup)이 새 창으로 나타납니다.

해당 요소에 포커스(Focus)되었다고 해서 팝업이 새 창으로 나오지 않습니다.

 

사용자가 [완료]버튼을 누르면 자동으로 다음 화면이 나오게 하면 안 됩니다.

[제출 버튼(Submit button)]을 이용하여 다음 데이터를 입력할 화면으로 이동하게 해야 합니다.

 

 

점검절차

1. 키보드를 사용하여 모든 콘텐츠에 포커스(Foucs)해봅니다.

2. 어떤 구성요소도 포커스 되었을 때 콘텍스트에 변화가 없어야 합니다.

 

 

---

 

나의 정리

어떤 요소가 '포커스(Focus)'되었을 때 콘텐츠가 변경되거나 작성한 양식이 제출되게 만들어서는 안됩니다.

콘텐츠가 변경되거나 양식을 제출하는 것은 사용자가 선택할 수 있게 '활성화(activate)'방식으로 만들어야 합니다.

 

(= 컨텍스트에 변화를 주는 시작점은 '포커스'가 아니라 '활성화'로 제공되어야 한다.)

 

여기서 '포커스(Focus)'아  '활성화(activate)'를 먼저 알아 보겠습니다.

 

'포커스(Focus)'는 내가 어떤 요소를 초첨화 하는 것입니다. '탭(Tab)'키를 누르면 코딩된 순서로 요소들이 차례대로 선택이 됩니다. 이런 상황을 '포커스(Focus = 초첨화)'라고 합니다.

'활성화(activate)' 는 '버튼<button>'이나 '링크<a>'처럼 사용자가 선택하는 상황을 말합니다.

 

그럼 왜 '포커스(Focus)'가 아닌  '활성화(activate)'로 만들어야 하는 걸까요?

예시로 알아보겠습니다.

 

[팝업보기]라는 버튼이 있습니다. 이 버튼을 '포커스'하면 새창으로 팝업이 나타나게 제작하였습니다.

마우스를 이용하는 일반 사용자의 경우 [팝업보기]라는 버튼을 클릭해야 해당 버튼이 '포커스'가 되기 때문에 클릭하면 새창이 나오는 것과 같은 결과를 얻을 수 있습니다.

하지만 시각적 장애가 있는 분들의 경우 스크린리더기와 같은 보조프로그램에 의존하여 키보드의 '탭(tab)'키를 눌러 요소들을 순서데로 '포커스'하여 해당 요소를 인지합니다.

순서대로 '포커스'하며 내용을 확인하고 있는데 [팝업보기]를 포커스 하자마자 새창으로 나타난 팝업으로 이동하게 됩니다.

사용자는 갑자기 창으로 이동하기 때문에 큰 혼란을 느끼게 됩니다.

 

이런 혼란을 겪지 않게 하기 위해서 '포커스'가 아닌 '활성화'방법을 제공해야 하는 것입니다.

 [팝업보기]에 '새창으로 나오는 팝업 기능'을 '포커스'할 때가 아니라 사용자가 클릭하러나 포커스 된 상태에서 '엔터(Enter)'키를 눌렀을 때 새창이 나오게 하는 것입니다.

사용자는  [팝업보기]를 포커스 했을 때, 이것은 버튼이며 선택 헀을 시 팝업으로 이동하겠다는 것을 예측 할 수 있게 되고 [팝업보기]를 선택하여 팝업을 볼지 또는 선택하지 않고 팝업을 지나칠 것인지를 선택할 수 있게되는 것입니다.

 

사용자가 상황을 예측하고 선택할 수 있도록 '포커스(Focus)'가 아닌  '활성화(activate)'를 제공해 주어야 합니다.

 

 

---

 

G107: Using "activate" rather than "focus" as a trigger for changes of context

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

G107: Using "activate" rather than "focus" as a trigger for changes of context | Techniques for WCAG 2.0