웹접근성, 웹표준, CSS 레이아웃

웹접근성, 웹표준, CSS 레이아웃에 대해서 간단한 글을 적어볼까 합니다.
어찌보면 예전부터 수도없이 나온 묵은 이야기를 꺼내는 것 같지만 최근에 위의 것들을 접하신 분들도 있으니 몇자 적어봅니다.

대부분의 사람들의 위에 3가지를 묶어서 간단하게 웹표준이라고 이야기 합니다.
하지만 여기서 제일 중요한 것은 웹접근성입니다.

웹접근성을 위해서는 웹표준을 지킬 수 밖에 없습니다.
웹표준을 지키려면 CSS 레이아웃을 사용할 수 밖에 없습니다.

CSS 레이아웃을 사용한다고 하여 웹표준을 지키는 것은 아닙니다.
웹표준을 지키면 물론 웹접근성이 높아지지만 웹접근성은 따로 고려하여야 합니다.

1. 표준은 지켰지만 웹접근성이 떨어지는 코드

<p style="font-weight: bold; font-size: 20px;">웹접근성을 지키자.</p>
<p>웹접근성을 지켜야 합니다.</p>

2. 웹접근성을 생각한 코드

<h3 style="font-weight: bold; font-size: 20px;">웹접근성을 지키자.</h3>
<p>웹접근성을 지켜야 합니다.</p>

1번 코드는 비록 표준은 지켰어도 웹접근성이 떨어집니다.
시각장애가 있는 사람에게는 무엇이 제목이고 무엇이 내용인지 알 수가 없습니다.
스크린리더기에게는 단지 두개의 문장으로 해석됩니다.

2번 코드는 제목을 나타내는 <h3&g; 태그를 사용하였습니다.
때문에 스크린리더기는 이것을 제목으로 판단합니다.

스크린리더기만 생각할 것이 아니라 진동마우스가 있다면 제목에 커서가 올라오면 진동이 오도록 할 수도 있는 것입니다.
또는 문서분석 프로그램을 만들거나 이용할 때도 유용하며 대표적으로 검색엔진이 문서을 분석하여 검색하는데 도움을 주며 이것은 웹페이지의 검색효율을 높여줍니다.

장애가 없는 사람들에게는 모습과 문자를 통해서 제목과 내용을 분리하여 판단할 수 있지만 장애를 가진 사람이나 웹페이지의 모양을 볼 수 없는 기계는 제목과 내용의 차이를 판단할 수 없습니다.
제목의 font-size는 20px 라고 정해져 있는게 아니기 때문입니다.

이제 웹표준에 관심을 가지고 지키시려는 분들이 늘어나고 있습니다.
가장 중요한 것은 웹접근성임을 잊지 말아주시기 바랍니다. :)