Accessibility and usability improvements

CLAUDE.md

@@ -91,3 +91,37 @@ Each `_data/platforms/CY[YEAR].yml` contains:
 ## Deployment
 
 Push to main branch triggers GitHub Actions (`.github/workflows/deploy.yml`) which builds and deploys to GitHub Pages automatically. A separate `.github/workflows/deploy-staging.yml` workflow deploys the staging branch for preview.
+
+## Design Context
+
+### Users
+VFX and animation industry professionals — pipeline TDs, software engineers, studio CTOs, and open-source library maintainers. They visit to check version requirements for their builds, verify compatibility, and plan upgrades. They want to find specific version numbers quickly and move on. Many are deeply technical and value precision over polish.
+
+### Brand Personality
+**Authoritative, precise, trustworthy.** This is an industry standard reference — the definitive source of truth for VFX software compatibility. The design should communicate reliability and institutional credibility without being stuffy.
+
+### Emotional Goals
+- **Confidence & trust:** Users should immediately feel this is the canonical, well-maintained reference
+- **Efficiency & focus:** Information should be scannable and fast to find — no friction between the user and the data they need
+
+### Aesthetic Direction
+**Minimal & refined.** The current conservative, information-dense design is appropriate for this audience. Enhancements should add subtle polish — better spacing, purposeful micro-interactions, and consistency — to make it feel premium without becoming flashy. Think "well-typeset technical document" not "marketing site."
+
+### Design Principles
+1. **Data first** — Every design decision should make version data easier to find, read, and compare. Decoration must never compete with content.
+2. **Quiet confidence** — Use restraint. Subtle animations, muted transitions, and precise spacing convey quality better than bold effects.
+3. **Consistency over novelty** — Unify existing patterns rather than introducing new ones. The same spacing, border radii, and color usage everywhere.
+4. **Respect the professional** — No unnecessary tooltips, onboarding flows, or explanatory UI. Users are experts who know what they're looking for.
+5. **Light and dark parity** — Both themes should feel equally considered and polished, not like one is an afterthought.
+
+### Color Palette (existing)
+- **Primary:** Blue-600 (`#2563EB`) / Dark: Blue-400 (`#60A5FA`)
+- **Surface:** White / Dark: Gray-900 (`#111827`)
+- **Text:** Gray-900 / Dark: Gray-100
+- **Borders:** Gray-200 / Dark: Gray-700
+- **Accent (changes):** Amber-50 / Dark: Amber-900/30
+- **Footer:** Gray-900 / Dark: Gray-950
+
+### Typography
+- **Sans:** Inter (with OpenType features cv01, cv02 enabled)
+- **Mono:** JetBrains Mono / Fira Code

FAQ/index.html

@@ -43,3 +43,5 @@ <h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-4">
 <section class="container mx-auto px-4 max-w-6xl py-12">
   {% include faq-accordion.html %}
 </section>
+
+<script src="{{ '/assets/js/faq-accordion.js' | relative_url }}"></script>

_includes/dark-mode-toggle.html

@@ -1,10 +1,9 @@
 <button
-  id="dark-mode-toggle"
   type="button"
-  class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 transition-colors"
+  class="dark-mode-toggle p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 transition-colors"
   aria-label="Toggle dark mode"
 >
-  <svg id="dark-mode-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path id="moon-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+  <svg class="dark-mode-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+    <path class="moon-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
   </svg>
 </button>

_includes/faq-accordion.html

@@ -7,23 +7,25 @@
   {% for question in site.data.faq.questions %}
   <div class="accordion-item">
     <button
+      id="faq-btn-{{ forloop.index }}"
       class="accordion-header rounded-t-lg {% unless forloop.last %}rounded-b-lg{% endunless %}"
       aria-expanded="false"
       aria-controls="faq-panel-{{ forloop.index }}"
-      onclick="this.parentElement.classList.toggle('open'); this.nextElementSibling.classList.toggle('hidden'); this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')"
     >
       <span class="flex items-center gap-2">
-        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
         </svg>
         {{ question.question }}
       </span>
-      <svg class="w-5 h-5 transform transition-transform accordion-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg class="w-5 h-5 accordion-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
       </svg>
     </button>
-    <div id="faq-panel-{{ forloop.index }}" class="accordion-content hidden">
-      {{ question.answer | markdownify }}
+    <div id="faq-panel-{{ forloop.index }}" class="accordion-panel" role="region" aria-labelledby="faq-btn-{{ forloop.index }}">
+      <div class="accordion-content">
+        {{ question.answer | markdownify }}
+      </div>
     </div>
   </div>
   {% endfor %}

_includes/footer.html

@@ -4,7 +4,7 @@
       <!-- About column -->
       <div>
         <a href="{{ '/' | relative_url }}" class="flex items-center gap-2 text-white font-semibold text-lg mb-3">
-          <img src="{{ '/assets/images/logo_optimized.svg' | relative_url }}" alt="VFX Reference Platform" class="h-9 w-auto flex-shrink-0">
+          <img src="{{ '/assets/images/logo_optimized.svg' | relative_url }}" alt="VFX Reference Platform" class="h-9 w-auto flex-shrink-0" loading="lazy">
           <span>VFX Reference Platform</span>
         </a>
         <p class="text-sm text-gray-400 leading-relaxed mb-2">
@@ -23,7 +23,7 @@ <h3 class="text-white font-semibold mb-3">Resources</h3>
           <li>
             <a href="{{ link.url }}" class="text-gray-400 hover:text-white transition-colors inline-flex items-center gap-1">
               {{ link.title }}
-              <svg class="w-2.5 h-2.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-2.5 h-2.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
               </svg>
             </a>
@@ -37,23 +37,23 @@ <h3 class="text-white font-semibold mb-3">Resources</h3>
         <h3 class="text-white font-semibold mb-3">Contact</h3>
         <p class="text-sm text-gray-400 mb-2">
           <a href="mailto:{{ site.data.footer.contact_email }}" class="hover:text-white transition-colors inline-flex items-center gap-1.5">
-            <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
             </svg>
             {{ site.data.footer.contact_email }}
           </a>
         </p>
         <p class="text-sm text-gray-400 mb-2">
           <a href="https://groups.google.com/g/vfx-platform-discuss" class="hover:text-white transition-colors inline-flex items-center gap-1.5">
-            <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
             </svg>
             vfx-platform-discuss
           </a>
         </p>
         <p class="text-sm text-gray-400 mb-2">
           <a href="https://academysoftwarefdn.slack.com/archives/C017TA11X2S" class="hover:text-white transition-colors inline-flex items-center gap-1.5">
-            <svg class="w-3.5 h-3.5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
+            <svg class="w-3.5 h-3.5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
               <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.522v6.312zm-2.522 10.124a2.528 2.528 0 0 1 2.522 2.52A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.527 2.527 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.522h6.313A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.522h-6.313z"/>
             </svg>
             #vfx_reference_platform
@@ -64,7 +64,7 @@ <h3 class="text-white font-semibold mb-3">Contact</h3>
 
     <!-- Legal disclaimer -->
     <div class="border-t border-gray-800 pt-6">
-      <p class="text-xs text-gray-500 leading-relaxed">
+      <p class="text-xs text-gray-400 leading-relaxed">
         <em>Any reference made in the VFX Reference Platform to any company or any other entity, or to their services or products, is not an endorsement or recommendation nor should it imply any such endorsement or recommendation of the quality or fitness of purpose of that company or entity, or its services or products. In no event shall the Visual Effects Society be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods, or services identified in the VFX Reference Platform or the <a href="https://vesglobal.org" class="text-blue-400 hover:text-blue-300 hover:underline">Visual Effects Society website</a>.</em>
       </p>
     </div>

_includes/head.html

@@ -35,7 +35,10 @@
   "name": "VFX Reference Platform",
   "url": "{{ site.url }}",
   "description": "{{ site.description }}",
-  "sameAs": []
+  "sameAs": [
+    "https://groups.google.com/g/vfx-platform-discuss",
+    "https://academysoftwarefdn.slack.com/archives/C017TA11X2S"
+  ]
 }
 </script>
 

_includes/header.html

@@ -7,8 +7,8 @@
       </a>
 
       <!-- Mobile menu button -->
-      <button id="mobile-menu-btn" class="md:hidden p-2 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white focus:outline-none" aria-label="Toggle menu" aria-expanded="false">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <button id="mobile-menu-btn" class="md:hidden p-2 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white focus:outline-none" aria-label="Toggle menu" aria-expanded="false" aria-controls="mobile-menu">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
         </svg>
       </button>
@@ -27,7 +27,7 @@
     </div>
 
     <!-- Mobile navigation -->
-    <div id="mobile-menu" class="hidden md:hidden pb-4">
+    <div id="mobile-menu" class="md:hidden pb-4 overflow-hidden transition-all duration-200 ease-out" style="max-height: 0; opacity: 0;">
       {% for item in site.data.navigation.main %}
       <a href="{{ item.url | relative_url }}" class="block px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md">
         {{ item.title }}
@@ -41,9 +41,32 @@
 </nav>
 
 <script>
-  document.getElementById('mobile-menu-btn').addEventListener('click', function() {
-    document.getElementById('mobile-menu').classList.toggle('hidden');
-    const expanded = this.getAttribute('aria-expanded') === 'true';
-    this.setAttribute('aria-expanded', !expanded);
-  });
+  (function() {
+    var btn = document.getElementById('mobile-menu-btn');
+    var menu = document.getElementById('mobile-menu');
+    var isOpen = false;
+
+    function openMenu() {
+      isOpen = true;
+      btn.setAttribute('aria-expanded', 'true');
+      menu.style.maxHeight = menu.scrollHeight + 'px';
+      menu.style.opacity = '1';
+    }
+
+    function closeMenu() {
+      if (!isOpen) return;
+      isOpen = false;
+      btn.setAttribute('aria-expanded', 'false');
+      menu.style.maxHeight = '0';
+      menu.style.opacity = '0';
+    }
+
+    btn.addEventListener('click', function() {
+      isOpen ? closeMenu() : openMenu();
+    });
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') closeMenu();
+    });
+  })();
 </script>

_includes/platform-table.html

@@ -86,7 +86,7 @@
                       <br><small class="text-gray-500 dark:text-gray-400">({{ item_data.inline_note }})</small>
                     {% endif %}
                     {% if item_data.note %}
-                      <br><small><a href="#{{ item_data.note }}" data-note-id="{{ item_data.note }}" class="text-blue-600 dark:text-blue-400 hover:underline">(see notes)</a></small>
+                      <br><small><a href="#{{ item_data.note }}" data-note-id="{{ item_data.note }}" class="text-blue-600 dark:text-blue-400 hover:underline" aria-label="Notes for {{ item.name }}">(see notes)</a></small>
                     {% endif %}
                   {% else %}
                     <span class="text-gray-400">&mdash;</span>

_includes/status-updates.html

@@ -26,10 +26,10 @@
       </span>
       {% endif %}
       <span class="flex items-center gap-1.5 text-blue-600 dark:text-blue-400 text-sm">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
         </svg>
-        {{ update.display_date }}
+        <time datetime="{{ update.date | truncate: 10, '' }}">{{ update.display_date }}</time>
       </span>
     </div>
     <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
@@ -42,7 +42,7 @@
 <div class="space-y-5 text-gray-600 dark:text-gray-300">
   {% for update in updates %}
   <p>
-    <strong>{{ update.display_date }}</strong> - {{ update.content | markdownify | remove: '<p>' | remove: '</p>' | strip }}
+    <strong><time datetime="{{ update.date | truncate: 10, '' }}">{{ update.display_date }}</time></strong> - {{ update.content | markdownify | remove: '<p>' | remove: '</p>' | strip }}
   </p>
   {% endfor %}
 </div>

_layouts/default.html

@@ -4,9 +4,10 @@
   {% include head.html %}
 </head>
 <body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 antialiased min-h-screen flex flex-col">
+  <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded-md focus:text-sm focus:font-medium">Skip to content</a>
   {% include header.html %}
 
-  <main class="flex-1 container mx-auto px-4 py-8 max-w-6xl">
+  <main id="main-content" class="flex-1 container mx-auto px-4 py-8 max-w-6xl">
     {{ content }}
   </main>
 

_layouts/home.html

@@ -4,9 +4,10 @@
   {% include head.html %}
 </head>
 <body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 antialiased min-h-screen flex flex-col">
+  <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded-md focus:text-sm focus:font-medium">Skip to content</a>
   {% include header.html %}
 
-  <main class="flex-1">
+  <main id="main-content" class="flex-1">
     {{ content }}
   </main>