Axe accessibility test support (alshedivat#2080)

Added GitHub action to do axe accessibility tests with [axe cli](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli). I believe it is best by default to let this be run only manually, since fixing some of the issues are not straightforward (I haven't fixed them all for this template yet). --------- Signed-off-by: George Araújo <[email protected]>
cjang2 · Jan 15, 2024 · 1775a9a · 1775a9a
1 parent 30f3c14
commit 1775a9a
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 4 deletions.
diff --git a/.github/workflows/axe.yml b/.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/[email protected]
+        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
diff --git a/README.md b/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).

diff --git a/_includes/footer.liquid b/_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 }}

diff --git a/_includes/header.liquid b/_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 }}/">

diff --git a/_layouts/default.liquid b/_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">