Web Accessibility
웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다.
"장애인이 웹상에서 제공되는 텍스트와 이미지, 영상 등을 접했을 경우, 한눈에 재빨리 내용 파악이 가능하지만, 장애인은 그렇지 않다.
그림이나 사진들을 제공할 때 눈으로 볼 수 없는 경우를 대비하여 그림이나 사진을 대신 할 수 있는 설명을 텍스트로 제공해야 하며, 동영상이나 오디오의 경우 청각장애인을 위한 음성정보를 문자로 제공해야 한다.
또한, 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로도 모든 콘텐츠에 접근하여 이용할 수 있도록 해야 하며, 움직임이 느린 사용자를 위해 시간조절기능을 제공해야 한다.”
웹을 구성하는 가장 중요한 요소인 HTML은 다양한 플랫폼과 장치에 독립적인 정보교환 수단을 제공하기 위해 탄생되었다. 쉽게 말하면 웹은 원래부터 사용자의 환경이나 사용하는 기기, 운영체제에 가능한 한 영향을 받지 않고 웹이 제공하는 정보를 사용자에게 전달하고자 하는 목적에서 만들어진 정보 전달 체계이다.
Semantic Markup
Semantic Markup은 종종 POSH(Plain Old Semantic HTML)라고도 불리우는데 말 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다.
시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다.
따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다.
- 헤더/푸터에
<header>와<footer>사용 - 메인 컨텐츠에
<main>과<section>,<aside>사용 - 독립적인 컨텐츠에
<article>사용 - 최상위 제목으로
<h1>사용 - 순서가 없는 목록으로
<ul>과<li>사용 - 내비게이션
<nav>사용 - 주소
<address>사용 <details>,<figcaption>,<figure>,<mark>,<summary>,<time>기타 등등
이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.
효과를 부여하는
<strong>과<b>태그둘은 동일하게 글자색을 진하게 하지만
<b>태그의 경우는 그 자체가 "blod"의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다.
하지만<strong>의 경우는 "그 안의 내용이 다른 내용보다 더 가종되어야 한다."라는 의미를 가지고 있기 때문에 시맨틱 마크업에 더 적합하다.
Benefit of Semantic Markup
- 최적화
검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리합니다. - 접근성
웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있습니다. - 개발
- 단순한
div,span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋습니다. - 코드와 데이터의 재사용성이 높아짐
- 단순한
Summary
2005년 Andy Clark은 Stuff&Nonsense 사이트에 위의 내용에 대한 글을 게재하였는데 그가 말하고자 하는 요점은 데이터 구조, 스타일 정보, 그리고 스크립트 정보를 각각 분리시켜야 한다는 것이다.
오늘날에도 대부분 그의 생각은 여전히 잘 들어맞고 있습니다.
-
시멘틱 HTML은 정확하고 접근이 용이한 컨텐츠의 데이타 구조를 형성한다. 바로 HTML5가 이런 부분을 잘 지원하고 있다. 그래서 우리는 어떠한 스크립트를 추가 하지 않고도 가능한 접근이 용이하며 쓸모있게 데이터 구조를 만들어 내야한다.
-
CSS는 스타일 정보를 제공한다. 즉, 데이터 구조에 우리가 원하는대로 시각적인 효과를 더해 주는 것이다. CSS3는 이전의 CSS2보다 더 강력한 툴이다.
-
HTML5와 그 외 다른 것에 정의되어진 스크립팅 APIs와 베이스언어를 포함한 자바스크립트는 우리가 제작하는 사이트에 풍부한 기능과 유용성의 증대를 더해 주는 스크립팅을 제공한다.
다음글을 참고하였습니다.
