웹 접근성 키보드 포커스 처리 outline :focus-visible
웹접근성의 개념에 대해서 널리 알려지지 않았을 때 간혹 디자이너분의 요청으로 포커스 라인을 제거하기 위해 아래와 같이 :focus의 outline을 지워버리는 방식을 사용합니다. a, input, button { outline: 0; } :focus { outline: none; } 이제 포커스가 더이상 화면에 표시되지 않지만, 키보드만으로 브라우저를 조작해야 하는 사람의 경우 현재 초점을 알 수 없기 때문에 문제가 됩니다. 절대 아무런 대체재 없이 외곽선을 지워버리면 안됩니다. 시각장애나 신체장애를 가진 사용자는 키보드만 이용해 웹사이트를 이용 할 경우 키보드로 선택한 현재 요소에 하이라이트를 줄 필요가 있습니다. 크롬 86 버전에 추가된 :focuis-visible이란 가상 클래스(pseudo cla..
2021년 03월 07일