개발자 도구 · HTML WYSIWYG 편집기
제목은 크고 굵은 텍스트가 아닙니다. 웹 콘텐츠에서 제목 수준이 중요한 이유
· 그것이 중요한 이유
HTML 접근성 텍스트 편집
h1~h6이 스크린 리더 사용자와 검색 엔진이 의존하는 문서 개요를 형성하는 이유와 시각적 제목이 실제 제목인지 확인하는 방법을 설명합니다.
제목이 없는 기사 — 모든 명백한 제목이 굵은 단락인 페이지로 열립니다.
CSS에 의해 확대되고 굵게 표시된 줄은 문서 트리에서 단락을 유지하면서 섹션 제목처럼 보일 수 있습니다. 시력이 있는 독자는 타이포그래피를 통해 구분을 추론할 수 있지만 소프트웨어는 식별, 수집 또는 탐색할 제목 요소를 받지 못합니다. 겉모습만으로는 위계가 형성되지 않습니다.
ToolAcre는 스타일 제어를 피하고 h1부터 h4까지 명시적인 블록 선택을 제공합니다. 따라서 작성자는 강력한 텍스트로 제목을 시뮬레이션하는 대신 제목을 인코딩할 수 있습니다. 툴바는 해당 수준에 대한 컨트롤을 광고하지 않지만 허용 목록은 소스에서 h5 및 h6도 허용합니다.
크기 이외의 제목 요소 기능 - 제공되는 개요, 탐색 단축키 및 구조를 설명합니다.
제목 요소는 탐색 가능한 문서 구조를 따르고 이에 기여하는 콘텐츠에 레이블을 지정합니다. 브라우저는 접근성 API를 통해 해당 역할을 노출하며 많은 보조 도구는 제목 목록을 표시하거나 제목 사이를 이동할 수 있습니다. 스타일시트가 없거나 교체되어도 요소는 식별 가능한 상태로 유지됩니다.
굵은 문단은 구조적 신호를 전혀 제공하지 않습니다. 여전히 유용한 산문이 될 수 있지만 섹션 경계를 대신해서는 안 됩니다. 로컬 미리보기에서는 제목 관계를 보고하지 않거나 작성자의 구성을 확인하지 않으므로 개요 또는 접근성 검사 도구를 사용하여 최종 문서를 테스트하세요.
레벨은 크기가 아니라 중첩됩니다. h2에서 h4로 건너뛰면 판독기와 도구가 혼동되는 이유를 설명합니다.
레벨은 유형 크기 메뉴가 아닌 중첩을 표현합니다. h2는 일반적으로 페이지의 기본 컨텍스트 아래에 섹션을 소개합니다. h3은 해당 h2의 하위 섹션을 소개합니다. 단순히 기본 글꼴이 보기 좋다는 이유로 h4를 선택하면 중간 구조가 누락되었음을 의미할 수 있습니다.
ToolAcre는 h1부터 h6까지 보존하고 건너뛴 레벨을 거부하지 않습니다. 필터는 편집 논리가 아닌 어휘를 강화합니다. 종이나 소스에 개요를 작성한 다음 대상에서 CSS를 사용하여 원하는 시각적 규모를 추구하기 위해 수준을 변경하지 않고 모양을 제어합니다.
상황에 맞는 페이지 제목을 선택하세요. 이 편집기는 one-h1 규칙을 시행하지 않습니다.
통합 문서에서는 하나의 h1을 규정하지만 구현에는 그러한 규칙이 없으며 이 기사에서는 h1을 보편적인 법칙으로 만들어 내지 않습니다. 페이지 템플릿, 포함된 조각 및 문서 규칙에 따라 콘텐츠가 기본 제목을 제공해야 하는지 아니면 호스트가 제공한 제목 아래에서 시작해야 하는지가 결정됩니다.
조각만 검사하는 것이 아니라 전체 대상을 검사합니다. CMS가 이미 기사 제목을 h1로 렌더링한 경우 붙여넣은 본문 내용은 당연히 h2로 시작할 수 있습니다. ToolAcre는 해당 외부 템플릿을 볼 수 없으므로 h1 옵션은 모든 초안에 대한 권장 사항이 아니라 기능입니다.
작업 예: 굵은 문단을 소스의 제목 요소와 비교
`<p><strong>Installation</strong></p>` 및 `<h2>Configuration</h2>`을(를) 생성합니다. 두 가지 모두 샌드박스에서 눈에 띄게 보일 수 있지만 소스에서는 Configuration만이 제목임을 알 수 있습니다. 마찬가지로 게시된 페이지의 접근성 트리 검사에서는 h2만 제목으로 식별해야 합니다.
블록 선택기 또는 소스 모드를 통해 설치를 올바른 수준으로 변경합니다. 그런 다음 두 제목이 동료인지, 상위 및 하위인지 검토합니다. 살균제는 두 가지 형태를 모두 유지하지만 말로 관계를 결정할 수는 없습니다. 해당 판단은 문서 작성자와 페이지 컨텍스트에 속합니다.
레벨을 남용하지 않고 제목 스타일링 — 레벨 선택이 아닌 CSS가 모양을 제어해야 함을 설명합니다.
제목 모양은 CSS에 속합니다. 사이트는 디자인이 여전히 계층 구조를 전달하는 경우 논리적 수준을 유지하면서 h2를 적당하게, h3을 시각적으로 구별되게 만들 수 있습니다. 단지 더 작은 브라우저 기본값을 얻기 위해 h4를 대체하는 것보다 올바른 h2 스타일을 지정하는 것이 더 안전합니다.
미리보기의 스타일시트는 의도적으로 단순하고 가볍습니다. 이는 제품 테마가 아니므로 기본 제목 크기는 대상 디자인에 대한 증거가 되지 않습니다. 의미 체계 조각을 복사하고, 거기에 승인된 스타일을 적용하고, 하나의 격리된 보기를 만족시키기 위해 개요를 다시 작성하지 않고 반응형 동작을 검토합니다.
여기서 다루지 않는 내용 — <section> 및 <article>과 같은 섹션화 요소 또는 구조를 넘어서는 SEO
이 문서에서는 섹션 및 문서 요소, ARIA 제목 역할, 전체 SEO 지침 또는 모든 화면 판독기를 다루지 않습니다. 또한 ToolAcre가 건너뛴 레벨, 중복 제목 또는 제목 텍스트 품질을 검증한다고 주장하지 않습니다. 도구 모음은 요소를 제공합니다. 저자는 일관된 구조를 제공합니다.
삭제된 출력은 자동으로 안전하고 신뢰할 수 없는 게시가 아닙니다. 미리보기 샌드박스는 ToolAcre 내부 실행을 제한하는 반면 복사된 마크업은 해당 보호 기능을 유지합니다. 목적지 측 위생 및 접근성 테스트를 사용합니다. 올바른 제목 트리는 보안 제어나 전체 감사가 아닌 하나의 품질 차원입니다.
요점: 구조가 먼저, 스타일이 두 번째 — 규칙을 요약하고 ToolAcre의 HTML WYSIWYG 편집기를 사용하여 시각적 제목 뒤의 마크업이 제목 요소인지 확인할 수 있는 방법을 설명합니다.
구조가 먼저이고 스타일이 두 번째입니다. 어떤 주제가 섹션과 하위 섹션인지 결정하고 해당 관계에서 수준을 할당한 다음 ToolAcre가 방출하는 실제 h 요소를 검사합니다. 글꼴, 색상, 간격이 사라져도 제목은 의미를 유지해야 합니다.
마지막으로 조각을 실제 템플릿 안에 배치하고 결합된 계층 구조를 검토합니다. 로컬 편집기는 외부 페이지 제목이나 탐색 셸을 알 수 없습니다. 그 가치는 투명성입니다. 시각적 형식과 소스가 나란히 배치되어 게시 전에 가짜 제목을 더 쉽게 감지할 수 있습니다.