> Canonical URL: https://codingcat.dev/podcast/2-38-a11y-with-ben-myers # A11y with Ben Myers šŸŽ§ Podcast Episode Ā· S2E38September 7, 2022[#Accessibility](/topic/a11y)[![](/logos/tags/storyblok-symbol-light.svg)![](/logos/tags/storyblok-symbol-dark.svg)Storyblok](/topic/storyblok) # A11y with Ben Myers ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d523017127a68b6588da474d611883d6d54de86d-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTubeā†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ā†—](https://www.youtube.com/watch?v=pnRUoW2OZOU&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Ben Myers](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/2a9e07bf96ac313ecddae26fbf12521b5c59a020-960x960.jpg?w=96&h=96&q=82&fit=max&auto=format)Ben Myers](/guest/ben-myers)šŸŽ§ Listen & Subscribe120 BPM Beat-Synced Lip-Sync Ready[Spotify](https://open.spotify.com/episode/33Zc3prYvzVFI9M66BjWHH)[Apple](https://podcasts.apple.com/us/podcast/2-38-a11y-with-ben-myers/id1491655542?i=1000578721699)[YouTube](https://www.youtube.com/watch?v=pnRUoW2OZOU&list=PLUKgAjyG9B0ZhUEXp9eVa7h4L__FDW3uV)[Subscribe on YouTube (62.5K / 100K) ā†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Pocket Casts](https://pca.st/episode/edaaba00-da06-4f54-9e29-bda46cdb467a)[Castbox](https://castbox.fm/episode/id2508485-id528409018)[Castro](https://castro.fm/episode/8N8Z4D)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss) ## Episode Sponsors. [![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/1564a576c0c19e1b857c9bfba3cfb6364e7af223-2400x1350.jpg?w=1920&q=82&fit=max&auto=format)Partner & Sponsor ### Storyblok Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful content experiences on any frontend: Websites, eCommerce, mobile apps, AR/VR, or voice content!](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast) **A11y with Ben Myers ** is a CodingCat.dev podcast episode featuring Ben Myers alongside Alex Patterson and Brittney Postma focused on Accessibility. Ben guides us through how A11y is hard to understand if you donā€™t use it everyday. He also shows us many tools that we can use to help make more accessibility compliant websites. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=pnRUoW2OZOU) or explore the architectural notes, chapters, and official documentation links below. ## Questions - Tell us about yourself Ben? - Has accessibility always been important and we just keep dropping the ball? Or was it the famous Dominoā€™s case where they excluded people with disabilities from using itā€™s website? - A11y is a [Numeronym](https://en.wikipedia.org/wiki/Numeronym)! - What are some good tools to use to check for accessibility? - What things are included in A11y? Color Contrast [Contrast Checker](https://www.notion.so/160cd5bd1ef14296ae79f113a10dcbcd) - [Another Contrast Checker](https://app.contrast-finder.org/) - [Axe](https://github.com/dequelabs/axe-core) - [Color Contrast Post](https://benmyers.dev/blog/fix-low-contrast-text/) - [Contrast Finder](https://app.contrast-finder.org/) - Only use a website with KeyboardTab order - [skip to content](https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/) - What is Aria? A filler for your markup. [Ben Meyers on What is Aria](https://benmyers.dev/blog/aria/) - [Accessibility Tree](https://www.notion.so/Ben-Myers-d5cee3c690db477f99108d9c14ae2fe5) - Alt tags, do you describe decorative images? Telling a story of the image. - Convey the message, but also the tone. - Not where it isnā€™t relevant. - If you donā€™t need alt text, use `alt=""`. - Since you work on Microsoft Docs, what are they doing to help assist those who use Docs in a non-traditional way? > In the United States, 61 million adults are living with a disability, according to currentĀ federal data . AĀ 2017 National Health Interview Survey found that 26.9 million people in the United States (10% of adult Americans) reported experiencing vision loss. An estimated 15% of American adults (37.5 million) reported some trouble hearing, according to aĀ 2012 National Health Interview Survey . ### Links [Inaccessible Recipe List Site](https://inaccessible-recipes.netlify.app/) - [Repo](https://github.com/BenDMyers/inaccessible-recipe-list) [https://blog.codinghorror.com/falling-into-the-pit-of-success/](https://blog.codinghorror.com/falling-into-the-pit-of-success/) [https://en.wikipedia.org/wiki/Spherical_cow](https://en.wikipedia.org/wiki/Spherical_cow) ## Video Chapters & Timestamps Jump directly to any segment of [**A11y with Ben Myers**](https://www.youtube.com/watch?v=pnRUoW2OZOU) on YouTube using the timestamped chapters below: - [**00:00**](https://www.youtube.com/watch?v=pnRUoW2OZOU&t=0s): PM ## Resources, Links & Official Documentation - **Watch on YouTube: ** [A11y with Ben Myers Full Video](https://www.youtube.com/watch?v=pnRUoW2OZOU) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1)) - **storyblok.com: ** [https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast) - **Show Pick: ** [crashmax-dev/fireworks-js (picked by Alex Patterson)](https://github.com/crashmax-dev/fireworks-js/) - **Show Pick: ** [Next.js 12.2 (picked by Alex Patterson)](https://nextjs.org/blog/next-12-2?ck_subscriber_id=1233693656) - **Show Pick: ** [Show My Chat Walkthrough (picked by Brittney Postma)](https://www.youtube.com/watch?v=RA_MAQppvME) - **Show Pick: ** [Build a Component Library with SvelteKit (picked by Brittney Postma)](https://www.youtube.com/watch?v=eUslcJLGk9g&t=1922s) - **Show Pick: ** [Introduction to Web Accessibility (picked by Ben Myers)](https://www.youtube.com/watch?v=OPzr8vDNZ9Y) - **Show Pick: ** [Teach Jenn Tech (picked by Ben Myers)](https://twitch.tv/JennJunod) - **Show Pick: ** [Jutanium Stream (picked by Ben Myers)](https://twitch.tv/Jutanium) - [**Ben Myers Guest Profile & Episodes on CodingCat.dev**](/guest/ben-myers) - [**Ben Myers on GitHub**](https://github.com/BenDMyers) - [**Episode Sponsor: Storyblok**](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast) - [**W3C WAI Accessibility Fundamentals:**](https://www.w3.org/WAI/fundamentals/) WCAG compliance, ARIA patterns, and inclusive web engineering ## Related CodingCat.dev Tutorials & Podcast Episodes - [**Open Source Svelte Magic: Melting Minds through Melt UI!**](/podcast/cwcc-1-2-meltui): Thomas teaches Brittney and Alex how to use Melt and how Runes can be used to improve builders. - [**Storyblok and achieving better Accessibility from Developer Experience**](/podcast/2-44-Storyblok-and-achieving-better-Accessibility-from-Developer-Experience): All about Storyblok and how achieving better A11y can be done through developer experience. - [**Accessibility Best Practices for HTML & CSS**](/post/accessibility-best-practices-for-html-and-css): Accessibility is an ongoing, ever-evolving process that is an extremely important aspect for inclusion and usability. These are some of the best practices you c... ## Frequently Asked Questions (FAQ) ### What are the main takeaways from A11y with Ben Myers? Ben guides us through how A11y is hard to understand if you donā€™t use it everyday. He also shows us many tools that we can use to help make more accessibility compliant websites. 2.38 - A11y with Ben Myers: Ben guides us through how A11y is hard to understand if you donā€™t use it everyday. He also shows us many tools that we can use to help make more accessibility compliant websites. https://codingcat.dev/podcast/2-38-a11y-with-ben-myers Sponsors: Storyblok Have you already discovered Storyblok? They Throughout this podcast, Ben Myers breaks down real-world implementation details for Accessibility so developers can apply these patterns directly in production. ### How do you implement Accessibility best practices in production? When adopting Accessibility in a production stack, start by validating your configuration against the [**W3C WAI Accessibility Fundamentals**](https://www.w3.org/WAI/fundamentals/) (WCAG compliance, ARIA patterns, and inclusive web engineering). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage. ### Where can I watch the full A11y with Ben Myers walkthrough and find related code resources? You can watch the complete video session for [**A11y with Ben Myers**](https://www.youtube.com/watch?v=pnRUoW2OZOU) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Accessibility, check out our related guide: [**Open Source Svelte Magic: Melting Minds through Melt UI!**](/podcast/cwcc-1-2-meltui). ## āœļø Episode Summary 2.38 - A11y with Ben Myers: Ben guides us through how A11y is hard to understand if you donā€™t use it everyday. He also shows us many tools that we can use to help make more accessibility compliant websites. https://codingcat.dev/podcast/2-38-a11y-with-ben-myers Sponsors: Storyblok Have you already discovered Storyblok? They ā€” welcome back peeps to perfect.gov where we give you cats precious dose of Dev snacks now with your amazing hosts Alex Patterson and Brittany postma this episode brought to you by storyblock build anything and publish everywhere what up peeps hello hello uh we decided seconds before the show started that this is actually just my show now so I'll start the introduction howdy howdy welcome to semanti... āœļø Visual Architecture Diagram ## how this episode connects together. Follow AJ through the pipeline topology from input contract to production output. Letā€™s build it!āœļø Architecture Diagram: A11y with Ben MyersDATAFLOW PIPELINEARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven pipeline diagram for A11y with Ben Myers: Ben Myers -> Ben Myers -> Edge Delivery & Telemetry.AAA Contrast Verified ## episode picks. ### šŸ¾ Alex Patterson - [crashmax-dev/fireworks-js](https://github.com/crashmax-dev/fireworks-js/) - [Next.js 12.2](https://nextjs.org/blog/next-12-2?ck_subscriber_id=1233693656) ### šŸ¾ Ben Myers - [Introduction to Web Accessibility](https://www.youtube.com/watch?v=OPzr8vDNZ9Y) - [Teach Jenn Tech](https://twitch.tv/JennJunod) - [Jutanium Stream](https://twitch.tv/Jutanium) ### šŸ¾ Brittney Postma - [Show My Chat Walkthrough](https://www.youtube.com/watch?v=RA_MAQppvME) - [Build a Component Library with SvelteKit](https://www.youtube.com/watch?v=eUslcJLGk9g&t=1922s) ## related episodes. [All Episodes→](/podcasts)[![The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](https://cdn.sanity.io/images/hfh83o0w/production/93736ccee5b8c088a202f319ce1223899a41f6bf-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-advanced-html-css-and-a11y)November 4, 2026[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[#Accessibility](/topic/a11y)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[+1](/course/odin-advanced-html-css-and-a11y) ### [The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](/course/odin-advanced-html-css-and-a11y) Build 60fps GPU-accelerated animations, multi-page Astro View Transitions, WCAG AAA focus rings, and accessible native and Popover components. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Five Layers of Agentic Context: Why Canon Only Turns When Someone Signs Off](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d702615b4d3c30ea99dc40f10a576db4cd1c4c73-2752x1536.jpg?w=1920&q=82&fit=max&auto=format)](/post/the-five-layers-of-agentic-context-why-canon-only-turns-when-someone-signs-off)October 14, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP](/topic/mcp)[#AI & Agents](/topic/ai)[+3](/post/the-five-layers-of-agentic-context-why-canon-only-turns-when-someone-signs-off) ### [The Five Layers of Agentic Context: Why Canon Only Turns When Someone Signs Off](/post/the-five-layers-of-agentic-context-why-canon-only-turns-when-someone-signs-off) A deep-dive review of Magnus Hillestad's Five Layers of Agentic Context on the Sanity blog, exploring why Situation, Records, Memory, Process, and Canon move at different speeds, plus a working interactive HTML/SVG Situation-to-Canon wheel you can drop into any webpage. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)