# 웹접근성

### 웹접근성

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

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

#### **Skip Menu / Skip Nav**

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

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

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

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

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

```css
/* 스킵 내비게이션 */
#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링크들이 보이게됨**&#x20;

####

#### **IR(image replacement) 기법**

:point\_right: 의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 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**을 사용한\
포지셔닝 기법을 많이 사용하므로 참고하시기 바랍니다.\
\
**포지셔닝 예)**

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

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

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

#### **IS(Image Sprite) 기법**

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/web-standard/undefined-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.