웹접근성을 위한 :focus

문서 상단에 

 

 <ul class="skipnavi">

        <li><a href="#contents">본문내용으로 이동</a></li>

        <li><a href="#footer">푸터로 이동</a></li>

</ul>

 

위와 같이 메뉴를 작성한다.

이때 문서의 어딘가에는 id=contents, id=footer 속성을 가지고 있는 태그가 있어야 한다.

 

CSS에서는 

 

.skipnavi{position: absolute;left: 0;top: -50px;

                text-indent: -9999px;font-size: 0;

                width: 100%;z-index: 9999; }

        .skipnavi li a:focus,

        .skipnavi li a:active{

            position: absolute;left: 0;top: 50px;

            display: block;width: 100%;padding:5px 0;

            text-align: center;text-indent: 0;

            font-size: 13px;font-weight: bold;

            background: #f2f2f2;

        }

 

위와 같은 내용으로 a:focus를 작성한다.

 

이 내용은, 메뉴를 문서 밖으로 숨겨두고, a태그에 focus 된 상태에서 문서 안으로 들어오게 하며,

 tab키를 눌렀을 때 문서가 id값으로 이동하는 앵커링크가 실행된다.

 

https://codepen.io/LimsUIUX/pen/eYZvmzO

skip menu :focus