diff --git a/_tools/screenshots/examples/axe-violation/.gitignore b/_tools/screenshots/examples/axe-violation/.gitignore new file mode 100644 index 0000000000..91e4dc52c8 --- /dev/null +++ b/_tools/screenshots/examples/axe-violation/.gitignore @@ -0,0 +1,3 @@ +/.quarto/ +/_site/ +**/*.quarto_ipynb diff --git a/_tools/screenshots/examples/axe-violation/_quarto.yml b/_tools/screenshots/examples/axe-violation/_quarto.yml new file mode 100644 index 0000000000..2c02f8c89f --- /dev/null +++ b/_tools/screenshots/examples/axe-violation/_quarto.yml @@ -0,0 +1,11 @@ +project: + type: website + render: + - index.qmd + +website: + title: "Axe Violation Example" + +format: + html: + theme: cosmo diff --git a/_tools/screenshots/examples/axe-violation/index.qmd b/_tools/screenshots/examples/axe-violation/index.qmd new file mode 100644 index 0000000000..47244f789e --- /dev/null +++ b/_tools/screenshots/examples/axe-violation/index.qmd @@ -0,0 +1,9 @@ +--- +title: Testing Quarto's accessibility checker +format: + html: + axe: + output: document +--- + +This violates contrast rules: [insufficient contrast.]{style="color: #eee"}. diff --git a/_tools/screenshots/manifest.json b/_tools/screenshots/manifest.json index 7bbc666cf6..d06320f17f 100644 --- a/_tools/screenshots/manifest.json +++ b/_tools/screenshots/manifest.json @@ -14,6 +14,26 @@ } }, "screenshots": [ + { + "name": "axe-violation", + "output": "docs/output-formats/images/axe-violation.png", + "source": { + "type": "example", + "project": "examples/axe-violation", + "page": "index.html" + }, + "capture": { + "viewport": { "width": 1000, "height": 360 }, + "interaction": [ + { "action": "wait", "selector": "[data-quarto-axe-complete]", "timeout": 10000 } + ], + "cropBottom": 51 + }, + "doc": { + "file": "docs/output-formats/html-accessibility.qmd", + "alt": "The rendered webpage with an accessibility violation warning showing 'Serious ยท WCAG 2.0 AA (1.4.3): Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds'" + } + }, { "name": "about-jolla", "output": "docs/websites/images/about-jolla.png", diff --git a/docs/output-formats/html-accessibility.qmd b/docs/output-formats/html-accessibility.qmd index a904dc62be..ccf6d85fb1 100644 --- a/docs/output-formats/html-accessibility.qmd +++ b/docs/output-formats/html-accessibility.qmd @@ -35,7 +35,7 @@ Quarto supports two additional output formats for the accessibility checks, avai output: document ``` - With this option, Quarto will generate a visible report of `axe-core` violations on the webpage itself. This is useful for visual inspection of a page. Note that with this setting, Quarto will always produce a report. + With this option, Quarto will generate a visible report of `axe-core` violations on the webpage itself. Each violation displays its WCAG conformance level (e.g., `WCAG 2.0 AA`), so best-practice findings are distinguishable from genuine WCAG failures. This is useful for visual inspection of a page. Note that with this setting, Quarto will always produce a report. If you wish to use this feature, we recommend adding it to a "debug" [project profile](/docs/projects/profiles.qmd) to reduce the chance you will accidentally publish a website to production with these reports. diff --git a/docs/output-formats/images/axe-violation.png b/docs/output-formats/images/axe-violation.png index 1b08959967..4afd6a7877 100644 Binary files a/docs/output-formats/images/axe-violation.png and b/docs/output-formats/images/axe-violation.png differ