웹 접근성을 위해 아이콘 버튼 IR 기법을 활용하기

허재원·2022년 12월 27일

IR기법 웹 접근성

haoshop-refactoring

웹 접근성을 위해 IR 기법 사용하기

웹 접근성이란?

모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것
즉, 어떠한 사용자(일반인, 장애인, 고령자 등)가 어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)ㅇ에서도 어려움 없이 접근, 이용할 수 있는 것을 접근성이라고 한다.

IR 기법이란?

의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 text로 기입하는 방법이다.
즉, 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 HTML 곳곳에 숨겨두는 방법이다.

IR 기법을 위한 CSS 작성

/* PC, 모바일용으로 사용된 이미지 내에서 의미있는 텍스트의 대체텍스트를 제공할 떄 */
.ir {
  display: block;
  overflow: hidden;
  font-size: 1px;
  line-height: 0;
  text-indent: -9999px;
  color: transparent;
}

헤더 버튼에 IR 기법 적용하기

IR 기법 적용

// /common/Header/index.jsx
import { Navbar } from '../Navbar';
import * as S from './style';

export const Header = () => {
  return (
    <S.HeaderContainer>
      <S.HeaderTitleLink to='/'>
        <S.HeaderTitle>HOW ABOUT OOTD</S.HeaderTitle>
      </S.HeaderTitleLink>

      <Navbar />
      <S.MenuButton>
        <span className='ir'>메뉴 열기 버튼</span>
      </S.MenuButton>
      <S.SearchButton>
        <span className='ir'>검색 버튼</span>
      </S.SearchButton>
    </S.HeaderContainer>
  );
};

현재 하오샵의 헤더는 브라우저 너비가 1024px 이상인 경우에는 <Navbar /> 컴포넌트가 이하인 경우에는 MenuButton과 SearchButton 버튼이 나오도록 작성하였다.
우리가 봐야할 것은 1024px 이하인 경우의 MenuButton과 SearchButton이다.

// common/Header/style.js
export const MenuButton = styled.button`
  display: none;

  @media screen and (max-width: ${({ theme }) => theme.breakpoint.lg}) {
    display: block;
    width: 28px;
    height: 28px;
    background: url('/assets/icons/icon-menu.svg') no-repeat center / 28px 28px;
  }
}

MenuButon 스타일을 보면 버튼의 background는 url('/assets/icons/icon-menu.svg')로 아이콘이 나오도록 설정하고, <span className='ir'>메뉴 열기 버튼</span> 안에 텍스트는 메뉴 열기 버튼으로 ir 기법을 사용했다.