커스텀 input, select 박스

디자인적인 개성을 주기 위해 실무에서 iput 요소나 select 박스를 브라우저 스타일과 다르게 표현

스타일링이 까다로운 input 요소를 화면에서 숨기고 label 요소를 연결하여 스타일링을 진행합니다.

input checkbox 커스텀

IR(image Replacement) 테크닉

디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법, 여러가지 방법들이 공개되어 있지만, 아쉽게도 실제로 작업을 담당하는 이들이 사이드 이펙트는 고려하지 않거나 모르는 경우가 많다

숨김 처리 방식과 그로 인한 문제

display 이용

display: none;

접근성을 전혀 모르는 사람들이 주로 사용하는 방법, 용어 그대로 정보를 표기하지 않기 때문에 정보나 데이터를 어디에도 전달하지 않는다. 그냥 없는것과 같기 때문에 IR 기법으로 적합하지 않다

visibility 이용

visibility: hidden;

가시성을 히든으로 주면서 보이지는 않지만 공간은 차지하기 때문에 잘 사용하지 않는다. 자리를 차지하는것도 문제지만 더 큰 문제는 의도 자체가 가시적으로 보여지지 않도록 하기 때문에 스크린 리더 역시 해당 정보를 사용자에게 전달해주지 않게 된다. 따라서 이 방법도 적절하지 않다.

text-indent 이용

IR 기법으로 가장 많이 사용하고 있는 방식이다

text-indent: -9999px;

phark method라고도 알려져 있는 방식인데 CSS의 들여쓰기 기능을 이용해서 텍스트를 우주로 보내버리는 방법이다. 노출이나 가시성을 변경하지 않았기 때문에 문제가 없을 것만 같이 보일지 모르겠지만 이 방법에도 문제는 존재한다. 텍스트를 화면 밖으로 보내긴 했지만 어쨌든 화면에 렌더링 했기 때문에 어딘가에 존재하게 된다. 만일 숨김 텍스트를 적용한것이 인터렉티브 요소라면 초점의 문제가 발생하게 된다. 또한 구글 알고리즘은 CSS도 검색해서 자료를 수집하게 되는데 이런 기법을 구글에서 스팸으로 분류하여 구글 SEO에 어긋나는 방법으로 규정하고 있다. 대다수의 퍼블리셔가 이 방법이 유요하다고 생각할지 모르지만, 이 방법으로 SEO에 자유롭다고 말하긴 어렵다

zero pixel sizing

width:0;, height:0;, font-size:0; 등 과 같은 방법으로 픽셀 사이징을 0으로 만드는 방법이다. 하지만 이것도 문제가 있다. 보이스 오버로 읽히는 경우도 있고 초점이 잡히게 된다. 결국 빈 객체에 초점을 일으키기 때문에 사용자로서는 혼돈이 올 수 있다. 이 또한 구글의 웹마스터 가이드 라인을 위배하는 원인이다.

opacity 이용

opacity: 0;

이것 역시 투명하게 만들어 사용하지만 초점이동, 포인터 만응 문제 및 접근성에 문제가 많다.

positioning screen out

네이버가 사용하는 방법

.hidden {
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

이는 앞에서 본 문제들을 피하기 위해 0을 사용하지 않고 가장 근접하게 수렴하는 1px을 사용하고 스크린 아웃 기법으로 컨텐츠를 인식하기 위해 사용합니다. 하지만 여전히 문제는 남아 있습니다. 첫째로 clip 속성은 아직 비추천하는 속성이고 포지션 속성은 block formatting context로 변경시켜버리기 때문에 문제가 발생합니다. 만약 inline formatting context로 전달되야 한다면 BFC로 변경되기 때문에 문맥이 끊어지는 현상이 발생합니다.

출처 https://mulder21c.github.io/2019/03/22/screen-hide-text/#visibility-%EC%9D%B4%EC%9A%A9