a11y-hidden()

접근성 감춤(Accessibility Hidden) 믹스인

용도

요소를 화면에서 감추되, 스크린 리더에서 읽힐 수 있도록 하는 믹스인입니다.

사용법

a11y-hidden() 믹스인을 호출합니다. 포커스 상태에서 표시되도록 하려면 true 값을 설정합니다.

a11y-hidden($focus-visible:bool, $focus-state-class:string)

.a11yHidden {
  @include a11y-hidden();
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$focus-visible	bool		false
$focus-state-class	string		focus

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.a11yHidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
}

포커스 상태에서 화면에 표시할 경우

믹스인 호출 과정에 true를 전달합니다.

.a11yHidden {
  @include a11y-hidden(true);
}

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.a11yHidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.a11yHidden--focus:focus {
  overflow: visible;
  position: static;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  white-space: normal;
}

로직

a11y-hidden() 믹스인은 다음의 로직에 의해 작성되었습니다.

@mixin a11y-hidden($focus-visible: false, $focus-state-class: 'focus') {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;

  @if $focus-visible {
    &#{'--' + $focus-state-class}:focus {
      overflow: visible;
      position: static;
      clip: auto;
      width: auto;
      height: auto;
      margin: 0;
      white-space: normal;
    }
  }
}

1. 전달 받은 값이 없을 경우, 기본 값을 사용

2. 전달 받은 값이 있을 경우 포커스 상태 표시, 포커스 상태 클래스 이름을 설정하여 코드 출력

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

• @mixin / @include
• @if / @else