Add pa11y-ci for accesibility linting

.github/workflows/ci.yml

@@ -69,6 +69,41 @@ jobs:
 
       - name: Check clippy
         run: cargo clippy --workspace -- -Dwarnings
+
+  accessibility-linting:
+    needs: [generate-errors, generate-wasm-examples, generate-community, generate-assets]
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install NPM
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install Google Chrome
+        run: |
+          sudo apt-get install -y chromium-browser
+          which chromium-browser
+          chromium-browser --version
+
+      - name: Install Zola
+        uses: taiki-e/install-action@v2
+        with:
+          tool: [email protected]
+
+      - name: Install Pa11y-CI and Wait-on
+        run: |
+          npm install pa11y-ci wait-on
+          node node_modules/puppeteer/install.js
+
+      - name: Run Pa11y-CI
+        run: |
+          echo -e "{\n  \"defaults\": {\n    \"chromeLaunchConfig\": {\n      \"executablePath\": \"/usr/bin/chromium-browser\"\n    }\n  }\n}" > .pa11yci
+          zola serve &
+          npx wait-on http://127.0.0.1:1111
+          npx pa11y-ci --sitemap http://127.0.0.1:1111/sitemap.xml --sitemap-exclude 'faq'
 
   typos:
     runs-on: ubuntu-latest

content/learn/migration-guides/0.12-to-0.13.md

@@ -102,7 +102,7 @@ This means users who want to migrate their .meta files will have to add the `inc
 </div>
 
 - For `add_texture` you need to wrap your `AssetId` in `Some`
-- `finish` now returns the atlas texture image directly instead of a handle. Provide the atlas texture to `add` on Assets<Texture> to get a Handle<Image>
+- `finish` now returns the atlas texture image directly instead of a handle. Provide the atlas texture to `add` on `Assets<Texture>` to get a `Handle<Image>`
 
 ### [Remove the ability to ignore global volume](https://github.com/bevyengine/bevy/pull/11092)
 

content/news/2020-08-10-introducing-bevy/index.md

@@ -1197,4 +1197,4 @@ If any of this sounds interesting to you, I encourage you to check out [Bevy on
 
 I want Bevy to become a vibrant developer community ... thats actually why I chose the name! A Bevy is a group of birds, just like we are a group of game developers. Join the Bevy!
 
-<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 2.0rem" class="invertable"/>
+<img src="/assets/bevy_logo_dark.svg" alt="The Bevy logo" style="height: 4.0rem; margin-top: 2.0rem" class="invertable"/>

content/news/2020-08-19-scaling-bevy/index.md

@@ -16,31 +16,31 @@ First, I want to take a moment to highlight just how wild the last week has been
 <div style="display: flex; flex-wrap: wrap; width: 100%">
     <div style="max-width: 30rem; max-height: 15rem; margin-right: 3rem; margin-bottom: 3rem">
         <h4> 3rd most popular /r/rust post <i>of all time</i></h4>
-        <img src="3rd_on_reddit.png" style="display: block; height: 13rem"/>
+        <img src="3rd_on_reddit.png" alt="The Introducing Bevy article at third place in Reddit's top rankings" style="display: block; height: 13rem"/>
     </div>
     <div style="max-width: 30rem; max-height: 15rem; margin-right: 3rem; margin-bottom: 3rem">
         <h4>#2 on Hacker News</h4>
-        <img src="2nd_on_hacker_news.png" style="display: block; height: 10rem"/>
+        <img src="2nd_on_hacker_news.png" alt="The Introducing Bevy article at second place on Hacker News' top stories" style="display: block; height: 10rem"/>
     </div>
     <div style="max-width: 20rem; max-height: 15rem; margin-right: 3rem; margin-bottom: 3rem">
-        <h4>2,200 GitHub Stars</h4>
-        <img src="2_2k_stars.png" style="display: block; height: 3rem"/>
+        <h4>2,200 Github Stars</h4>
+        <img src="2_2k_stars.png" alt="A star with the word 'unstar' next to it and a counter saying 2.2k to the right" style="display: block; height: 3rem"/>
     </div>
     <div style="max-width: 20rem; max-height: 15rem; margin-right: 3rem; margin-bottom: 3rem">
         <h4>26 contributors</h4>
-        <img src="contributors.png" style="display: block; height: 8rem"/>
+        <img src="contributors.png" alt="A list of Bevy engine contributors profile pictures and the number 26" style="display: block; height: 8rem"/>
     </div>
     <div style="max-width: 20rem; max-height: 15rem; margin-right: 3rem; margin-bottom: 3rem">
         <h4>644 Discord Users</h4>
-        <img src="discord_users.png" style="display: block; height: 6rem"/>
+        <img src="discord_users.png" alt="Text saying "Server members" and 644 members from Discord" style="display: block; height: 6rem"/>
     </div>
     <div style="max-width: 21rem; max-height: 15rem; margin-right: 3rem; margin-bottom: 3rem">
         <h4 style="text-align: center"><a href="https://github.com/sponsors/cart">37% of the way to making my full time Bevy development sustainable</a></h4>
-        <a href="https://github.com/sponsors/cart"><img src="funding.png" style="display: block; height: 6rem"/></a>
+        <a href="https://github.com/sponsors/cart"><img src="funding.png" alt="The GitHub sponsors page for cart where you can donate to him" style="display: block; height: 6rem"/></a>
     </div>
     <div style="max-width: 35rem; margin-right: 3rem; margin-bottom: 3rem">
         <h3 style="text-align: center;"><a href="https://github.com/bevyengine/awesome-bevy">A truly awesome number of community-developed plugins, games, and apps</a></h3>
-        <a href="https://github.com/bevyengine/awesome-bevy"><img src="awesome.png" style="display: block; height: 20rem"/></a>
+        <a href="https://github.com/bevyengine/awesome-bevy"><img src="awesome.png" alt="A page of awesome creations made with Bevy" style="display: block; height: 20rem"/></a>
     </div>
 </div>
 

content/news/2020-11-03-bevy-0.3/index.md

@@ -43,7 +43,7 @@ This was a massive group effort that spanned multiple projects:
 
 Bevy can now run on iOS!
 
-<img src="ios.png" style="margin-left: -4rem; margin-bottom: -5rem; margin-top: -3rem" />
+<img src="ios.png" alt="A beige cube on a green plane running on an iOS emulator" style="margin-left: -4rem; margin-bottom: -5rem; margin-top: -3rem" />
 
 You can try out the [Bevy iOS example](https://github.com/bevyengine/bevy/tree/v0.3.0/examples/ios) by following the [instructions here](https://github.com/bevyengine/bevy/tree/v0.3.0/examples#ios). This one is also hot off the presses: some features will work and others probably won't.
 

content/news/2021-08-10-bevys-first-birthday/index.md

@@ -260,4 +260,4 @@ I'm looking forward to spending the next year with you all!
 
 \- [@cart](https://github.com/cart/)
 
-<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 1.5rem" class="invertable"/>
+<img src="/assets/bevy_logo_dark.svg" alt="The Bevy logo" style="height: 4.0rem; margin-top: 1.5rem" class="invertable"/>

content/news/2022-08-10-bevys-second-birthday/index.md

@@ -211,4 +211,4 @@ This year is going to be a big one for Bevy. I'm looking forward to spending it
 
 \- [@cart](https://github.com/cart/)
 
-<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 1.5rem" class="invertable" />
+<img src="/assets/bevy_logo_dark.svg" alt="The Bevy logo" style="height: 4.0rem; margin-top: 1.5rem" class="invertable" />

content/news/2023-03-06-bevy-0.10/index.md

@@ -606,27 +606,27 @@ let's double the `emissive` value of each cube.
 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 16px;">
      <div style="position: relative;">
         <div style="position: absolute; top: 0; left: 0; background-color: black; color: white; border-radius: 10px 0 10px 0; width: 30px; height: 30px; padding: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); text-align: center; opacity: 0.8;">1</div>
-        <img src="old_bloom.png" style="width: 100%; height: auto;"/>
+        <img src="old_bloom.png" alt="First image of bloom; from Bevy 0.9" style="width: 100%; height: auto;" />
      </div>
      <div style="position: relative;">
         <div style="position: absolute; top: 0; left: 0; background-color: black; color: white; border-radius: 10px 0 10px 0; width: 30px; height: 30px; padding: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); text-align: center; opacity: 0.8;">2</div>
-        <img src="old_bloom_aces.png" style="width: 100%; height: auto;"/>
+        <img src="old_bloom_aces.png" alt="Second image of bloom; from Bevy 0.9 with a tonemapper" style="width: 100%; height: auto;"/>
      </div>
      <div style="position: relative;">
         <div style="position: absolute; top: 0; left: 0; background-color: black; color: white; border-radius: 10px 0 10px 0; width: 30px; height: 30px; padding: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); text-align: center; opacity: 0.8;">3</div>
-        <img src="new_bloom.png" style="width: 100%; height: auto;"/>
+        <img src="new_bloom.png" alt="Third image of bloom; from Bevy 0.10" style="width: 100%; height: auto;"/>
      </div>
      <div style="position: relative;">
         <div style="position: absolute; top: 0; left: 0; background-color: black; color: white; border-radius: 10px 0 10px 0; width: 30px; height: 30px; padding: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); text-align: center; opacity: 0.8;">4</div>
-        <img src="new_bloom_double_emission.png" style="width: 100%; height: auto;"/>
+        <img src="new_bloom_double_emission.png" alt="Fourth image of bloom; from Bevy 0.10 with doubled emissive values" style="width: 100%; height: auto;"/>
      </div>
      <div style="position: relative;">
         <div style="position: absolute; top: 0; left: 0; background-color: black; color: white; border-radius: 10px 0 10px 0; width: 30px; height: 30px; padding: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); text-align: center; opacity: 0.8;">5</div>
-        <img src="new_bloom_additive.png" style="width: 100%; height: auto;"/>
+        <img src="new_bloom_additive.png" alt="Fifth image of bloom; from Bevy 0.10 with additive compositing" style="width: 100%; height: auto;"/>
      </div>
      <div style="position: relative;">
         <div style="position: absolute; top: 0; left: 0; background-color: black; color: white; border-radius: 10px 0 10px 0; width: 30px; height: 30px; padding: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); text-align: center; opacity: 0.8;">6</div>
-        <img src="bloom_example.png" style="width: 100%; height: auto;"/>
+        <img src="bloom_example.png" alt="The Bevy bloom 3D example" style="width: 100%; height: auto;"/>
      </div>
  </div>
 

content/news/2023-08-10-bevys-third-birthday/index.md

@@ -231,4 +231,4 @@ I'm looking forward to spending another year building Bevy with you all!
 
 \- [@cart](https://github.com/cart/)
 
-<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 1.5rem" class="invertable" />
+<img src="/assets/bevy_logo_dark.svg" alt="The Bevy logo" style="height: 4.0rem; margin-top: 1.5rem" class="invertable" />

content/news/2023-09-21-community-reflection-on-bevys-third-year/index.md

@@ -56,4 +56,4 @@ Here is to another year of Bevy!
 
 \- [@cart](https://github.com/cart/)
 
-<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 1.5rem" class="invertable"/>
+<img src="/assets/bevy_logo_dark.svg" alt="The Bevy logo" style="height: 4.0rem; margin-top: 1.5rem" class="invertable"/>

sass/_utils.scss

@@ -30,7 +30,7 @@ body:not(.show_drafts) .public_draft:not(.active_draft) {
   display: none !important;
 }
 
-.public_draft > div > a {
+.public_draft>div>a {
   color: var(--warning-color) !important;
 }
 
@@ -63,7 +63,7 @@ h6 {
   }
 }
 
-.public_draft > div > a {
+.public_draft>div>a {
   color: var(--warning-color) !important;
 }
 

sass/components/_syntax-theme.scss

@@ -283,6 +283,7 @@ div.incorrect-image {
 
 .z-meta.z-annotation.z-parameters.z-rust,
 .z-variable.z-function.z-rust {
+
   .z-begin,
   .z-end,
   .z-punctuation {

sass/pages/_migration_guide.scss

@@ -1,4 +1,5 @@
 .migration-guide {
+
   h1,
   h2,
   h3 {
@@ -13,7 +14,7 @@
     }
   }
 
-  h2 + h3 {
+  h2+h3 {
     margin-top: 0;
     padding-top: 0;
     border-top: 0;

templates/assets.html

@@ -11,10 +11,11 @@
         <input class="assets-search__input"
                 type="text"
                 id="assets-search"
-                placeholder="Search (ie: 0.15 MIT)">
+                placeholder="Search (ie: 0.16 MIT)"
+                aria-label="Search (ie: 0.16 MIT)" />
       </div>
       <div class="assets-filters">
-        <label>Bevy last supported version</label>
+        <label for="assets-filter">Bevy last supported version</label>
         <select class="asset-version-select" id="assets-filter">
           <option value="all_versions">All</option>
         </select>

templates/layouts/examples.html

@@ -12,7 +12,8 @@
       <input class="assets-search__input"
               type="text"
               id="assets-search"
-              placeholder="Search Example">
+              placeholder="Search Example"
+              aria-label="Search Example" />
     </div>
     {% for subsection in section.subsections %}
       {% set section = get_section(path=subsection) %}