Semantic은 “relating to meaning”을 의미한다. 시멘틱 HTML 작성은 HTML 요소를 사용하여 모양이 아닌 각 요소의 의미를 기반으로 콘텐츠를 구조화하는 것을 의미한다.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

이 것들을 시맨틱 요소로 다시 작성하면 아래와 같다.

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

비의미적 요소만 사용하면 <span>, <div> 와 같은 컨텐츠가 무엇을 의미하는지 알 수 없다. 시맨틱 요소가 있는 두 번째 예제는 HTML 태그를 만나지 않고도 목적과 의미를 해독할 수 있는 충분한 컨텍스트를 제공한다.

두 번째 코드 블록에서는 의미 요소가 의미와 구조를 제공하기 때문에 내용을 이해하지 않고도 아키텍처를 이해할 수 있다. <h1> 첫 번째 헤더는 사이트 이름일 것으로 유추된다. footer는 사이트의 바닥글이다.

시맨틱 마크업은 개발자가 마크업을 읽기 쉽게 만드는 것 뿐 아니라 대부분 자동화 도구가 해독하기 쉬운 마크업을 만드는 것이다. 개발자 도구는 시맨틱 요소를 기계가 읽을 수 있는 구조를 제공하는 방법을 보여준다.

접근성 개체 모델(AOM: Accessibility Object Model)

브라우저는 받은 콘텐츠를 구문 분석할 때 Document Object Model(DOM)과 CSS Object Model(CSSOM)을 빌드한다. 그런 다음 접근성 트리(Accessibility Tree)도 구축한다. 스크린 리더와 같은 보조 장치는 AOM을 사용하여 콘텐츠를 구문 분석하고 해석한다. DOM은 문서에 있는 모든 노드의 트리이다. AOM은 DOM의 시맨틱 버전과 같다.

해당 문서 구조가 Firefox의 접근성 패털에서 렌더링되는 방식

Untitled

두 번째 스크린샷에는 코드 블럭에 네 가지 랜드마크가 있다. “탐색”을 위해 <header>, <main>, <footer> 라는 이름의 의미적 랜드마크를 사용한다. <nav> 랜드마크는 웹 컨텐츠에 구조를 제공하고 콘텐츠의 중요한 섹션을 스크린 리더 사용자가 쉽게 키보드로 탐색할 수 있도록 한다.

스크린 리더 사용자: 주로 시각 장애인이나 화면을 직접 보기 어려운 사람들이 컴퓨터나 모바일 장치를 사용할 때 화면에 표시되는 텍스트를 음성으로 변환해주는 소프트웨어인 스크린 리더(Screen Reader)를 사용하는 사람들

<header>, <footer>는 다른 랜드마크에 내포되지 않은 경우 각각 역할이 있는 랜드마크이다. Chrome의 AOM은 이를 다음과 같이 보여준다.

Untitled

Chrome 개발자 도구를 살펴보면 시맥틱 요소를 사용할 때와 사용하지 않을 때의 접근성 개체 모델 간에 상당한 차이가 있음을 보여준다.

시맨틱 요소를 사용하면 접근성이 높아지고 비의미적 요소를 사용하면 접근성이 떨어진다. HTML은 일반적으로, 기본적으로 액세스가 가능하다. 개발자로서 우리의 임무는 HTML의 기본적인 접근성을 보호하고 접근성을 최대화하는 것이다. 개발자 도구에서 AOM을 검사할 수 있다.