요새 웹접근성을 고려하며 개발하다보니 html tag의 중요성에 대해 많이 깨닫게 되었다.
의미있는 태그를 사용하면 우선 보기 좋다! 확실히 구조가 보기 좋아야 스타일 적용도 쉬워지고, 웹접근성 고려하기도 편해지는 것 같다.
팀에서 웹접근성에 대한 관심도가 매우 높고, 페이지마다 웹접근성을 체크하며 리팩토링을 진행하고 있다. 처음에는 웹접근성에 대한 이해도가 거의 없었는데 하나 둘씩 배워가는 중이다. 동료 개발자 분이 웹접근성에 대해 잘 이해하고 계셔서 배우는데 많은 도움을 받고 있으며, 여러가지 도구들도 많아서 자연스럽게 익혀가고 있다.
특히 Lighthouse라는 크롬 익스텐션을 적극 활용하고 있는 중이다. 이전에는 axe DevTools라는 익스텐션을 사용했는데, 이보다 Lighthouse가 Accessibility 점수도 보여주고, 페이지의 어느 부분에서 수정이 필요한지 시각적으로 보여줘서 직접 퍼블리싱한 페이지가 아니여도 요소 찾기가 수월하다.
평소에 마크업을 하면서 많이 헷갈렸던 태그는 <section>과 <article> 이다.
개인마다 의견의 차이는 있겠지만 현재까지 내린 결론으로 정리해 보면 아래와 같다.
- article: 해당 태그로 감싸져 있는 내용은 독립적인 컨텐츠로 사용할 수 있음
- section: 같은 내용을 담고있는 요소들을 묶어 놓음
그래서 둘의 관계가 상하위 요소를 묶는다고 단정짓지는 않지만 보통 사용하다보면 <article>로 독립적으로 컴포넌트화 할 수 있는 내용들을 묶고, 그 안에 <section>으로 비슷한 내용들끼리 묶어주고 있다. 정답은 아니겠지만 이런식으로 묶어주면 개인적으로 퍼블리싱할 때 보기가 편하고 의미있게 파트를 나눌 수 있다.
그 외에 <div>는 연관 없는 내용들도 묶을 수 있다고 보고있다.
그리고 <header>, <main>, <footer> 를 명시하는 것이다.
한 페이지 내에 header로 지칭할 수 있는 것은 상황에 따라 다르겠지만 보통은 하나이다.
그리고 새로 알게된 점인데, 웹접근성을 지키기 위해서는 <h1>-<h6> 태그를 순차적으로 사용해야한다고 한다.
웹사이트 리뉴얼이라는 대형 프로젝트를 거의 마치고, 작은 프로젝트에 들어갔는데 마크업부터 신경써서 진행하고있다. 처음엔 더디지만 웹접근성을 고려하고, 의미있는 html 태그를 사용하는데 적응해야겠다.
