본문 바로가기

웹접근성지침(WCAG2.0)

[웹접근성 지침-일반기술 G130] '설명적 제목'을 제공하자.

728x90

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G130.html


제목은 콘텐츠의 개요를 담아야 합니다. 그래야 사용자가 원하는 정보를 빠르게 찾고, 콘텐츠의 구조를 파악 하는데 도움이 될 수 있기 때문입니다.


기술설명

이 기술의 목적은 웹 콘텐츠 내에 섹션의 제목을 '설명적 제목'으로 만드는 것입니다.

'설명적 제목'과 일반적인 '제목'을 함께 사용하면 콘텐츠 구성에 대한 개요(= 간추려낸 내용)가 됩니다.

'설명적 제목'으로 웹 페이지 내에 있는 섹션들의 구조를 파악하는데 도움이 됩니다.

'설명적 제목'은 특정 콘텐츠를 찾거나 웹페이지 내에서 방향성을 찾는데 도움이 됩니다.

 

제목의 시작부분에 중요한 정보를 먼저 제공하여 만들면, 사용자는 제목만 보고도 특정 콘텐츠를 찾는데 큰 도움이 됩니다.

그리고 브라우저나 보조 기술이 제목으로 내용을 탐색하는 경우 아주 유용합니다.

 

 

예시

[예시1] 재난 대비의 작업 범위를 설명하는 코드입니다.

<h1>재난 대비</h1>
    <h2>홍수 대비</h2>
    <h2>화재 대비</h2>

제목을 통해 재난 대비에는 홍수 대비와 화재 대비가 있다는 것을 파악 할 수 있습니다. 

 

 

[예시2] 마을의 건국과 확장에 대한 짧은 기사입니다.

웹 페이지의 제목은 '우리 마을의 역사'입니다. 첫 번째 섹션의 제목은 '우리 마을의 건국'입니다.

두 번째 섹션의 제목은 '우리 마을의 확장'입니다. 세 번째 섹션의 제목은 '오늘날 우리 마을'입니다.

이후 섹션들의 제목은 '우리 마을 사람들', '우리 마을의 조직', '우리 마을의 건물' 등이 있습니다.

  

 

점검절차

1. 웹 페이지에 제목이 있는지 확인합니다.

2. 각 제목이 콘텐츠의 섹션을 식별할 수 있는지 확인합니다.

 

 


 

나의 정리

이번 내용에서는 제목(<h1>~<h6>)에 대한 역할과 사용방법을 말하고 있는 것 같습니다.

제목은 콘텐츠의 시작점이여야 합니다. 즉 컨텐츠의 내용보다 먼저 나와야 한다는 것입니다. 그리고 제목은 해당 콘텐츠를 나타내는 내용으로 구성되어야 합니다.

그래야 사용자가 제목을 통해 콘텐츠 내용을 추측 할 수 있고, 제목만 보고도 원하는 정보가 있는 곳인지를 알 수 있게 됩니다.

 

제목은 콘텐츠의 개요를 담아야 합니다. 그래야 사용자가 원하는 정보를 빠르게 찾고, 콘텐츠의 구조를 파악 하는데 도움이 될 수 있기 때문입니다.

 


 

G130: Providing descriptive headings

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G130.html

 

G130: Providing descriptive headings | Techniques for WCAG 2.0

The objective of this technique is to make section headings within Web content descriptive. Descriptive headings and titles (see Providing descriptive titles for Web pages) work together to give users an overview of the content and its organization. Descri

www.w3.org

 


 

독학으로 힘들어 하시는 분들을 위해 과외를 준비 했습니다. 

2024년 11월 한 달간 맞춤형 과외를 할 예정입니다.
입문자 분들의 참여 부탁드립니다.
교육과정은 인터뷰 후에 맞춤으로 진행할 예정입니다. 

참여하기: https://blog.naver.com/redoxup/223601934677

 

[조립]에서 2024년 11월 한 달 무료 과외(HTML/CSS/jQuery)를 합니다. - 과외 신청하세요!!

HTML+CSS+ jQuery(제이쿼리) 입문자 인가요? 웹퍼블리셔, 프런트엔드 개발자, 웹디자이너를 시작해...

blog.naver.com

 

 

 

728x90