웹 표준과 웹 접근성

jwp9633·2022년 9월 5일
0

서론

웹(Web)은 월드 와이드 웹(World Wide Web)을 간단히 부르는 용어로, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 공간이다. (위키백과)

웹은 브라우저를 통해 정보를 화면에 출력한다. 사람들은 크롬, 사파리, 파이어폭스, 엣지, 인터넷 익스폴러로 등 다양한 브라우저를 사용한다. 과거에는 같은 웹 페이지에 접속해도 브라우저, 운영체제에 따라 지원하는 기능이 달라서 서로 다른 화면을 보게 되었고, 이는 사용자에게 큰 불편을 안겨 주었다. 개발자는 이러한 불편 사항을 해결하기 위해 브라우저에 맞는 화면을 따로 개발해야 되는 어려움을 겪게 되었다. 이러한 점을 해결하기 위해 웹 표준이 등장하게 되었다.

웹 표준

웹 표준이란 W3C(World Wide Web Consortium)는 웹의 장기적인 성장을 위해 웹 표준을 제시한 것으로, '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미한다. 즉, 사용자가 사용하는 브라우저, 운영체제에 상관없이 동등하게 보이며 정상적으로 작동하는 웹을 만드는 방법이다.

웹 표준을 따랐을 때의 장점

  1. 웹 호환성, 접근성이 향상된다.
    웹 표준을 따르면 다양한 운영체제와 브라우저에서 정상적으로 동작한다.

  2. 유지 보수가 쉬워진다.
    많이 사용되는 브라우저들의 최신 버전은 모두 웹 표준을 따르기 때문에 쉽게 유지 보수할 수 있다.

  3. 검색 엔진에서 상위에 노출된다.
    검색 엔진은 HTML 태그와 정보를 바탕으로 우선 순위를 결정하는데, 웹 표준을 따르면 이를 만족하게 된다.

웹 표준을 따르는 방법

1. Semantic HTML

웹 표준에서는 HTML을 Semantic하게 작성하는 것을 권장한다. Sementic의 뜻은 '의미의', '의미가 있는'이다. 즉. Semantic HTML은 내용(콘텐츠)의 의미와 그 의도가 가장 비슷한 요소를 사용하여 HTML 문서를 작성하는 것이다. 대표적인 Semantic 요소에는 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <h1> ~ <h6> 등이 있다. 이러한 Semantic 요소를 적절히 사용하여 작성한 HTML 문서를 Semantic HTML이라 한다.

2. 크로스 브라우징

크로스 브라우징은 웹 페이지에 접속하는 브라우저에 관계없이 동등한 화면과 기능을 제공하는 것이다. 브라우저의 렌더링 엔진은 각자 다르게 때문에 동일한 화면을 만드는 것은 사실상 불가능하다. MDN, Can I Use 등의 사이트를 통해 브라우저별 지원하는 지 확인할 수 있다. 웹 페이지를 제작할 때, 고객이 사용하는 브라우저에 따라 크로스 브라우징을 구현하면 된다.

3. 그 외

  • HTML 문서 형식을 선언해야 한다.
  • body 요소 안에서는 style 요소를 사용하지 않는다.
  • 등등

이외에도 웹 표준을 만족하기 위해 다양한 지침을 따라야 한다.

웹 접근성

웹 접근성은 누구에게나 어떤 환경에서도, 제약 없는 사람들과 동일한 수준의 정보를 제공하는 것이다. 장애인, 고령자 등을 포함하여 비장애인이 환경의 제약을 받을 때까지 모두 포함한다.

웹 접근성을 갖추었을 때의 장점

  1. 사용자층이 다양해진다.
    웹 접근성이 갖춰지지 않았을 때 정보를 얻기 어려웠던 사용자들도 정보를 이용할 수 있다.

  2. 사용 환경이 다양해진다.
    화면을 보기 어렵거나, 소리를 듣기 어렵거나, 마우스를 사용할 수 없는 상황 등 다양한 제약 환경에서도 서비스를 이용할 수 있다.

  3. 이미지 향상
    소외 계층을 위한 노력이 서비스의 이미지 향상으로 이어진다.

웹 접근성을 갖추는 방법

1. WCAG(Web Content Accessibility Guidelines) 2

W3C가 제공하는 웹 접근성 권고안 WCAG 2를 따른다.

2. 한국형 웹 콘텐츠 접근성 지침 2.1

WCAG 2를 바탕으로 한국에 맞게 일부 수정된 지침이다.

3. WAI-ARIA

  • WAI(Web Accessibility Initiative): W3C에서 웹 접근성을 담당하는 기관
  • ARIA(Accessible Rich Internet Applications): 웹 접근성을 갖추기 위한 기술

WAI-ARIA를 활용하여 HTML 요소에 추가적으로 의미를 부여할 수 있다. Semantic 요소로 의미를 충분히 부여할 수 없는 상황에만 WAI-ARIA를 활용해야 한다.

MDN - Using ARIA: Roles, states, and properties
W3C - ARIA in HTML

참고문헌

profile
JUST DO IT.

0개의 댓글