Outline Algorithm이란?
- Outline Algorithm은 HTML5부터 자동으로 문서의 제목 태그(h1~h6)를 기반으로 문서 구조를 계층화하는 방법이다.
- 페이지의 구조를 명확히 하고, 검색 엔진과 사용자가 페이지를 더 쉽게 이해하고 탐색할 수 있도록 도우며, 문서의 논리적 구조를 파악하기 위해 사용된다.
- 이를 통해 웹 페이지의 가독성과 접근성을 높이며, SEO에도 긍정적인 영향을 미친다.
- Chrome의 익스텐션인 HeadingsMap을 통해 웹사이트의 문서 계층 구조를 시각적으로 확인할 수 있다.
Daum 사이트 사례 분석
- Daum 사이트를 HeadingsMap으로 분석했을 때, h2 요소로 검색이라는 항목이 계층 구조에 표시되었다.
- 그러나 실제 웹사이트 화면에는 "검색"이라는 단어가 보이지 않았다.
- 개발자 도구(윈도우: F12 / Elements 패널)로 확인해보니, h2 태그 안에 "검색"이라는 텍스트가 실제로 존재했다.
CSS로 스타일 제거 후 확인
- Chrome의 익스텐션인 Web Developer을 이용해보자.
- Web Developer 익스텐션 → CSS 탭 → Disable All Styles 옵션으로 모든 CSS 스타일을 제거해보았다.
- 스타일이 없어지자, 숨겨져 있던 h2 텍스트 **"검색"**이 화면에 표시되었다.
- 이는 CSS를 이용해 요소를 숨긴 것이라는 사실을 확인할 수 있었다.
정리
- HTML 구조에는 존재하지만, CSS로 시각적으로 숨겨진 요소가 있을 수 있다.
- 문서 계층 구조(Outline)는 HTML 구조 기준으로 생성되기 때문에, 실제 화면에서 보이지 않는 제목이라도 계층에 포함될 수 있다.
🚨주의사항🚨
- 웹 접근성(Accessibility) 측면에서, 숨겨진 제목 요소가 사용자 경험에 어떤 영향을 미치는지 주의해야 한다.
| 문제점: 숨겨진 제목이 스크린 리더에 영향을 미칠 수 있음
시각적으로 숨겨진 제목 요소가 스크린 리더와 같은 보조 기술에 영향을 미칠 수 있다.
스크린 리더는 HTML의 구조를 기반으로 문서를 읽어주기 때문에, 시각적으로 숨겨진 제목이라도 여전히 스크린 리더를 통해 읽힐 수 있다.
따라서 시각 장애가 있는 사용자나 키보드만 사용하는 사용자에게 혼란을 줄 수 있으며, 불필요한 정보나 비가시적인 콘텐츠가 접근성에 영향을 미칠 수 있다.
| 해결 방법: 접근성 고려
웹 접근성을 고려할 때, 숨겨진 콘텐츠나 제목이 불필요하게 읽히지 않도록 접근성 속성을 활용해야 한다.
예를 들어, aria-hidden="true" 속성을 사용하여 스크린 리더에서 해당 요소를 제외하거나, 문서의 논리적 구조와 일관성을 유지할 수 있도록 신경 써서 사용자 경험을 개선할 수 있도록 해야 한다.
코드를 다 짠 후에, HTML이나 CSS를 꼭 검사해서 접근성이 좋은 웹을 만들 수 있도록 하자~!
'멋쟁이사자처럼 > HTML' 카테고리의 다른 글
| [멋사 프론트엔드 부트캠프 14기] HTML에 대하여 🔎 (1) | 2025.04.29 |
|---|