본문 바로가기
  • purple-whale
반응형 웹사이트/Shilla Hotel

시각장애인을 위한 u-skip 넣기

by purple-whale purple-whale 2021. 1. 27.

시각장애인의 편의를 위해 바디 태그 바로 밑에 u-skip을 넣어

빠르고 편한 검색을 도와줍니다.

<body>
    <div id="u-skip">
        <a href="#gnb">주메뉴 바로가기</a>
        <a href="#main">본문 바로가기</a>
    </div>
    <div class="wrap">
        <header>
            <h1 class="logo">
                <a href="#">The Shilla Hotel & Resotrs</a>
            </h1>
            <nav id="gnb" class="menu">
                <h2 class="blind">주메뉴</h2>
                <ul class="nav-depth1">
                    <li><a href="#">호텔찾기</a></li>
                    <li><a href="#">호텔예약</a></li>
                    <li><a href="#">호텔신라 소개</a></li>
                    <li><a href="#">고객문의</a></li>
                    <li><a href="#">신라리워즈</a></li>
                </ul>
            </nav>
            <div class="nav-goto">
                <h2 class="blind">중요 메뉴</h2>
                <ul class="link-goto">
                    <li><a href="#">about</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
                <h2 class="blind">sns 바로가기</h2>
                <ul class="link-sns">
                    <li><a href="#">facebook</a></li>
                    <li><a href="#">twitter</a></li>
                    <li><a href="#">instargram</a></li>
                </ul>
            </div>
        </header>
         <div id="main" class="container">
            <article>
                <strong>Jeju Island</strong>
            </article>
            <article>
                <a href="#">
                    <h2>REWARDS Basic Edition</h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                </a>
            </article>
            <article>
                <a href="#">
                    <h2>Reservation</h2>
                    <i class="las la-sync-alt"></i>
                </a>
            </article>
            <article></article>
            <article></article>
            <article>
                <a href="#">
                    <h2>REWARDS WINTER DAY DELIGHTS</h2>
                    <p>Lorem ipsum dolor sit amet consectetur</p>
                </a>
            </article>
            <article></article>
            <article>
                <a href="#">
                    <h2>REWARDS PLAY IN THE ROOM</h2>
                    <p>adipisicing elit. At recusandae sed quis distinctio</p>
                </a>
                </article>
            <article></article>
            <article></article>
            <article>
                <a href="">
                    <h2>Rewards Stay Sweet for Honeymoon</h2>
                    <p>Necessitatibus facere, aliquam expedita.</p>
                </a>
            </article>
            <article></article>
        </div>
   </div>
        
</body>

/* skipnavigation */
#u-skip a {
	position: absolute;left: -3000%;
}
#u-skip a:focus {
	display: block;left: 0;top: 0;z-index: 10000000000;
    width: 100%;height: 30px;
    line-height: 30px;
    background: #f1e3c4;color: #222;
    text-align: center;
}

탭으로 이동하였을때 상단에 유스킵으로 바로 넘아가면 적용이 된 것입니다.

댓글0