HTML 접근성 검사

Note

이 기능은 Quarto 1.8에서 도입되었습니다.

Quarto에는 HTML 문서 접근성 검사를 위한 널리 지원되는 오픈 소스 업계 표준 도구인 axe-core가 통합되어 있습니다.

`axe-core`로 접근성 검사

Quarto 1.8에서 가장 간단한 형태의 접근성 검사를 활성화하려면 HTML format(html, dashboard, revealjs)에 axe YAML 메타데이터 설정을 추가하세요.

format:
  html:
    axe: true

이 경우 웹페이지에 axe-core가 감지할 수 있는 접근성 위반이 있으면, Quarto가 브라우저 개발자 도구에서 확인할 수 있는 콘솔 메시지를 출력합니다.

사용자 지정

Quarto는 output 옵션으로 접근성 검사 결과를 위한 두 가지 추가 출력 형식을 지원합니다.

document: 내장 보고서
```
format:
  html:
    axe:
      output: document 
```
이 옵션을 사용하면 Quarto가 웹페이지 자체에 axe-core 위반 사항의 가시적인 보고서를 생성합니다. 페이지를 시각적으로 점검하는 데 유용합니다. 이 설정에서는 Quarto가 항상 보고서를 생성합니다.

이 기능을 사용하려면 보고서가 포함된 웹사이트를 실수로 배포하는 것을 줄이기 위해 “debug” 프로젝트 프로필에 추가하는 것을 권장합니다.
json: JSON 형식 콘솔 출력
```
format:
  html:
    axe:
      output: json
```
이 옵션은 Puppeteer나 Playwright 같은 브라우저 자동화 도구에 익숙하다면 유용합니다. 콘솔에 쉽게 소비할 수 있는 형식으로 출력되기 때문입니다.

구체적으로 생성되는 JSON 객체는 웹페이지에서 axe-core의 run 메서드를 실행한 결과입니다. 해당 객체의 전체 정보는 axe-core의 문서를 참고하세요.

console

format:
  html:
    axe:
      output: console

이 옵션은 axe: true와 동일합니다.

예시: 대비 부족

Quarto에서 이 기능이 어떻게 동작하는지 최소 예시로 다음 간단한 문서를 살펴보세요.

---
title: Testing Quarto's accessibility checker
format:
  html: 
    axe:
      output: document
---

This violates contrast rules: [insufficient contrast.]{style="color: #eee"}.

---
title: Testing Quarto's accessibility checker
format:
  html: 
    axe:
      output: document
---

This violates contrast rules: [insufficient contrast.]{style="color: #111"}.

다음은 페이지에 표시되는 결과입니다.

계획된 작업: 배포 전 자동 검사

현재 이 기능은 사용자가 로컬 미리보기에서 웹페이지를 열어야 하며, axe-core 라이브러리를 불러오기 위해 CDN을 사용합니다.

향후에는 수동 개입을 줄이기 위해 quarto render 또는 quarto publish 시점에 웹사이트의 모든 페이지를 검사할 수 있는 모드를 구상하고 있습니다.

axe-core로 접근성 검사

사용자 지정

예시: 대비 부족

계획된 작업: 배포 전 자동 검사

`axe-core`로 접근성 검사