웹 접근성을 고려한 구성

웹 개발에 있어서 접근성이란,

"사람들의 능력이 어느 정도 제한이 되어 있더라도 가능한 많은 사람들이 웹사이트를 사용할 수 있도록 하는 것이다" 

라고 mdn에서 정의하고 있다. 

 

보통 접근성이란 장애인을 돕기 위한 휠체어 접근과 같이 편의 시설을 성명하는 데에 많이 쓰이고 이러한 개념으로 웹 사이트로 확장될 수 있다.   

 

"그들의 하드웨어, 소프트웨어, 언어, 문화, 위치 또는 신체적 혹은 정신적 능력이 무엇이든지 간에, 웹은 근본적으로 모든 사람들을 위해 일하도록 설계되어 있습니다. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 인지 능력을 가진 사람들에게 접근할 수 있습니다." W3C - Accessibility

Accessibility - W3C

 

 

단순히 장애를 가진 사람들을 위한 것이라고 생각하면 안 된다. 

남녀노소 모든 사용자라는 확장된 의미로 웹 접근성을 간단히 정의 내리 지면 이런 것이라고 볼 수 있다.

• 불편함이 정보의 차별을 일으키지 않는 것
• 모두에게 동둥한 정보가 전달되는 것
• 1차적으로 모두가 인식 가능한 것 

 

---

웹 접근성을 높이려면?

 

웹 콘텐츠 접근성 지침 (WCAG, Web Contents Accessibility Guidelines)

웹에는 웹 접근성을 높이기 위한 국제 표준에서는 4개의 지침이 있다. 

 

Perceivable (인식 가능한)

• 텍스트가 아닌 컨텐츠는 텍스트로 대체 가능해야 한다.
• 멀티미디어를 위한 캡션들이나 다른 대체제를 제공해야 한다. 
• 보고 듣기 쉬운 컨텐츠를 만들어야 한다. 

Operable (운용 가능한)

• 키보드로 조작이 가능해야 한다. 
• 신체 반응(발작 등)을 유발하는 컨텐츠를 사용하지 않아야 한다.
• 사용자가 컨텐츠를 탐색하고 찾을 수 있도록 도와야 한다.
• 키보드 이외의 입력도 사용하기 쉬워야 한다.

Understandable (이해 가능한)

• 텍스트 자체를 읽고 이해하기 쉽게 만들어야 한다. 
• 컨텐츠를 예상 가능한 방식으로 보여주고 작동시켜야 한다. 
• 유저가 실수를 파악하고 고칠 수 있도록 해야 한다.

Robust (견고한) 

• 현재와 미래 도구의 호환성을 최대화해야 한다.

 

이러한 지침을 바탕으로 우리는 여러 가지 노력을 해 볼 수 있다. 

• 웹 표준을 따른다.
• 시멘틱 웹으로 제공한다. (시멘틱 태그와 적절한 메타데이터, 타이들을 삽입) 
  • 기계가 이해하기 쉬워야 모든 사람들이 이해하기 쉽도록 재처리가 가능하다.
  • 검색 엔진도 HTML을 읽는 기계이기 때문에 결국 SEO에도 도움이 된다.
  • HTML5에서는 기존 div 요소 이외의 시멘틱한 태그 구성요소를 지원한다 (header, footer, figure, aside, section, article 등)
• 맥 OS에서 제공하는 Voice over을 사용해 직접 확인해 본다.
• 미디어 콘텐츠의 대체제가 있거나 비디오, 오디오에 자막이나 수화를 제공한다.

더 자세한 방식으로는 https://www.w3.org/TR/WCAG21/에서 확인할 수 있다.