[CSS/웹접근성] tab key로 button 태그에 접근했을 때 focus 색상 변경하기 (초점, 포커스링의 개념과 중요성)

리액트 프로젝트를 하면서 웹접근성에 맞게 리팩토링을 진행하고 있다.

마우스 없이 tab key로도 동작이 되도록 다시 코드를 수정하고 있던 도중 문제를 발견했다!

 

바로.. 등록버튼의 색상이 포커스됐을 때 색상과 비슷해서 티가 안난다는 것..

 

뭔가 커지긴하는데 티가 안난다. 포커스가 잘 되는지 마는지 인식이 안된다. 

그래서 focus 됐을 때 색상을 변경해줘야 한다고 생각이 들었다!

팀원들에게 조언을 구한 후 색상을 변경하자는 결론에 도달했고, 자료를 찾다가 여러가지 방법을 발견했다.

이 방법을 정리하기 전에 초점, 포커스링의 개념과 중요성을 알아야 한다.

 

초점 / 포커스링의 개념과 중요성

1. 초점의 개념

일상 속에서 우리는 무언가 집중해서 보거나 일을 할 때 초점이라는 단어를 쓴다. 컴퓨터에서는 키보드가 요소를 가리키는 것을 초점이라고 한다.

 

2. 포커스링의 개념

눈으로 웹페이지를 탐색하는 키보드 사용자의 경우 포커스링을 통해 키보드가 어떤 요소를 보고 가리키는지 알 수 있으며 원하는 곳에 포커스링이 나타났을 때 enter 키를 눌러 요소를 클릭 가능하고 어떤 동작이 발생하는지 알 수 있다.

마우스를 사용하기 힘든 사용자들에게 가장 큰 도움을 주지만 저시력 사용자가 키보드 사용 시 요소를 탐색하는데도 도움을 준다.

포커스링은 CSS 가상 선택자 중 하나인 :focus 를 통해 보편적으로 제공할 수 있으며 파이어폭스의 경우 :-moz-focusging 선택자를 통해 제공이 가능하다. 포커스링은 최소 2px 정도의 두껍고 대비가 높은 색의 실선을 사용한 테두리를 사용하거나 초점을 받은 요소의 색상을 눈에 잘 띄도록 바꿔 가시성을 향상 시키고 접근성을 높일 수 있다.

 

 

포커스링 디자인 방법 및 고려 사항

1. outline 속성

보편적인 방법으로 모든 브라우저에서 무리 없이 동일한 디자인을 제공한다.

border가 제공된 요소의 디자인을 변경하지 않고 동시에 사용할 수 있다.

하지만 border-radius나 clip-path 등 요소의 모양을 변형한 요소에 대응할 수 없다.

.button_writeButton:focus {
  outline: 2px solid #1c315e;
}

 

2. border 속성

outline과 유사하지만 테두리 속성이라 기존에 있던 테두리를 대체한다.

border-radius 등 형태를 변환하는 속성과 호환되어 형태에 맞게 제공할 수 있다.

디자인상 테두리가 없는 링크(a) 요소에 사용할 때 적합하다.

.button_writeButton:focus {
  outline: none;
  border: 2px solid #88dfff;
}

 

3. box-shadow 

border와 시각적 비슷한 효과를 제공하며 한 번에 여러 겹의 색상을 사용할 수 있다.

border, outline과 동시에 사용이 가능하다.

반면 border와 같이 한 면의 색상을 따로 주는 등 디자인은 어렵고 실선을 제외한 border, outline에서 제공하는 점선(dotted), 마루형 선(ridge), 대시 선(dashed) 등 다양한 선 디자인을 구현하기 어렵다.

또, CSS3 속성이라 구형 IE에서 작동하지 않는 점을 유의해야 한다.

.button_writeButton:focus {
  outline: none;
  box-shadow: 0 0 0 1px #008, 0 0 0 2px #70a;
}

 

이런 3가지 방법 중에 나는 1번 outline을 바꾸는 방법을 선택했다.

 

outline을 2px을 줘서 tab key로 등록 버튼에 접근했을 때 시각적으로 더 잘 보이도록 css 코드를 수정했다.

좀 더 눈에 띄게 보색으로 바꿀까 하다가.. 너무 눈에 튀는 것 같아서 선택되었다는 것 정도로만 보이게 하기 위해서 진한색으로 선택했다.

그래도 처음보단 더 눈에 띄도록 바뀐 것 같다!

 

처음에는 (당연히 될 것이라고 생각했는데) 버튼 태그에 포커스 주는 법이 잘 안되어서 button → input 으로 변경 후 타입을 button으로 설정해주려고 했는데 버튼 태그에도 포커스를 직접 주는 방법이 있어서 글을 작성했다. 

구글링을 했을 때 생각보다 input 요소에 포커스를 주는 방법은 많지만 버튼 태그는 없어서 찾기 힘들었던 것 같다.

다음번에도 포커스 색상과 비슷할 때 이 방법을 이용해야겠다.