div태그로만 레이아웃을 구성하고, span태그로 모든 인라인 스타일을 넣어주던 시대도 있었지만,
시멘틱 웹의 중요성과 표준을 준수하는 것, 그리고 웹 접근성의 중요성이 대두되면서 대부분의 웹 페이지나 어플리케이션들이 태그의 목적에 맞게 태그를 사용하여 웹 페이지나 어플리케이션을 개발하는 시대가 되었습니다.
HTML5에서 Content Model을 대대로 수정하면서 Sectioning Content가 생겨나고, section태그나 article태그와 같은 다양한 태그들이 추가되었습니다.
그러나, 일부 구형 브라우저에서 제대로 동작하지 않는 이슈들과 여러 내부 협의로 인해 새로운 태그를 사용하지 못하는 경우는 매우 많고, 그 결과 새로운 태그를 사용하지 못하고, 다양한 브라우저에서 정상적으로 호환되는 div 태그를 가장 무난하게 사용하게 됩니다.
div 태그는 실제로는 의미가 없는 태그이며, HTML 4.01에서 Content Model이 block인 요소들을 감싸서 Layout을 구성하기 위한 목적으로 사용되었습니다.
div 태그로 레이아웃을 구성하는 것은 나쁜 것은 아닙니다.
기존의 방식이 그래왔고, 사실 Table 태그를 이용해서 구성하는 것보다 수십배는 낫습니다.
그런 부분과 맞물려, 여러가지 사정으로 인해 어쩔 수 없이 “이 목적은 아니었는데… 이 태그를 쓸 수 밖에 없네”라는 순간이 올 수 있습니다.
항상 예외상황은 발생하고 그런 상황을 모두 대응할 수 있어야 합니다.
거기에, 아주 약간의 노력만 가한다면 여러분들의 페이지를 더 많은 사람들이 이용할 수 있습니다.
이 아티클에서는 그 작은 팁을 알려드립니다. 바로 WAI-ARIA에서 제공하는 Role 속성입니다.

WAI-ARIA

리치 인터넷 어플리케이션 접근성(ARIA, Accessible Rich Internet Application)은 여러분들의 웹 페이지와 어플리케이션을 위한 접근성 준수 기법들을 제공하는 명세입니다.
2014년 3월 20일 W3C 권고안이 되었으며, 그 전에도 많이 회자는 되었으나 이제 권고안이 되었으니 모든 벤더사, 보조기기 제작사에서 WAI-ARIA 명세를 지원하도록 브라우저와 보조기기를 제작하여야 합니다. (물론 권고하기 전부터 해주면 얼마나 고맙겠습니다마는)
그림 1은 유저 에이전트와 접근성 API, 그리고 보조공학기기(스크린리더 같은 것들) 간의 관계를 나타냅니다.

 

브라우저의 렌더링 엔진은 UI(HTML)와 Data를 해석하여 Document Element를 생성합니다.
이들이 모여서 DOM 트리가 형성되고, JavaScript에서는 DOM API를 활용하여 DOM을 제어할 수 있습니다.
자바스크립트로 DOM을 제어하여 데이터를 변경하거나 UI를 변경하고, 이벤트를 걸어주고, 새로운 위젯을 제작하는 등의 다양한 작업을 수행할 수 있습니다.
아래는 자바스크립트로 DOM을 제어하는 간단한 예제^[1]입니다.

대한

var elKorea = document.getElementById("korea");
elKorea.innerHTML += "민국"

위의 예제처럼 아주 간단하게 자바스크립트를 이용해서 텍스트를 수정할 수 있으며 다양한 인터렉션과 위젯을 만들 수 있습니다.
그렇다면 아래 예제^[2]는 어떨까요?

  

    
뉴스
    
웹툰
  
  

      

          
뉴스
          
오늘의 뉴스
      
      

          
웹툰
          
모두에게 완자가라는 웹툰 참 재미있는 거 같다.
      
  

우선 예제의 Visual이 아닌 HTML만 확인해보도록 하겠습니다.
이 메뉴가 탭메뉴라는걸 식별할 수 있는 정보는 아무것도 없습니다. (클래스 네임으로 탭메뉴를 주더라도 그걸 보조공학기기가 읽을 리 만무합니다)
이게 탭메뉴라는걸 어떻게 알릴 수 있을까요?
이 때 ARIA를 이용할 수 있습니다.
위의 예제에 역할을 부여해보겠습니다.

  

    
뉴스
    
웹툰
  
  

      

          
뉴스
          
오늘의 뉴스
      
      

          
웹툰
          
모두에게 완자가라는 웹툰 참 재미있는 거 같다.
      
  

이제 예제에 role 속성이 들어갔습니다.
변경하는 작업은 매우 간단하며 심플합니다. 단순히 속성을 하나 추가해줌으로써 이 위젯이 어떤 역할을 해주는 지 명시할 수 있으며, 각 파트별로 역할을 줄 수 있습니다.

결론

아마 작업을 하면서 태그 사용에 많은 의문을 품게 될 것입니다.
이대로 만드는 것이 정말 옳은 것인가? “이 태그로 이렇게 구현해도 되나?”라는 간단한 의문에서 시작하고, 아주 약간의 노력만 가미한다면 여러분들의 사이트는 훨씬 아름다워 질 것입니다.
ARIA는 현재도 발전하고 있고 앞으로도 발전해나갈 기술입니다.
아직 대부분의 브라우저 벤더들이 ARIA를 지원하지 않을 지도 모릅니다. 스크린리더들이 ARIA를 지원하지 않을 수도 있습니다.
하지만 그 이상으로 중요한 것은, 웹을 개발하는 모두가 웹은 누구나 이용할 수 있는 공간이라는 것을 인지하고, 누구나 웹을 이용할 수 있도록 만들어야 하는 것입니다.
작은 노력만 있다면 웹은 더욱 아름다워 질 거라 생각합니다.