제목에 정보가 담긴 언어와 시맨틱 코드를 사용합니다. 이는 접근성 요구사항이 있는 사용자를 비롯한 모든 사용자를 위해 콘텐츠를 구성하고 읽기 쉽게 만드는 데 중요합니다.
제목은 짧고 대략적인 요약이어야 합니다. 독자에게 섹션에서 어떤 내용을 다룰지 알려주되, 인지적 노력을 덜 요구해야 합니다. 건너뛰더라도 추가 맥락 없이 이해할 수 있어야 합니다.
작업 중심의 언어를 유지합니다. 제목은 사용자에게 학습할 내용이나 취해야 할 조치를 알려야 합니다. 동사로 시작하지 않을 수도 있지만, 작업에 초점을 맞춰야 합니다. 예: "Get started with this feature", "Store your data on a server".
콘텐츠 구조는 콘텐츠 자체만큼 중요합니다. 제목은 시각적으로 탐색을 돕지만 접근성은 시각적 요구사항 외에도 더 많은 것을 고려한 디자인이 필요합니다.
의미론적 HTML을 작성합니다. HTML 태그는 둘러싸는 콘텐츠의 값과 올바르게 정렬되어야 합니다. 적절한 제목 수준(H1~H6)을 사용하여 정보의 계층 구조를 반영합니다. 기본 제목에는 H1, 상단 섹션에는 H2를 사용합니다. 시각적 미학보다 기능을 우선시합니다. 이는 스크린 리더와 보조 기술에 필요합니다.
예시 및 개선사항:
잠재고객 세그먼트의 데이터를 자동 입력하는 방법에 관한 Google Ad Manager 고객센터 도움말을 예시로 사용했습니다. 짧지만 명확한 제목이 없어 훑어보기가 어려웠습니다.
H2 제목을 두 개 추가하여 도움말의 검색 가능성과 접근성을 개선했습니다. 이렇게 하면 사용자가 콘텐츠를 더 쉽게 탐색하고 필요한 정보를 찾을 수 있습니다. 두 섹션의 값이 동일하므로 동일한 시맨틱 HTML 가중치(H2)를 적용했습니다.
UI 예시(Google Home 앱):
Google Home 앱의 미디어 인터페이스가 분석되었습니다. "Play Music," "Listen On," "Manage Your System" 제목이 좋은 제목의 예로 강조 표시되었습니다.
제목은 다음과 같습니다.
작업의 간단한 요약입니다.
훑어보기가 가능합니다.
맥락을 충분히 제공합니다.
작업 지향적입니다("manage", "listen"와 같은 작업 키워드 사용).
간결하며 'a' 또는 'your'와 같은 불필요한 단어는 피합니다.
결론:
간결한 작업 중심의 언어를 사용하세요.
항상 시맨틱 HTML을 작성합니다. 시각적 표시보다 올바른 HTML 값이 더 중요합니다.
클릭 유도 문구:
제공된 URL(goo.gle/accessible-content)을 방문하여 접근성 작성 팁에 대해 자세히 알아보세요.
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["Hard to understand","hardToUnderstand","thumb-down"],["Incorrect information or sample code","incorrectInformationOrSampleCode","thumb-down"],["Missing the information/samples I need","missingTheInformationSamplesINeed","thumb-down"],["번역 문제","translationIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2024-11-21(UTC)"],[],[]]