웹표준, Semantic HTML, 웹접근성

🤔웹표준이란

 

웹 표준이란 다양한 웹브라우저에서 동등하게 작동하게 하기 위한 권고사항이다.

이 '표준'이란 것은 w3(https://www.w3.org/)이란 기관에서 권고사항을 모아서 소개한다.

웹표준을 지키면 다양한 브라우저(사파리, 크롬, 파이어폭스, 엣지, 오페라)에서 동등하게 잘 작동하는 웹페이지를 만들 수 있다.

 

여기서 '동일'대신, '동등'을 사용한 이유는, 브라우저가 다르면, 완벽하게 동일하게 작동할 수는 없기 때문이다. 그래도 웹표준을 사용하면 동등한 수준의 필요 기능을 제공할 수 있어진다. 더불어, 이런 호환성 외에도 다양한 장점들이 있어 웹표준은 꼭 지키는 것이 좋다.

 

 

---

 

💡웹표준을 사용하면

 

1. 유지 보수가 편해진다. (+코드 경량화, 트래픽 비용 감소)
2. 웹 호환성을 확보할 수 있다.
3. 검색 효율성 증대
4. 웹 접근성 향상

 

---

 

🤔Semantic HTML이란

 

웹표준에선 semantic HTML을 꼭 지킬 것을 권고한다.

다시말해 semantic HTML은 웹표준을 위해서 꼭 필요한 조건이라는 뜻이다.

 

Semantic HTML이란 HTML로 골격을 만들때, 태그를 "의미"있게 사용하여 작성한 것을 말한다.

 

semantic이란 영어 어휘 자체가 "의미의, 의미론의"라는 뜻을 갖고 있다. 

아래의 semantic, non-semantic의 예시를 보면 더 잘 알 수 있다.

 

---

 

😫Semantic하지 않은 HTML

 

 

시멘틱하지 않은 태그의 예시는 위와 같다. div와 span으로 범벅이 되어 있다. 

이제껏 웹사이트를 본 경험상 순서로 이런게 맨 앞에 나오겠지? 정도는 예측할 수 있지만, 정확한 구조는 알 수가 없다.

마치 어디 부품인지 설명서도 없는 레고블럭을 보는 느낌이다.

게다가 이런 태그엔 일일이 클래스명이나 아이디를 작명하는 것도 고민스러울 것이다.

 

 

---

🥰Semantic한 HTML

 

 

semantic한 구조는 위와 같다. 단순히 div로 영역을 만드는 것이 아니라 header나 article, footer등으로 의미를 부여하니, 이제 뭐가 뭔지 태그명만으로도 잘 알 수 있게 되었다. 대충 이런것들이 여기에 들어있겠구나.. 싶다.

클래스명이나 아이디 작명 없이 태그명을 써도 되는 경우도 많아질 것이다.

 

semantic tag의 대표 종류들은 아래와 같다. 

 

<header>, <nav>, <aside>, <main>, <article>, <section>, <hgroup>, <footer>

 

---

 

💡Semantic HTML의 필요성

 

1. 무분별한, class나 id의 사용을 줄인다. 때문에, 작명에 들어가는 시간과 고민을 줄일 수 있다.
2. 검색 엔진이 문서의 중요도를 파악해 페이지를 노출시켜주는 데에 도움이 된다.
3. 웹접근성을 향상시킬 수 있다. 

 

웹접근성은 아래에서 더 자세히 설명한다.

 

---

🤔웹 접근성이란

 

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

 

웹접근성을 고려한다는 말은,

시각장애인도, 청각장애인도, 혹은 작은 글씨는 볼 수 없는 노인도, 혹은 장애는 없지만 지금 마우스를 사용하기 힘든 환경에 있는 사람들도,

모두 웹사이트를 이용할 수 있도록 신경써서 만든다는 뜻이다.

 

---

 

💡웹 접근성의 필요성

 

1. 더 많은 사람들이 이용할 수 있게되고, 그로인해 매출이 증가한다.
2. 더 많은 환경의 사람들이 더 많이 이용할 수 있게되며, 이용자수와 매출이 증가한다.
3. 정보 소외 계층을 위해 공헌한다는 사회적 이미지를 심어줄 수 있다.

 

---

 

🔍웹접근성 공식문서 예시 보기

 

WCAG(Web Content Accessibility Guidelines) 2.0 사이트에 들어가면 엄청나게 방대한 양의 권고사항을 볼 수 있는데 어마어마한 양이다.

과연 이 모든걸 다 지킨 사이트가 존재할까 궁금해하며 어떤 항목들이 있나 쓱 훑어보았다. 그중에 아래와 같은 부분이 있었는데

 

 

 

이런 부분은 퍼블리싱할 때도 회사에서 "별다른 내용없는 장식은 그냥 ::before나 ::after로 만들어버려!" 라고 했던 맥락이 떠올랐다.

심지어 이런 부분도 있다.

 

 

이밖에도 색상사용이나 대체 택스트에 관한 부분도 많이 있어서

굳이 개발자가 아니더라도, 디자이너나 기획자도 꼭 한번쯤은 훑어봐야 할 것같다.

와 이런것도 있네... 싶은게 진짜 많다.

(input에 꼭 라벨이 붙어야 한다던가...video안에 track으로 자막을 넣어야 한다던가...스크린 리더 사용자는 a태그에 target="_blank"를 넣어야 페이지가 새로 뜨는 줄 안다던가...)

 

---

🔍 관련 개념

 

WAI-ARIA (참고1, 참고2) - 시멘틱 HTML로 커버안 될때 접근성을 향상시키기 위한 보조 방법. 

엄청 뭐가 많은데 role과 aria-label먼저 알아둔다.