웹접근성

웹접근성

접근성이란 "보다 많은 사람이 이용할 수 있는 보편적 접근의 정도"를의미 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있게 하는 것 ,

장애에 구애 없이 모든 사람이 손쉽게 정보를 공유 할 수 있기 위함이다.

Skip Menu / Skip Nav

사용자 편의 및 웹 접근성을 위해서 만들어.

웹 접근성 이라 하면 마우스가 고장, 키보드를 사용 못하는 경우 등👉 정상적으로 쓸 수 없는 상황에 대해서 편의를 고려해서 제작하는 방법이다.

많은 컨텐츠 영역을 가지고 있는 홈페이지에서 원하는 영역에 도달하고 싶을때 Tab 키를 수 없이 눌러야 할것이다. 👉 불필요한 액션을 없애기 위해 스킵메뉴(Skip menu)를 제작한다.

스킵 메뉴를 만들면 해당 영역으로 즉시 갈 수 있는 <메뉴 바로가기>역활을 해준다.

    <!-- 스킵 내비게이션-->
    <div id="skip">
       <a href="#cont_nav">전체 메뉴 바로가기</a>
       <a href="#cont_ban">배너 영역 바로가기</a>
       <a href="#cont_cont">칸텐츠 영역 바로가기</a>
    </div>
    <!--// 스킵 내비게이션-->

/* 스킵 내비게이션 */
#skip{position: relative;}
#skip a{position: absolute; left:0; top:-35px; border: 1px solid #fff; color:#fff; background: #333; line-height: 30px; width:160px; text-align: center;}
#skip a:active,
#skip a:focus{top:0;}

tab을 누르면 #skip의 a링크들이 보이게됨

IR(image replacement) 기법

👉 의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 text로 기입하는 방법입니다.

1. display:none 2.visibility:hidden 3. overflow:hidden 1. display:none는 센스리더, Jaws, NVDA에서 모두 내용을 읽지 못함 2. visibility: hidden는 센스리더에서는 내용을 읽을 수 있었으나 Jaws, NVDA는 모두 내용을 읽지 못함 3. overflow:hidden의 경우 센스, Jaws, NVDA 모두 내용을 읽을 수 있음 display:none은 화면에서 아주 없애 버리는 것으로 공간을 차지 하지 아니하며, visibility:hidden은 화면에는 안보이나 공간은 차지하고 있습니다. 접근성 있게 숨김 콘텐츠를 제공하는 방법으로 overflow:hidden을 사용한 포지셔닝 기법을 많이 사용하므로 참고하시기 바랍니다. 포지셔닝 예)

.hidden {position：absolute; left:-10000px; top:auto; height:1px; overflow:hidden; }
.hidden {display: block; width: 0; text-indent: -9000px; overflow: hidden;}

장점 : 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 점 입니다

(출처: 웹 접근성 연구소)

IS(Image Sprite) 기법

👉 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법 입니다.

이 때 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement) 기법이 함께 사용 됩니다.