Improve ARK site accessibility

.gitignore

@@ -5,3 +5,5 @@ _site
 vendor/
 .bundle/
 **/.DS_Store
+__pycache__/
+docs/

Gemfile.lock

@@ -255,6 +255,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-22
+  arm64-darwin-24
   x86_64-darwin-23
   x86_64-linux
 

_brand/includes/content/anatomy2.txt

@@ -0,0 +1,8 @@
+    https://example.org/ark:12345/x54xz321/s3/f8.05v.tiff 
+    \_________________/ \__/\___/ \______/\____/\_______/ 
+               |         |    |      |      |       | 
+               |   ARK Label  |      | Sub-parts  Variants 
+               |              |      | 
+ Name Mapping Authority (NMA) |    Assigned Name 
+                              |
+               Name Assigning Authority Number (NAAN) 

_brand/includes/content/anatomy3.txt

@@ -0,0 +1,15 @@
+ ARK ANATOMY
+                                 Compact ARK
+                         _______________________________
+                        /                               \
+      Resolver Service   Base Object Name   Qualifiers
+     __________________  ________________  _____________
+    /                  \/        ...     \/             \
+    https://example.org/ark:12345/x54xz321/s3/f8.05v.tiff
+            \_________/ \__/\___/ \______/\____/\_______/
+               |         |    |  ...  |     |       |
+               |   ARK Label  |   |   | Sub-parts  Variants 
+               |              |   |   |
+ Name Mapping Authority (NMA) |   |  Assigned Name      ... 
+                              |   +---------- Shoulder: /x5 
+        Name Assigning Authority Number (NAAN)          ... 

_brand/includes/content/anatomy4.txt

@@ -0,0 +1,6 @@
+   Resolver Service            Compact ARK
+  __________________  _______________________________
+ /                  \/                               \
+ https://example.org/ark:/12345/x6np1wh8k/c3/s5.v7.xsl 
+ \____________________________/\________/\___________/
+              Prefixes          Base Name   Suffixes

_brand/includes/content/ascii_art.html

@@ -0,0 +1,39 @@
+{% comment %}
+  Usage:
+    {% include content/ascii_art.html url="/assets/images/aart.txt" description="This is an ASCII art image." link="https://example.com" nocaption=true %}
+{% endcomment %}
+
+{%- assign width = include.width | default: "100%" -%}
+{%- assign label = include.label | default: "Text diagram" -%}
+{% if include.nocaption == nil %}
+<figure class="arka__ascii_art" aria-label="{{ label | escape }}" style="width: {{ width }}; max-width: 100%;">
+{% else %}
+<div class="arka__ascii_art" style="width: {{ width }}; max-width: 100%;">
+{% endif %}
+
+  {% if include.link != nil %}
+    <a href="{{ include.link }}" target="_blank" rel="noopener">
+  {% endif %}
+
+    <pre role="img"
+         aria-label="{{ include.description | strip_html | escape }}"
+         tabindex="0"
+         style="max-width: 100%; overflow-x: auto; font-size: clamp(0.5rem, 2.2vw, 1rem);">
+      {%- include {{ include.url }} -%}
+    </pre>
+
+  {% if include.link != nil %}
+    </a>
+  {% endif %}
+
+  {% if include.nocaption == nil %}
+  <figcaption class="arka__caption">
+    {{ include.description | markdownify }}
+  </figcaption>
+  {% endif %}
+
+{% if include.nocaption == nil %}
+</figure>
+{% else %}
+</div>
+{% endif %}

_brand/includes/content/fig.html

@@ -0,0 +1,41 @@
+{% comment %}
+  Usage:
+    {% include content/fig.html url="/assets/images/example.jpg" alt="A concise image description." description="This is an example image." label="Example image" link="https://example.com" nocaption=true %}
+  If no alt text is provided, tries to use the first sentence of description.
+{% endcomment %}
+
+{% if include.nocaption == nil %}
+<figure class="arka__figure"{% if include.label %} aria-label="{{ include.label | escape }}"{% endif %}>
+{% else %}
+<div class="arka__figure">
+{% endif %}
+
+  {%- assign width = include.width | default: "100%" -%}
+  {%- if include.alt != nil -%}
+    {%- assign alt = include.alt -%}
+  {%- else -%}
+    {%- assign alt = include.description | default: "" | strip_html | split: ". " | first -%}
+  {%- endif -%}
+  {% if include.link != nil %}
+    <a href="{{ include.link }}" target="_blank" rel="noopener">
+  {% endif %}
+
+      <img style="display: block; max-width: {{ width }}; height: auto;"
+           src="{{ site.baseurl }}{{ include.url }}"
+           alt="{{ alt | escape }}" />
+
+  {% if include.link != nil %}
+    </a>
+  {% endif %}
+
+  {% if include.nocaption == nil %}
+  <figcaption class="arka__caption">
+    {{ include.description | markdownify | remove: '<p>' | remove: '</p>' }}
+  </figcaption>
+  {% endif %}
+
+{% if include.nocaption == nil %}
+</figure>
+{% else %}
+</div>
+{% endif %}

_brand/includes/content/owl_bike_key.txt

@@ -0,0 +1,24 @@
+        _____    slips on    _____ 
+     .-'  ,_,'-..  ---->  .-'     '-. 
+    /    (o,o)  \\       /           \ 
+   :     {`"'}  ||      :             `____ 
+  /  .-. -"-"-  ||     /  .-.              '--^.   .^--^.        .^. 
+ {  (   )       ||    {  (   )                  `-'      `-^--^-'   '--^. 
+  \  `-'   _o   ||     \  '-'         ===================================} 
+   :     _|<,_  ||      :             __________________________________/ 
+    \   (*)/(*) /        \           / 
+     `-._____.-'          `-._____.-' 
+ |....................|...............|....|..........................|..| 
+           ^                    ^        ^                ^            ^ 
+           :                    :        :                :            : 
+         Cover=               Bow=    Shoulder  .------ Blade         Tip 
+          NMA             Scheme+NAAN    :      :  .-------------------' 
+           :                  :    :     :      :  : 
+           v                  v    v     v      v  v 
+ |..........................|....+.....|...|......|.| 
+  https://OwlBike.example.org/ark:13030/tqb3kh97gh8w   <----  Example Key 
+                              doi:10.30/tqb3kh97gh8w         with parallel 
+                              hdl:13030/tqb3kh97gh8w        parts in other 
+                              urn:13030:tqb3kh97gh8w          id schemes. 
+ |..........................|.......................|.... 
+    Name Mapping Authority       Base object name     ... 

_brand/includes/content/pid-comparison-table.html

@@ -0,0 +1,17 @@
+<div class="table-responsive" role="region" aria-label="Persistent identifier capabilities" tabindex="0">
+<table class="table table-striped arka__pid-comparison">
+  <caption>Capabilities defined for five types of persistent identifier in the original comparison.</caption>
+  <thead>
+    <tr><th scope="col">Major causes of broken links, and some features</th><th scope="col">PURL</th><th scope="col">Handle</th><th scope="col">URN</th><th scope="col">DOI</th><th scope="col">ARK</th></tr>
+  </thead>
+  <tbody>
+    <tr><th scope="row">Prevents fire, war, flood, attack, bankruptcy, ...</th><td>No</td><td>No</td><td>No</td><td>No</td><td>No</td></tr>
+    <tr><th scope="row">Prevents human error</th><td>No</td><td>No</td><td>No</td><td>No</td><td>No</td></tr>
+    <tr><th scope="row">Guarantees your links, or fixes them for you</th><td>No</td><td>No</td><td>No</td><td>No</td><td>No</td></tr>
+    <tr><th scope="row">Decentralized admin plus inferenceable syntax</th><td>No</td><td>No</td><td>No</td><td>No</td><td>Yes</td></tr>
+    <tr><th scope="row">Flexible metadata and persistence statements</th><td>No</td><td>No</td><td>No</td><td>No</td><td>Yes</td></tr>
+    <tr><th scope="row">Identifiers extensible during resolution</th><td>Yes</td><td>No</td><td>Yes</td><td>No</td><td>Yes</td></tr>
+    <tr><th scope="row">Free, non-paywalled, in unlimited numbers</th><td>Yes</td><td>No</td><td>Yes</td><td>No</td><td>Yes</td></tr>
+  </tbody>
+</table>
+</div>

_brand/includes/content/section.html

@@ -0,0 +1,21 @@
+{% comment %}
+  Start, change, or end a section. Arguments:
+  - do: "start", "end", or "changeto"
+  - color: "warm" (default) or "cool"
+
+  Usage:
+    include content/section.html do="start" color="main"
+    include content/section.html do="changeto" color="cool"
+    include content/section.html do="end"
+
+  Surrounding blank lines and no indentation to protect markdown content.
+{% endcomment %}
+
+{% if include.do == "end" or include.do == "changeto" %}
+</div>
+</section>
+{% endif %}
+{% if include.do == "start" or include.do == "changeto" %}
+<section class="arka__section arka__section--{{ include.color | default: "warm" }}">
+<div class="arka__content arka__content--body container" markdown="1">
+{% endif %}

_brand/includes/content/side-by-side.html

@@ -0,0 +1,44 @@
+{% comment %}
+
+  Usage: Use capture to get formatted markdown, for example (without { and }),
+    % capture my_text %
+      ### Project Details
+      This section contains a complex list:
+      *   **Timeline**: 4 weeks
+      *   **Tools**: Jekyll, Liquid
+      *   **Goal**: Responsive layout
+
+      Can have [multiple paragraphs](https://jekyllrb.com) and links here.
+    % endcapture %
+  Then use the side-by-side include with same arguments as fig include, eg,
+      url="/assets/images/example.jpg"
+      description="This is an example image."
+      link="https://example.com"
+      nocaption=true
+  plus the content and an optional reverse flag:
+      content=my_text
+      reverse=true
+  For example (args must all be on one line):
+      {% include content/side-by-side.html content=my_text reverse=true url="..." description="..." nocaption=true %}
+
+{% endcomment %}
+
+{%- assign direction = "row" -%}
+{%- if include.reverse -%}
+  {%- assign direction = "row-reverse" -%}
+{%- endif -%}
+<div class="arka-side-layout" 
+     style="display: flex; flex-wrap: wrap; flex-direction: {{ direction }}; gap: 2rem; align-items: flex-start;">
+  <!-- Content Column -->
+  <div class="arka-side-layout__text" markdown="1" style="flex: 1 1 30rem; min-width: 0;">
+    {{ include.content }}
+  </div>
+  <!-- Image/Figure Column -->
+  <div class="arka-side-layout__image" style="flex: 1 1 20rem; max-width: 100%;">
+    {%- assign url = include.url -%}
+    {%- assign description = include.description -%}
+    {%- assign link = include.link | default: nil -%}
+    {%- assign nocaption = include.nocaption | default: "1" -%}
+    {% include content/fig.html url=url description=description link=link nocaption=nocaption %}
+  </div>
+</div>

_brand/includes/content/sitemap-list.html

@@ -8,7 +8,7 @@ <h2>Pages</h2>
 		{% for page in sorted_pages %}
 			{% if page.title and page.permalink != "/404.html" %}
 			<li>
-				<a href="{{ site.baseurl }}{{ page.permalink }}">
+				<a{% if page.lang %} lang="{{ page.lang }}"{% endif %} href="{{ site.baseurl }}{{ page.permalink }}">
 					{{ page.title }}
 				</a> 
 			</li>

_brand/includes/footer/footer.html

@@ -1,23 +1,28 @@
-<footer class="ark-alliance__footer border-top border-dark-subtle my-4">
-	<nav class="container mt-4">
-		<ul class="d-flex justify-content-between list-unstyled pb-2">
+<footer lang="en" class="arka__footer border-top border-dark-subtle my-4">
+	<nav class="container mt-4" aria-label="Footer links">
+		<ul class="d-flex flex-wrap justify-content-between gap-3 list-unstyled pb-2">
 			<li>
-				<a class="text-uppercase link-secondary"
+				<a class="text-uppercase"
 				   href="{{ site.contact.newsletter }}">
 					Subscribe to Newsletter
 				</a>
 			</li>
 			<li>
-				<a class="text-uppercase link-secondary"
+				<a class="text-uppercase"
 				   href="{{ site.baseurl }}{% link _pages/sitemap.md %}">
 					Sitemap</a>
-                <span class="text-uppercase link-secondary"
+                <span class="arka__footer-date text-uppercase"
                       style="white-space: nowrap;">
                     {{ site.time | date: "%Y-%m-%d" }}</span>
-                    <span style="white-space: nowrap;">
 			</li>
 			<li>
-				<a class="text-uppercase link-secondary"
+				<a class="text-uppercase"
+				   href="{{ site.baseurl }}{% link _pages/accessibility.md %}">
+					Accessibility
+				</a>
+			</li>
+			<li>
+				<a class="text-uppercase"
 				   href="mailto:{{ site.contact.email }}">
 					Contact Us
 				</a>

_brand/includes/footer/social.html

@@ -1,4 +1,4 @@
-<nav class="ark-alliance__social my-4">
+<nav lang="en" class="arka__social my-4" aria-label="Social media links">
 	<div class="d-flex justify-content-center flex-wrap my-4">
 
         <a href="https://fosstodon.org/@arks_org" class="p-3">
@@ -36,7 +36,7 @@
         </a>
         <a href="{{ site.github.repository_url }}" class="p-3">
             <svg class="icon">
-                <title>Github website source repository</title>
+                <title>Github website source files</title>
                 <use href="#icon-github"></use>
             </svg>
         </a>
@@ -48,7 +48,7 @@
         </a>
         <a href="https://arks-org.zulipchat.com" class="p-3">
             <svg class="icon">
-                <title>ARK Alliance conversations (sponsored by Zulip.com, an open-source, organized team chat app designed for efficient communication)</title>
+                <title>Zulip ARK community chat (sponsored by Zulip.com, an open-source team chat app designed for efficient communication)</title>
                 <use href="#icon-zulip"></use>
             </svg>
         </a>

_brand/includes/head/color-scheme.script.html

@@ -21,5 +21,27 @@
 
       // Initial update of theme
       updateTheme();
+
+      /**
+       * Keep the mobile links visible unless Bootstrap's collapse component
+       * and its CSS both load. Only then expose and initialize the toggle.
+       */
+      window.addEventListener("load", () => {
+        const menu = document.querySelector("#navbar-content");
+        const toggle = document.querySelector('[aria-controls="navbar-content"]');
+        const Collapse = window.bootstrap && window.bootstrap.Collapse;
+        const bootstrapCssLoaded = window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue("--bs-body-font-family")
+          .trim();
+
+        if (!menu || !toggle || !Collapse || !bootstrapCssLoaded) {
+          return;
+        }
+
+        menu.classList.add("collapse");
+        new Collapse(menu, { toggle: false });
+        toggle.hidden = false;
+      });
     })();
   </script>

_brand/includes/header/callout.html

@@ -0,0 +1,7 @@
+{% if page.callout %}
+<div class="container">
+    <div class="arka__callout" lang="{{ page.callout_lang | default: 'en' }}">
+        {{ page.callout | markdownify }}
+    </div>
+</div>
+{% endif %}