Axe accessibility test support

.github/workflows/axe.yml

@@ -0,0 +1,61 @@
+name: Axe accessibility testing
+
+on:
+ # if you want to run this on every push uncomment the following lines
+ # push:
+ # branches:
+ # - master
+ # - main
+ # pull_request:
+ # branches:
+ # - master
+ # - main
+ workflow_dispatch:
+ inputs:
+ url:
+ description: "URL to be checked (e.g.: blog/)"
+ required: false
+
+permissions:
+ contents: write
+
+env:
+ URL: ""
+
+jobs:
+ check:
+ # available images: https://github.com/actions/runner-images#available-images
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout 🛎️
+ uses: actions/checkout@v3
+ - name: Setup Ruby
+ uses: ruby/setup-ruby@v1
+ with:
+ ruby-version: "3.2.2"
+ bundler-cache: true
+ - name: Update _config.yml ⚙️
+ uses: fjogeleit/yaml-update-action@v0.13.1
+ with:
+ commitChange: false
+ valueFile: "_config.yml"
+ changes: |
+ {
+ "giscus.repo": "${{ github.repository }}",
+ "baseurl": ""
+ }
+ - name: Install and Build 🔧
+ run: |
+ pip3 install --upgrade jupyter
+ npm install -g mermaid.cli
+ npm install -g purgecss
+ export JEKYLL_ENV=production
+ bundle exec jekyll build --lsi
+ purgecss -c purgecss.config.js
+ - name: Run axe 🪓
+ # https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli
+ run: |
+ npm install -g @axe-core/cli
+ npm install -g http-server
+ http-server _site/ &
+ axe http://localhost:8080/${{ github.event.inputs.url || env.URL }} --load-delay=1500 --exit

README.md

@@ -200,6 +200,7 @@ Workshop on Diffusion Models (NeurIPS: <a href="https://diffusionworkshop.github
  - [Social media previews](#social-media-previews)
  - [Atom (RSS-like) Feed](#atom-rss-like-feed)
  - [Related posts](#related-posts)
+ - [Code quality checks](#code-quality-checks)
  - [FAQ](#faq)
  - [Contributing](#contributing)
  - [Maintainers](#maintainers)
@@ -365,6 +366,16 @@ It generates an Atom (RSS-like) feed of your posts, useful for Atom and RSS read
 
 By default, there will be a related posts section on the bottom of the blog posts. These are generated by selecting the `max_related` most recent posts that share at least `min_common_tags` tags with the current post. If you do not want to display related posts on a specific post, simply add `related_posts: false` to the front matter of the post. If you want to disable it for all posts, simply set `enabled` to false in the `related_blog_posts` section in [\_config.yml](_config.yml).
 
+#### Code quality checks
+
+Currently, we run some checks to ensure that the code quality and generated site are good. The checks are done using GitHub Actions and the following tools:
+
+- [Prettier](https://prettier.io/) - check if the formatting of the code follows the style guide
+- [lychee](https://lychee.cli.rs/) - check for broken links
+- [Axe](https://github.com/dequelabs/axe-core) (need to run manually) - do some accessibility testing
+
+We decided to keep `Axe` runs manual because fixing the issues are not straightforward and might be hard for people without web development knowledge.
+
 ## FAQ
 
 For frequently asked questions, please refer to [FAQ.md](FAQ.md).

_includes/footer.liquid

@@ -1,5 +1,5 @@
 {% if site.footer_fixed %}
- <footer class="fixed-bottom">
+ <footer class="fixed-bottom" role="contentinfo">
  <div class="container mt-0">
  &copy; Copyright {{ site.time | date: '%Y' }}
  {{ site.first_name }}
@@ -14,7 +14,7 @@
  </div>
  </footer>
 {% else %}
- <footer class="sticky-bottom mt-5">
+ <footer class="sticky-bottom mt-5" role="contentinfo">
  <div class="container">
  &copy; Copyright {{ site.time | date: '%Y' }}
  {{ site.first_name }}

_includes/header.liquid

@@ -1,6 +1,6 @@
 <header>
  <!-- Nav Bar -->
- <nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
+ <nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}" role="navigation">
  <div class="container">
  {% if page.permalink != '/' %}
  <a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl }}/">

_layouts/default.liquid

@@ -14,7 +14,7 @@
  {% include header.liquid %}
 
  <!-- Content -->
- <div class="container mt-5">
+ <div class="container mt-5" role="contentinfo">
  {% if page.toc and page.toc.sidebar %}
  {% if page.toc.sidebar == 'right' %}
  <div class="row">