accessibility in practice blog

astro/astro.config.mjs

@@ -72,7 +72,7 @@ export default defineConfig({
           // Social Media
           'facebook', 'instagram', 'linkedin', 'mastodon', 'twitter',
           // Streaming
-          'apple-podcasts', 'youtube',
+          'apple-podcasts', 'spotify', 'youtube',
           // Payment
           "cc-paypal", "cc-stripe", "paypal", "stripe",
         ],

astro/src/components/TeamVignette.astro

@@ -127,7 +127,7 @@ const NameTag = element;
             <a
               href={formatLinkUrl(linkType, linkValue)}
               class="vignette-link"
-              title={`${memberData.name}'s ${linkType}`}
+              title={`${memberData.cited?.first ?? memberData.name.first}'s ${linkType}`}
               target={
                 linkType !== "email" && linkType !== "phone" ?
                   "_blank"

astro/src/components/ThemedBox.astro

@@ -5,13 +5,15 @@ interface Props {
   text?: boolean;
   border?: number;
   class?: string;
+  padding?: number
 }
 
 const {
   theme = undefined,
   style = undefined,
   text = true,
   border = 0,
+  padding = 4,
   class: extraClasses = "",
 } = Astro.props;
 
@@ -21,6 +23,6 @@ const bgAndTextClasses = getBackgroundAndText(theme, style, text);
 const borderClasses = getBorder(border, theme, style === "subtle");
 ---
 
-<div class:list={[bgAndTextClasses, borderClasses, "p-4", extraClasses]}>
+<div class:list={[bgAndTextClasses, borderClasses, `p-${padding}`, extraClasses]}>
   <slot />
 </div>

astro/src/content.config.ts

@@ -137,9 +137,10 @@ const podcastShows = defineCollection({
       image: image(),
       links: z
         .object({
-          youtube: z.string().url(),
           applePodcasts: z.string().url(),
           podcastIndex: z.string().url(),
+          spotify: z.string().url(),
+          youtube: z.string().url(),
         })
         .partial()
         .optional(),

astro/src/content/blogs/accessibility-in-practice.mdx

@@ -0,0 +1,51 @@
+
+---
+title: "Introducing Accessibility in Practice"
+description: Announcement of the new Accessibility in Practice podcast
+published: 2026-03-26
+tags:
+  - announcements
+author: esther-klang
+---
+
+import ExternalLink from "@components/ExternalLink.astro";
+import { Icon } from "astro-icon/components";
+
+Real progress in accessibility has a paper trail: a product that more people can use, a process that actually held up, a team that got it right. Our podcast series, [Accessibility in Practice](/podcasts/#accessibility-in-practice), follows that trail.
+
+Our new podcast series spotlights experts who have changed how accessibility is understood and applied within their organizations. These are people working inside companies, institutions, and nonprofits who found ways to make accessibility a genuine priority – not a box to check, but a practice that shaped decisions at every level. Each conversation goes beyond the result to examine what produced it: the access features, the design decisions, the collaborative structures, and the conditions that allowed good work to happen. Credit goes where it belongs.
+
+Too many conversations about disability and accessibility focus on barriers overcome. [Accessibility in Practice](/podcasts/#accessibility-in-practice) takes a different approach. The series makes one deliberate choice in how it tells these stories: disability is never framed as an obstacle that guests heroically moved past. The goal is not inspiration. The goal is instruction – to show that small, concrete changes can produce real, lasting improvement, and to make those changes legible to anyone working in this space.
+
+The stories in this series are specific. Guests describe the changes they made — to workflows, policies, hiring practices, and design processes — and walk through what those changes actually required. These are not exceptional cases. They are examples of what becomes possible when accessibility is treated as a design condition rather than an afterthought.
+
+Whether you're an accessibility professional, a designer, a manager, or someone new to the field, each episode gives you something you can actually use. No abstract principles. No feel-good montages. Just clear accounts of what worked, why it worked, and how others have begun applying the same thinking in their own organizations.
+
+New episodes drop regularly.  Listen on all major podcast platforms:
+* <ExternalLink gaps href="https://podcasts.apple.com/us/podcast/accessible-community/id1870924919" class="align-text-bottom"><Icon
+    name="cib:apple-podcasts"
+    class="d-inline-block bi social-icon"
+    aria-hidden="true"
+    width="1em"
+    height="1em"
+  />Apple Podcasts</ExternalLink>
+* <ExternalLink gaps href="https://open.spotify.com/show/5lT7qL4dMBvVTMnqo2B1Nx" class="align-text-bottom"><Icon
+    name="cib:spotify"
+    class="d-inline-block bi social-icon"
+    aria-hidden="true"
+    width="1em"
+    height="1em"
+  />Spotify</ExternalLink>
+* <ExternalLink gaps href="https://podcastindex.org/podcast/7666499" class="align-text-bottom"><Icon
+    name="simple-icons:podcastindex"
+    class="d-inline-block bi social-icon"
+    aria-hidden="true"
+    width="1em"
+    height="1em"
+  />Podcast Index</ExternalLink>
+
+<style>{`
+p:has(+ ul) {
+  margin-bottom: 0.25em;
+}
+`}</style>

astro/src/content/navigation/outreach.json

@@ -8,7 +8,7 @@
       "name": "Our Blog",
       "href": "/blog/"
     }, {
-      "name": "Our Podcasts",
+      "name": "Our Podcast",
       "href": "/podcasts/"
     }]
   ]

astro/src/content/podcasts/shows/day-in-the-life.mdx

@@ -3,9 +3,10 @@ title: A 'Day in the Life'
 host: taylor-dorward
 image: src/images/podcasts/day-in-the-life.png
 links:
-   youtube: https://www.youtube.com/playlist?list=PL8BDCgijUWjMMXT1ZE3BEgYQSN2H57YKW
    applePodcasts: https://podcasts.apple.com/us/podcast/accessible-community/id1870924919
+   spotify: https://open.spotify.com/show/5lT7qL4dMBvVTMnqo2B1Nx
    podcastIndex: https://podcastindex.org/podcast/7666499
+   # youtube: https://www.youtube.com/playlist?list=PL8BDCgijUWjMMXT1ZE3BEgYQSN2H57YKW
 ---
 Accessibility work is strongest when grounded in real-world experience. Not in assumptions. Not in checklists alone. In the everyday experiences of disabled people navigating systems that shape how we work, communicate, learn, and participate.
 

astro/src/pages/podcasts/index.astro

@@ -1,8 +1,10 @@
 ---
+import type { PageMetadata } from "@lib/types";
+import type { SocialLinkDictionary } from "@components/SocialLinks.astro";
+
 import { getCollection, render, type CollectionEntry } from "astro:content";
 import { sortBy } from "lodash-es";
 
-import type { SocialLinkDictionary } from "@components/SocialLinks.astro";
 type PodcastLinks = CollectionEntry<"podcastShows">["data"]["links"];
 
 const shows: CollectionEntry<"podcastShows">[] = sortBy(
@@ -14,7 +16,7 @@ const staff: CollectionEntry<"staff">[] = sortBy(
     "staff", ({data}) => data.current && Object.keys(data.roles ?? {}).includes("podcasts")
   ),
   // Alphabetize by first name
-  ({data}) => data.cited?.first || data.name.first,
+  ({data}) => data.cited?.first ?? data.name.first,
 );
 
 function toUrlMap(links: PodcastLinks): SocialLinkDictionary {
@@ -46,23 +48,44 @@ const music: Music[] = [{
   }
 }];
 
+const metadata: PageMetadata = {
+  title: "Podcast Series",
+  description: "Details of the podcast series that Accessible Community provides",
+};
+
 import components from "@lib/mdx";
+
+import Branding from "@components/Branding.astro";
 import ExternalLink from "@components/ExternalLink.astro";
 import { Image } from "astro:assets";
 import ImageHeading from "@components/ImageHeading.astro";
 import Layout from "src/layouts/Layout.astro";
 import SocialLinks from "@components/SocialLinks.astro";
 import StaffList from "@components/StaffList.astro";
 import ThemedSection from "@components/ThemedSection.astro";
+import ThemedBox from "@components/ThemedBox.astro";
 ---
 
-<Layout title="Podcasts">
+<Layout title="Our Podcast" {metadata}>
   <ImageHeading image="podcast" slot="header">
-    <h1 class="display-3">Podcasts</h1>
+    <h1 class="display-3">Podcast Series</h1>
   </ImageHeading>
   {
     shows.map((show, index) => (
-      <ThemedSection style={(index % 2) ? "tertiary" : undefined} id={show.id}>
+      <ThemedSection style={(index % 2) ? "tertiary" : undefined} id={show.id} py={3}>
+        {index === 0
+        ? <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="mb-5 p-3 rounded">
+            <div class="d-flex flex-column flex-lg-row justify-content-center column-gap-3 align-items-center mt-2">
+              <p class="lead text-center">Subscribe to the <Branding>Accessible Community</Branding>&nbsp;podcast.</p>
+              {
+                show.data.links
+                ? <SocialLinks links={toUrlMap(show.data.links)} iconSize="1.5em" label="Podcast Locations" />
+                : ""
+              }
+            </div>
+          </ThemedBox>
+        : "" }
+        <h2 class="pb-2 mb-4 border-bottom border-primary" set:text={show.data.title} />
         <div
           class:list={[
             "d-flex flex-column flex-md-row-reverse gap-4",
@@ -71,13 +94,14 @@ import ThemedSection from "@components/ThemedSection.astro";
           ]}
         >
           <div class="col col-md-9 col-lg-10">
-            <h2 class="pb-2 mb-4 border-bottom border-primary" set:text={show.data.title} />
             {render(show).then(({ Content }) => (
               <Content {components} />
             ))}
           </div>
           <div class="col col-md-3 col-lg-2">
             <Image class="d-none d-md-block logo rounded" src={show.data.image} alt={`${show.data.title} logo`} />
+            {/*
+            TODO: When we split the series into separate podcasts.
             {
               show.data.links ? (
                 <div>
@@ -87,14 +111,14 @@ import ThemedSection from "@components/ThemedSection.astro";
               ) : (
                 <div class="display-7 fw-bold">Coming Soon.</div>
               )
-            }
+            } */}
           </div>
         </div>
       </ThemedSection>
     ))
   }
   <ThemedSection style="secondary">
-    <h2>Credits</h2>
+    <h2 class="display-4">Credits and Thanks</h2>
     <h3 class="mt-4 mb-2">Contributors</h3>
     <p>Thank you to all of our staff who help make these podcasts possible.</p>
     <StaffList team="podcasts" size="19rem" />