Experiment with Lighthouse CI

[etiennebacher]

See how much we can automate checks for accessibility. Workflows generated by Claude just to explore.

https://github.com/GoogleChrome/lighthouse

[github-actions]

See preview at https://palaeoverse.github.io/modules/pr-preview/pr-17/training/modules

[github-actions]

♿ Accessibility report

Results of the Lighthouse accessibility audit on the pages rendered
from the .qmd files modified in this Pull Request. This is
informative only: the CI does not fail on these issues.

ggplot/index.html _{rendered from ggplot/index.qmd}

Accessibility score: 82 / 100

`[aria-*]` attributes do not match their roles — 1 element(s)

Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn how to match ARIA attributes to their roles.

<div class="callout-header d-flex align-content-center collapsed" data-bs-toggle="collapse" data-bs-target=".callout-1-contents" aria-controls="callout-1" aria-expanded="false" aria-label="Toggle callout">

Background and foreground colors do not have a sufficient contrast ratio. — 5 element(s)

Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.

<div class="quarto-category">

<div class="quarto-category">

<code>

<code>

<code>

Image elements do not have `[alt]` attributes — 25 element(s)

Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more about the alt attribute.

<img src="index_files/figure-html/ggplot-raw-1.png" class="img-fluid figure-img" width="672">

<img src="index_files/figure-html/ggplot-aes-1.png" class="img-fluid figure-img" width="672">

<img src="index_files/figure-html/geom_point-1.png" class="img-fluid figure-img" width="672">

<img src="index_files/figure-html/geom_point-color-1.png" class="img-fluid figure-img" width="672">

<img src="index_files/figure-html/viridis-1.png" class="img-fluid figure-img" width="672">

… and 20 more element(s).

ggplot/index-slides.html _{rendered from ggplot/index.qmd}

Accessibility score: 84 / 100

Image elements do not have `[alt]` attributes — 24 element(s)

Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more about the alt attribute.

<img data-src="index_files/figure-revealjs/ggplot-raw-1.png" width="960" class="r-stretch" style="height: 0px;">

<img data-src="index_files/figure-revealjs/ggplot-aes-1.png" width="960" class="r-stretch" style="height: 0px;">

<img data-src="index_files/figure-revealjs/geom_point-1.png" width="960" class="r-stretch" style="height: 0px;">

<img data-src="index_files/figure-revealjs/geom_point-color-1.png" width="960" class="r-stretch" style="height: 0px;">

<img data-src="index_files/figure-revealjs/viridis-1.png" width="960" class="r-stretch" style="height: 0px;">

… and 19 more element(s).

Links do not have a discernible name — 1 element(s)

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.

<a href="#">

`[user-scalable="no"]` is used in the `` element or the `[maximum-scale]` attribute is less than 5. — 1 element(s)

Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. Learn more about the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no…">

_{This comment is updated on every push to this Pull Request.}