🚩 GIFT 프로젝트 진행 중 키보드 접근성을 위해 focus된 요소에 시각적인 표현(테두리)를 넣어주는 작업을 각자의 컴퍼넌트에서 따로 하고 있었다. 이에 대한 통일된 스타일을 가지기 위해 글로벌 스타일로 지정하는 과정에서 팀원들과 어떤 방법이 가장 좋을지 고민해보았다. 가장 좋은 방법은 box-shadow를 사용하는 것 같다.
키보드 접근성의 중요성
'마우스로 할 수 있는 동작들은 모두 키보드만으로도 할 수 있어야 한다.'
키보드 접근성이 중요한 이유는 마우스가 아닌 다양한 보조기기를 이용하는 사용자들 뿐만 아니라 마우스를 사용할 수 없거나 키보드 단축키 이용을 선호하는 사용자들에게도 더 나은 사용성을 보장한다.
포커스 이동을 시각적으로 보여주기
이 때 포커스 이동에 대한 조작 만큼 중요한 것이 화면에 표시되는 현재 포커스되고 있는 요소의 위치다. 즉, 마우스 커서가 없는 상태에서 내가 페이지의 어디에 위치해 있는지를 시각적으로 알 수 있어야 한다.
(포커스에 대해 알아보려면 focussable과 tabbable이라는 개념도 매우 중요하다. 빠른 시일 내에 포스팅 하도록 해야겠다...)
디자인을 위해 지우는 outline... 대처 방법은?
기본적으로 focus된 요소는 브라우저에서 outline 스타일 속성을 이용해 테두리를 감싸준다. 이 때 디자인을 해친다는 이유로 outline:0 을 주는 경우가 많은데, 이대로 후처리를 안해준다면 아무리 탭키로 이동해봤자 내가 어디를 포커싱하고 있는지 알 수가 없다.
대처 방법 : outline, border
Borders and outlines are very similar. However, outlines differ from borders in the following ways:
- Outlines never take up space, as they are drawn outside of an element's content.
- According to the spec, outlines don't have to be rectangular, although they usually are.
outline - MDN
따라서 focus 되는 경우, outline 혹은 border 스타일 속성을 사용하여 요소의 테두리를 그려줘야 한다. 물론 이것도 좋은 해결책이다.
- outline의 문제
outline은 브라우저마다 제각기 다르게 표현될 수 있어 통일된 디자인을 보장하지 않는다는 단점이 있다. - border의 문제
border는 박스 모델의 크기 속성에 포함이 되므로(content, padding, border, margin) 의도치 않게 레이아웃에 영향을 줄 수 있다.
최고의 대처 방법 : box-shadow
통일된 디자인을 제공하고 레이아웃에 영향을 끼칠 염려도 없는 box-shadow 사용이 가장 좋아보인다!
다음 코드는 1px씩 오른쪽, 아래쪽으로 1px 넘어간 곳에 번짐 없이 검은색을 / 왼쪽, 위쪽으로 1px만큼 검은색 / 왼쪽 상단과 오른쪽 하단의채워지지 않은 1px을 마저 채운 코드다.
/* 요소의 크기에 영향을 주지 않으면서 통일된 스타일 제공 */
box-shadow: 1px 1px 0 0 black,
-1px -1px 0 0 black,
-1px 1px 0 0 black,
1px -1px 0 0 black;📌 참조 링크
🌱 관련 글
- focussable & tabbable (작성 예정)
