1240 improve website accessibility

.gitignore

@@ -45,3 +45,4 @@ static/*
 
 nbproject
 docker_makelab_build.log
+a11y-report.json

.pa11yci.json

@@ -0,0 +1,24 @@
+{
+  "defaults": {
+    "standard": "WCAG2AA",
+    "runners": ["axe", "htmlcs"],
+    "timeout": 60000,
+    "chromeLaunchConfig": {
+      "args": ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"]
+    },
+    "hideElements": "",
+    "ignore": []
+  },
+  "unused_urls": [
+    "http://website:8000/",
+    "http://website:8000/projects/",
+    "http://website:8000/publications/",
+    "http://website:8000/people/",
+    "http://website:8000/talks/",
+    "http://website:8000/news/",
+    "http://website:8000/member/jonfroehlich/"
+  ],
+  "urls": [
+    "http://website:8000/news/"
+  ]
+}

.vscode/settings.json

@@ -22,4 +22,5 @@
     "[html]": {
         "editor.tabSize": 2
     },
+    "djlint.showInstallError": false,
 }

docker-compose-local-dev.yml

@@ -5,10 +5,21 @@
 # This file defines two services that run together:
 #   1. db      - A PostgreSQL database container
 #   2. website - The Django application container
+# As well as a third service that checks website accessibility:
+#   3. a11y    - An accessibility testing container using Pa11y + Axe
 #
 # Usage:
 #   docker-compose -f docker-compose-local-dev.yml up
 #
+# Access checks:
+#  docker-compose -f docker-compose-local-dev.yml --profile testing run --rm a11y
+#
+# Access check with report generation:
+# docker-compose -f docker-compose-local-dev.yml --profile testing run --rm a11y sh -c "
+#  npm install -g pa11y-ci &&
+#  pa11y-ci --config /workspace/.pa11yci.json --json | tee /workspace/a11y-report.json
+# "
+#
 # After running, the website is available at: http://localhost:8571
 #
 # To stop:
@@ -84,6 +95,14 @@ services:
       # are immediately visible inside the container without rebuilding.
       - .:/code
 
+    healthcheck:
+      # Check if Django is responding
+      test: ["CMD-SHELL", "curl -f http://localhost:8000/ || exit 1"]
+      interval: 10s
+      timeout: 5s
+      retries: 12
+      start_period: 90s  # Give Django time for migrations on first run
+
     # Wait for the database to be "healthy" (fully started) before running
     depends_on:
       db:
@@ -96,6 +115,42 @@ services:
     #   - Starting the Django development server
     command: ["./docker-entrypoint.sh"]
 
+  # ===========================================================================
+  # ACCESSIBILITY TESTING SERVICE (Pa11y + Axe)
+  # ===========================================================================
+  # Runs automated accessibility scans against the website container.
+  # Uses the Axe engine (same core engine as DubBot/Deque tools).
+  #
+  # Usage:
+  #   docker-compose -f docker-compose-local-dev.yml run --rm a11y
+  #
+  # Note: The website must be running first. Start it with:
+  #   docker-compose -f docker-compose-local-dev.yml up -d website
+  # ===========================================================================
+  a11y:
+    # Puppeteer image includes Chrome and all required dependencies
+    image: ghcr.io/puppeteer/puppeteer:latest
+    user: root  # Needed for npm global install
+
+    # Install pa11y-ci and run it with our config file
+    command: >
+      sh -c "
+        npm install -g pa11y-ci &&
+        pa11y-ci --config /workspace/.pa11yci.json
+      "
+
+    volumes:
+      # Mount entire project directory for config input and report output
+      - .:/workspace
+
+    depends_on:
+      website:
+        condition: service_healthy
+
+    # Optional: Prevent running during normal 'docker-compose up'
+    profiles:
+      - testing
+
 # =============================================================================
 # NAMED VOLUMES
 # =============================================================================

makeabilitylab/settings.py

@@ -72,8 +72,8 @@
     ALLOWED_HOSTS = ['*']
 
 # Makeability Lab Global Variables, including Makeability Lab version
-ML_WEBSITE_VERSION = "2.0" # Keep this updated with each release and also change the short description below
-ML_WEBSITE_VERSION_DESCRIPTION = "Generates unique url_names for duplicate member names to avoid conflicts"
+ML_WEBSITE_VERSION = "2.1" # Keep this updated with each release and also change the short description below
+ML_WEBSITE_VERSION_DESCRIPTION = "Massive accessibility overhaul using new design-tokens.css system"
 DATE_MAKEABILITYLAB_FORMED = datetime.date(2012, 1, 1)  # Date Makeability Lab was formed
 MAX_BANNERS = 7 # Maximum number of banners on a page
 

website/models/person.py

@@ -115,6 +115,8 @@ def get_thumbnail_size_as_str():
     github = models.URLField(blank=True, null=True)
     github.help_text = 'Again, put the full url. For example, <a href="https://github.com/jonfroehlich">https://github.com/jonfroehlich</a>'
     twitter = models.URLField(blank=True, null=True)
+    bluesky = models.URLField(blank=True, null=True)
+    bluesky.help_text = 'Put the full url. For example, <a href="https://bsky.app/profile/jonfroehlich.bsky.social">https://bsky.app/profile/jonfroehlich.bsky.social</a>'
     threads = models.URLField(blank=True, null=True)
     mastodon = models.URLField(blank=True, null=True)
     linkedin = models.URLField(blank=True, null=True)

website/static/website/css/base.css

@@ -1,28 +1,22 @@
 @import "footer.css";
 
-@font-face {
-  font-family: roboto;
-  src: url(../fonts/roboto/Roboto-Thin.ttf);
-}
-
-@font-face {
-  font-family: roboto-bold;
-  src: url(../fonts/roboto/Roboto-Light.ttf);
-}
-
 /* General styles */
+html {
+  /* Override Bootstrap 3's default of 10px */
+  font-size: 100%; /* Resets to browser default (usually 16px) */
+}
 
 body {
   font-family: 'Raleway', sans-serif;
 }
 
 h1 {
-  font-family: 'Raleway', sans-serif;
-  font-weight: 700;
-  font-size: 36px;
-  margin-bottom: 0;
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--space-2);
   padding-bottom: 0;
-  margin-left: -1px;
+  color: var(--color-text-primary);
 }
 
 h4 {
@@ -135,6 +129,33 @@ h5 {
   padding-left: 0;
 }
 
+/* REUSABLE HEADING ANCHORS 
+   Pattern: <h2 class="heading-with-anchor">Title <a class="header-anchor">...</a></h2>
+*/
+
+.header-anchor {
+  font-size: 0.7em;                 /* Smaller than the heading text */
+  margin-left: var(--space-2);      /* Uses design token for spacing */
+  color: var(--color-text-muted);   /* Subtle gray by default */
+  opacity: 0;                       /* Hidden by default */
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+  vertical-align: middle;
+  text-decoration: none;
+  border-bottom: none;              /* Prevent underline if links are underlined globally */
+}
+
+/* Show the anchor when hovering the parent heading OR focusing the link itself */
+.heading-with-anchor:hover .header-anchor,
+.header-anchor:focus {
+  opacity: 1;
+  text-decoration: none;            /* Keep it clean */
+}
+
+/* Make it pop with the primary color when interacting */
+.header-anchor:hover {
+  color: var(--color-primary);
+}
+
 /**********************************************************/
 /************** Carousel (Banner) styles ******************/
 #main-carousel{
@@ -281,20 +302,6 @@ h5 {
   }
 }
 
-/**************** FOR TOCBOT *****************/
-/** See: https://tscanlin.github.io/tocbot/ **/
-.toc {
-  position: fixed;
-  top: 170px;
-  transform: translateX(-80px);
-}
-
-@media (max-width: 989px) {
-  .toc {
-    display:none;
-  }
-}
-
 /************************************************************/
 /************************ ARTIFACT STYLES *******************/
 /**** FOR THINGS LIKE PROJECTS, VIDEOS, TALKS, PAPERS *******/
@@ -304,11 +311,26 @@ h5 {
 }
 
 .artifact-title {
-  font-size: 15px;
-  font-weight: 500;
-  margin: 3px 0 0 0;
-  line-height: 1.3;
-  color: black;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  margin: var(--space-1) 0 0 0;
+  word-wrap: break-word;
+}
+
+.artifact-title a {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.artifact-title a:hover {
+  color: var(--color-link-hover);
+}
+
+.artifact-title a:focus {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* This opacity stuff auto-shows the download links on mouseover ('hover');
@@ -322,31 +344,51 @@ otherwise, they are hidden! */
 }
 
 .artifact-venue {
-  /*color: #7F7F7F;*/
-  font-size: 13px;
-  margin: 2px 0 2px 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  margin: var(--space-1) 0;
 }
 
 .artifact-authors {
-  color: #7F7F7F;
-  font-size: 11px;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
   margin: 0;
 }
 
 .artifact-authors a {
-  color: #7F7F7F;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.artifact-authors a:hover {
+  color: var(--color-link-hover);
+}
+
+.artifact-authors a:focus {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .artifact-links {
-  color: #696969;
-  /* RGB(105, 105, 105) */
-  font-size: small;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
 }
 
 .artifact-links a {
-  color: #696969;
-  /* RGB(105, 105, 105) */
-  font-size: small;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.artifact-links a:hover {
+  color: var(--color-link-hover);
+}
+
+.artifact-links a:focus {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* add this class to the container element for any images

website/static/website/css/bootstrap-modifications.css

@@ -1,6 +1,48 @@
-@media (max-width: 480px) { 
-  .col-ts-12 { 
-  	float: none; 
-  	width: 100%;
+/**
+ * ============================================================================
+ * BOOTSTRAP MODIFICATIONS - Makeability Lab
+ * ============================================================================
+ *
+ * Custom column breakpoints and overrides for Bootstrap 3.
+ * These fill gaps in Bootstrap's responsive grid system.
+ *
+ * CUSTOM BREAKPOINTS:
+ *   - col-ts-*: "Tiny-Small" breakpoint at 480px for extra-small phones
+ *
+ * DEPENDENCIES:
+ *   - Must be loaded after Bootstrap CSS
+ *
+ * @version 2.0.0 - Added documentation
+ * @author Makeability Lab
+ * ============================================================================
+ */
+
+
+/* =============================================================================
+   TINY-SMALL (TS) BREAKPOINT
+   =============================================================================
+   Custom breakpoint for extra-small screens (< 480px).
+   Bootstrap 3's xs starts at 0, so this provides finer control.
+   ============================================================================= */
+
+@media (max-width: 480px) {
+  .col-ts-12 {
+    float: none;
+    width: 100%;
+  }
+
+  .col-ts-6 {
+    float: left;
+    width: 50%;
+  }
+
+  .col-ts-4 {
+    float: left;
+    width: 33.333%;
+  }
+
+  .col-ts-3 {
+    float: left;
+    width: 25%;
   }
 }