마크업 - IR기법

hide 클래스

hide 클래스는 텍스트를 화면에 표시하지 않을때 사용한다.
'한국형 웹 콘텐츠 접근성 지침 2.1 : 대체텍스트'를 위한 으로IR기법이라고 한다.

IR기법

'의미 있는 배경 이미지'조항에서 배경이미지란 background-image속성으로 표현하는 방법인데 이때 삽입한 이미지가 의미가 있다면 이미지를 설명할 수 있는 텍스트를 제공해야 한다.


브라우저 화면에는 이미지를 설명하는 텍스트가 노출되지 않게 하는 방법

.hide{
	overfolw : hidden;
    display:block;
    position : absolute;
    border : 0;
    width : 1px;
    height : 1px;
    clip : rect(1px,1px,1px,1px)
    }

IR기법을 적용하면 마우스나 기보드의 초점이 사라지지 않아 화면 낭독기가 제대로 인식을 할 수 있다.

IR 기법 예시

메뉴

<header>
  <h1><a href=""><span class="hide">로고</span></a></h1>
  <h2 class='hide'>메인 메뉴</h2>
  <nav>
    <ul>
      <li><a href="">기업정보</a></li>
      <li><a href="">기업정보</a></li>
      <li><a href="">기업정보</a></li>
    </ul>
  </nav>
</header>

• <h2 class='hide'>메인 메뉴</h2> 인 경우에는 스크린리더 사용자에게 이 영역이 메인 메뉴인 부분의 시작을 알려주기 위해 사용된 대체 텍스트이다.
  • 브라우저 화면 영역에는 나타나지 않으며 스크린리더에서 읽어준다.

콘텐츠 블록

한국형 웹 콘텐츠 접근성 지침 2.1 - 제목 제공

콘텐츠 블록 제목 구성 : 콘텐츠 블록에는 적절한 제목(heading)을 제공하면 제목과 본문을 구분 할 수 있으며, 제목을 이용하여 콘텐츠 블록 간의 이동이 가능하다.
그러나, 본문이 없는 콘텐츠 블록에는 제목을 붙이지 않는다.

블록을 시작할 때 제목 요소 <h1> ~ <h6>를 사용해서 해당 콘텐츠에 대한 적절한 제목을 표시해야 한다.

---

유틸리티 메뉴

로그인, 로그아웃, 마이페이지, 다국어 사이트 이동, 검색 등과 같은 보조 기능으로 구성된 메뉴