감성 퍼블리셔 html,css

웹표준에 의한 skip_nav 기본적 기능과 원리 본문

HTML/CSS

웹표준에 의한 skip_nav 기본적 기능과 원리

빅범 2015. 1. 11. 21:45

 

웹표준이 기본틀이 되면서 홈페이지 만들시 꼭 넣어줘야 할 skip_nav 

css를 모두 제거 한 후 보면 맨 위에 위치하게 되는 버튼,

 

웹표준으로 바뀌면서 시각장애인들이 음성변환기로  웹페이지를 접하게 되면서 음성변환기가 위에서 부터 차례대로 읽어준다.

이부분에서 많은양을 순차적으로 이동하기 때문에, 기본적인 점프개념으로 이동시키기 위한 역할.

 

일반적으로는 상단메뉴인(gnb)와 내용(container)쪽으로 2개를 잡아주며, 웹사이트 성격에 따라

주요 컨텐츠에 쪽에 1개를 더 잡아는주는 경우가 있다.

 

이 skip navi는 코딩에 스타일로 감춰져 있는 방법과,

탭키를 눌렀을시 관련내용의 네비바가 생성되는 방법으로 나누어져 있다. (*하단 이미지참조)

 


 

skip_navi 관련 태그

 

================== html 태그부분 =====================

 

================== css 스타일부분 =====================

 

웹사이트 문서작성을 할때

<body> 바로 아랫쪽, 즉 최상단에 위치시키며 스타일을 없애거나, 혹은 탭키를 누르지 않는이상 웹사이트에 보여지지 않는다.

 

보이지 않지만, 시각장애인을 위해 배려한 태그.

웹사이트 소스를 봣을떄 상단에 해당 skip navi 태그가 없다면, 아직 그 사이트를 운영하는 퍼블리싱은, 웹표준안에 대한 기본상식이 부족한 경우이다.

 

 

 

 

저작자표시

'HTML/CSS' 카테고리의 다른 글

text 관련 css 스타일 (줄바꿈 및 글자 자르기, 점선표기 등)  (0) 2015.04.16
tabindex의 기능 및 역할 [html,css]  (0) 2015.03.25
border 외곽선이 아닌, 내부에 적용되는 방법, box-sizing:border-box  (0) 2014.10.29
meta 태그의 종류에 대해서 알아보자.  (0) 2014.10.22
DTD(Document Type Definition)란 무엇인가? css/html  (0) 2014.09.14
'HTML/CSS' Related Articles more
Comments