웹표준 & 웹접근성

HTML

웹표준

웹표준이란, W3C에서 정한 웹에 관련된 정해진 규칙을 말한다. 웹표준 스펙에 맞는 HTML, CSS 등으로 개발을 하여 웹을 개발해야 한다. 이런 표준을 정한 이유는 누구나 웹에 쉽게 접근하여 원하는 정보를 얻게 하기 위함이다. 이에 따라, 개발자는 웹접근성을 고려하여 모든사람(장애인을 포함한 일반인 모두)이 어떤 플랫폼(PC, 모바일, 태블릿)이든, 어떤 브라우저(Chrome, IE, Safari, FireFox, etc)든 쉽게 접근할 수 있게 웹을 개발해야 한다.

개발자는 HTML, CSS로 코딩을 한뒤, 웹표준에 맞는지 확인하기 위해서, 다음 2곳을 활용할 수 있다.

HTML 웹표준 검사: W3C Markup Validation
CSS 웹표준 검사: W3C CSS Validation


웹접근성

웹접근성이란, 모든사람(장애인을 포함한 일반인 모두)이 어떤 플랫폼(PC, 모바일, 태블릿)이든, 어떤 브라우저(Chrome, IE, Safari, FireFox, etc)든 쉽게 접근할 수 있게 고려한 웹이라고 할 수 있다.

웹표준을 따라 개발을 한다는 것은, 개발자가 코딩을 할 때, 다음의 3가지 웹접근성을 고려하여 개발을 해야한다는 뜻이다.

1. 장애인을 고려한 코드작성
2. 반응형을 고려한 코드작성
3. 크로스 브라우징을 고려한 코드작성


Semantic Web

Semantic Web이란, 의미론적인 웹을 말한다. 즉, HTML 작성시, 단순한 <div> 보다는 브라우저가 어떤 의미인지 파악할 수 있는 코드, 예를 들어 <header> 등으로 해당 태그가 어떤 의미인지를 전달하는 해야 검색엔진에도 좋고, 개발자끼리도 어떤 의미로 작성되었는지 쉽게 파악할 수 있어서 좋다.

대표적인 Semantic 태그

  • <header>
  • <footer>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <aside>
  • <h1>


웹표준과 웹접근성으로 고려한 HTML 코딩 규칙

아래 링크에서 웹표준과 웹접근성으로 고려한 HTML 코딩을 작성할 때, 참고해보면 좋을 것 같다.

구체적인 HTML 규칙: HTML 규칙
링크 모음: 웹표준 HTML 규칙관련 링크


웹표준과 웹접근성을 고려해서 개발하는 방법

1. Semantic 태그를 활용하여 전반적인 HTML 구조를 작성한다.
2. Screen Reader 등 장애인 등을 고려한 태그를 추가적으로 작성한다.
3. 데스크탑, 모바일, 태블릿에 맞게 반응형(Responsive) 코드를 작성한다.
4. 모든 브라우저를 고려한 CSS를 작성한다.(Cross Browsing)
5. 작성한 HTML, CSS가 웹표준에 맞는지 확인하고자 한다면, W3C Validation에서 해당 코드를 붙여넣기하여 확인하면 된다.