---
title: "웹 접근성과 웹의 본질"
date: 2020-05-29
updated: 2020-05-29
category: html
canonical: https://intzzzero.dev/web-accessibility/
source: "Between Negative and Positive"
language: ko
---
## HTML은 의미를 담는 언어
**HTML**은 Hyper Text Markup Language의 약자로  마크업을 담당하는 언어. 즉, 웹 상에서 **의미가 있는 내용\(Semantic\)을 담는 언어**라고 할 수 있다. 
```<section><p>paragraph</p></section>``` 과 같이  여는 태그와 닫는 태그로  이루어져 있으며, 태그와 태그 사이에 또 다른 태그로 구성된 텍스트, 이미지, 링크 등의 콘텐츠가 위치한다. 따라서 우리가 웹 상에서 얻는 대부분의 유의미한 정보들은 HTML이라고 할 수 있겠다.  

![coding](https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)

여기서 유의미하다는 것은, 단순히 해당 정보가 글인지, 사진인지, 영상인지 등의 정보의 성격을 브라우저에게 알려주는 것에 그치는 것이 아니다. 한 단계 더 나아가 사용자의 UX를 고려한 구조와 더불어 내부적, 외부적 장애요인에 의한 **‘정보 불평등’**을 예방하기 위한 **‘웹 접근성’**까지 포함하는 것이다.

![Tim Berners-Lee](http://www.global-geneva.com/wp-content/uploads/2019/03/file.jpg)
웹 접근성(Web Accessibility): 월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란, '장애에 구애 받지 않고 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 따라서 웹 콘텐츠를 제작할 때에는 누구나 접근할 수 있도록 제작하여야 한다고 하였다.


## 웹의 본질
'장애를 겪어본 적이 없다고 생각하는 보통의 사람들은' 이러한 HTML의 순기능을 간과하기가 쉬운데, 그것은 단순히 내부적 혹은 신체적인 요인으로만 생각하기 때문이다. 외부적 요인까지 확대해서 본다면, 이미 누구나 겪었을 만한 일들이다. **신호가 약한 와이파이, 낮은 버전의 웹 브라우저, 오래된 컴퓨터** 등 웹 접근을 방해하는 장애 요인들은 언제나 우리 주변에 도사리고 있다. 게다가 '노화'는 모든 사람들이 겪는 장애이기도 하다.

![laptop](https://images.unsplash.com/photo-1552659490-e743fef42631?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)

여기서 한 단계 더 나아가 시각, 청각 혹은 또 다른 내부적 장애를 지닌 사람들까지 웹을 통해 원하는 정보를 얻을 수 있도록 하자는 것이 웹의 본질이며, 누구나 쉽게 배울 수 있다는 평을 받는 언어인 HTML만으로도 실현이 가능한 이야기다.


## 프론트엔드 개발자의 역할
![coding books](https://images.unsplash.com/photo-1472437774355-71ab6752b434?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80)

따라서 웹 콘텐츠 제작자들은 시멘틱하게 마크업을 해야 하는 책임이 있다. 웹 접근성을 고려한 시멘틱 마크업 구조를 만들지 않으면 법적인 불이익을 당한다는 것은 아니지만, **더 나은 세상을 만들기 위한 일종의 윤리적, 사회적 책임인 것이다.**
사실, 나 역시도 내 기준으로만 세상을 바라보고 판단하며 살아왔기 때문에, HTML의 이러한 기능들을 알지도 못 했고, 알았더라도 등한시 했을 것이다. 지금과 같은 생각을 같게 된 계기는 HTML 수업 시간에 선생님이 들려준 짧은 예시 상황이었다.
  >시각장애인들은 컴퓨터의 음성지원 기능을 통해 정보에 접근하는데, 음성지원 프로그램은 HTML의 시멘틱 태그와 구조적 순서에 큰 영향을 받는다. 만약, 이러한 것들을 고려하지 않은 웹사이트라면 음성지원 기능은 제역할을 하지 못 할 것이다. 가장 간단한 예를 들어 보자면, `<title>`태그 사이에 들어가는 내용은 해당 웹사이트에 접속했을 때, 음성지원 기능이 가장 먼저 읽게 되는데, 장식을 한다는 이유로 `<title>:::::코드아메바::::::</title>` 이런 식으로 만든 경우가 간혹 있다. 이 경우, 음성지원 기능은 "콜론콜론콜론콜론콜론 코드아메마 콜론콜론콜론콜론콜론"이라고 말하게 된다.

물론 이외에도 시멘틱 구조를 고려하지 않은 웹사이트가 야기하는 폐해는 수도 없이 많으며, 이처럼 **웹의 본질** 을 흐리는 웹사이트가 생겨나지 않도록, 웹의 표준화 관련 국제 기구인 월드 와이드 웹 컨소시엄\(W3C ; World Wide Web Consortium\)에서는 1997년, 웹 접근성 이니셔티브\(WAI ; Web Accessibility Initiative\)라는 산하 단체를 설립하여 웹 접근성을 전문적으로 연구하기 시작했다. 그 결과 중 하나가 **웹 접근성을 위한 지침** 이다. WAI의 웹 콘텐츠 접근성 지침은 다음과 같다.

### 인지성(Perceivable)
정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.
  > 모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

### 운용성(Operable)
사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.
  >키보드로 모든 기능을 사용할 수 있도록 해야 한다.
읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.

### 이해성(Understandable)
정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.
  >텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

### 견고성(Robust)
콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.
  >보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다.

![group](https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80)

얼마 전, 팀 버너스 리(Tim Berners-Lee)는 컨퍼런스를 통해 현재의 웹은, 본인이 기대했던 웹의 본질에서 어긋나는 방향으로 가고 있는 것 같아서 안타깝다는 말을 전했다. **장애에 구애 받지 않고 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간**으로써의 웹이 하루 빨리 본래의 의미를 되찾기를 바라며, 나 역시도 **누구나 당연하게 정보에 접근할 수 있는** 웹 사이트를 만들 것을 이 자리를 빌어 다시 한 번 다짐해본다.

### "코드에 의미를 담는 것으로, 당신 또한 누군가에게 의미 있는 사람이 되기를 희망해본다."

**참고:**
- [웹 접근성 연구소](http://www.wah.or.kr/Accessibility/define.asp)
- [웹 접근성의 개요](https://seulbinim.github.io/WSA/accessibility.html#%EC%9B%B9%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%98-%EA%B0%9C%EC%9A%94)
