Web Accessibility

✨ 웹 접근성의 필요성

웹사이트에서 제공하는 정보를 차별 및 제한 없이 모든 사람이 동등하게 이용할 수 있도록 보장하는 것이 웹 접근성이다.
웹의 힘은 보편성에 있으며 장애에 관계없이 모두가 접근할 수 있어야 한다.
여기서 장애란 웹 액세스에 영향을 미치는 모든 장애를 말하며 대표적으로 청각, 언어, 시각, 신경, 인지, 뇌 병변이 있다.
또한 스마트 워치, 태블릿 등 다른 장치를 사용하거나 노화로 인한 저시력, 오디오를 들을 수 없는 제한적 상황, 주로 사용하는 팔이 부러지거나 시력 교정술을 받아 눈을 뜰수 없는 일시적 상황 등도 접근성에 장애가 있다고 본다.
접근성이 다양한 상황 속에서 어떻게 도움이 되는지는 WAI에서 제공하는 영상, 네이버에서 제공하는 체험을 통해 확인할 수 있다.

📝 웹 접근성 가이드

웹 표준을 준수하면 웹 접근성이 향상됩니다.
웹 표준을 준수하는 방법 이외에 웹 접근성을 향상시킬 수 있는 다양한 지침들이 있지만 현시점에서 고려해 볼 수 있는 것들만 정리했습니다.
더 많은 정보를 알고 싶다면 제일 하단에 있는 출처를 참고해 주세요.

대체 텍스트 제공

alt 속성

<img>, <input type="image">, <area>의 alt 속성을 활용하여 적절한 대체 텍스트를 제공한다.
alt 속성을 아예 사용하지 않으면 스크린리더는 src의 파일명을 읽는다. 사용자는 파일명만으로 이미지 정보를 인지할 수 없기 때문에 반드시 alt를 사용하여 정확한 정보를 제공한다.

정보를 담고 있는 이미지인 경우 alt값에 해당 정보를 제공하고 그렇지 않은 경우에는 alt값을 비워둔다.

// bad - alt 속성을 아예 제공하지 않음
<img src="naverlogo.png">

// bad - 중요한 정보임에도 alt값을 비워둠
<img src="naverlogo.png" alt="">

// good - 로고 이미지의 정보를 alt 값에 입력함
<img src="naverlogo.png" alt="네이버">

alt에 값이 있는 경우

정보를 담고 있는 이미지인 경우 alt값에 해당 정보를 간단 명료하게 제공한다.
```
<a href="https://newsstand.naver.com">
  <img src="logo/011.png" alt="mbc">
</a>
```

이미지에 중요한 정보가 있을 경우 alt값에 빠짐없이 입력한다.

네이버 쇼핑 이미지 캡쳐

<img src="f0228.png" alt="SBA와 함께하는 SEOUL SHOP 라이브 커머스도 서울산업진흥원과 함께!">

그래픽 문자는 대체 텍스트를 제공해야 목적에 맞게 활용할 수 있다.

미안해하는 브라운

// bad
<img src="brown_img_5.gif" alt="gif">
<img src="brown_img_5.gif" alt="움직이는 이미지">

// good
<img src="brown_img_5.gif" alt="미안해하는 브라운">

alt 값을 비워두는 경우

단순히 배경 이미지나 장식, 꾸밈 요소로 사용된 이미지의 경우 스크린리더가 읽을 필요가 없으니 alt 값을 비워둔다.

아무 정보가 없는 배경 이미지

<img src="background.png" alt="">

📢 단순히 배경 이미지나 꾸밈 요소로 이미지가 필요한 경우에는 `img`태그를 사용하기보다는 가상 요소나 `background-image` 속성을 사용한다.

이미지에 대한 정보가 다른 태그에서 제공되고 있는 경우 alt 값을 비워서 중복 제공을 방지한다.

네이버 동영상 썸네일

<a href="https://tv.naver.com">
  <ul>
    <li><img src="nf460.png" alt=""></li>
    <li>TV 드라마</li>
    <li>[예고] 연애 총량의 법칙..?(이게 무슨 일이야?)ㅣ이상한 변호사 우영우 ENA 220810</li>
  </ul>
</a>

IR 기법 (Image Replacement)

이미지의 대체 텍스트를 제공하면서 화면에서는 숨김 처리하는 CSS 기법이다.
이미지뿐만 아니라 다른 요소에도 적용할 수 있다.
대체 텍스트가 너무 길거나 중요한 정보가 담긴 아이콘을 사용하는 경우 등에 이용한다.
sr-only (screen-only) 클래스에 아래와 같은 속성을 지정해두고 필요한 곳에 사용한다.
- sr-only는 부트스트랩에서 사용하는 용어이다.
- 아래 속성은 네이버에서 사용한다.
```
.sr-only {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}
```

예시

아이콘에 대한 대체 텍스트

네이버 블로그 게시물 썸네일

<i class="icon_more">
  <span class="sr-only">글 썸네일 펼치기</span>
</i>

네이버 홈화면 컨텐츠 캡쳐

<button>
  <span class="sr-only">새로운 글 더보기</span> 
</button>

네이버 오늘 읽을만한 글 탭메뉴 캡쳐

<i class="ico_btn">
  <span class="sr-only">다음</span>
</i>

네이버 날씨 예보 캡쳐

<i class="ico_wt7">
  <span class="sr-only">흐림</span>
</i>

네이버 날씨 예보 캡쳐

<span class="temperature down">0.1° 
  <span class="sr-only">낮아요</span> 
</span>

디자인(색상, 크기 등)으로 구분된 정보에 대한 대체 텍스트

네이버 날씨 예보 캡쳐

<span class="lowest">
  <span class="sr-only">최저기온</span>26°
</span>

input 태그에 대한 대체 텍스트

<form action="#none" method="get" class="search-form">
  <input type="text" id="search">
  <label for="search" class="sr-only">검색창</label>
  <button type="submit">SEARCH</button>
</form>

컨텐츠 구별을 위한 대체 텍스트

카카오 홈페이지와 해당 페이지에 사용된 헤딩태그

<header>
  <div>
    <h1 class="sr-only">KaKao</h1>
  </div>
  <nav>
    <h2 class="sr-only">메인메뉴</h2>
  </nav>
</header>
<main>
  <section>
    <h2 class="sr-only">홈 본문</h2>
  </section>
</main>
<footer>
  <section>
    <h2 class="sr-only">하단 메뉴</h2>
  </section>
  <section>
    <h2 class="sr-only">서비스 이용정보</h2>
  </section>
</footer>