[웹접근성] 아이콘 스크린리더기로 읽어주기

헤더에 "검색" 버튼을 삽입했습니다. 

비장애인들은 버튼만 보고 검색버튼인지 알 수 있지만 

시각장애인들은 스크린리더기를 통해 아이콘을 인식할 수 있습니다. 

때문에, 

코드에 스크린리더기를 통해 해당 아이콘의 기능을 읽어 줄 수 있도록

span태그등에 글자를 넣어 명시해줘야 합니다. 

 

HTML

<p class="search-area">
    <button type="button" class="btn btn-search-open">
      <span>검색창 열기</span>
    </button>
</p>

span 안에 "검색창 열기"라는 글자는 읽어주는 역할만 하고,

디자인상의 이유로 화면엔 노출이 되면 안되기 때문에

아래와 같이 숨김을 해줍니다. 

 

[참고] .icon-area [class*="btn"] 에서 class=*는

.icon-area 클래스 하위 btn이 들어간 모든 클래스명을 의미합니다. 

CSS

.icon-area [class*="btn"] {
  > span {
    text-indent: -9999px;
    display: block;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    left: -9999px;
    white-space: nowrap;
    font-size: 1px;
    transform: translateX(-100px) scale(0.0001);
    z-index: -1;
  }
}

[참고]

ir reset

.no-ir {
    text-indent: 0;
    display: inherit;
    border: 0;
    clip: unset;
    clip-path: none; 
    width: inherit;
    height: inherit;
    margin: inherit;
    padding: inherit;
    overflow: unset;
    padding: inherit;
    position: static;
    left: unset;
    white-space: unset;
    font-size: inherit;
    transform: none;
    z-index: unset;
}