시멘틱 태그와 웹 접근성

Semantic HTML Tag and Web Accessibility

 

웹표준이란?

웹표준은 인터넷에서 사용되는 웹사이트를 제작하는 방법에 대한 약속 또는 규약이다.

이 규약은 전세계에서 권위있는 W3C(World Wide Web Consortium)에서 제정되었으며,

웹사이트를 만들 때 일관성 있게 작성할 수 있도록 지침을 제공해준다.

웹표준은 왜 필요할까?

웹표준을 사용하면 웹사이트가 여러 플랫폼에서 일관되게 표시된다.

브라우저마다 ( chrome, IE, firefox, opera 등 ) 자체적으로 해석하는 방식이 다르기 때문에,

웹표준을 사용하지 않으면 같은 웹사이트라도 브라우저마다 다르게 보일 수 있다. 

(이래서 많은 프론트엔드 개발자들이 웹표준 웹표준 거리는거다)

 

또한, 웹표준을 사용하면 검색 엔진 최적화(SEO)에도 도움이 된다.

 

이게 무슨 소리냐면,

검색 엔진 최적화(SEO)라는 건,

우리가 사이트에서 검색을 할 때, 검색엔진이라는걸 이용하게 된다.

검색 엔진은 웹표준에 맞게 작성된 웹사이트를

더 우선적으로 색인화하고,

검색 결과 상위에 노출시켜준다.

 

그러니까, 사람들에게 훨씬 많이 노출 되려면 검색엔진 최적화는 필수인 것이다.

 

웹표준의 역사

웹표준은 웹이 발전하면서 점차적으로 정립되어 왔는데,

1990년대 초반에는 웹 브라우저가 등장하기 시작했다.

이때는 웹페이지를 제작하기 위한 표준화된 규약조차 없었다.

그냥 무지성으로 웹페이지 제작한 시기였음.

이후 1996년에 W3C가 설립되면서 웹표준을 제정하기 시작했고,

1998년에 HTML 4.0이 발표됐다.

이후 XHTML, HTML5 등 다양한 웹표준이 출시되었고, 현재는 HTML5가 가장 많이 사용되고 있다.

 

웹표준의 중요성

웹표준을 준수하면 웹사이트의 접근성이 좋아진다.

웹접근성이라는건,

장애인이나 노약자, 일부 국가의 인터넷 환경 등,

다양한 상황에서도 웹사이트를 이용할 수 있는 능력을 말하는거다.

웹표준을 준수하면 스크린리더 등 보조기기를 사용하는

다소 몸이 불편한 사용자들도 쉽게 웹사이트를 이용할 수 있다.

또한, 웹표준을 준수하면 웹사이트의 유지보수가 용이해지고, 개발하는데 비용과 시간이 절약된다.

 

근데, 왜 자꾸  많은 개발자들이

웹표준을 준수하면 개발하는데 비용과 시간이 절약된다고 하는 걸까?

 

그 이유는 위에서도 말했듯이, 

웹표준을 준수하면 다양한 브라우저에서 웹사이트가 일관되게 보이기 때문이다.

브라우저마다 웹사이트를 해석하는 방식이 다르면,

코드를 수정할 때마다

각각의 브라우저에서의 결과를 일일이 확인해야 하기 때문에 유지보수가 어려워진다.

 

하지만, 웹표준을 준수하면 각각의 브라우저에서 웹사이트가 일관되게 보이므로,

코드를 수정할 때 각각의 브라우저에서의 결과를 확인하지 않아도 된다.

이렇게 하면 당연히, 코드를 수정하는 데 필요한 시간과 비용을 줄일 수 있는 걸로 귀결된다.

 

또한, 웹표준을 준수하면 웹사이트의 구조가 보다 명확해지기 때문에,

코드를 이해하기 쉬워지고 유지보수를 수월하게 할 수 있다.

 

예를 들어, 다음과 같은 상황을 가정해보겠다.

A라는 개발자가 웹사이트를 만들고, 각각의 브라우저에서 웹사이트를 확인해보니,

IE에서만 정상적으로 보이지 않는 문제가 발생했다.

이 문제를 해결하기 위해서는 IE에서만 적용되는 스타일 코드를 추가해야 한다.

하지만, 이렇게 하면 각각의 브라우저에 맞게 하나하나 코드를 짜야해서,

코드가 복잡해져 유지보수가 어려워진다.

 

따라서, 웹표준을 준수하면 각각의 브라우저에서 웹사이트가 일관되게 보이기 때문에,

이와 같은 문제를 해결하기 위한 코드를 추가할 필요가 없다.

 

그리고 이 웹표준, 웹접근성이라는 단어에 항상 따라오는 녀석이 있는데, 시멘틱 태그라는 녀석이다.

 

HTML에서 시멘틱 태그란 뭘까?

시맨틱 HTML 또는 시맨틱 마크업은 웹 페이지에 단순한 프레젠테이션이 아닌 의미(sementic)를 도입하는 HTML 태그이다.

 

예를 들어서,

<p> 태그는 안에 포함된 텍스트가 문단임을 나타낸다.

사람들은 p 태그 안에 포함된게 문단 이라는 사실을 알고

브라우저는 문단을 표시하는 방법을 알고 있기 때문에

이것은 의미가 있으면서 표현적이다.

 

div 범벅인 스파게티 코드 VS 시멘틱 태그 에 관한 이미지

시맨틱 HTML 태그와 접근성에 관한 MDN 문서에 따르면,

"정확한 하이퍼텍스트 마크업 언어 요소가 항상 올바른 목적을 위해 사용되는지 확인하는 것만으로도

많은 웹 콘텐츠에 접근할 수 있다"고 명시되어 있다.

HTML에 대한 여러 아티클 등에서 공통적으로 대두되는 주제가 있다.

 

POSH 또는 Plain Old Semantic HTML이라고 불리는 시맨틱 HTML을 사용하는 것의 중요성 이다.

POSH에 대한 설명

POSH는 뜻 그대로, 타당한 목적에 맞는 올바른 HTML 태그를 사용하는 것을 의미한다.

누구나 이게 왜 그렇게 중요한지 궁금해 할 것이다.

 

예시를 들어서 설명해보겠다.

 

CSS와 Javascript의 조합을 사용하면 원하는 방식으로 모든 HTML을 이용할 수  있다.

웹사이트에서 비디오를 재생하는 컨트롤 버튼은 다음과 같이 마크업 될 수 있다.

<div>Play video</div>

그러나 위와 같이 "div" 태그 대신, HTML "button" 태그를 사용하는 것이 이 작업에 올바른 HTML 요소를 사용하는 것이다.

<button>Play Video</button>

 

HTML의 <button>은 기본적으로 적용되는 몇 가지의 적절한 스타일링을 가지고 있을 뿐만 아니라,

키보드 접근성도 내장되어 있다.

사용자는 Tab 키를 사용하여 버튼 사이를 탐색하고 Enter 키를 사용하여 선택 할 수 있다.

 

시맨틱 HTML 태그는 프로젝트 시작부터 일관되게 수행하는 경우,

비시맨틱 마크업보다 작성하는 데 더 오래 걸리지 않는다. (눈으로 보기에도 쉽고 빨리 읽힘)

 

더 중요한 점은 시맨틱 마크업은 접근성 외에도 다른 이점이 있다는 것이다.

 

1. 모바일에서는 더 좋다. 

시맨틱 HTML은 비시맨틱 스파게티 코드보다 파일 크기가 확실히 더 가볍고 반응형에 더 가까워진다.

 

2.SEO (검색 엔진 최적화)에 좋다.

검색 엔진은 비시맨틱 태그 <div> 등에 포함된 키워드보다

제목, 링크 등의 키워드 같은 시멘틱 태그에 더 많은 중요성을 부여해서

검색이 더 수월하다.

 

시맨틱 태그를 사용하면 접근성이 향상됨.

 

HTML 시맨틱 태그의 예

• Header tags <h1> through <h6>
• <blockquote>
• <code>
• <em>

그리고 새로 도입된 HTML 5 시맨틱 태그는 다음과 같다. (태그 이름만 봐도 뭐하는 녀석인지 대충 짐작이 옮)

• <header>
• <article>
• <aside>
• <section>
• <footer> etc

시맨틱 태그를 제대로 사용하지 않으면 접근성이 심하게 손상되기 때문에 무시할 수 없다.

의미가 있는 시맨틱 태그는 좋은 접근성을 향한 핵심 출발이다.

화면 판독기 또는 모든 종류의 보조 장치가 웹 페이지를 스캔하면 DOM (Document Object Model)

또는 페이지의 HTML 구조에 대한 정보를 얻는다.

화면 판독기가 스타일이나 자바스크립트를 읽지는 않는다.

 

많은 화면 판독기에는 사용자가 페이지의 제목만 읽거나 링크만 읽도록 선택할 수 있는 기능이 있다.

제목과 링크가 작성되는 방식에 우선순위를 부여하는 것은 이러한 사용자가 웹을 더 쉽게 탐색할 수 있는 중요한 방법이기도 하다.

 

HTML5 에는 몇 가지 새로운 시맨틱 태그들이 도입됐다.

새로운 태그들 중 어느 것도 실제로 혼자서는 아무것도 할 수 없지만,

웹 개발자들이 문서의 다양한 부분을 정의할 수 있는 좋은 방법을 제공하고,

시맨틱 태그들의 의미들을 사용해서 페이지를 보고 탐색하는 대체 방법을 제공하게 한다.

 

우리가 시맨틱하게(의미가 있게) 올바른 HTML을 작성할 때,

우리는 브라우저가 어떤 종류의 콘텐츠를 다루는지,

그리고 그 콘텐츠가 다른 콘텐츠와 어떻게 관련되어 있는지를 알려줄 수 있다.

 

또한 시맨틱 태그 외에도 ARIA 라는 녀석이 있다.

ARIA란?

ARIA는 Accessible Rich Internet Applications의 약자로, 웹 접근성을 높이기 위한 W3C의 권고안이다.

ARIA의 종류와 기능

ARIA는 크게 세 가지 역할로 나눌 수 있다.

1. Landmark Roles: 페이지의 주요 영역을 나타내는 역할을 한다.
2. Widget Roles: 사용자 상호작용이 가능한 UI 컴포넌트 역할을 한다.
3. Document Structure Roles: 문서의 일반적인 구조를 나타내는 역할을 한다.

각 역할에 대한 ARIA의 종류와 간단한 설명은 아래와 같다.

Landmark Roles

• role="banner" : 페이지 상단에 있는 로고나 제목 등의 정보를 포함한 영역을 나타낸다.
• role="navigation" : 페이지 내비게이션 영역을 나타낸다.
• role="main" : 페이지의 주요 내용이 포함된 영역을 나타낸다.
• role="complementary" : 부가 정보를 제공하는 영역을 나타낸다.
• role="contentinfo" : 콘텐츠의 저작권 정보 등을 포함한 페이지 하단의 정보를 나타낸다.

Widget Roles

• role="button" : 버튼 역할을 한다.
• role="checkbox" : 체크박스 역할을 한다.
• role="textbox" : 텍스트 입력을 받는 입력창 역할을 한다.
• role="slider" : 범위를 선택하기 위한 슬라이더 역할을 한다.
• role="dialog" : 대화상자 역할을 한다.

Document Structure Roles

• role="article" : 문서의 독립적인 콘텐츠를 나타낸다.
• role="section" : 문서의 섹션을 나타내며, 일반적으로 제목이 포함된다.
• role="heading" : 문서의 제목을 나타낸다.
• role="list" : 목록을 나타낸다.
• role="listitem" : 목록의 항목을 나타낸다.

그러면 ARIA의 효과는 뭘까?

ARIA 역할을 부여함으로써 스크린 리더기와 같은 보조기기를 사용하는 사용자들이

UI 컴포넌트와 페이지의 구조를 더욱 명확하게 인식할 수 있도록 도와준다.

이를 통해 웹 접근성을 높일 수 있는 것이다.

 

 

JAWS 또는 NVDA와 같은 화면 판독기 소프트웨어 에서는

 

텍스트를 단순히 음성으로 바꾸는 것이 아니라

 

HTML의 정보를 사용하여 페이지의 모든 제목을 나열하거나,

 

데이터 테이블에 추가 네비게이션 컨트롤을 제공하거나,

 

목록에 있는 항목 수를 알려줄 수 있다고 한다.

 

 

 

1. 항상 접근성을 염두에 두고 HTML을 작성해보자.

 

2. 사용자에게 사이트를 탐색하고, 상호 작용할 수 있는 좋은 방법을 제공해보자.

 

3. 방문자와 화면 판독기가 코드를 이해하기 쉽도록 HTML 코드를 가능한 시멘틱하게 (의미가 있게) 만들어보자.