웹 접근성과 시맨틱 마크업

시맨틱 마크업

시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.

작성 방법

시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다.

• 헤더/푸터에 <header>와 <footer> 사용
• 메인 컨텐츠에 <main>과 <section> 사용
• 독립적인 컨텐츠에 <article> 사용
• 최상위 제목으로 <h1> 사용
• 순서가 없는 목록으로 <ul>과 <li> 사용
• 내비게이션에 <nav>사용

이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시멘틱 마크업에 적합하지 않다.

 

예를 들어, 동일한 효과를 부여하는 <strong>과 <b> 태그가 있다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "bold"의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong>의 경우에는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다"라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.

 

특징

• 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
• 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
• 단순한 div, span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋다.

실무에서 시맨틱 마크업이 완벽하게 쓰이는 것은 이상적이긴 하지만, 이러한 특징을 고려하고 웹 사이트를 구성하는 것이 많은 측면에서 바람직하다.

 

웹 접근성(Web Accessibility)

장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리킨다.

사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.

웹 접근성에는 다음의 사항들을 고려하여야 한다.

• 시각 : 설명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애
• 운동성(이동성) : 파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로 근육 속도 저하, 근육 제어 손실로 손을 쓰기 어렵거나 쓸 수 없는 상태
• 청각 : 청각 장애
• 발작 : 깜박이는 효과나 시각적인 스트로보스코프를 통해 일어나는 뇌전증성 발작
• 인지 : 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등)

웹 브라우징에 쓰이는 보조과학기술

웹 브라우징을 할 수 있게 하거나 도움을 주는 등을 목적으로 보조과학기술을 이용할 수 있다.

• 스크린 리더 소프트웨어
• 화면 확대 도구
• 음성 인식
• 키보드 오버레이

 

---

Reference

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

드림코딩 엘리님이 말하는 "시멘틱 마크업"  정리와 HTML 요소 참고서

웹접근성이란? > WA : 한국웹접근성인증평가원