🔍 [직무 관련 질문] - 11. 웹 접근성과 시맨틱 마크업이란?

조준형·2021년 6월 28일

면접 직무 관련 질문 질문 및 답변

interview

목록 보기

16/20

이 2가지를 지키기 위해 보통 어떤식으로 마크업을 작성하는지?

💬 Answer

🌏 웹 접근성

👉 웹 접근성이란?

「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다.
즉, 장애인이나 고령자 분들도 똑같이 우리처럼 웹을 이용할 수 있게 보장하게 하는 것.

👉 웹 접근성 준수 고려사항

시각 : 다양한 형태의 시각 장애 (실명, 색각, 저시력 등등)
이동성 : 근육 속도 저하ㅏ, 근육 제어 손실등등 손을 쓰기 어렵거나 못쓰는 상태
청각 : 영상, 음성 콘텐츠에 자막, 원고, 수화등의 대체수단 부제로 인한 인식 불가상태
인지 : 정신지체 및 발달 장애, 학습장애 등등

👉 도움을 주는 도구

스크린 리더
화면 확대 도구
음성 인식
키보드 오버레이

🌏 시맨틱 마크업

👉 시맨틱 마크업이란?

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

👉 HOW?

헤더 / 푸터 : <header>, <footer>
메인 컨텐츠 : <main>, <section>
독립적인 컨텐츠 : <article>
최상위 제목 : <h1>
순서가 없는 목록 : <ul>, <li>
네비게이션 : <nav>

이렇게 태그가 가지고 있는 의미에 맞게 사용하는 것.
CSS스타일을 명시하는 태그를 사용하지 않는것도 시멘틱 마크업의 한 종류.

ex) <strong>, <b>의 경우
둘다 글자를 굵게하는데, <b>는 "bold"의 약어이기 때문에 태그자체가 스타일을 가진다고 할 수 있다.
<strong>의 경우 그 안의 "내용이 다른 내용보다 더 강조되어야 한다"라는 의미이므로 시멘틱 마크업에 더 적합하다.