메인 콘텐츠로 이동
Niquelao 웹 접근성과 스페인어 프론트엔드 개발: WCAG 표준, 접근성 위젯, Firefox 확장 기능을 실제 코드로 설명합니다.

이 사이트의 일부 링크는 제휴 링크입니다. 이를 통해 구매하시면 추가 비용 없이 저희가 수수료를 받을 수 있습니다. 이는 저희의 추천 내용에 전혀 영향을 미치지 않습니다. 자세한 내용은 제휴 공개 정책을 참조하세요. 제휴 마케팅 공개.

니켈라오 » headingsMap 확장 프로그램

» headingsMap 확장 기능 Niquelao 어떻게 됐다고요? 2008년 5월 5일 Rumoroso 작성 —> 접근성 및 웹 표준 headingsMap 확장 기능 Rumoroso 작성 우선, Firefox Add-ons의 headingsMap 확장 기능 해당 페이지 링크입니다. 마음이 동하신다면 피드백과 의견, 나아가 개선 제안도 기다리겠습니다. 웹 페이지의 제목(heading) 집합은 콘텐츠를 계층 구조로 정리하여 문서의 지도나 목차를 얻을 수 있게 해줍니다. 그래서 제목을 사용할 때는 문서 콘텐츠 구조(섹션, 하위 섹션 및 그 종속 관계)를 충실히 반영해야 하며, 충분히 명확해야 하고 부적절한 수준 건너뛰기(예: h2에서 h4로 건너뛰기)를 피해야 합니다. 이는 웹 접근성 측면에서 매우 중요한데, 기능적 다양성과 관계없이 누구나 콘텐츠를 이해하고 사용할 수 있도록 돕기 때문입니다. 제목은 웹 문서의 지도나 목차 역할을 하는 목록 형태로 추출할 수 있습니다. 화면 읽기 프로그램과 같은 일부 보조 기술이 바로 이렇게 할 수 있습니다. 이러한 보조 기술을 통해 사용자는 콘텐츠를 미리 파악하고, 전체 콘텐츠를 처음부터 훑지 않고도 관심 있는 부분으로 바로 이동할 수 있습니다. headingsMap 확장 기능은 제목을 사용해 구조화된 모든 웹 문서의 목차나 지도를 생성하며, 지도의 항목을 클릭하면 해당 페이지 콘텐츠로 바로 이동합니다. 하지만 headingsMap은 누구나 쉽게 탐색할 수 있도록 도와줄 뿐만 아니라(documentMap 확장 기능이 이미 제공하던 기능입니다), 다음과 같은 이유로 개발자, 컨설턴트, 웹 감사자에게도 매우 유용합니다: 기본 문서뿐 아니라 IFRAME 요소로 삽입된 다른 문서(포함하는 문서의 제목들과 통합하여 표시) 또는 프레임셋(FRAMESET)을 구성하는 문서의 제목 구조도 표시합니다. 각 제목의 수준을 나타냅니다. 문서에 제목이 없는 경우 경고할 수 있습니다. 잘못된 제목 수준 건너뛰기를 경고하며, 적절한 수준의 제목을 찾을 때까지 경고를 유지합니다.

CSS 기법으로 숨겨진 제목이나 내용이 없는 제목을 포함하여 문서에 존재하는 모든 제목을 표시합니다. 문서의 제목과 해당 문서가 가진 iframe의 제목을 같은 패널에 표시하기 때문에, 예를 들어 웹 감사에서 IFRAME에 속한 제목과 나머지를 구분해야 할 필요를 충족하기 위해, 이러한 차이를 강조하는 표시(측면 선 형태)를 포함하는 옵션이 추가되었습니다(프레임 중첩 여부도 구분). 표시(제목 오른쪽에 위치한 수직선)의 표시 여부를 선택하려면, 측면 패널이나 확장 기능이 상태 표시줄에 설치한 아이콘에서 마우스 오른쪽 버튼을 눌러 해당 옵션을 선택하면 됩니다. 또한 수준 건너뛰기 오류를 표시하도록 하는 등 여러 가지 구성 옵션이 포함되어 있으며, 목록에서 제목을 선택하면 문서의 해당 제목이 특정 스타일(테두리와 배경 구성 가능)로 강조 표시됩니다. 다음은 IFRAME이 있는 문서에서 제목이 표시되는 방식의 스크린샷입니다. 제목 옆의 왼쪽 측면 선은 해당 제목이 iframe 안에 있음을 나타냅니다. 또한 배경색이 다르면 잘못된 수준 건너뛰기(이 경우 두 번째를 거치지 않고 첫 번째에서 세 번째로)가 있음을 경고합니다. 문서에 프레임셋(FRAMESET)이 포함된 경우, 제목을 표시하는 패널은 프레임 수만큼 패널로 나뉘어 각각의 제목을 표시합니다. 마지막으로 추가 기능이 하나 더 있습니다. 접근 중인 웹 문서가 acc_slide(또는 rumoslide)나 Slidy로 만든 웹 형식 프레젠테이션이라면, 확장 기능이 목차 역할을 하여 원하는 슬라이드로 바로 이동할 수 있습니다. 이 글을 읽고 확장 기능을 시험해보고 싶어졌다면, 여기 Firefox Add-ons의 headingsMap 확장 기능 링크가 다시 있습니다. 확장 기능을 설치하면 상태 표시줄에 아이콘이 나타나며, 이를 클릭하면 제목 구조를 표시하는 측면 패널이 펼쳐집니다. 또한 alt + o 키 조합으로도 접근할 수 있습니다. 참고: 제목 목록의 각 항목을 클릭하면 해당 제목으로 바로 이동하며, 그 제목이 강조 표시됩니다. 강조를 없애려면 “esc” 키를 누르거나 현재 문서의 아무 곳이나 클릭하면 됩니다. 이제 제대로 하지 않을 변명의 여지가 없습니다. 우리 문서에 제목을 달기 시작하고, 제대로 해봅시다. 댓글은 RSS 2.0 피드로 구독할 수 있습니다. 댓글을 남기거나, 자신의 사이트에서 http://www.niquelao.net/extension-headingsmap/trackback/ 주소로 트랙백을 보낼 수도 있습니다. 댓글 3개 Firefox Add-ons (2008년 5월 6일) […] headingsMap 확장 기능은 제목을 사용해 구조화된 모든 웹 문서(기본 문서뿐 아니라 포함된 프레임과 iframe의 제목도)의 목차나 지도를 생성하며, […] kcmr (2008년 8월 12일) 정말 좋은 확장 기능입니다!

Document Map보다 훨씬 낫네요. www.webeame.net (2008년 8월 12일) 개발자를 위한 확장 기능… 웹 문서의 제목 구조(프레임으로 연결된 문서 포함)에 대한 완전한 정보를 제공하는 유용한 Firefox 확장 기능입니다. 오류가 있거나 누락된 경우 알려주고, 페이지를 탐색할 수 있게 해줍니다… 댓글은 RSS 2.0 피드로 구독할 수 있습니다. 댓글을 남기거나, 자신의 사이트에서 트랙백을 보낼 수도 있습니다. 이 저작물은 Creative Commons 라이선스에 따라 이용할 수 있습니다.

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; if you want the current details.


¿Cumplir WCAG sin tocar el código?

Superposición de IA que promete cumplimiento WCAG en 48 horas